こんにちは。突然Reactを触ることになってなんとか頑張っているほぼ開発未経験な人です。

前回はパッケージ管理システムであるnpmについて学んで無事React開発の環境周りのことはできるようになりました。

今回はもう一つのパッケージ管理システムであるyarnを学んでみようと思います。使用する環境は今回もEnvaderです。

前回の記事はこちら

yarnとは

meta(Facebook）社が開発。
後発だからかnpmと比較していくらか早くnpmとも互換性あり。
インストール時にチェックサムを用いてパッケージ管理するのでセキュリティが高いのが特徴。
バージョン管理にも優れているとのこと。

yarnの特徴をnpmも取り入れてきており実際はそれほどの差異はないと言われている模様。

yarnのインストール

とりあえずインストールしてみます。インストールにはnpmを使用します。
なんだかChromeインストールするための某ブラウザの扱いのようですが……。

sudo npm install -g yarn
#バージョン確認
yarn -v

`-g`はグローバルインストールのオプションです。ローカルインストールする場合は不要です。

まずは初期化

以下のコマンドでパッケージの依存関係を記述するpackage.jsonを作成します。

yarn init -y

`-y`オプションは選択肢でいちいちEnter押すのがめんどくさい場合に使用します。慎重にやりたい場合は外しましょう。

パッケージの追加

パッケージのインストールはバージョン指定することも出来ます。

yarn add パッケージ名
#axiosのバージョン0.22.0をインストールする
yarn add axios@~0.22.0
#eslintを開発環境にのみインストールする
yarn add eslint -D

また、`-D`オプションを使用することで開発時のみ使う環境にインストールすることが出来ます。

パッケージの削除

yarn remove 削除するパッケージ名

パッケージのアップグレード

古いパッケージを更新するコマンド

yarn upgrade
#--latestオプションを付けるとバージョン指定をスルーしてとにかく最新版になります
yarn upgrade --latest

パッケージを更新したら

再構築をするために以下のコマンドを入力します。

yarn

これだけです。`yarn install`としても良いですが短いほうがいいですよね。

プロジェクトの起動

yarn start

以上がざっくりとした使い方の説明です。確かにnpmとそんなに遜色はないように思えます。

Envaderのハンズオン環境でaxiosのインストールやプロジェクトの起動方法を試してみました。
プロジェクトを起動してみる問題では、そのままstartコマンドを実施してもパッケージが不足しているため起動できません。

出力されたメッセージを良く読むと不足しているパッケージがわかるのでそれをインストールしてからstartコマンドを実施すると正常に起動します。

学んだこと

パッケージ管理システム（パッケージマネージャ）の役割が前回に引き続きなんとなくわかりました。
また、yarnの方が機能が上そうなので使おうかなと思いましたが現在の開発環境がnpmのため自分でReactプロジェクトを作る際に使ってみようと思います。

参考にしたサイト