「JavaScriptの基礎や文法を身に着けたけど、これから何をしたらいいのか？」こんな思いをした方もいらっしゃるのではないでしょうか？
プログラミングの勉強というのは始めてはとても大変で、道筋が学校の授業のように用意されていません。ではどうするのか？
答えは、基本的には実際に「何か」を作ってみることです。
JavaScriptを使って開発する際は、HTMLファイルやJSファイルを作り、HTMLファイルに読み込ませることが基本です。しかし、現在はそれだけではなく、ライブラリやフレームワークを使用した開発やサーバーサイドの開発など、多岐にわたります。
そのような開発はただのJSのみではできません。そこで、今回はJavaScript中級編の足掛かりである、パッケージマネージャというものを解説していきます。
今回はNodeのパッケージマネージャであるnpmを使って解説をしていきます。
- JavaScriptを使った開発をやってみたい
- JavaScriptの基礎を身に着けた方
- 当ブログのJavaScript入門講座を一通りこなした方
- JavaScriptの基礎をやったけど、次に何をやればいいのかわからない方
npmを使ってライブラリをインストールしてみよう
概要
まず、そもそもnpmとは何なのか？
初学者の方でこれを知っていらっしゃる方は少ないのではないでしょうか。そもそも、JavaScriptは様々な技術に発展しているので、奥が深いものです。
npmとは、Node Package Managerの頭文字を取っているもので、Node.jsのモジュールを管理するシステムです。
Nodeは下記記事でも解説しておりますが、ターミナルでもJavaScriptを実行できるようにするための素晴らしいツールです。これによって、ブラウザでしか動作しないJavaScriptを実行できるようにしてくれるのです。
上記記事を参照していただいた方は、もうすでにNode JSとnpmがすでにインストールされていると思います。まだそこまで行けてない方は、まずは、JavaScriptを学んでみるといいでしょう。
npmを使うと、どう嬉しいの？
前節でnpmとNodeについて解説しました。
しかし、皆様の中には、「どうしてこんなものを使うのか？」，「これができたところで何になるのか？」と疑問を抱いた方もいらっしゃるかと思います。
そこで、このnpmを使うと何が作れるのか、例を挙げていきます。
- Webアプリケーション
- 高性能・高機能なHP
- デスクトップアプリケーション
- Webサーバ
npmを使うと、上記のようなことが簡単に行うことが可能になります。
JavaScript単体では足りないような機能をライブラリやフレームワークが補ってくれます。
そんなライブラリやフレームワークはバージョン管理であったり、ライブラリ同士が競合してしまうといったことが起きてしまいます。
それを、npmで管理することによって、インストール・アンインストールが容易になったり、競合関係を解消してくれるのです。なので、この先JavaScriptを使った開発はnpmがほぼ、必須になってきます。
ライブラリのインストール
では、実際にnpmのチュートリアルとして、ライブラリをプロジェクトにインストールしてみましょう。
任意の場所にディレクトリを作り、作った場所までターミナルで移動しましょう。
npm init -yそこでまずは上記のコマンドを入力してください。
これはこれから始めるプロジェクトを初期化します。
この時、ディレクトリに、新しくpackage.jsonファイルが生成されるはずです。package.jsonファイルを開いてみてください。
{
"name": "npmtest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}これが、生成されるファイルになります。
npmを使用するときは、常にこのファイルとにらめっこすることになります。
このファイルにはインストールしたライブラリやフレームワークが記述されていきます
npm install bootstrap
npm i bootstrap // 上記と同コマンド 短縮形それが終わりましたら、上記コマンドを実行してみましょう。上下、どちらか片方のみで結構です。
そうしますと、package.jsonは次のようになります。
{
"name": "npmtest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^5.1.3"
}
}package.jsonファイルに新たに追加されている行があります。そうです。
先ほどインストールした、ライブラリである “Bootstrap”が記述されています。
このように、package.jsonファイルにインストールしたものが入っているのかどうか、判断材料になりますので、常に確認する癖をつけておくと、後々便利になります。
npm uninstall bootstrap逆に、特定のライブラリをアンインストールしたい場合は、上記のコマンドを実行してください。
これで、先ほど記述されていたpackage.jsonファイルから、ライブラリが削除されていることがわかるかと思います。
まとめ
では、今回のまとめに入りましょう。
今回は下記のようなことを学びました。
- NodeJSの概要
- パッケージマネージャツール、npmの概要
- npmを使ったライブラリのインストール
今回はここまでとなります。
お疲れさまでした。
