{"data":{"site":{"siteMetadata":{"title":"bauhausify","siteUrl":"https://www.bauhausify.com","subtitle":"美大出身のWEBエンジニアリング奮闘記","descriptionMyself":"\n多摩美術大学<br>プロダクトデザイン専攻卒業 -> <br>GUIデザイン会社勤務 -><br>\n現在フロントエンジニア<br>\n<br>\nMy site -><br>\n<a href=\"http://www.mwrote.com\">www.mwrote.com</a>\n"}},"markdownRemark":{"id":"04cc99e4-2cc1-545c-af61-cfe82f4423bc","html":"<h2 id=\"簡単なnodejsの特徴\"><a href=\"#%E7%B0%A1%E5%8D%98%E3%81%AAnodejs%E3%81%AE%E7%89%B9%E5%BE%B4\" aria-label=\"簡単なnodejsの特徴 permalink\" class=\"gatsby-remark-autolink-headers-icon\"><svg width=\"22px\" height=\"7px\" viewBox=\"0 0 22 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"icon-link\" fill=\"#23282D\">\n            <path d=\"M14,1 C13.4477153,1 13,1.31979661 13,1.71428571 L13,5.28571429 C13,5.68020339 13.4477153,6 14,6 L20,6 C20.5522847,6 21,5.68020339 21,5.28571429 L21,1.71428571 C21,1.31979661 20.5522847,1 20,1 L14,1 Z M14,0 L20,0 C21.1045695,0 22,0.696445945 22,1.55555556 L22,5.44444444 C22,6.30355406 21.1045695,7 20,7 L14,7 C12.8954305,7 12,6.30355406 12,5.44444444 L12,1.55555556 C12,0.696445945 12.8954305,0 14,0 Z M12,2 L12,5 L13,5 L13,2 L12,2 Z\" id=\"Combined-Shape\" fill-rule=\"nonzero\"></path>\n            <path d=\"M2,1 C1.44771525,1 1,1.31979661 1,1.71428571 L1,5.28571429 C1,5.68020339 1.44771525,6 2,6 L8,6 C8.55228475,6 9,5.68020339 9,5.28571429 L9,1.71428571 C9,1.31979661 8.55228475,1 8,1 L2,1 Z M2,0 L8,0 C9.1045695,0 10,0.696445945 10,1.55555556 L10,5.44444444 C10,6.30355406 9.1045695,7 8,7 L2,7 C0.8954305,7 0,6.30355406 0,5.44444444 L0,1.55555556 C0,0.696445945 0.8954305,0 2,0 Z M9,2 L9,5 L10,5 L10,2 L9,2 Z\" id=\"Combined-Shape\" fill-rule=\"nonzero\"></path>\n            <rect id=\"Rectangle-2\" x=\"6\" y=\"3\" width=\"10\" height=\"1\"></rect>\n        </g>\n    </g>\n</svg></a>簡単なNode.jsの特徴</h2>\n<p>まずNode.jsの特徴を簡単におさらいしましょう。\nNode.jsの大きな特徴は2つあります。</p>\n<ul>\n<li>サーバーサイドでできることがJavaScriptでできる(ファイルの読み書き、サーバーの起動などなど)</li>\n<li>npmというパッケージ管理ツールで世界中の人のコードが使える</li>\n</ul>\n<p>Node.jsとは一言でいうとサーバーサイドJavaScript環境です。<br>\n今までクライアントサイドでしか動かなかったJavaScriptですが、Webサーバーやファイル操作など、Java、Ruby、Python、PHPなどの言語でしかできなかった領域に足を踏み入れることができるようになりました。<br>\nそして、強力な<code class=\"language-text\">npm</code>というJavaScriptのパッケージ管理ツールがあり、世界中のプロフェッショナルが作成したコードを簡単に使えます。<br>\nもしすでにNode.jsをインストールされている場合は、<a href=\"/2019-09-24_%E6%97%A5%E5%B8%B8%E7%9A%84%E3%81%AB%E4%BD%BF%E3%81%86%E3%82%B7%E3%83%BC%E3%83%B3%E5%88%A5Node-js%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%88%E3%82%99%E9%9B%86/\">次の記事</a>でよく使うコマンドをまとめているのでご覧ください。</p>\n<h2 id=\"事前にインストールすること\"><a href=\"#%E4%BA%8B%E5%89%8D%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8\" aria-label=\"事前にインストールすること permalink\" class=\"gatsby-remark-autolink-headers-icon\"><svg width=\"22px\" height=\"7px\" viewBox=\"0 0 22 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"icon-link\" fill=\"#23282D\">\n            <path d=\"M14,1 C13.4477153,1 13,1.31979661 13,1.71428571 L13,5.28571429 C13,5.68020339 13.4477153,6 14,6 L20,6 C20.5522847,6 21,5.68020339 21,5.28571429 L21,1.71428571 C21,1.31979661 20.5522847,1 20,1 L14,1 Z M14,0 L20,0 C21.1045695,0 22,0.696445945 22,1.55555556 L22,5.44444444 C22,6.30355406 21.1045695,7 20,7 L14,7 C12.8954305,7 12,6.30355406 12,5.44444444 L12,1.55555556 C12,0.696445945 12.8954305,0 14,0 Z M12,2 L12,5 L13,5 L13,2 L12,2 Z\" id=\"Combined-Shape\" fill-rule=\"nonzero\"></path>\n            <path d=\"M2,1 C1.44771525,1 1,1.31979661 1,1.71428571 L1,5.28571429 C1,5.68020339 1.44771525,6 2,6 L8,6 C8.55228475,6 9,5.68020339 9,5.28571429 L9,1.71428571 C9,1.31979661 8.55228475,1 8,1 L2,1 Z M2,0 L8,0 C9.1045695,0 10,0.696445945 10,1.55555556 L10,5.44444444 C10,6.30355406 9.1045695,7 8,7 L2,7 C0.8954305,7 0,6.30355406 0,5.44444444 L0,1.55555556 C0,0.696445945 0.8954305,0 2,0 Z M9,2 L9,5 L10,5 L10,2 L9,2 Z\" id=\"Combined-Shape\" fill-rule=\"nonzero\"></path>\n            <rect id=\"Rectangle-2\" x=\"6\" y=\"3\" width=\"10\" height=\"1\"></rect>\n        </g>\n    </g>\n</svg></a>事前にインストールすること</h2>\n<p>では早速必要なツールをインストールしていきます。<br>\n使いたいのはNode.jsだけなのですが、はじめにインストールしておいたほうがいいツールも合わせてご紹介します。<br>\n大きく以下の２つをインストールします。</p>\n<ul>\n<li>Homebrew</li>\n<li>Node.jsバージョン管理ツール</li>\n</ul>\n<h2 id=\"homebrewのインストール\"><a href=\"#homebrew%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB\" aria-label=\"homebrewのインストール permalink\" class=\"gatsby-remark-autolink-headers-icon\"><svg width=\"22px\" height=\"7px\" viewBox=\"0 0 22 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"icon-link\" fill=\"#23282D\">\n            <path d=\"M14,1 C13.4477153,1 13,1.31979661 13,1.71428571 L13,5.28571429 C13,5.68020339 13.4477153,6 14,6 L20,6 C20.5522847,6 21,5.68020339 21,5.28571429 L21,1.71428571 C21,1.31979661 20.5522847,1 20,1 L14,1 Z M14,0 L20,0 C21.1045695,0 22,0.696445945 22,1.55555556 L22,5.44444444 C22,6.30355406 21.1045695,7 20,7 L14,7 C12.8954305,7 12,6.30355406 12,5.44444444 L12,1.55555556 C12,0.696445945 12.8954305,0 14,0 Z M12,2 L12,5 L13,5 L13,2 L12,2 Z\" id=\"Combined-Shape\" fill-rule=\"nonzero\"></path>\n            <path d=\"M2,1 C1.44771525,1 1,1.31979661 1,1.71428571 L1,5.28571429 C1,5.68020339 1.44771525,6 2,6 L8,6 C8.55228475,6 9,5.68020339 9,5.28571429 L9,1.71428571 C9,1.31979661 8.55228475,1 8,1 L2,1 Z M2,0 L8,0 C9.1045695,0 10,0.696445945 10,1.55555556 L10,5.44444444 C10,6.30355406 9.1045695,7 8,7 L2,7 C0.8954305,7 0,6.30355406 0,5.44444444 L0,1.55555556 C0,0.696445945 0.8954305,0 2,0 Z M9,2 L9,5 L10,5 L10,2 L9,2 Z\" id=\"Combined-Shape\" fill-rule=\"nonzero\"></path>\n            <rect id=\"Rectangle-2\" x=\"6\" y=\"3\" width=\"10\" height=\"1\"></rect>\n        </g>\n    </g>\n</svg></a>Homebrewのインストール</h2>\n<p><a href=\"https://brew.sh/index_ja\" target=\"_blank\" rel=\"noopener noreferrer\">Homebrew</a>とは、Terminalなどのコマンドラインから、コマンドラインツールやMacAppを管理するツールです。<br>\nエンジニアならただちにインストールしましょう。<br>\nツールやアプリは、その提供元により様々なインストール方法がありますが、それらをすべて<code class=\"language-text\">brew install &lt;パッケージ名></code>というコマンドで統一できます。<br>\nアプリをインストールする場合は<code class=\"language-text\">brew cask install &lt;アプリ名></code>というように<code class=\"language-text\">brew</code>のあとに<code class=\"language-text\">cask</code>を追加します。</p>\n<p>インストールは、<a href=\"https://brew.sh/index_ja\" target=\"_blank\" rel=\"noopener noreferrer\">公式サイト</a>にも記載されている以下のコマンドをTerminalに貼り付けEnterキーで実行します。<br></p>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\">/usr/bin/ruby <span class=\"token parameter variable\">-e</span> <span class=\"token string\">\"<span class=\"token variable\"><span class=\"token variable\">$(</span><span class=\"token function\">curl</span> <span class=\"token parameter variable\">-fsSL</span> https://raw.githubusercontent.com/Homebrew/install/master/install<span class=\"token variable\">)</span></span>\"</span></code></pre></div>\n<h2 id=\"nodejsバージョン管理ツールのインストール\"><a href=\"#nodejs%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86%E3%83%84%E3%83%BC%E3%83%AB%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB\" aria-label=\"nodejsバージョン管理ツールのインストール permalink\" class=\"gatsby-remark-autolink-headers-icon\"><svg width=\"22px\" height=\"7px\" viewBox=\"0 0 22 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"icon-link\" fill=\"#23282D\">\n            <path d=\"M14,1 C13.4477153,1 13,1.31979661 13,1.71428571 L13,5.28571429 C13,5.68020339 13.4477153,6 14,6 L20,6 C20.5522847,6 21,5.68020339 21,5.28571429 L21,1.71428571 C21,1.31979661 20.5522847,1 20,1 L14,1 Z M14,0 L20,0 C21.1045695,0 22,0.696445945 22,1.55555556 L22,5.44444444 C22,6.30355406 21.1045695,7 20,7 L14,7 C12.8954305,7 12,6.30355406 12,5.44444444 L12,1.55555556 C12,0.696445945 12.8954305,0 14,0 Z M12,2 L12,5 L13,5 L13,2 L12,2 Z\" id=\"Combined-Shape\" fill-rule=\"nonzero\"></path>\n            <path d=\"M2,1 C1.44771525,1 1,1.31979661 1,1.71428571 L1,5.28571429 C1,5.68020339 1.44771525,6 2,6 L8,6 C8.55228475,6 9,5.68020339 9,5.28571429 L9,1.71428571 C9,1.31979661 8.55228475,1 8,1 L2,1 Z M2,0 L8,0 C9.1045695,0 10,0.696445945 10,1.55555556 L10,5.44444444 C10,6.30355406 9.1045695,7 8,7 L2,7 C0.8954305,7 0,6.30355406 0,5.44444444 L0,1.55555556 C0,0.696445945 0.8954305,0 2,0 Z M9,2 L9,5 L10,5 L10,2 L9,2 Z\" id=\"Combined-Shape\" fill-rule=\"nonzero\"></path>\n            <rect id=\"Rectangle-2\" x=\"6\" y=\"3\" width=\"10\" height=\"1\"></rect>\n        </g>\n    </g>\n</svg></a>Node.jsバージョン管理ツールのインストール</h2>\n<p>Node.jsは<a href=\"https://nodejs.org/ja/\" target=\"_blank\" rel=\"noopener noreferrer\">公式サイトにかかれているインストール方法</a>ではなく、バージョン管理ツールからインストールする方法をおすすめします。<br>\n公式の方法は、1つのバージョンしかインストールできないので、複数プロジェクトを横断していると、バージョンを変えないと動かないことが多々あり、その際に都度アンインストールとインストールを繰り返すのは手間です。<br></p>\n<p>おすすめは<a href=\"https://github.com/nodenv/nodenv\" target=\"_blank\" rel=\"noopener noreferrer\">nodenv</a>ですが、他にもRubyやPythonなどのバージョンも管理したい場合は<a href=\"https://github.com/anyenv/anyenv\" target=\"_blank\" rel=\"noopener noreferrer\">anyenv</a>からインストールすることをおすすめします。<br></p>\n<p>nodenvのいいところは、プロジェクトごとに使うバージョンを指定でき、バージョンを手動で変える手間すら不要なところです。anyenvはnodejsだけでなく多言語のバージョン管理ツールもまとめて管理できる1つ上のレイヤーのツールです。</p>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\">brew <span class=\"token function\">install</span> anyenv\nanyenv init</code></pre></div>\n<p>~/.bash_profile(or ~/.zshrc)に<code class=\"language-text\">eval \"$(anyenv init -)\"</code>を記述します。</p>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\"><span class=\"token comment\"># Terminal再起動</span>\nanyenv <span class=\"token function\">install</span> <span class=\"token parameter variable\">--init</span>\nanyenv <span class=\"token function\">install</span> nodenv</code></pre></div>\n<p>これでnodenvがインストールされました。<br></p>\n<h2 id=\"nodejsのインストール\"><a href=\"#nodejs%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB\" aria-label=\"nodejsのインストール permalink\" class=\"gatsby-remark-autolink-headers-icon\"><svg width=\"22px\" height=\"7px\" viewBox=\"0 0 22 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"icon-link\" fill=\"#23282D\">\n            <path d=\"M14,1 C13.4477153,1 13,1.31979661 13,1.71428571 L13,5.28571429 C13,5.68020339 13.4477153,6 14,6 L20,6 C20.5522847,6 21,5.68020339 21,5.28571429 L21,1.71428571 C21,1.31979661 20.5522847,1 20,1 L14,1 Z M14,0 L20,0 C21.1045695,0 22,0.696445945 22,1.55555556 L22,5.44444444 C22,6.30355406 21.1045695,7 20,7 L14,7 C12.8954305,7 12,6.30355406 12,5.44444444 L12,1.55555556 C12,0.696445945 12.8954305,0 14,0 Z M12,2 L12,5 L13,5 L13,2 L12,2 Z\" id=\"Combined-Shape\" fill-rule=\"nonzero\"></path>\n            <path d=\"M2,1 C1.44771525,1 1,1.31979661 1,1.71428571 L1,5.28571429 C1,5.68020339 1.44771525,6 2,6 L8,6 C8.55228475,6 9,5.68020339 9,5.28571429 L9,1.71428571 C9,1.31979661 8.55228475,1 8,1 L2,1 Z M2,0 L8,0 C9.1045695,0 10,0.696445945 10,1.55555556 L10,5.44444444 C10,6.30355406 9.1045695,7 8,7 L2,7 C0.8954305,7 0,6.30355406 0,5.44444444 L0,1.55555556 C0,0.696445945 0.8954305,0 2,0 Z M9,2 L9,5 L10,5 L10,2 L9,2 Z\" id=\"Combined-Shape\" fill-rule=\"nonzero\"></path>\n            <rect id=\"Rectangle-2\" x=\"6\" y=\"3\" width=\"10\" height=\"1\"></rect>\n        </g>\n    </g>\n</svg></a>Node.jsのインストール</h2>\n<p>それでは最新バージョンのNode.jsをインストールしましょう。<br></p>\n<p><code class=\"language-text\">nodenv install -l</code>を実行すると、インストール可能なバージョンがすべて表示されます。<br>\nこの中から数字で始まる最新バージョンを調べます。<br>\nそして、以下を実行します。</p>\n<div class=\"gatsby-code-title gatsby-remark-code-titles\">最新バージョンが11.10.0の場合</div>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\">nodenv <span class=\"token function\">install</span> <span class=\"token number\">11.10</span>.0</code></pre></div>\n<p>これでインストール完了です。<br>\n<code class=\"language-text\">node --version</code>を実行し、インストールしたバージョンが表示されれば成功です。</p>\n<p>次回は、実際に業務でよく使うNode.jsのコマンドたちを紹介したいと思います。</p>","fields":{"slug":"/2019-09-20_2019年版Node-jsのおすすめインストール方法/"},"tableOfContents":"<ul>\n<li><a href=\"/2019-09-20_2019%E5%B9%B4%E7%89%88Node-js%E3%81%AE%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95/#%E7%B0%A1%E5%8D%98%E3%81%AAnodejs%E3%81%AE%E7%89%B9%E5%BE%B4\">簡単なNode.jsの特徴</a></li>\n<li><a href=\"/2019-09-20_2019%E5%B9%B4%E7%89%88Node-js%E3%81%AE%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95/#%E4%BA%8B%E5%89%8D%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8\">事前にインストールすること</a></li>\n<li><a href=\"/2019-09-20_2019%E5%B9%B4%E7%89%88Node-js%E3%81%AE%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95/#homebrew%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB\">Homebrewのインストール</a></li>\n<li><a href=\"/2019-09-20_2019%E5%B9%B4%E7%89%88Node-js%E3%81%AE%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95/#nodejs%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86%E3%83%84%E3%83%BC%E3%83%AB%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB\">Node.jsバージョン管理ツールのインストール</a></li>\n<li><a href=\"/2019-09-20_2019%E5%B9%B4%E7%89%88Node-js%E3%81%AE%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95/#nodejs%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB\">Node.jsのインストール</a></li>\n</ul>","frontmatter":{"date":"2019.09.20","title":"2019年版Node-jsのおすすめインストール方法","cover":"","category":"Coding","excerpt":"Macをお使いの人向けに、Node.jsのインストールする際の便利なツールの紹介とおすすめのインストール方法をご紹介します。"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"04cc99e4-2cc1-545c-af61-cfe82f4423bc","next":{"path":"/2019-09-17_p5-jsをreactのコンポーネントとして実行する方法/","title":"p5.jsをReactのコンポーネントとして実行する方法","category":"Coding"},"prev":{"path":"/2019-09-24_日常的に使うシーン別Node-jsコマンド集/","title":"日常的に使うシーン別Node.jsコマンド集","category":"Coding"},"relatedPosts":[{"id":"da4c68b8-f75b-5fb4-b43b-3758f33a3dcb","fields":{"slug":"/2019-09-24_日常的に使うシーン別Node-jsコマンド集/"},"frontmatter":{"title":"日常的に使うシーン別Node.jsコマンド集","date":"2019-09-24T00:00:00.000Z","excerpt":"Macをお使いの人向けに、日常的に使っているNode.jsのコマンドや使い方をシーン別にご紹介します。","templateKey":"post","category":"Coding","propertags":["nodejs"],"commontags":["command","javascript"]}}]}}