8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【初心者向け】結局package.jsonって何なの?

Posted at

概要

難しい活字は読む気が起きずこれまで目をそらしていたpackage.jsonだが,いつまでもこのままではいけないのでしっかり理解してみようと思い,重い腰をあげて色々と調べてみた.自分と同じような駆け出しエンジニアの方たち向けに,自分が調べたことの共有ができればと思う.
何かご指摘等ありましたらコメントをいただけますと幸いです.

はじめに

package.jsonがなんたるかを理解するうえでNode.jsnpmの理解は必須であり,本記事もこの2つの知識を前提に書いていく.この2つをしっかり理解した上で読んで欲しい.分量が多くなりそうなので自分は書かない.
本記事ではpackage.jsonとはそもそも何なのか,どういった役割があるのか,どうやって作成するかの3点について書く.近いうちにpackage.jsonの中身については別途詳しくまとめる.

package.jsonとは

package.jsonを一言で表すならば,「アプリ開発の際に自分がインストールして使ったライブラリと同じライブラリを,他の開発者の人にも使ってもらうための情報が詰まったファイル」と自分は表したい(違和感を感じた先輩エンジニアの方がいらっしゃいましたらコメントください).
ここでいう情報とは,例えば使用したライブラリやそのバージョン,ライブラリの依存関係などである.依存関係は少し専門的な用語になるが,イメージとしては「餃子をつくるためには皮と中身が必要で,中身をつくるにはさらに野菜と肉が必要で...」というように,何かの実行に別の何かが依存している,そんな構造だと思ってもらえると良い.「あるライブラリを動かすためには別のライブラリが必要で,そのライブラリにはまた別のが必要で...」といった感じ.

package.jsonの恩恵

package.jsonの正体を書いたところで,「じゃああるとなんで良いの?」みたいな話をしていこうと思う.結論から言うと,npm installコマンドを使ってライブラリのインストールを行うことができることだ.これについて,少し遠回りだが噛み砕いた説明を試みる.
複数人で共同開発を行う際,使用したライブラリやそのバージョンなどが同じ環境で開発を行うことが望ましい.ライブラリが同じである必要性は自明だろうが,同じバージョンを使用する理由は,バージョンが変わるとコードの書き方などが変わる可能性があるからだ.これにより,他の人の開発時には動いていたコードが最新版になると動かなくなる,といったことが起こる可能性がある1
同じバージョンの同じライブラリを自分の開発環境で復元する必要があることがおわかりいただけたと思うが,他人が使ったライブラリ全てをバージョンまでそろえて自分の手で探してきて自分の環境に復元する(インストールする)のは時間も手間もかかるのであまり現実的でない.さらには先述したような依存関係もあるので尚更だ.
ここで,npm installコマンドが真価を発揮する.たった1行,このコマンドを叩くだけでpackage.jsonファイル内の情報を参照して,使用ライブラリやバージョン,依存関係まで全く同じものを一括でインストールしてくれる.だから,package.jsonは「お便利情報が詰まったファイル」だと自分は思う.

package.jsonの作成方法

コマンドを1行実行するだけ.超簡単.

$ npm init

これだけでpackage.jsonファイルは作成できる.ちなみに驚くほど余談だが,自分は素直な少年なので初めてコマンドを操作した時は$マークまで含めてコマンドに打ち込んだのだが,当然エラーが起こって憤慨した.この行はコマンドで実行する操作ですよっていうのを表すために慣習として$マークを使っているだけらしく,全く必要ないので自分の二の舞にならないで欲しい.
こんな話はさておき,上記コマンドを実行すると何やら小難しい英文がズラズラと出てくるが,package.jsonファイル内に書く情報の設定を行っているだけなので,作成したプロジェクトをパッケージとして公開するつもりが無ければ特に何もせずEnterキーを押し続けてもらって問題ない.そして最終的に以下のような画面になれば完了.Is this OK? 当然OKなので自信満々にEnterキーを押そう.

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (xxxxxx)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:¥Uses¥User¥Desktop¥test.qiita¥package.json:

{
    "name": "test.qiita",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo ¥"Error: no test specified¥" && exit 1"
    },
    "author": "",
    "license": "ISC"
}

Is this OK? (yes)

実際に他のコマンドとあわせて使ってみると,以下の感じ.

$ mkdir xxxxx  # xxxxxというディレクトリ(フォルダ)を作成
$ cd xxxxx     # 作成したディレクトリ(フォルダ)へ移動
$ npm init -y  # デフォルトの値でpackage.jsonを作成
$ npm install パッケージ名   # パッケージのインストール

-yはオプションと呼ばれるもので,これを付けることで実行したいコマンドに追加的な指示を与えることができる.今回の場合はデフォルトの値でという指示を追加した.このオプションによってEnterキーを連打した時と全く同じpackage.jsonファイルを作成できる.もちろん,お好みで連打の方を選んでもらっても構わない.

まとめ

本記事執筆のおかげで今まで理解しようと努めてこなかったpackage.jsonについて知る良い機会になったので良かった.周辺知識も少し増えたので,別の機会に書いてみたいと思う.これを読んでくれた駆け出しエンジニアの同士の皆さんがpackage.jsonについて少しでも理解が深まっていたら非常に嬉しい.

公式サイト

おススメ記事

今回の執筆にあたって拝読した記事の内,特にわかりやすくて他の人にもぜひ読んでいただきたいものをここに載せる.

  1. ちなみに,こうしたことを起こさないためにpackage.jsonファイルに加えてpackage-lock.jsonファイルというのも作成される.また話が複雑になるので,本記事では割愛する.

8
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?