npmの基本についてまとめた | 初心者向け

JavaScript

npmとは

Node Package Manager

Node Package Managerの略です。NodeはJavascriptの開発者達の間で、モジュールを共有したり、モジュールの依存関係を管理するのに使われていました。npmについて簡単にまとめると

  • Javascriptで書かれたツールをインターネット上で不特定多数の人々に向けて公開できる
  • コマンドラインであり、プロジェクトを実行するために公開されているツールのパージョンを管理する

といったようなものです。

Node.jsをローカルにインストール

Node.jsがローカルにインストールされている場合、次のようにコマンドを打つとnode.jsのバージョンを確認することができます。

❯ node -v
v12.12.0

Node.jsがインストールされているかどうかは次のコマンドで確認できます。

❯ npm -v
6.11.3

package.jsonとは

パッケージを使うためには必須なファイル

公開されているパッケージを使うにはpackage.jsonと呼ばれるファイルを生成しなくてはいけません。このファイルには次の項目を記載します。

  • モジュール名:name
  • モジュールのバージョン:version
  • モジュールを公開するかどうか:private
  • モジュールの詳細:description
  • 最初に読み込むファイル:main
  • コマンドのエイリアス:scripts
  • ソースコードが管理されている場所:repository
  • 作成者:author
  • 依存するモジュールとそのバージョン:dependencies
  • 公開するモジュールが必要なモジュールを定義:devDependencies

これらの項目からpackage.jsonは構成されます。(記載していない項目もありますが)

実際に使っているpackage.jsonのファイルを持ってくると、次のようになります。

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve:dev": "vue-cli-service serve --mode development",
    "serve:stg": "vue-cli-service serve --mode staging",
    "serve:prd": "vue-cli-service serve --mode production",
    "build:dev": "vue-cli-service build --mode development",
    "build:stg": "vue-cli-service build --mode staging",
    "build:prd": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service test:unit"
  },
  "dependencies": {
    "@babel/preset-env": "^7.6.3",
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "material-design-icons-iconfont": "~5.0.1",
    "mavon-editor": "^2.7.7",
    "vue": "^2.6.10",
    "vue-analytics": "^5.22.1",
    "vue-head": "^2.2.0",
    "vue-markdown": "^2.2.4",
    "vue-router": "^3.1.2",
    "vue-scrollto": "^2.17.1",
    "vuetify": "^2.0.0",
    "vuetify-dialog": "^0.4.0-beta.2",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.5",
    "@mdi/font": "~3.8.95",
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-plugin-unit-jest": "^4.0.5",
    "@vue/cli-service": "^3.9.0",
    "@vue/test-utils": "^1.0.0-beta.29",
    "ajv": "~6.10.2",
    "axios-mock-adapter": "^1.17.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.9.0",
  },
}

devDependencies

devDependenciesに書くモジュールは自分自身のモジュールが外部ライブラリとして使用される場合はnpm install を叩いた時にインストールされません。自分自身のプロジェクト起点でnpm installを叩いたときには書かれているモジュールはインストールされます。

番外:おすすめアイテム

記事の内容とは別に自宅・オフィスでの開発がもっと快適に、楽しくなる商品を紹介します。アイテム1つで開発効率が一気に向上したり、開発のモチベーションが上がったりするので良いアイテムにはお金を投資すると良いかと。

KATUO
KATUO
今回紹介する商品は普段自分が使っているものなので自信を持ってお勧めできますー。では1つずつ紹介していきます。

おすすめアイテム①

自分はオフィス次の2点の座布団と背もたれクッションを利用してます。姿勢が安定し、お尻への負担が激減します。オフィスにいるのに自宅で作業しているような感覚になるので気に入ってます。また疲労感もかなり減るので費用対効果が非常に高いアイテムです。

おすすめアイテム②

ブックスタンドみなさん使ってますか?PCを打ちながら参考書見る時に手で抑える必要がなくなるので非常に便利です。自分も購入した時なんでいままで使ってなかたんだろうと後悔したのでまだ持ってない方は買っておくと作業効率があがります。

おすすめアイテム③

PCスタンド、magic keyboard、magic mouseを購入してから、開発効率があがり、身体的負担が減って快適に開発ができるようになりました。

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。初心者には最低限読んでおいて欲しい技術本をまとめました。例えば「リーダブルコード」などは技術力の高いエンジニアなら必ず過去に読んでいる本だと思います。

筆者
筆者

今回の記事の内容は以上で終了です!最後まで読んでくれてありがとうございました!Twitterもやってるのでよかったらフォローしてください!

タイトルとURLをコピーしました