LCL Engineers' Blog

バス比較なび・格安移動・バスとりっぷを運営する LCLの開発者ブログ

Node.jsを10.13.0へバージョンアップしました

Node.js フロントエンド

フロントエンドエンジニアの岡田です。

今年の私のブログの目標は、「技術的な話を月に1本は書く」です。
昨年の記事を振り返ってみると、私が書いた話の半分くらいは技術以外の話でした。 チームの雰囲気をお伝えするのも大切ですが、LCLでは新しい技術を積極的に取り入れて日々改善しています。 2019年は、このことをもっと伝えていきたいと思っています。 今年もどうぞよろしくお願いいたします。

ということで、2019年1本目は、昨年末に行ったNode.jsバージョンアップについてお伝えします。

なぜバージョンアップを行ったか

バージョンアップをする前には、Node.js v6.9.1を使っていました。 v8.xがすでにLTS（Long Term Support）になっているのはしばらく前に知っていたのですが、以下の理由でバージョンアップしていませんでした。

ただ、v6.9.1は今年（2019年）の4月にはサポートが終了してしまいます。 そのため、v10.xがLTSになったタイミングで、バージョンアップをしました。

Node.jsのバージョンアップと併せて行ったこと

Node.jsのバージョンアップと同時に、ローカルのバージョン管理をnodebrew→nodenvへ変更しました。
nodenvにすると、リポジトリごとにNode.jsのバージョンが設定できて、自動で切り替わるので便利です。

ちなみに、ndenvという似た名前のバージョン管理もあります。 こちらもリポジトリごとにNode.jsのバージョンが設定できるようですが、別のツールです。

バージョンアップ手順

ローカル環境

まずは、ローカル環境をバージョンアップしました。

nodenvのインストール

インストールは、以下の記事を参考にさせていただきました。
nodenv を使って Mac に Node.js の環境を構築する - Qiita

Node.jsバージョンを指定

nodenv install 10.13.0
nodenv local 10.13.0

.node-versionをコミット

nodenvでは、使用するバージョンが.node-versionに記載されます。 開発・本番環境（ローカル以外）ではすでにnodenvを使っていましたが、今まではGit管理していなかったので、今回からコミットすることにしました。

npmパッケージのインストール

npm install
npm run build

途中でnode-sassのエラーが出たので、rebuildしました。

npm rebuild node-sass

package-lock.jsonをコミット

npmのバージョンも6.4.1に上がったため、package-lock.jsonができるようになりました。 こちらもGitへコミットします。

開発・本番環境

開発・本番環境（ローカル以外）では、すでにnodenvを使っていたので、以下の手順で行いました。

Node.jsのバージョンを決めた時点で、開発環境・本番環境に、新バージョンをインストールしておく。

nodenv install 10.13.0

あとは、.node-versionが変更されたタイミング（プルリクがマージされたタイミング）で、自動的にバージョンアップできました。

バージョンアップしてよかったこと

Node.js本体よりも、npmのバージョンが上がった（3.10.8→6.4.1）ことで以下の点が良くなりました。
ちなみにnpm 6.4.1は、Node.js 8.12.0から使えますので、Node.js 10.13.0にしてよかった点ではありません。

  • Prettierの差分がでなくなった
    バージョンアップ前は、Prettierで整形した後のコードが、メンバー間で揃わないという問題がたまに起きていました。 正しく検証できていないのですが、以下が原因かと思います。

    Node.js v6.9.1（npm 3.10.8）ではpackage-lock.jsonがなく、package.jsonもキャレット付きの指定にしていた。
    そのため、マイナーバージョンが固定できていなかった。

  • npxも使えるようになった
    今までは、ローカルのnpmパッケージを実行するために、npm scriptsとしてpackage.jsonに追加する必要がありました。npm5.2.0からはnpxで直接実行できるようになったので、気軽に試すことができるようになりました。

    以下のサイトにわかりやすく載っていました。
    npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう - Qiita

まとめ

Prettierの差分が出なくなったのでスッキリしました。大きな問題はなくても、なるべく早くバージョンアップしたほうが、日々のもやもやが減って良さそうです。今後はなるべく早くバージョンアップしていきたいと思います。