{"id":1486,"date":"2019-01-17T20:21:45","date_gmt":"2019-01-17T11:21:45","guid":{"rendered":"https:\/\/itport.cloud\/?p=1486"},"modified":"2020-06-29T17:01:37","modified_gmt":"2020-06-29T08:01:37","slug":"post-1486","status":"publish","type":"post","link":"https:\/\/itport.cloud\/?p=1486","title":{"rendered":"\uff08\u7b2c1\u56de\uff09\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306e\u3059\u3059\u3081\u3010\u74b0\u5883\u69cb\u7bc9\u3011"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"e79baee6aca1-1\">\u76ee\u6b21<\/h2>\n\n\n\n<p><a href=\"#front_1\">\u306f\u3058\u3081\u306b<\/a><br><a href=\"#front_2\">\u691c\u8a3c\u74b0\u5883<\/a><br><a href=\"#front_3\">Node.js\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/a><br><a href=\"#front_4\">npm(Node Package Manager)\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/a><br><a href=\"#front_5\">\u5404\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u4e8b\u524d\u6e96\u5099<\/a><br><a href=\"#front_6\">Visual Studio Code\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/a><br><a href=\"#front_7\">\u6b21\u56de\u4e88\u544a<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"front_1\">\u306f\u3058\u3081\u306b<\/h2>\n\n\n\n<p>\u672c\u30c6\u30fc\u30de\u3067\u306f\u6570\u56de\u306b\u308f\u305f\u3063\u3066\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3067\u4f7f\u7528\u3059\u308bReact, Vue.js, Angular\u306e\u305d\u308c\u305e\u308c\u306e\u7279\u5fb4\u3001\u304a\u3088\u3073\u540c\u3058\u5b9f\u88c5\u3092\u884c\u3063\u305f\u5834\u5408\u306e\u6bd4\u8f03\u3092\u8003\u5bdf\u3057\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002\u306a\u304a\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u6bd4\u8f03\u3092\u884c\u3046\u306b\u3042\u305f\u308a\u3001Visual Studio Code\u3092\u4f7f\u7528\u3057\u3066\u691c\u8a3c\u3057\u3066\u3044\u304d\u307e\u3059\u3002 <br>\u4ed5\u69d8\u7b49\u306b\u3064\u3044\u3066\u306f\u90fd\u5ea6\u3001\u8aac\u660e\u3092\u631f\u3093\u3067\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u304c\u3001React,Vue.js,Anglar\u306f\u3001Javascript\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002\u305d\u308c\u305e\u308c\u3001React\u306fFacebook\u793e\u3001Angular\u306fGoogle\u793e\u3001vue.js\u306fAngular\u306e\u958b\u767a\u306b\u643a\u308f\u3063\u305f\u62c5\u5f53\u8005\u306b\u3088\u3063\u3066\u4f5c\u3089\u308c\u307e\u3057\u305f\u3002 \u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u3001\u304b\u3064\u305d\u306e\u6271\u3044\u3084\u3059\u3055\u304b\u3089\u3001\u4f7f\u7528\u4e8b\u4f8b\u3082\u5897\u3048\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"front_2\">\u691c\u8a3c\u74b0\u5883<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Windows10<\/li><li>Node.js v10.15.0<\/li><li>npm v6.4.1<\/li><li>Visual Studio Code v1.30.2 <br><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"front_3\">Node.js\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n\n\n\n<p>\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9Javascript\u306e\u5b9f\u884c\u74b0\u5883\u3067\u3059\u3002 <br>\u5404\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u74b0\u5883\u69cb\u7bc9\u306e\u305f\u3081\u3001Node.js\u306b\u5099\u308f\u3063\u3066\u3044\u308bnpm(Node Package Manager) \u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u3002<br>\u4ee5\u4e0b\u306eURL\u304b\u3089\u30a4\u30f3\u30b9\u30c8\u30fc\u30e9\u30fc\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3002<br><a href=\"https:\/\/nodejs.org\/en\/\">https:\/\/nodejs.org\/en\/<\/a> <br><br><br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"416\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9-1-1024x416.png\" alt=\"\" class=\"wp-image-1513\" srcset=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9-1-1024x416.png 1024w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9-1-300x122.png 300w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9-1-768x312.png 768w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9-1-450x183.png 450w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9-1-900x366.png 900w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9-1.png 1365w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>\u4eca\u56de\u306f\u63a8\u5968\u7248\u306e\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3044\u304d\u307e\u3059 <\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><a href=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u4e2d1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u4e2d1.png\" alt=\"\" class=\"wp-image-1505\" width=\"412\" height=\"313\"\/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><a href=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c92.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c92.png\" alt=\"\" class=\"wp-image-1503\" width=\"412\" height=\"313\"\/><\/a><figcaption>\u30c1\u30a7\u30c3\u30af\u5f8c\u3001Next<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><a href=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c93.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c93.png\" alt=\"\" class=\"wp-image-1504\" width=\"413\" height=\"317\"\/><\/a><figcaption> \u7279\u306b\u554f\u984c\u306a\u3051\u308c\u3070\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u307e\u307eNext <\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><a href=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u4e2d5.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u4e2d5.png\" alt=\"\" class=\"wp-image-1506\" width=\"409\" height=\"313\"\/><\/a><figcaption>\u7279\u306b\u554f\u984c\u306a\u3051\u308c\u3070\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u307e\u307eNext <\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><a href=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u4e2d6.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u4e2d6.png\" alt=\"\" class=\"wp-image-1507\" width=\"410\" height=\"313\"\/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><a href=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u4e2d8.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u4e2d8.png\" alt=\"\" class=\"wp-image-1509\" width=\"407\" height=\"310\"\/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><a href=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u4e2d9.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/node\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u4e2d9.png\" alt=\"\" class=\"wp-image-1510\" width=\"405\" height=\"312\"\/><\/a><figcaption>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u5f8c\u306e\u753b\u9762<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"front_4\">npm(Node Package Manager)\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb <\/h2>\n\n\n\n<p>Node.js\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3084\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u7ba1\u7406\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u30c4\u30fc\u30eb\u3067\u3059\u3002 <br><br>npm\u306fNode.js\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3068\u540c\u6642\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u307e\u3059\u3002<br>\u4e0b\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u5b9f\u884c\u3067\u30d0\u30fc\u30b8\u30e7\u30f3\u306e\u78ba\u8a8d\u304c\u3067\u304d\u307e\u3059\u3002 <br><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\n\u3000\n\/\/Node.js\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u78ba\u8a8d\nnode --version\nv10.15.0\n\u3000\n\/\/npm\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u78ba\u8a8d\nnpm --version\n6.4.1\n\u3000\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"front_5\">\u5404\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u4e8b\u524d\u6e96\u5099 <\/h2>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"e38090reacte38091create-react-appe381aee382a4e383b3e382b9e38388e383bce383abe381a8e99b9be5bda2e38397e383ade382b8e382a7e382afe38388e4bd9c-2\">\u3010React\u3011create-react-app\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u96db\u5f62\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210<\/h4>\n\n\n\n<p>create-react-app\u3068\u306f\u3001React\u306e\u74b0\u5883\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306e\u30c4\u30fc\u30eb\u3067\u3059<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\n\u3000\n\/\/create-react-app\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpm install -g create-react-app\n\u3000\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\n\u3000\ncreate-react-app react-app \/\/ \u30ab\u30ec\u30f3\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306breact-app\u3068\u3044\u3046\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\n\u3000\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\n\u3000\n\/\/react-app\u304c\u4f5c\u6210\u3055\u308c\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3001\u30ed\u30fc\u30ab\u30eb\u30b5\u30fc\u30d0\u3092\u8d77\u52d5\u3057\u3066\u52d5\u4f5c\u78ba\u8a8d\ncd (\u89aa\u30c7\u30a3\u30ec\u30af\u30c8\u30ea)\\react-app\nnpm start\n\u3000\n\/\/\u4e0b\u8a18\u304c\u8868\u793a\u3055\u308c\u305f\u3089\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u300c http:\/\/localhost:3000\/\u300d\u3092\u8868\u793a\u3057\u3066\u304f\u3060\u3055\u3044\nStarting the development server...\nCompiled successfully!\nYou can now view react-app in the browser.\n  Local:            http:\/\/localhost:3000\/\n\u3000\n<\/pre><\/div>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/React\u30e1\u30a4\u30f3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/React\u30e1\u30a4\u30f3-1024x451.png\" alt=\"\" class=\"wp-image-1537\" srcset=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/React\u30e1\u30a4\u30f3-1024x451.png 1024w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/React\u30e1\u30a4\u30f3-300x132.png 300w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/React\u30e1\u30a4\u30f3-768x338.png 768w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/React\u30e1\u30a4\u30f3-450x198.png 450w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/React\u30e1\u30a4\u30f3-900x397.png 900w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/React\u30e1\u30a4\u30f3.png 1918w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>\u30d6\u30e9\u30a6\u30b6\u3067\u7121\u4e8b\u30b5\u30f3\u30d7\u30eb\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f<\/figcaption><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"e38090vue-jse38091vue-clie381aee382a4e383b3e382b9e38388e383bce383abe381a8e99b9be5bda2e38397e383ade382b8e382a7e382afe38388-e4bd9ce68890-3\">\u3010Vue.js\u3011Vue CLI\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u96db\u5f62\u30d7\u30ed\u30b8\u30a7\u30af\u30c8 \u4f5c\u6210<\/h4>\n\n\n\n<p>Vue CLI\u3068\u306f\u3001Vue.js\u306e\u74b0\u5883\u69cb\u7bc9\u3092\u884c\u3046\u305f\u3081\u306e\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u30c4\u30fc\u30eb\u3067\u3059<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\n\u3000\n\/\/Vue CLI\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpm install -g @vue\/cli\n\u3000\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\n\u3000\nvue create vue-app \/\/ \u30ab\u30ec\u30f3\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306bvue-app\u3068\u3044\u3046\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\n\n\/\/\u4ee5\u4e0b\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u8a2d\u5b9a\u304b\u624b\u52d5\u8a2d\u5b9a\u304b\u3092\u9078\u629e\u3067\u304d\u307e\u3059\u3002\u4eca\u56de\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u8a2d\u5b9a\u3057\u3066\u3044\u304d\u307e\u3059\n? Please pick a preset: (Use arrow keys)\n  default (babel, eslint)\n  Manually select features\n\u3000\n\/\/\u4e0b\u8a18\u304c\u8868\u793a\u3055\u308c\u305f\u3089\u4f5c\u6210\u5b8c\u4e86\u3067\u3059\n\uff65\uff65\u3000Successfully created project vue-app.\n\u3000\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\n\u3000\n\/\/vue-app\u304c\u4f5c\u6210\u3055\u308c\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3001\u30ed\u30fc\u30ab\u30eb\u30b5\u30fc\u30d0\u3092\u8d77\u52d5\u3057\u3066\u52d5\u4f5c\u78ba\u8a8d\ncd (\u89aa\u30c7\u30a3\u30ec\u30af\u30c8\u30ea)\\vue-app\nnpm run serve\n\u3000\n\/\/\u4e0b\u8a18\u304c\u8868\u793a\u3055\u308c\u305f\u3089\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u300chttp:\/\/localhost:8080\/\u300d\u3092\u8868\u793a\u3057\u3066\u304f\u3060\u3055\u3044\nDONE  Compiled successfully\n  App running at:\n  - Local:   http:\/\/localhost:8080\/\n\u3000\n<\/pre><\/div>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Vue\u30e1\u30a4\u30f3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"455\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Vue\u30e1\u30a4\u30f3-1024x455.png\" alt=\"\" class=\"wp-image-1539\" srcset=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Vue\u30e1\u30a4\u30f3-1024x455.png 1024w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Vue\u30e1\u30a4\u30f3-300x133.png 300w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Vue\u30e1\u30a4\u30f3-768x341.png 768w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Vue\u30e1\u30a4\u30f3-450x200.png 450w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Vue\u30e1\u30a4\u30f3-900x400.png 900w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Vue\u30e1\u30a4\u30f3.png 1893w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption> <br>\u30d6\u30e9\u30a6\u30b6\u3067\u7121\u4e8b\u30b5\u30f3\u30d7\u30eb\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f <\/figcaption><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"e38090-angular-e38091angular-clie381aee382a4e383b3e382b9e38388e383bce383abe381a8e99b9be5bda2e38397e383ade382b8e382a7e382afe38388-e4bd9c-4\">\u3010 Angular \u3011Angular CLI\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u96db\u5f62\u30d7\u30ed\u30b8\u30a7\u30af\u30c8 \u4f5c\u6210<\/h4>\n\n\n\n<p>Angular CLI\u3068\u306f\u3001Angular\u306e\u74b0\u5883\u69cb\u7bc9\u3092\u884c\u3046\u305f\u3081\u306e\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u30c4\u30fc\u30eb\u3067\u3059 <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\n\u3000\n\/\/Angular CLI\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpm install -g @angular\/cli\n\u3000\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\n\u3000\nng new angular-app \/\/ \u30ab\u30ec\u30f3\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306bangular-app\u3068\u3044\u3046\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\n\u3000\n<\/pre><\/div>\n\n\n<p>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\u4e2d\u306b\u4ee5\u4e0b\u3092\u9078\u629e\u3067\u304d\u307e\u3059\u304c\u3001\u4eca\u56de\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u8a2d\u5b9a\u3068\u3057\u307e\u3059 <br>Would you like to add Angular routing\uff1f(y\/N)\u3000Yes <br>Which stylesheet format would you like to use\uff1f\u3000CSS <br>\u3000\u203bSASS(SCSS) \u3092\u4f7f\u7528\u3057\u305f\u3044\u5834\u5408\u306f\u4e0a\u8a18\u3067\u8a2d\u5b9a\u3067\u304d\u307e\u3059<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\n\u3000\n\/\/angular-app\u304c\u4f5c\u6210\u3055\u308c\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3001\u30ed\u30fc\u30ab\u30eb\u30b5\u30fc\u30d0\u3092\u8d77\u52d5\u3057\u3066\u52d5\u4f5c\u78ba\u8a8d\ncd (\u89aa\u30c7\u30a3\u30ec\u30af\u30c8\u30ea)\\angular-app\nng serve --open\n\u3000\n<\/pre><\/div>\n\n\n<p>&#8211;open\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u81ea\u52d5\u7684\u306b\u30d6\u30e9\u30a6\u30b6\u304c\u5207\u308a\u66ff\u308f\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Angular\u30e1\u30a4\u30f3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Angular\u30e1\u30a4\u30f3-1024x451.png\" alt=\"\" class=\"wp-image-1542\" srcset=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Angular\u30e1\u30a4\u30f3-1024x451.png 1024w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Angular\u30e1\u30a4\u30f3-300x132.png 300w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Angular\u30e1\u30a4\u30f3-768x338.png 768w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Angular\u30e1\u30a4\u30f3-450x198.png 450w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Angular\u30e1\u30a4\u30f3-900x396.png 900w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/Angular\u30e1\u30a4\u30f3.png 1917w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption> <br>\u30d6\u30e9\u30a6\u30b6\u3067\u7121\u4e8b\u30b5\u30f3\u30d7\u30eb\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f <\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"front_6\">Visual Studio Code\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb <\/h2>\n\n\n\n<p>Microsoft\u793e\u304c\u958b\u767a\u3057\u305f\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u306e\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3067\u3059\u3002  <br>\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u6bd4\u8f03\u3092\u884c\u3046\u306b\u3042\u305f\u308a\u3001Visual Studio Code\u3092\u4f7f\u7528\u3057\u3066\u691c\u8a3c\u3057\u3066\u3044\u304d\u307e\u3059\u3002 <br>\u4ee5\u4e0b\u306eURL\u304b\u3089\u30a4\u30f3\u30b9\u30c8\u30fc\u30e9\u30fc\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3002<br><a href=\"https:\/\/www.visualstudio.com\/products\/code-vs.aspx\">https:\/\/www.visualstudio.com\/products\/code-vs.aspx<\/a> <br><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><a href=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/VSCode\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/01\/VSCode\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb2.png\" alt=\"\" class=\"wp-image-1499\" width=\"383\" height=\"280\"\/><\/a><\/figure><\/div>\n\n\n\n<p>Visual Studio Code \u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u30a6\u30a3\u30b6\u30fc\u30c9\u306e\u958b\u59cb <br>\u3000\uff1e\u6b21\u3078  <br>\u4f7f\u7528\u8a31\u8afe\u5951\u7d04\u66f8\u306e\u540c\u610f <br>\u3000\uff1e\u540c\u610f\u3059\u308b\u3092\u30c1\u30a7\u30c3\u30af\u5f8c\u3001\u6b21\u3078<br>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u5148\u306e\u6307\u5b9a <br>\u3000\uff1e\u7279\u306b\u554f\u984c\u306a\u3051\u308c\u3070\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u307e\u307e\u6b21\u3078<br>\u30d7\u30ed\u30b0\u30e9\u30e0\u30b0\u30eb\u30fc\u30d7\u306e\u6307\u5b9a <br>\u3000\uff1e\u7279\u306b\u554f\u984c\u306a\u3051\u308c\u3070\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u307e\u307e\u6b21\u3078  <br>\u8ffd\u52a0\u30bf\u30b9\u30af\u306e\u9078\u629e  <br>\u3000\uff1e\u7279\u306b\u554f\u984c\u306a\u3051\u308c\u3070\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u307e\u307e\u6b21\u3078  <br>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u6e96\u5099\u5b8c\u4e86 <br>\u3000\uff1e\u7279\u306b\u554f\u984c\u306a\u3051\u308c\u3070\u3001\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb <br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"front_7\"> \u6b21\u56de\u4e88\u544a <\/h2>\n\n\n\n<p>\u4eca\u56de\u306fReact, Vue.js, Angular\u306e\u6bd4\u8f03\u3092\u884c\u3046\u4e8b\u524d\u6e96\u5099\u3068\u3057\u3066\u74b0\u5883\u69cb\u7bc9\u3092\u884c\u3044\u307e\u3057\u305f\u3002 <br>\u6b21\u56de\u306f\u4f5c\u6210\u3057\u305f\u305d\u308c\u305e\u308c\u306e\u96db\u5f62\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u3082\u3068\u306b\u3001\u540c\u3058\u5b9f\u88c5\u3092\u3057\u305f\u5834\u5408\u306e\u6bd4\u8f03\u3092\u884c\u3063\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"\u76ee\u6b21 \u306f\u3058\u3081\u306b\u691c\u8a3c\u74b0\u5883Node.js\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30ebnpm(Node Package Manager)\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u5404\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u4e8b\u524d\u6e96\u5099Visual Studio Code\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u6b21\u56de\u4e88\u544a \u306f\u3058\u3081\u306b \u672c\u30c6\u30fc\u30de\u3067\u306f\u6570\u56de\u306b\u308f\u305f\u3063\u3066\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3067\u4f7f\u7528\u3059\u308bReact, Vue.js, Angular\u306e\u305d\u308c\u305e\u308c\u306e\u7279\u5fb4\u3001\u304a\u3088\u3073\u540c\u3058\u5b9f\u88c5\u3092\u884c\u3063\u305f\u5834\u5408\u306e\u6bd4\u8f03\u3092\u8003\u5bdf\u3057\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002\u306a\u304a\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u6bd4\u8f03\u3092\u884c\u3046\u306b\u3042\u305f\u308a\u3001Visual Studio Code\u3092\u4f7f\u7528\u3057\u3066\u691c\u8a3c\u3057\u3066\u3044\u304d\u307e\u3059\u3002 \u4ed5\u69d8\u7b49\u306b\u3064\u3044\u3066\u306f\u90fd\u5ea6\u3001\u8aac\u660e\u3092\u631f\u3093\u3067\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u304c\u3001React,Vue.js,Anglar\u306f\u3001Javascript\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002\u305d\u308c&hellip;","protected":false},"author":9,"featured_media":1625,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82],"tags":[29],"class_list":{"0":"post-1486","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-82","8":"tag-season7"},"_links":{"self":[{"href":"https:\/\/itport.cloud\/index.php?rest_route=\/wp\/v2\/posts\/1486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itport.cloud\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itport.cloud\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itport.cloud\/index.php?rest_route=\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/itport.cloud\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1486"}],"version-history":[{"count":61,"href":"https:\/\/itport.cloud\/index.php?rest_route=\/wp\/v2\/posts\/1486\/revisions"}],"predecessor-version":[{"id":1624,"href":"https:\/\/itport.cloud\/index.php?rest_route=\/wp\/v2\/posts\/1486\/revisions\/1624"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itport.cloud\/index.php?rest_route=\/wp\/v2\/media\/1625"}],"wp:attachment":[{"href":"https:\/\/itport.cloud\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itport.cloud\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itport.cloud\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}