{"id":209,"date":"2023-06-23T13:49:13","date_gmt":"2023-02-26T20:21:34","guid":{"rendered":"https:\/\/www.silicloud.com\/ja\/blog\/index.php\/2023\/11\/30\/parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b\/"},"modified":"2025-07-31T21:40:56","modified_gmt":"2025-07-31T12:40:56","slug":"parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b\/","title":{"rendered":"Parcel.js\u3092\u4f7f\u3063\u3066\u3001Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f"},"content":{"rendered":"<h3>\u306f\u3058\u3081\u306b<\/h3>\n<p>\u30b5\u30a4\u30c8\u3084\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u767a\u3059\u308b\u969b\u306b\u306f\u3001\u30b3\u30fc\u30c9\u3092\u5c0f\u3055\u306a\u3001\u7ba1\u7406\u3057\u3084\u3059\u3044\u30c1\u30e3\u30f3\u30af\u306b\u5206\u5272\u3059\u308b\u3053\u3068\u304c\u826f\u3044\u7fd2\u6163\u3067\u3059\u3002\u672c\u756a\u74b0\u5883\u3067\u306f\u3001\u500b\u3005\u306e\u30ea\u30bd\u30fc\u30b9\u3092\u500b\u5225\u306b\u8981\u6c42\u3059\u308b\u3053\u3068\u3067\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u9045\u304f\u306a\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002\u30d0\u30f3\u30c9\u30e9\u3068\u306f\u3001\u3053\u306e\u9045\u5ef6\u306e\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u30c4\u30fc\u30eb\u3067\u3042\u308a\u3001\u30b3\u30fc\u30c9\u3092\u3072\u3068\u3064\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u7d50\u5408\u30fb\u30de\u30fc\u30b8\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u30ea\u30bd\u30fc\u30b9\u306e\u305f\u3081\u306e\u30b5\u30fc\u30d0\u30fc\u3078\u306eHTTP\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u6570\u3092\u5236\u9650\u3067\u304d\u307e\u3059\u3002\u30d0\u30f3\u30c9\u30e9\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u3068\u958b\u767a\u8005\u306e\u4e21\u65b9\u306b\u3068\u3063\u3066\u7d4c\u9a13\u3092\u6700\u9069\u5316\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/p>\n<p>Parcel.js\u306f\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u306e\u30d0\u30f3\u30c9\u30e9\u30fc\u3067\u3059\u3002Typescript\u3084SASS\u306a\u3069\u591a\u304f\u306e\u4eba\u6c17\u8a00\u8a9e\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u304a\u308a\u3001\u307e\u305f\u753b\u50cf\u3084\u30d5\u30a9\u30f3\u30c8\u306a\u3069\u306e\u30d5\u30a1\u30a4\u30eb\u5f62\u5f0f\u3082\u6271\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002Parcel\u306b\u306f\u3044\u304f\u3064\u304b\u306e\u8ffd\u52a0\u30c4\u30fc\u30eb\u304c\u7d44\u307f\u8fbc\u307e\u308c\u3066\u304a\u308a\u3001\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3084\u8a3a\u65ad\u3001\u6700\u5c0f\u5316\u3001\u3055\u3089\u306b\u306f\u753b\u50cf\u5727\u7e2e\u3082\u884c\u3048\u307e\u3059\u3002\u3082\u3057\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u8ffd\u52a0\u306e\u8a2d\u5b9a\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001Parcel\u306e\u591a\u304f\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u5229\u7528\u3059\u308b\u30aa\u30d7\u30b7\u30e7\u30f3\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001Parcel\u3092\u4f7f\u7528\u3057\u3066HTML\u3001CSS\u3001JavaScript\u30d5\u30a1\u30a4\u30eb\u3092\u542b\u3080\u5c0f\u3055\u306aWeb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d3\u30eb\u30c9\u3057\u30d0\u30f3\u30c9\u30eb\u3057\u307e\u3059\u3002\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3068\u30bf\u30fc\u30df\u30ca\u30eb\u3092\u4ea4\u4e92\u306b\u4f7f\u7528\u3057\u3066\u4f5c\u696d\u3057\u307e\u3059\u3002\u307e\u305f\u3001\u30ab\u30b9\u30bf\u30e0npm\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u4f7f\u3063\u3066Parcel\u3092\u8a2d\u5b9a\u3057\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u884c\u3068\u30d3\u30eb\u30c9\u3092\u88dc\u52a9\u3059\u308b\u65b9\u6cd5\u3082\u5b66\u3073\u307e\u3059\u3002<\/p>\n<h2>\u524d\u63d0\u6761\u4ef6<\/h2>\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306b\u5f93\u3046\u306b\u306f\u3001\u6b21\u306e\u3082\u306e\u304c\u5fc5\u8981\u3067\u3059\uff1a<\/p>\n<ul class=\"post-ul\">\n<li>An understanding of HTML, CSS, and JavaScript. You can learn about these from our How To Build a Website with HTML, How To Style HTML with CSS, and How To Code in JavaScript tutorial series.<\/li>\n<li>A text editor like Visual Studio Code. You may use any text editor you like.<\/li>\n<li>Familiarity with a terminal. You can learn how to use a terminal from our An Introduction to the Linux Terminal and Learning to Love Your Terminal guides.<\/li>\n<li>Node.js installed on your local machine. Follow our How to Install Node.js and Create a Local Development Environment tutorial for your specific environment.<\/li>\n<\/ul>\n<p>\u3042\u306a\u305f\u306e\u30de\u30b7\u30f3\u306bNode.js\u304c\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3055\u308c\u305f\u3089\u3001\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u306b\u9032\u3080\u6e96\u5099\u304c\u6574\u3044\u307e\u3057\u305f\u3002<\/p>\n<h2>\u30b9\u30c6\u30c3\u30d71\uff1aParcel Bundler\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001\u4f5c\u696d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3068\u3057\u3066&#8221;your_project&#8221;\u3092\u4f7f\u7528\u3057\u307e\u3059\u304c\u3001\u81ea\u7531\u306b\u540d\u524d\u3092\u5909\u66f4\u3057\u305f\u308a\u3001\u72ec\u81ea\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a9\u30eb\u30c0\u3092\u4f7f\u7528\u3057\u3066\u3082\u69cb\u3044\u307e\u305b\u3093\u3002\u304a\u597d\u307f\u306e\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3068\u30bf\u30fc\u30df\u30ca\u30eb\u307e\u305f\u306f\u30b3\u30de\u30f3\u30c9\u30d7\u30ed\u30f3\u30d7\u30c8\u3092\u958b\u304d\u3001\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u306b\u9032\u3080\u524d\u306b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30c8\u30c3\u30d7\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u300cyour_project\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u3067\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u307e\u305f\u306f\u30b3\u30de\u30f3\u30c9\u30d7\u30ed\u30f3\u30d7\u30c8\u3092\u4f7f\u7528\u3057\u3066\u3001npm init\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u521d\u671f\u5316\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u3042\u306a\u305f\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">npm<\/span> init<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u3053\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u95a2\u3059\u308b\u4e00\u9023\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u5404\u8cea\u554f\u306b\u9032\u3080\u306b\u306fENTER\u30ad\u30fc\u3092\u62bc\u3059\u304b\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u8a2d\u5b9a\u3092\u597d\u304d\u306a\u3088\u3046\u306b\u5909\u66f4\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7d42\u4e86\u3057\u305f\u3089\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u8a2d\u5b9a\u3092\u5909\u66f4\u3057\u306a\u304b\u3063\u305f\u5834\u5408\u3001\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u304b\u3089\u8868\u793a\u3067\u304d\u308b\u4ee5\u4e0b\u306e\u60c5\u5831\u304c\u542b\u307e\u308c\u305fpackage.json\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n<div>\u3042\u306a\u305f\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\/\u30d1\u30c3\u30b1\u30fc\u30b8.json<\/div>\n<pre class=\"post-pre\"><code>{\r\n  \"name\": \"<mark>your_project<\/mark>\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"\",\r\n  \"main\": \"index.js\",\r\n  \"scripts\": {\r\n    \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\"\r\n  },\r\n  \"author\": \"\",\r\n  \"license\": \"ISC\"\r\n}\r\n<\/code><\/pre>\n<p>\u6b21\u306b\u3001&#8211;save-dev\u30d5\u30e9\u30b0\u3092\u4f7f\u7528\u3057\u3066Parcel\u30d0\u30f3\u30c9\u30e9\u3092\u30ed\u30fc\u30ab\u30eb\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u3042\u306a\u305f\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u3064\u3044\u3066\u3002<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span> &#8211;save-dev parcel<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&#8211;save-dev \u30d5\u30e9\u30b0\u306f\u3001\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u958b\u767a\u6642\u306e\u4f9d\u5b58\u95a2\u4fc2\u3068\u3057\u3066\u4fdd\u5b58\u3057\u307e\u3059\u3002\u3064\u307e\u308a\u3001Parcel\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u7ba1\u7406\u304a\u3088\u3073\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u3001\u958b\u767a\u30d7\u30ed\u30bb\u30b9\u4e2d\u306b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304cParcel\u306b\u4f9d\u5b58\u3059\u308b\u3053\u3068\u3092\u610f\u5473\u3057\u307e\u3059\u3002<\/p>\n<p>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u5f8c\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u306f\u8ffd\u52a0\u306epackage-lock.json\u30d5\u30a1\u30a4\u30eb\u3068node_modules\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304c\u542b\u307e\u308c\u307e\u3059\u3002package-lock.json\u30d5\u30a1\u30a4\u30eb\u306f\u3001npm\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u6642\u306b\u81ea\u52d5\u751f\u6210\u3055\u308c\u307e\u3059\u3002\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\u6b63\u5e38\u306b\u52d5\u4f5c\u3059\u308b\u305f\u3081\u306b\u4f9d\u5b58\u3057\u3066\u3044\u308b\u3059\u3079\u3066\u306e\u4f9d\u5b58\u95a2\u4fc2\u304c\u8a18\u8f09\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u3082\u3057\u3001\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u6301\u3064\u60c5\u5831\u306b\u8208\u5473\u304c\u3042\u308b\u5834\u5408\u306f\u3001npm\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002package-lock.json\u30d5\u30a1\u30a4\u30eb\u3068\u540c\u69d8\u306b\u3001node_modules\u30d5\u30a9\u30eb\u30c0\u306f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\u4f9d\u5b58\u3057\u3066\u3044\u308b\u3055\u307e\u3056\u307e\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u4fdd\u6301\u3057\u3066\u3044\u307e\u3059\u3002\u305f\u3060\u3057\u3001\u3053\u306e\u30b7\u30ca\u30ea\u30aa\u3067\u81ea\u52d5\u751f\u6210\u3055\u308c\u308b\u30d5\u30a1\u30a4\u30eb\u306f\u76f4\u63a5\u7de8\u96c6\u3059\u308b\u3053\u3068\u306f\u60f3\u5b9a\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n<p>\u3042\u306a\u305f\u306epackage.json\u30d5\u30a1\u30a4\u30eb\u306b\u306f\u3001\u958b\u767a\u306e\u4f9d\u5b58\u95a2\u4fc2\u3068\u3057\u3066parcel\u304c\u542b\u307e\u308c\u3066\u3044\u308b\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u3042\u306a\u305f\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30d1\u30c3\u30b1\u30fc\u30b8.json<\/div>\n<pre class=\"post-pre\"><code>...\r\n\"devDependencies\": {\r\n    \"parcel\": \"^2.7.0\"\r\n  }\r\n\u2026\r\n<\/code><\/pre>\n<p>\u30d1\u30fc\u30bb\u30eb\u30d0\u30f3\u30c9\u30e9\u30fc\u304c\u30ed\u30fc\u30ab\u30eb\u4f9d\u5b58\u95a2\u4fc2\u3068\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f5c\u696d\u3092\u958b\u59cb\u3059\u308b\u6e96\u5099\u304c\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n<h2>\u30b9\u30c6\u30c3\u30d72 &#8211; \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30d5\u30a1\u30a4\u30eb\u306e\u4f5c\u6210<\/h2>\n<p>\u6b21\u306e\u4f8b\u3067\u306f\u3001\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u80cc\u666f\u8272\u304c\u5909\u308f\u308b\u5c0f\u3055\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u3053\u308c\u3089\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30d5\u30a1\u30a4\u30eb\u306e\u4f5c\u6210\u5f8c\u306b\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306bParcel\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002<\/p>\n<p>Parcel\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3068\u3057\u3066\u4efb\u610f\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u53d7\u3051\u5165\u308c\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u30d5\u30a1\u30a4\u30eb\u3068\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u884c\u304c\u958b\u59cb\u3055\u308c\u308b\u5834\u6240\u3067\u3059\u3002\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u304b\u3089\u3001Parcel\u306f\u6307\u5b9a\u3057\u305f\u3059\u3079\u3066\u306e\u4f9d\u5b58\u95a2\u4fc2\uff08CSS\u30d5\u30a1\u30a4\u30eb\u3084JavaScript\u30d5\u30a1\u30a4\u30eb\u3078\u306e\u30ea\u30f3\u30af\u3092\u542b\u3080\uff09\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d3\u30eb\u30c9\u3057\u307e\u3059\u3002\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3068\u3057\u3066\u3001index.html\u3068\u3044\u3046HTML\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<p>\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3067\u3001your_project\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306bsrc\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3057\u3066\u3001\u30b3\u30fc\u30c9\u3092\u4fdd\u7ba1\u3057\u6574\u7406\u3057\u307e\u3059\u3002Visual Studio Code\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u5834\u5408\u3001your_project\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u3067\u53f3\u30af\u30ea\u30c3\u30af\u3057\u3066\u3001\u300c\u65b0\u3057\u3044\u30d5\u30a9\u30eb\u30c0\u30fc\u300d\u3092\u9078\u629e\u3057\u3001\u540d\u524d\u3092src\u3068\u3057\u307e\u3059\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/65646d6cdaa94e2bdf7b665a\/29-0.png\" alt=\"Inside of Visual Studio Code, right-clicking inside of a directory to create a new folder.\" \/><\/div>\n<p>\u305d\u306esrc\u30d5\u30a9\u30eb\u30c0\u5185\u306b\u3001index.html\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002Visual Studio Code\u3067src\u30d5\u30a9\u30eb\u30c0\u5185\u3092\u53f3\u30af\u30ea\u30c3\u30af\u3057\u3001\u65b0\u3057\u3044\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u306e\u540d\u524d\u3092index.html\u3068\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>index.html \u30d5\u30a1\u30a4\u30eb\u306b\u4ee5\u4e0b\u306e\u884c\u3092\u542b\u3081\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u3042\u306a\u305f\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3067\u3042\u308b\u300cindex.html\u300d<\/div>\n<pre class=\"post-pre\"><code><span class=\"token doctype\"><span class=\"token punctuation\">&lt;!<\/span><span class=\"token doctype-tag\">DOCTYPE<\/span> <span class=\"token name\">html<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>html<\/span> <span class=\"token attr-name\">lang<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>en<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta<\/span> <span class=\"token attr-name\">charset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>UTF-8<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta<\/span> <span class=\"token attr-name\">http-equiv<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>X-UA-Compatible<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">content<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>IE=edge<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta<\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>viewport<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">content<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>width=device-width, initial-scale=1.0<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>stylesheet<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>css\/style.css<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>title<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Your Parcel Project<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>title<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>head<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>body<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Welcome to Parcel!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h1<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>sammy-wrapper<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>img-wrapper sammy-1<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/assets.digitalocean.com\/articles\/docker_node_image\/sammy.png<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Sammy the Shark<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    \r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Change the Background Color<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>module<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>js\/app.js<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>body<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>html<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<\/code><\/pre>\n<p>\u3053\u306eHTML\u30d5\u30a1\u30a4\u30eb\u306f\u3001\u3042\u306a\u305f\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30e9\u30f3\u30c7\u30a3\u30f3\u30b0\u30da\u30fc\u30b8\u3067\u3059\u3002\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3068\u30b9\u30af\u30ea\u30d7\u30c8\u3078\u306e\u30ea\u30f3\u30af\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u3089\u306e\u30d5\u30a1\u30a4\u30eb\u306f\u305d\u308c\u305e\u308c\u306e\u30d5\u30a9\u30eb\u30c0\u306b\u4fdd\u5b58\u3055\u308c\u3001\u30b3\u30fc\u30c9\u3092\u5206\u96e2\u3057\u3066\u6574\u7406\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u66f4\u65b0\u5f8c\u306b\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3059\u308b\u3053\u3068\u3092\u5fd8\u308c\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u3002VS Code\u3067\u306f\u3001CTRL+S\u307e\u305f\u306fCMD+S\u30ad\u30fc\u3092\u62bc\u3057\u3066\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u3042\u306a\u305f\u306esrc\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306b\u3001css\u3068\u3044\u3046\u540d\u524d\u306e\u5225\u306e\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u6b21\u306b\u3001css\u30d5\u30a9\u30eb\u30c0\u306e\u4e2d\u306bstyle.css\u3068\u3044\u3046\u540d\u524d\u306eCSS\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/65646d6cdaa94e2bdf7b665a\/36-0.png\" alt=\"Creating a new folder within the \u2018src\u2019 directory called \u2018css\u2019\" \/><\/div>\n<p>style.css \u30d5\u30a1\u30a4\u30eb\u306b\u4ee5\u4e0b\u306e CSS \u3092\u542b\u3081\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u3042\u306a\u305f\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\uff08.css \u30d5\u30a1\u30a4\u30eb\uff09\u306f\u3001\u4ee5\u4e0b\u306e\u5834\u6240\u306b\u3042\u308a\u307e\u3059\uff1a<br \/>\nyour_project\/src\/css\/style.css<\/div>\n<pre class=\"post-pre\"><code><span class=\"token selector\">html<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">box-sizing<\/span><span class=\"token punctuation\">:<\/span> border-box<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">*<span class=\"token punctuation\">,<\/span> *<span class=\"token pseudo-element\">:before<\/span><span class=\"token punctuation\">,<\/span> *<span class=\"token pseudo-element\">:after<\/span><\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">box-sizing<\/span><span class=\"token punctuation\">:<\/span> inherit<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">body<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">flex-direction<\/span><span class=\"token punctuation\">:<\/span> column<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">font-family<\/span><span class=\"token punctuation\">:<\/span> sans-serif<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token color\">white<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">var<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">--bg<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token color\"><span class=\"token function\">rgb<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">26<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">80<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">190<\/span><span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">16<\/span><span class=\"token unit\">px<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">h1<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">3<\/span><span class=\"token unit\">rem<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token unit\">rem<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\"><span class=\"token class\">.img-wrapper<\/span><\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">max-width<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">600<\/span><span class=\"token unit\">px<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">0<\/span> <span class=\"token number\">1<\/span><span class=\"token unit\">rem<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token unit\">rem<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\"><span class=\"token class\">.img-wrapper<\/span> img<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">100<\/span><span class=\"token unit\">%<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">button<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> inherit<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token unit\">rem<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">.5<\/span><span class=\"token unit\">rem<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">8<\/span><span class=\"token unit\">rem<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3059\u308b\u3053\u3068\u3092\u5fd8\u308c\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u6b21\u306b\u3001src\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306b\u3001JavaScript\u30b3\u30fc\u30c9\u3092\u4fdd\u6301\u3059\u308b\u305f\u3081\u306ejs\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/65646d6cdaa94e2bdf7b665a\/42-0.png\" alt=\"Creating another folder named \u2018js\u2019 inside of your \u2018src\u2019 directory.\" \/><\/div>\n<p>\u3042\u306a\u305f\u306ejs\u30d5\u30a9\u30eb\u30c0\u30fc\u5185\u306b\u3001\u6b21\u306e\u30b3\u30fc\u30c9\u3092\u6301\u3064app.js\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u3042\u306a\u305f\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\uff08js\/app.js\uff09\u3092\u65e5\u672c\u8a9e\u3067\u8ff0\u3079\u308b\u4e00\u3064\u306e\u30aa\u30d7\u30b7\u30e7\u30f3 : \u3054\u81ea\u8eab\u304c\u4f5c\u6210\u3055\u308c\u305f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3067\u3042\u308b\u300cjs\/app.js\u300d\u3067\u3059\u3002<\/div>\n<pre class=\"post-pre\"><code><span class=\"token keyword\">const<\/span> btn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'button'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> body <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'body'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token keyword\">let<\/span> availableColors <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'darkslateblue'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'midnightblue'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'teal'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'tomato'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'seagreen'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'royalblue'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'saddlebrown'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'indigo'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'olivedrab'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'rosybrown'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\nbtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'click'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">const<\/span> randomizeColor <span class=\"token operator\">=<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> availableColors<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n  body<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span><span class=\"token function\">setProperty<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'--bg'<\/span><span class=\"token punctuation\">,<\/span> availableColors<span class=\"token punctuation\">[<\/span>randomizeColor<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/code><\/pre>\n<p>JavaScript\u306e\u30b3\u30fc\u30c9\u306f\u3001availableColors\u306e\u914d\u5217\u304b\u3089\u30e9\u30f3\u30c0\u30e0\u306b\u8272\u3092\u9078\u629e\u3057\u3001\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u80cc\u666f\u8272\u3092\u305d\u306e\u8272\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<p>\u3042\u306a\u305f\u306e\u7de8\u96c6\u304c\u7d42\u308f\u3063\u305f\u3089\u3001\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u5168\u4f53\u7684\u306b\u3001\u73fe\u5728\u306e\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306e\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code>your_project\/\r\n|\u2500\u2500 node_modules\r\n|\u2500\u2500 src\/\r\n|   |\u2500\u2500 css\/\r\n|   |   |\u2500\u2500 style.css\r\n|   |\u2500\u2500 js\/\r\n|   |   |\u2500\u2500 app.js\r\n|   |\u2500\u2500 index.html\r\n|\u2500\u2500 package.json\r\n|\u2500\u2500 package-lock.json\r\n<\/code><\/pre>\n<p>\u3042\u306a\u305f\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u57fa\u672c\u8981\u7d20\u304c\u4f5c\u6210\u3055\u308c\u305f\u3089\u3001Parcel\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u8868\u793a\u304a\u3088\u3073\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<h2>\u30b9\u30c6\u30c3\u30d7\uff13 \u2014 \u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3067\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3059\u308b<\/h2>\n<p>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u78ba\u8a8d\u3059\u308b\u65b9\u6cd5\u306e\u4e00\u3064\u306f\u3001HTML\u30d5\u30a1\u30a4\u30eb\u3092\u30d6\u30e9\u30a6\u30b6\u3067\u958b\u304f\u3053\u3068\u3067\u3059\u3002\u305f\u3060\u3057\u3001\u30d5\u30a1\u30a4\u30eb\u306e\u3044\u305a\u308c\u304b\u306b\u5909\u66f4\u3092\u52a0\u3048\u305f\u5834\u5408\u3001\u5909\u66f4\u304c\u3042\u308b\u305f\u3073\u306b\u624b\u52d5\u3067\u30d6\u30e9\u30a6\u30b6\u3092\u518d\u8aad\u307f\u8fbc\u307f\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002Parcel\u306b\u306f\u3001\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u304c\u4ed8\u5c5e\u3057\u3066\u3044\u307e\u3059\u3002\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u5b9f\u884c\u3057\u3066\u3044\u308b\u9593\u306b\u30b3\u30fc\u30c9\u3092\u5909\u66f4\u3059\u308b\u3068\u3001Parcel\u306f\u81ea\u52d5\u7684\u306b\u30d6\u30e9\u30a6\u30b6\u3067\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002\u3053\u308c\u3092\u30db\u30c3\u30c8\u30ea\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u3068\u547c\u3076\u3053\u3068\u304c\u3088\u304f\u3042\u308a\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u30b5\u30fc\u30d0\u30fc\u3092\u505c\u6b62\u3057\u3001\u5909\u66f4\u3092\u9069\u7528\u3057\u3066\u304b\u3089\u518d\u5ea6\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\u3059\u308b\u5fc5\u8981\u304c\u306a\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u305f\u3068\u3048\u3070\u3001Parcel\u306e\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u304c\u8d77\u52d5\u3057\u3066\u3044\u308b\u5834\u5408\u3001your_project\/src\/css\/style.css\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u5185\u306e\u80cc\u666f\u5c5e\u6027\u3092\u8d64\u306b\u5909\u66f4\u3057\u3066\u4fdd\u5b58\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u4fdd\u5b58\u5f8c\u3001\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u505c\u6b62\u3057\u305f\u308a\u3001\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5\u3059\u308b\u5fc5\u8981\u306a\u304f\u3001\u3059\u3050\u306b\u30d6\u30e9\u30a6\u30b6\u3067\u5909\u66f4\u304c\u53cd\u6620\u3055\u308c\u308b\u3053\u3068\u306b\u6c17\u4ed8\u304f\u3067\u3057\u3087\u3046\u3002<\/p>\n<p>\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u3001your_project\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u4e2d\u306b\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002your_project\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u5165\u3063\u305f\u3089\u3001\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3057\u3066\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u3042\u306a\u305f\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\">npx parcel src\/index.html<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<div class=\"secondary-code-label\" title=\"Output\">Output<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u276f npx parcel src\/index.html Server running at http:\/\/localhost:1234 \u2728 Built in 5ms<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u30d1\u30fc\u30bb\u30eb\u306e\u7d44\u307f\u8fbc\u307f\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u304c\u8d77\u52d5\u3057\u307e\u3057\u305f\u3002npx\u30d1\u30fc\u30bb\u30eb\u30b3\u30de\u30f3\u30c9\u306f\u3001src \/ index.html\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3092\u53d6\u308a\u3001\u5fc5\u8981\u306a\u30a2\u30bb\u30c3\u30c8\u3092\u4f7f\u3063\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d3\u30eb\u30c9\u3057\u307e\u3059\u3002\u51fa\u529b\u306b\u3082\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304chttp:\/\/localhost:1234\u3067\u5b9f\u884c\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u304c\u793a\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u5b9f\u884c\u4e2d\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u8868\u793a\u3059\u308b\u306b\u306f\u3001\u30a6\u30a7\u30d6\u30d6\u30e9\u30a6\u30b6\u3092\u958b\u304d\u3001http:\/\/localhost:1234\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/65646d6cdaa94e2bdf7b665a\/60-0.png\" alt=\"Your Parcel application running on http:\/\/localhost:1234 landing page.\" \/><\/div>\n<p>&#8220;your_project\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u3067\u3001npx parcel\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u305f\u969b\u306b2\u3064\u306e\u65b0\u3057\u3044\u30d5\u30a9\u30eb\u30c0\u304c\u751f\u6210\u3055\u308c\u307e\u3057\u305f\u3002.parcel-cache\u30d5\u30a9\u30eb\u30c0\u306b\u306f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u95a2\u3059\u308b\u60c5\u5831\u304c\u4fdd\u5b58\u3055\u308c\u3001Parcel\u304c\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u518d\u69cb\u7bc9\u3059\u308b\u969b\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002\u30d5\u30a1\u30a4\u30eb\u306b\u5909\u66f4\u3092\u52a0\u3048\u308b\u3068\u3001Parcel\u306f\u305d\u306e\u5909\u66f4\u3092\u691c\u77e5\u3057\u3001\u30bc\u30ed\u304b\u3089\u3067\u306f\u306a\u304f\u3001\u3053\u308c\u3089\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u3066\u30d3\u30eb\u30c9\u3092\u518d\u5b9f\u884c\u3057\u307e\u3059\u3002&#8221;<\/p>\n<p>\u300cdist\u300d\u3068\u3044\u3046\u540d\u524d\u306e\u5225\u306e\u30d5\u30a9\u30eb\u30c0\u306b\u306f\u3001Parcel\u304c\u751f\u6210\u3057\u305f\u52d5\u7684\u306a\u30d5\u30a1\u30a4\u30eb\u304c\u683c\u7d0d\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u30d5\u30a9\u30eb\u30c0\u306b\u306f\u3001HTML\u3001CSS\u3001JavaScript\u30d5\u30a1\u30a4\u30eb\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u3059\u3079\u3066\u306e\u30d5\u30a1\u30a4\u30eb\u306f\u30e9\u30f3\u30c0\u30e0\u306a\u6587\u5b57\u5217\u306e\u9593\u306b\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u304c\u4ed8\u3051\u3089\u308c\u3066\u3044\u307e\u3059\u3002\u307e\u305f\u3001.map\u30d5\u30a1\u30a4\u30eb\u3082\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002npx parcel\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001Parcel\u306f\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u3092\u751f\u6210\u3057\u307e\u3059\u3002\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u306b\u30d0\u30f3\u30c9\u30eb\u3055\u308c\u305f\u30b3\u30fc\u30c9\u304b\u3089\u5143\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306e\u5834\u6240\u3092\u7279\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002\u3053\u308c\u306f\u3001\u958b\u767a\u304a\u3088\u3073\u672c\u756a\u74b0\u5883\u3067\u30b3\u30fc\u30c9\u306e\u30c7\u30d0\u30c3\u30b0\u3092\u88dc\u52a9\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/65646d6cdaa94e2bdf7b665a\/63-0.png\" alt=\"Inside of VS Code, the \u2018.parcel-cache\u2019 and \u2018dist\u2019 folders are automatically generated after you run the \u2018npx parcel\u2019 command. \" \/><\/div>\n<p>\u306f\u3063\u304d\u308a\u7533\u3057\u4e0a\u3052\u307e\u3059\u304c\u3001\u3053\u308c\u3089\u306e\u30d5\u30a1\u30a4\u30eb\u5185\u3067\u4f5c\u696d\u3092\u884c\u3046\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u5b9f\u969b\u306b\u306f\u3001\u3053\u308c\u3089\u306e\u30d5\u30a9\u30eb\u30c0\u3092\u524a\u9664\u3059\u308b\u3068\u3001npx\u30d1\u30fc\u30bb\u30eb\u30b3\u30de\u30f3\u30c9\u3092\u518d\u5ea6\u5b9f\u884c\u3059\u308b\u969b\u306b\u3001.parcel-cache\u30d5\u30a9\u30eb\u30c0\u3068dist\u30d5\u30a9\u30eb\u30c0\u304c\u81ea\u52d5\u7684\u306b\u751f\u6210\u304a\u3088\u3073\u66f4\u65b0\u3055\u308c\u307e\u3059\u3002<\/p>\n<div class=\"post-conf-note\">\n<p class=\"post-conf-desc\">Note<\/p>\n<div>\u6ce8\u610f: \u30b3\u30fc\u30c9\u306b\u91cd\u8981\u306a\u5909\u66f4\u3092\u52a0\u3048\u308b\u5834\u5408\u3001\u305d\u308c\u3089\u306e\u5909\u66f4\u304c\u30d6\u30e9\u30a6\u30b6\u306b\u53cd\u6620\u3055\u308c\u3066\u3044\u306a\u3044\u3053\u3068\u304c\u3042\u308b\u3053\u3068\u306b\u6c17\u4ed8\u304f\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002\u3053\u306e\u3088\u3046\u306a\u5834\u5408\u3001\u30d6\u30e9\u30a6\u30b6\u3092\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5\u3057\u3066\u307f\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u305d\u308c\u3067\u3082\u554f\u984c\u304c\u89e3\u6c7a\u3057\u306a\u3044\u5834\u5408\u306f\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u3067CTRL+C\u3092\u62bc\u3057\u3066\u30b5\u30fc\u30d0\u30fc\u306e\u5b9f\u884c\u3092\u505c\u6b62\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u305d\u3057\u3066\u3001.parcel-cache\u30d5\u30a9\u30eb\u30c0\u3068dist\u30d5\u30a9\u30eb\u30c0\u3092\u524a\u9664\u3057\u3066\u304f\u3060\u3055\u3044\u3002.parcel-cache\u30d5\u30a9\u30eb\u30c0\u306b\u306f\u53e4\u3044\u30b3\u30fc\u30c9\u306e\u6b8b\u9ab8\u304c\u6b8b\u3063\u3066\u3044\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u305f\u3081\u3001\u305d\u308c\u3092\u524a\u9664\u3059\u308b\u3053\u3068\u3067\u554f\u984c\u3092\u89e3\u6d88\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u308c\u3089\u3092\u524a\u9664\u3057\u305f\u5f8c\u3001\u518d\u5ea6\u300cnpx parcel src\/index.html\u300d\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u66f4\u65b0\u3055\u308c\u305f\u30b3\u30fc\u30c9\u3067&#8217;.parcel-cache&#8217;\u30d5\u30a9\u30eb\u30c0\u3068dist\u30d5\u30a9\u30eb\u30c0\u304a\u3088\u3073\u30d5\u30a1\u30a4\u30eb\u304c\u518d\u751f\u6210\u3055\u308c\u307e\u3059\u3002<\/div>\n<\/div>\n<p>\u65b0\u3057\u3044\u30d5\u30a9\u30eb\u30c0\u3084\u30d5\u30a1\u30a4\u30eb\u306e\u691c\u67fb\u304c\u7d42\u308f\u3063\u305f\u3089\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u3084\u30b3\u30de\u30f3\u30c9\u30d7\u30ed\u30f3\u30d7\u30c8\u3067CTRL+C\u3092\u62bc\u3057\u3066\u30b5\u30fc\u30d0\u30fc\u3092\u7d42\u4e86\u3055\u305b\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h2>\u30b9\u30c6\u30c3\u30d74 \u2014 \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u59cb\u3068\u30d3\u30eb\u30c9\u306e\u305f\u3081\u306enpm\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u4f5c\u6210<\/h2>\n<p>\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3073\u306b\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u300cnpx parcel src\/index.html\u300d\u3068\u3044\u3046\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u4ee3\u308f\u308a\u306b\u3001package.json\u30d5\u30a1\u30a4\u30eb\u5185\u306bnpm\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u4f5c\u6210\u3057\u3066\u3053\u306e\u7e70\u308a\u8fd4\u3057\u4f5c\u696d\u3092\u81ea\u52d5\u5316\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u307e\u305f\u3001\u672c\u756a\u306b\u5411\u3051\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d3\u30eb\u30c9\u3059\u308b\u305f\u3081\u306e\u8ffd\u52a0\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u542b\u3081\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u6700\u521d\u306b\u3001\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3067your_project\/package.json\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u5909\u66f4\u3057\u3066\u3001\u4ee5\u4e0b\u306e\u884c\u3092\u542b\u3081\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u3042\u306a\u305f\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30d1\u30c3\u30b1\u30fc\u30b8.json<\/div>\n<pre class=\"post-pre\"><code><span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"your_project\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"version\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"1.0.0\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"description\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <mark><span class=\"token property\">\"source\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"src\/index.html\"<\/span><span class=\"token punctuation\">,<\/span><\/mark>\r\n  <span class=\"token property\">\"scripts\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <mark><span class=\"token property\">\"start\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"parcel\"<\/span><span class=\"token punctuation\">,<\/span><\/mark>\r\n    <mark><span class=\"token property\">\"build\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"parcel build --dist-dir public\"<\/span><\/mark>\r\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"author\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"\"<\/span><span class=\"token punctuation\">,<\/span>\r\n  <span class=\"token property\">\"license\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"ISC\"<\/span>\r\n  ...\r\n\r\n<\/code><\/pre>\n<p>\u300cpackage.json\u300d\u30d5\u30a1\u30a4\u30eb\u3067\u3001\u300cmain\u300d\u306e\u5024\u3092\u300cindex.js\u300d\u304b\u3089\u300csource\u300d\u306e\u5024\u300csrc\/index.html\u300d\u306b\u5909\u66f4\u3057\u307e\u3057\u305f\u3002\u300csource\u300d\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5165\u529b\u30d5\u30a1\u30a4\u30eb\u307e\u305f\u306f\u30bd\u30fc\u30b9\u30d5\u30a1\u30a4\u30eb\u3092\u793a\u3057\u3001\u30d5\u30a1\u30a4\u30eb\u3078\u306e\u5177\u4f53\u7684\u306a\u30d1\u30b9\u3092\u793a\u3057\u307e\u3059\u3002\u307e\u305f\u3001\u6b21\u306e2\u3064\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3082\u542b\u3081\u307e\u3057\u305f\u3002<\/p>\n<ul class=\"post-ul\">\n<li>&#8220;start&#8221;: &#8220;parcel&#8221;: &#8220;start&#8221; is the name of this command. You can name this whatever you like. &#8220;parcel&#8221; is the actual command you want your script to perform. In this instance, &#8220;parcel&#8221; does exactly what the previous npx parcel command does. It starts the development server with your entry point file and builds it with the assets you\u2019ve included. Since you specified the source of the entry point in the &#8220;source&#8221; field, Parcel understands where to find this file.<\/li>\n<li>&#8220;build&#8221;: &#8220;parcel build &#8211;dist-dir public&#8221;: &#8220;build&#8221; is the name of this command like \u201dstart\u201d above. You can name this anything you like. The \u201dparcel build\u201d command builds and optimizes your code for production. This is typically run after you\u2019ve finished developing your application. Parcel\u2019s default directory for your output is named dist. The &#8211;dist-dir public tag defines the output folder for your production files and is named public to avoid confusion with the dist default directory. You will perform this task in a later step.<\/li>\n<\/ul>\n<p>\u4eca\u3067\u306f\u3001\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\u3059\u308b\u305f\u3081\u306b\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u300cnpx parcel src\/index.html\u300d\u3068\u5165\u529b\u3059\u308b\u4ee3\u308f\u308a\u306b\u3001\u300cnpm start\u300d\u3068\u5165\u529b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<div>\u3042\u306a\u305f\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8 (Anata no purojekuto)<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">npm<\/span> start<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<div class=\"secondary-code-label\" title=\"Output\">Output<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u276f npm start &gt; your_project@1.0.0 start &gt; parcel Server running at http:\/\/localhost:1234 \u2728 Built in 5ms<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>npm start \u30b3\u30de\u30f3\u30c9\u306f\u3001\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u7c21\u5358\u306b\u8d77\u52d5\u3059\u308b\u305f\u3081\u306e\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\u3067\u3059\u3002<\/p>\n<p>\u30a6\u30a7\u30d6\u30d6\u30e9\u30a6\u30b6\u3092\u958b\u304d\u3001http:\/\/localhost:1234 \u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30e9\u30f3\u30c7\u30a3\u30f3\u30b0\u30da\u30fc\u30b8\u306f\u4ee5\u524d\u3068\u540c\u3058\u3067\u3042\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u3068\u30c6\u30b9\u30c8\u3092\u7d9a\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u672c\u756a\u7528\u306b\u6e96\u5099\u3067\u304d\u305f\u3089\u3001\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3092\u59cb\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<h2>\u30b9\u30c6\u30c3\u30d75 &#8211; \u30d7\u30ed\u30c0\u30af\u30b7\u30e7\u30f3\u5411\u3051\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d3\u30eb\u30c9<\/h2>\n<p>\u30d0\u30f3\u30c9\u30e9\u30fc\u306e\u4e3b\u306a\u7279\u5fb4\u306e\u4e00\u3064\u306f\u3001\u30d5\u30a1\u30a4\u30eb\u306e\u7d71\u5408\u3067\u3059\u3002\u3053\u308c\u306f\u3001build\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3068Parcel\u304c\u884c\u3063\u3066\u304f\u308c\u307e\u3059\u3002\u305f\u3068\u3048\u3070\u3001src\/css\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306b\u4f9d\u5b58\u95a2\u4fc2\u306e\u3042\u308b\u8907\u6570\u306eCSS\u30d5\u30a1\u30a4\u30eb\u304c\u3042\u308b\u5834\u5408\u3001npm run build\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3059\u308b\u3068Parcel\u306f\u305d\u308c\u3089\u306e\u30d5\u30a1\u30a4\u30eb\u30921\u3064\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u7d50\u5408\u3057\u307e\u3059\u3002\u540c\u3058\u3053\u3068\u306fJavaScript\u30d5\u30a1\u30a4\u30eb\u306b\u3082\u9069\u7528\u3055\u308c\u307e\u3059\u3002Parcel\u304c\u3053\u308c\u3092\u3069\u306e\u3088\u3046\u306b\u884c\u3063\u3066\u3044\u308b\u304b\u306b\u3064\u3044\u3066\u306f\u3001\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u53c2\u7167\u3057\u3066\u8a73\u3057\u304f\u5b66\u3076\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u3042\u306a\u305f\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u672c\u756a\u7528\u306b\u6e96\u5099\u304c\u3067\u304d\u305f\u3089\u3001package.json \u30d5\u30a1\u30a4\u30eb\u306b\u542b\u307e\u308c\u3066\u3044\u308b\u30d3\u30eb\u30c9\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001\u672c\u756a\u7528\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u6700\u521d\u306b\u3001\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3067\u3042\u308b\u300cyour_project\u300d\u306b\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304b\u3089\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u30bf\u30fc\u30df\u30ca\u30eb\u307e\u305f\u306f\u30b3\u30de\u30f3\u30c9\u30d7\u30ed\u30f3\u30d7\u30c8\u306b\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u3042\u306a\u305f\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8 (Anata no purojekuto)<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">npm<\/span> run build<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<div class=\"secondary-code-label\" title=\"Output\">Output<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u276f npm run build &gt; your_project@1.0.0 build &gt; parcel build \u2728 Built in 767ms public\/index.html 781 B 239ms public\/index.9daf4050.css 582 B 21ms public\/index.a9c94235.js 532 B 179ms<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u4e0a\u8a18\u306e\u901a\u308a\u3001Parcel\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u51fa\u529b\u5148\u306fdist\u30d5\u30a9\u30eb\u30c0\u3067\u3059\u3002\u30d3\u30eb\u30c9\u30b9\u30af\u30ea\u30d7\u30c8\u3067\u30d5\u30a1\u30a4\u30eb\u306e\u51fa\u529b\u5148\u3092public\u3068\u6307\u5b9a\u3057\u305f\u305f\u3081\u3001Parcel\u306f\u3053\u306e\u30d5\u30a9\u30eb\u30c0\u3092\u751f\u6210\u3057\u3066\u3001\u672c\u756a\u7528\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u51fa\u529b\u3057\u307e\u3059\u3002\u958b\u767a\u6642\u3068\u306f\u7570\u306a\u308a\u3001\u3053\u306e\u30d5\u30a9\u30eb\u30c0\u306b\u3042\u308b\u30d5\u30a1\u30a4\u30eb\u306f\u30de\u30fc\u30b8\u3055\u308c\u3001\u6700\u5c0f\u5316\u3055\u308c\u3001\u3055\u3089\u306b\u6700\u9069\u5316\u3055\u308c\u3066\u3044\u307e\u3059\u3002Parcel\u304c\u30b3\u30fc\u30c9\u3092\u6700\u9069\u5316\u3059\u308b\u65b9\u6cd5\u3084\u672c\u756a\u7528\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u3064\u3044\u3066\u306f\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3067\u8a73\u3057\u304f\u8aac\u660e\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u4f8b\u3048\u3070\u3001public\/index.html\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u3051\u3070\u3001\u30b3\u30fc\u30c9\u306f\u30df\u30cb\u30d5\u30a1\u30a4\u3055\u308c\u3066\u3044\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<div>\u3042\u306a\u305f\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u516c\u958b\u30d5\u30a9\u30eb\u30c0\u5185\u306b\u3042\u308bindex.html\u30d5\u30a1\u30a4\u30eb<\/div>\n<pre class=\"post-pre\"><code><span class=\"token doctype\"><span class=\"token punctuation\">&lt;!<\/span><span class=\"token doctype-tag\">DOCTYPE<\/span> <span class=\"token name\">html<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>html<\/span> <span class=\"token attr-name\">lang<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>en<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta<\/span> <span class=\"token attr-name\">charset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>utf-8<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta<\/span> <span class=\"token attr-name\">http-equiv<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>X-UA-Compatible<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">content<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>IE=edge<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta<\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>viewport<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">content<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>width=device-width, initial-scale=1.0<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>stylesheet<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\/index.9daf4050.css<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>title<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Your Parcel Project<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>title<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>head<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>body<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Welcome to Parcel!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h1<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>sammy-wrapper<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>img-wrapper sammy-1<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/assets.digitalocean.com\/articles\/docker_node_image\/sammy.png<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Sammy the Shark<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Change the Background Color<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>module<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\/index.a9c94235.js<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>body<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>html<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<\/code><\/pre>\n<p>\u516c\u958b\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u3067\u306f\u3001dist\u30d5\u30a9\u30eb\u30c0\u3068\u540c\u69d8\u306b\u4f5c\u696d\u3092\u884c\u3044\u307e\u305b\u3093\u3002\u30b3\u30fc\u30c9\u3092\u5909\u66f4\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u306f\u3001src\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u76f4\u63a5\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>npm start\u30b3\u30de\u30f3\u30c9\u3068\u540c\u69d8\u306b\u3001\u5909\u66f4\u3092\u52a0\u3048\u305f\u5f8c\u306bnpm run build\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001\u30d7\u30ed\u30c0\u30af\u30b7\u30e7\u30f3\u30d5\u30a1\u30a4\u30eb\u3092\u518d\u69cb\u7bc9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u516c\u958b\u30d5\u30a9\u30eb\u30c0\u3068\u305d\u306e\u4e2d\u306b\u542b\u307e\u308c\u308b\u30d5\u30a1\u30a4\u30eb\u306f\u3001\u6e96\u5099\u304c\u6574\u3063\u305f\u6642\u70b9\u3067Web\u30b5\u30fc\u30d0\u30fc\u306b\u5c55\u958b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u73fe\u5728\u3001\u3042\u306a\u305f\u306fParcel\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3057\u3001\u30d0\u30f3\u30c9\u30eb\u5316\u3057\u307e\u3057\u305f\u3002<\/p>\n<h2>\u7d50\u8ad6<\/h2>\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3057\u3001\u305d\u308c\u3092Parcel\u3067\u30d0\u30f3\u30c9\u30eb\u3057\u307e\u3057\u305f\u3002\u307e\u305f\u3001\u958b\u767a\u7528\u304a\u3088\u3073\u672c\u756a\u7528\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b2\u3064\u306enpm\u30b9\u30af\u30ea\u30d7\u30c8\u3082\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002Parcel\u306b\u3064\u3044\u3066\u3055\u3089\u306b\u8a73\u3057\u304f\u5b66\u3073\u305f\u3044\u5834\u5408\u306f\u3001\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30c7\u30d7\u30ed\u30a4\u65b9\u6cd5\u3092\u5b66\u3073\u305f\u3044\u5834\u5408\u306f\u3001\u5f53\u793e\u306e\u30c7\u30b8\u30bf\u30eb\u30aa\u30fc\u30b7\u30e3\u30f3\u30a2\u30d7\u30ea\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3067\u3001\u9759\u7684\u30b5\u30a4\u30c8\u3092\u30af\u30e9\u30a6\u30c9\u306b\u30c7\u30d7\u30ed\u30a4\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u304a\u8aad\u307f\u304f\u3060\u3055\u3044\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u306f\u3058\u3081\u306b \u30b5\u30a4\u30c8\u3084\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u767a\u3059\u308b\u969b\u306b\u306f\u3001\u30b3\u30fc\u30c9\u3092\u5c0f\u3055\u306a\u3001\u7ba1\u7406\u3057\u3084\u3059\u3044\u30c1\u30e3\u30f3\u30af\u306b\u5206\u5272\u3059\u308b\u3053\u3068\u304c\u826f\u3044\u7fd2\u6163\u3067\u3059\u3002\u672c\u756a\u74b0\u5883\u3067\u306f\u3001\u500b\u3005\u306e\u30ea\u30bd\u30fc\u30b9\u3092\u500b\u5225\u306b\u8981\u6c42\u3059\u308b\u3053\u3068\u3067\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u9045\u304f\u306a\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002\u30d0 [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[26,61],"class_list":["post-209","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-26","tag-61"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Parcel.js\u3092\u4f7f\u3063\u3066\u3001Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Parcel.js\u3092\u4f7f\u3063\u3066Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js\u3092\u4f7f\u3063\u3066\u3001web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Parcel.js\u3092\u4f7f\u3063\u3066\u3001Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f\" \/>\n<meta property=\"og:description\" content=\"Parcel.js\u3092\u4f7f\u3063\u3066Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js\u3092\u4f7f\u3063\u3066\u3001web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-26T20:21:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-31T12:40:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/65646d6cdaa94e2bdf7b665a\/29-0.png\" \/>\n<meta name=\"author\" content=\"\u590f\u6a39, \u98a8\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u590f\u6a39, \u98a8\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"30\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b\/\",\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b\/\",\"name\":\"Parcel.js\u3092\u4f7f\u3063\u3066\u3001Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#website\"},\"datePublished\":\"2023-02-26T20:21:34+00:00\",\"dateModified\":\"2025-07-31T12:40:56+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/4e591db2661c4cc425470b461259391d\"},\"description\":\"Parcel.js\u3092\u4f7f\u3063\u3066Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/ja\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Parcel.js\u3092\u4f7f\u3063\u3066\u3001Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"ja\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/4e591db2661c4cc425470b461259391d\",\"name\":\"\u590f\u6a39, \u98a8\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/65e0ff40534461b1fa000382dc194e1716f793ab0bcb218ac3c40895551a08c5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/65e0ff40534461b1fa000382dc194e1716f793ab0bcb218ac3c40895551a08c5?s=96&d=mm&r=g\",\"caption\":\"\u590f\u6a39, \u98a8\"},\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/author\/natsukikaze\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Parcel.js\u3092\u4f7f\u3063\u3066\u3001Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f - Blog - Silicon Cloud","description":"Parcel.js\u3092\u4f7f\u3063\u3066Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js\u3092\u4f7f\u3063\u3066\u3001web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\/","og_locale":"ja_JP","og_type":"article","og_title":"Parcel.js\u3092\u4f7f\u3063\u3066\u3001Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f","og_description":"Parcel.js\u3092\u4f7f\u3063\u3066Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","og_url":"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js\u3092\u4f7f\u3063\u3066\u3001web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-02-26T20:21:34+00:00","article_modified_time":"2025-07-31T12:40:56+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/65646d6cdaa94e2bdf7b665a\/29-0.png"}],"author":"\u590f\u6a39, \u98a8","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"\u590f\u6a39, \u98a8","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"30\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b\/","url":"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b\/","name":"Parcel.js\u3092\u4f7f\u3063\u3066\u3001Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/#website"},"datePublished":"2023-02-26T20:21:34+00:00","dateModified":"2025-07-31T12:40:56+00:00","author":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/4e591db2661c4cc425470b461259391d"},"description":"Parcel.js\u3092\u4f7f\u3063\u3066Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/ja\/blog\/parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/ja\/blog\/"},{"@type":"ListItem","position":2,"name":"Parcel.js\u3092\u4f7f\u3063\u3066\u3001Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u65b9\u6cd5\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u304b\uff1f"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#website","url":"https:\/\/www.silicloud.com\/ja\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/4e591db2661c4cc425470b461259391d","name":"\u590f\u6a39, \u98a8","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/65e0ff40534461b1fa000382dc194e1716f793ab0bcb218ac3c40895551a08c5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/65e0ff40534461b1fa000382dc194e1716f793ab0bcb218ac3c40895551a08c5?s=96&d=mm&r=g","caption":"\u590f\u6a39, \u98a8"},"url":"https:\/\/www.silicloud.com\/ja\/blog\/author\/natsukikaze\/"},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.silicloud.com\/ja\/blog\/parcel-js%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81web%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%83%90%e3%83%b3%e3%83%89%e3%83%ab%e3%81%99%e3%82%8b\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/comments?post=209"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/209\/revisions"}],"predecessor-version":[{"id":37732,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/209\/revisions\/37732"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/media?parent=209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/categories?post=209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/tags?post=209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}