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