Parcelをインストールする

今回は webpack などのツールは使いません。Parcel と言うものを使って作っていきます。

https://parceljs.org/

Parcel はエントリポイントに HTML を指定すると、そこから JavaScript のコードや CSS のコードを読み込んでいい感じにしてくれます。

設定ファイルを編集しなくていいのが売りで、webpack を使うとなると webpack.config.js みたいな設定ファイルを編集しなければなりません。

普段仕事をする場合は、細かい要件に対してアプローチしないといけないので webpack を使う人がほとんどだと思います。

似たところに gulp や grunt などが出てきますが、これらも今回は触れませんが実際の業務ではよく使われるので調べてみて使ってみるのもいいと思います！

ではParcel をインストールする前にプロジェクトをつくりましょう。

ターミナルを開いて以下のコマンドを実行してください。

shell
12
  
Copied!
$ mkdir react-music-app
$ cd react-music-app

mkdir はディレクトリ（フォルダ）を作成するコマンドです。

cd は指定されたディレクトリへと移動するコマンドです。

イメージでいうとフォルダを作って、その中をダブルクリックで開いた感じです。

ここからは yarn を使ってプロジェクトの設定をして行きます。

shell
1
 
Copied!
$ yarn init -y

このコマンドで、プロジェクトに package.json というファイルが作成されます。

この package.json は、JavaScript で書かれるプロジェクトではそのプロジェクトを管理する大事なファイルになります。

では Parcel をインストールしましょう。インストールには2種類有ります。ローカルにインストールするのと、グローバルにインストールする違いです。

ローカルにインストールするとこのプロジェクト外では Parcel コマンドは使えませんがグローバル環境を汚染しなくてすみます。

グローバルにインストールするとそこからでも Parcel というコマンドが使えるようになります。

個人的には、Parcel はまだ使われる頻度が低いことからローカルにインストールして使うことをオススメしています。では以下のコマンドを実行してparcelをローカルにインストールしましょう。

shell
1
 
Copied!
$ yarn add parcel

yarn では、 add というコマンドでパッケージをインストールできます。

Parcelは上記のURLに詳細が載っていますが、もし自分が使うライブラリがどんなものなのか知りたいときは「github <パッケージ名>」 や 「npm <パッケージ名>」 で検索すると公式のページがヒットすると思います。

以上で今回のパートは終了です。