Slide 1
Slide 1 text
freee 株式会社
会計freee が yarn から npm に出戻った本当の理由
Slide 2
Slide 2 text
● 1993 年静岡生まれ
● 千葉工業大学大学院情報科学専攻卒
● 学部 2 年から Web アプリケーションエンジニアとしてアルバイト
● 内定後に長期インターンとして 1 年間人事労務freee の開発に従事
● 2018 年 に新卒として freee へ入社
○ 入社後は会計freee の開発に従事
● ゆるい Apple 信者
○ 毎年 iPhone 買ってます
Ryo Ochiai
@_kemuridama
落合 涼
プロダクト開発船団／会計開発船／会計ヨット
2
Slide 3
Slide 3 text
freee Developers Advent Calendar 2018
でこんな記事を書きました
Slide 4
Slide 4 text
https://developers.freee.co.jp/entry/sayonara-yarn
Slide 5
Slide 5 text
5
社内外からいろんな反響がありました
Slide 6
Slide 6 text
Advent Calendar では触れなかった
yarn をやめた本当の理由
Slide 7
Slide 7 text
7
Agenda
1. yarn vs npm
2. 会計freee が yarn から npm に出戻った本当の理由
3. npm に出戻るまでの道のり
4. まとめ
Slide 8
Slide 8 text
npm vs yarn
8
Slide 9
Slide 9 text
そもそも npm と yarn とは
Slide 10
Slide 10 text
10
npm
● Node Package Manager
● Node.js に内包される Official なパッケージマネージャ
● package.json を元に必要なパッケージをインストール
Slide 11
Slide 11 text
11
yarn
● Facebook などによって開発
● package.json 互換の Unofficial なパッケージマネージャ
● チェックサムによるパッケージの整合性チェック
● 会計freee では約 2 年前に npm から yarn に移行
Slide 12
Slide 12 text
2019 年において
本当に yarn が必要なのか??
Slide 13
Slide 13 text
13
海外では度々議論されている
https://engineering.mixmax.com/blog/to-yarn-and-back-again-npm
https://iamturns.com/yarn-vs-npm-2018/
Slide 14
Slide 14 text
14
yarn を使う 3 つの利点
1. 高速インストール
● 並列インストール
● 効率的なキャッシュ
2. ロックファイル
● yarn.lock による依存パッケージ
のバージョン固定化
3. ワークスペース
● monorepo の管理機能がデフォ
ルトで実装
npm と比較して yarn が優れている点
Slide 15
Slide 15 text
15
1. 高速インストール
● yarn は npm に比べてパッケージインストールが超高速だった
○ yarn の方が 20 倍速いという結果もある
● npm 5 から改良が進められて 6 ではほぼ同等の速度インストール可能に
→ yarn を使うメリットが少なく…
Slide 16
Slide 16 text
16
2. ロックファイル
● package.json では依存パッケージ全てのバージョン指定はできない
○ 環境ごとに異なる依存パッケージがインストールされてしまう
● npm 4 までは shrinkwrap によるバージョン固定化を図っていた
○ npm install とは別に npm shrinkwrap -dev の実行が必要
○ -dev 付け忘れにより devDependencies の整合性の破壊
○ npm-shrinkwrap.json のコンフリクト解決が困難
Slide 17
Slide 17 text
17
2. ロックファイル
● npm 5 以降は yarn.lock のような package-lock.json が自動生成
○ npm shrinkwrap のような煩雑性はなくなる
→ yarn を使うメリットが少なく
Slide 18
Slide 18 text
18
3. ワークスペース
● Lerna を使えば npm でも monorepo を簡単に構成できる
○ https://lernajs.io/
● そもそも会計freee でまともにワークスペースを使っていなかった
→ yarn を使うメリットがない
Slide 19
Slide 19 text
19
会計freee が
yarn から npm に出戻った
本当の理由
Slide 20
Slide 20 text
複数バージョンの yarn が使いにくい
Slide 21
Slide 21 text
21
複数バージョンの yarn が使いにくい
● yarn は基本的にグローバルインストール
○ プロジェクト毎に異なるバージョンの yarn を使いづらい
● freee では 1 人のエンジニアが複数のプロジェクトに関わることがある
→ しかし複数のプロジェクトで同じバージョンを使ってるとは限らない
Slide 22
Slide 22 text
22
yvm
● Yarn Version Manager
○ https://yvm.js.org/docs/overview
● 複数バージョンの yarn を管理できるようになる
● nodenv のように path を置換するものではない
○ yvm exec hogehoge
→ 複数の yarn を取り扱うための銀の弾丸とは言えなかった
Slide 23
Slide 23 text
ビルド環境の複雑化
Slide 24
Slide 24 text
24
2 つのビルド環境
● CircleCI による Docker ベースのビルド
○ テストやコンポーネントカタログを作る
● Jenkins による通常ビルド
○ CDN に配信するためのコードのビルド
Slide 25
Slide 25 text
25
ビルド環境の複雑化
● Docker ベースのビルド
○ Dockerfile の更新、イメージ作成
※ Node.js の Official Docker Image には yarn が含まれてますが freee では使っていません
● Jenkins ベースのビルド
○ Ansible の更新、サーバへの変更適用
→ ビルド環境ごとに yarn をインストールするステップが増える
Slide 26
Slide 26 text
エンジニア組織の巨大化
Slide 27
Slide 27 text
27
100 人を超えるエンジニア組織
2012 2013 2014 2015 2016 2017
100
50
75
25
会計 会社設立
人事労務
マイナンバー
開業
申告
freeeカード
2018
プロダクト
リリース
エンジニア数（人）
API公開
サービス
分割開始
マイクロ
サービス化
基盤投資加
速
チーム制
導入
クラウドERP
コンセプト発表
Slide 28
Slide 28 text
28
エンジニアが増えると…
● freee のエンジニアはフロントエンドとバックエンドの隔たりがない
○ 人によってフロントエンドスキルにギャップがある
● yarn を使うためには Node.js とは別でセットアップが必要
○ 導入コストが増える
→ 公式ツールの npm を使った方が何かと楽
Slide 29
Slide 29 text
会計freee は npm に出戻ることを決意
Slide 30
Slide 30 text
30
npm に出戻るまでの道のり
Slide 31
Slide 31 text
31
npm に出戻るまでの道のり
● 一歩遅れていたツール群をアップデートしつつ yarn を捨てることに
1. Babel 7 の導入
2. Node.js のアップデート
3. さよなら yarn
4. QA テスト & リリース
Slide 32
Slide 32 text
32
Babel 7 の導入
● 会計freee では半年弱 Babel 7 の Beta 版を使用
● 2018 年の 8 月の終わりに Babel 7 の正式版が出たのでアップデート
● @babel/preset-env の設定にハマり IE で polyfill が漏れる不具合が発生
Slide 33
Slide 33 text
33
Node.js のアップデート
● もともと Node.js v8.11.2 を使用
○ ビルド時のパフォーマンス低下が発生する可能性があった
● 少しでもビルド時間を減らして生産性向上を図りたい
→ Node.js v10 LTS へアップデート
Slide 34
Slide 34 text
34
さよなら yarn
● yarn から npm に戻す deyarn に基づいて npm への出戻り作業を実施
1. yarn.lock の削除
2. node_modules の削除
3. npm install を使ってパッケージを再インストール
Slide 35
Slide 35 text
35
QA テスト & リリース
● npm と yarn では依存性解決が少し違う
○ lock ファイルを再生成しているのでパッケージのバージョンがズレる
● synp を使って yarn.lock を package-lock.json に変換しようと試みる
→ invalid になってしまってうまく行かなかった
● QA テストを通すことで動作を担保することにしました
Slide 36
Slide 36 text
開発合宿から 3 ヶ月強かかって
今年の頭に npm への出戻りを完遂
Slide 37
Slide 37 text
まとめ
37
Slide 38
Slide 38 text
38
まとめ
● 3 ヶ月ほどかけて会計freee は yarn から npm に出戻りました
● 2019 年現在 freee において yarn より npm の方が優れている
○ npm のインストール速度向上
○ package-lock.json によるバージョンの固定化
○ エンジニアが増えたことによる yarn の導入コストの増加
○ プロジェクトごとに異なる yarn のバージョン
Slide 39
Slide 39 text
39
今後について
● 今はまだ社内において npm と yarn が混在している
○ 実際のところ導入コストを下げるという目的は達成できていない
→ 他のプロジェクトでも脱 yarn をやっていく
● Yarn v2 (Berry) の動向のチェック
○ もしかしたら来年の Advent Calendar で Yarn に出戻りましたという記事を書
いてるかもしれません
Slide 40
Slide 40 text
スモールビジネスを、
世界の主役に。