1.まずnpmを準備する
フロントエンドの海を泳ぐクラゲです。
フロントエンドの海を泳ぐとき、
まず何から・・・というと
ともかくnpmとwebpackですかね。
いまさらクラゲごときが説明するものでもないのですが。
npmは、フロントエンド開発で必要となってくる
各パッケージの管理システムです。
Node Package Managerの略。
npmで開発環境整えて、webpackでバンドルして
ローカルサーバー立ち上げて開発する。
実際の仕事では、DB周りの処理はサーバー側(JavaやPHP)なんかで行って
APIつくってフロント側に返す。
とか、そんなことしますがこのブログでは
サーバー側については触れないです。
データ関連は必要になったらJSONで用意しようかな、くらいでいます。
ここでは、npm、webpakの環境構築からメモしていきます！
一応さらっと説明しましたが、
それでもnpmって結局なにそれ？
となったら、これを一読されるがよろしいかと。
webpackの説明はこちら。
おさらいのために、この方のブログを読んでたのですが
npmのインストール省いたところからのスタートだったので
ここではnpmのインストールからはじめていきたいと思います！
なお、OSはwindowsです。
クラゲには、Apple社製品はなぜか相性が悪く
あのヌルヌルのシャレた動きがどうしてもダメなので
windowsでの開発前提でいきます！
ブラウザはchromeです。
１．npmのインストール
npmは、node.jsのパッケージマネージャー。
なのでnode.jsをインストールするとnpmが使えるようになります。
なので、公式サイトから最新版をダウンロード
2022.03.12現在の最新版は17.7.1でした。
が、クラゲは現実主義なので安定版の16.14.0を選びました。
最新版だと他のライブラリとのverの兼ね合いが…など
問題がありそうなので。
まあ、大した開発しないから問題ないとは思いますが
安定志向でいきます。
windows用のインストール版なのでダウンロードしたらそのまま実行。
基本はデフォルトの選択肢でNextしていきましょう。
ライセンス規約の同意…チェックしてNext。
インストールしたい場所を変えたい場合は、Changeでフォルダ選んでください。
クラゲはデフォルトのままでよいのでNext。
これはnode.jsに詳しく、自分にとって何が必要で何が不要か
分かっている場合にカスタムしてください。
よく分からなければデフォルトのままNext。
いきなり長文の英語だ！
翻訳を、下に置いときます。
基本的にこのままチェックなしでNext。でいいです。
※必要ならあとでgithubからインストールできるらしいので。
翻訳
ネイティブモジュール用ツール
オプションで、ネイティブ・モジュールをコンパイルするために必要なツールをインストールします。
npmモジュールの中には、インストール時にC/C++からコンパイルする必要があるものがあります。そのようなモジュールをインストールする場合は、いくつかのツール（PythonとVisual Studio Build Tools）をインストールする必要があります。
必要なツールを自動でインストールします。ただし、Chocolateyもインストールされます。インストールが完了すると、スクリプトが新しいウィンドウでポップアップします。
また、
https://github.com/nodejs/node-gyp#on-windows
の説明に従って、自分でインストールすることもできます。
ようやくインストールにたどり着いたので、Installしちゃいましょう！
※途中、windowsからインストールしてよいかの確認が入るのでOKで。
インストールが終わったら、Finishで閉じます。
ここまでは特に問題はないかと思うのでスムーズにいけるかな。
次はさっそくnpmを動かしてみます！
コマンドプロンプトを起動しましょう。
ちなみに、今回は開発用のカレントディレクトリで開発環境を構築していくので、カレントディレクトリに移動しておきます。
npmをインストールするとき、グローバル(-g)かローカルにインストールするかという選択肢が出てきますが、
特に事情がないかぎりはローカルでのインストールが推奨されてるようです。
クラゲは、以下に開発フォルダを用意しました。
c:\work\90_開発
エクスプローラーのアドレスバーで、"cmd"と打ってコマンドプロンプトを起動。
あらかじめ移動してからプロンプト起動すると、コマンド"cd"でフォルダ移動しなくていいのでクラゲはエクスプローラーから起動する派です。
"node -v"と打って、インストールしたバージョンが表示されればOK。
２．package.jsonの設定
Node.jsをインストールすると、npmコマンドも一緒にインストールされます。
じゃあさっそく使おう！ …と思ったら、
npmでプロジェクトを管理するにはpackage.jsonが必要なんですよね。
このpackage.jsonにnpmが管理するモジュール類が記録されるので、他のPCで同じ環境を構築するときに役立ちます！
package.jsonの設定のしかたは以下。
"npm init"コマンドを実行
すると、以下のような文が表示されます。
ざっくり訳すと
これからpackage.json作るよ！
その手順を説明するけど面倒なら、"Ctrl + C"で終了してね。
ということです。
最後の行で、"package name:"と聞かれてるのでこれから作成するプロジェクトの名前を入力してください。
ここでは、"sample"にしておきます。
package nameだけ入力したらあとはenterで飛ばしてOKです。
デフォルト値が設定されて{ }で囲われてる内容で、package.jsonが作成されます。
OKか聞かれてるので"OK"と打とうとして、"yes"と打ちました。
ひとまず、これでnpmが使えるようになりました。
ここからnpmを使って各モジュールを取得して環境構築に進むのですが
長くなったのでいったんここで終わりにします。
また、クラゲはVueでの開発がメインとなることが多いため
Vueの環境構築となります。
React、Angularでの開発をしたい方は別途検索してください。
では、次回！
