LINE Engineering Blog official account
2022年10月16日(日)に開催される、Vue Fes Japan Online 2022にて、LINEはゴールドスポンサーを務めます。 本ブログでは、スポンサーセッションの詳細や過去に公開したVueに関連する記事、アフターイベントについてご紹介いたします。ぜひご覧ください。 スポンサーセッション紹介 LINE MUSIC のパフォーマンスを向上させた Vue3 マイグレーション みなさんは仕事中などにパソコンで音楽を聴くことはありますか？ LINE MUSIC はスマホアプリだけではなくWeb版アプリがあります。Vue.js を使用している LINE MUSIC のWeb版アプリでは、パフォーマンスの向上を目的に Vue3 へのマイグレーションを行いました。その結果、アプリの読込時間が半分に減少するなど大きな成果が得られました。このセッションでは Vue2 で実装されたプロジェクトを運用されている方に向けて、どういった経緯で Vue3 へのマイグレーションを行う事にし、どのようにして進めたか、そしてマイグレーション前後のパフォーマンスの変化をご紹介します。 発表日時：2022/09/16 12:30〜 FUTUREトラック スポンサーセッション（10分）発表者：柴坂浩行詳細：https://vuefes.jp/2022/sponsor-sessions/line関連するブログ: https://engineering.linecorp.com/ja/blog/vue3-migration-with-improved-line-music-performance/ アフターイベントを開催します！ 10月19日(水) 19時より、UIT Meetup vol.17『もっと好きになるVue.js』を開催します。 https://uit.connpass.com/event/258384/ Vue 3 のリリースから約2年が経ち、その間に Vite のさらなる進化、Vuex の後継となる Pinia の登場、 Nuxt.js v3 の発表など、Vue.js を取り巻く環境もまた大きく変化しました。 今回の UIT Meetup ではそんな Vue.js のイマにフォーカス、Vue.js コアチーム並びに日々 Vue.js を現場の最前線で使っているエンジニアを招待し、フレームワークの進化からその他 Front-End Tooling の活用まで語っていただきます。 関連する記事 LINEでは、過去にもVueに関連するブログ執筆やイベント開催をしています。ぜひこちらの記事もご覧ください。 デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーン Prettier への支援開始のお知らせと企業が OSS に対して支援するということ Vue.jsコアメンバーとの社内交流会を開催しました UIT Meetup vol.10「Vue 三昧」を開催しました LINE Developer Meetup #72 - Vue.js with Vue.js Community（Youtube） 採用情報 ■フロントエンドエンジニア / LINEファミリーサービス https://linecorp.com/ja/career/position/475■フロントエンドエンジニア / LINE公式アカウント https://linecorp.com/ja/career/position/3722■フロントエンドエンジニア / LINEデザインシステム、データプラットフォーム https://linecorp.com/ja/career/position/3723■フロントエンドエンジニア / LINE MUSIC・LIFF / 京都開発室 https://linecorp.com/ja/career/position/1659
Front-end Engineer at LINE KYOTO
こんにちは、LINEの京都開発室でフロントエンド開発を担当している柴坂浩行です。 みなさんは仕事中などにパソコンで音楽を聴くことはありますか？ LINE MUSIC にはスマホアプリだけではなくWeb版アプリがあります。私たちが開発しているWeb版アプリでは、JSフレームワークとして Vue.js を使用しています。 https://music.line.me/webapp/ これまでこのWeb版アプリには Vue2 が使われてきましたが、2022年6月、私たちは Vue3 にアップグレードしたバージョンをリリースしました。 私たちのチームではWeb版アプリの機能開発と平行して、パフォーマンスの改善にも取り組んでいます。パフォーマンスといっても様々な側面がありますが、その中でもバンドルサイズの肥大化が大きな課題でした。アプリを構成する js と css のバンドルサイズは6MB。Sentry というモニタリングツールでWeb版アプリへのアクセスを計測すると、表示に2秒以上かかっているアクセスが約半数に達していました。 私たちはリファクタリングを進め、依存パッケージの整理を行うなどサイズの削減に努めてきました。そのなかで、このアプリが一番大きく依存している Vue.js について情報収集をしていたところ、Vue 3 へのアップグレードでバンドルサイズの縮小が期待できることを知りました。 今後の TypeScript 導入などに備えて Vue 3 へのマイグレーション自体は予定していたため、こちらを優先して実行に移すことになりました。 この記事では、どのようにマイグレーション作業を行ったのか、またどんな所に工夫したのかをふり返りながら書いていきます。また、実際に大きな改善が見られたパフォーマンス面において、その結果をあわせてご紹介します。 「移行ビルド」を使ったアップグレード Vue3 にアップグレードするためは多くの変更を行う必要があります。その変更を一度に正確に行うのは非常に困難です。 ありがたい事に Vue3 では「移行ビルド」と呼ばれる互換モードが @vue/compat というパッケージで提供されています。Vue.js をアップグレードすると同時に移行ビルドをインストールする事で、最低限の調整で Vue3 を動作させることができるようになります。また、そのために必要な変更はドキュメント (en) に掲載されているので、スムーズにマイグレーション作業を開始できます。 移行ビルドをいれると、修正する必要のある箇所をエラーや警告として表示されます。それらを解消していくことで、迷うことなくマイグレーション作業を進められます。 また Vue3 へのアップグレードにあわせて、使用している多くの依存パッケージもアップグレードする必要があります。今回は移行ビルドのおかげで、1つずつアップグレードをして動作を確認しながら作業を進めることができました。 Step 1 まず Vue 3 が動作する状態まで vue-cli、Vue.js のアップグレード @vue/compat のインストールと互換モードの有効化 webpack-dev-server 設定のバージョン変更対応 コンパイルエラーの修正 @vue/cli-service のアップグレードで webpack-dev-server のバージョンが v3 から v4 に変わるので、設定変更が必要な場合があります。 また依存パッケージのなかで動かなくなったものがあったので、こちらもあわせてアップグレードを行いました。メジャーバージョンの変更でこちらも大きな設定変更が必要になり時間がかかりました。随所でこういった対応が必要でした。 ここまで進めると一旦 Dev Server で動かせるようになります。 Step 2 主な仕様変更への対応 ここでマイグレーションドキュメントでは以下の2箇所の対応を求めています。 <transition> のクラス名仕様変更の対応 新しいグローバルマウントAPIへの対応 <transition> のクラス名に関しては、ドキュメントにも記載がありますがエラーとして出てこないので忘れないように早めに変更しておきます。 もうひとつの、新しいグローバルマウントAPIはいくつものメソッドに変更があったり、削除されたものもあるため、それぞれに対して多くの変更をする必要があります。 また、このタイミングでは Vue I18n が動作しなくなったのでアップグレードを行いました。Vue I18n のマイグレーションも公式ドキュメントが用意されているので参考にして進められます。 ちなみに Vue3 では props のデフォルト値を設定する際に this が Vue インスタンスとして使えなくなっているので、以下のような使い方で Vue I18n のテキストを呼び出している場合は変更が必要です。 props: { title: { type: String, default() { return this.$t('title'); // It will not work }, }, } Step 3 主要パッケージのアップグレード 次に Vuex や Vue-router のアップグレードを行います。 はじめる前の印象としてはここが一番大変だと思っていたのですが、よほど特殊な事をしていない限り簡単にアップグレードできます。ドキュメントで指示があった以外の変更は必要ありませんでした。 Step 4 エラーの修正や依存パッケージのアップグレード そして、ここからは残っているエラーや警告を1つずつ解消していきます。 ここまでで大きな変更が終わり、その都度依存パッケージのアップグレードも進んだので、ほとんどの作業が終わったような印象を受けるのではないでしょうか。しかし実際にはここからの作業に長い時間を費やすことになります。なぜなら原因を探らないといけないものが出てくるからです。ここまでの純粋な作業時間が約1日だったのに対して、エラーとテストの修正を合計して約6日かかりました。ちなみに実際には他のプロジェクトも進めていたため、期間としては全体で1ヶ月かかりました。 この段階になって、アップグレードが必要になる依存パッケージを見つけたり、ブラウザで実行するまではエラーを出さないものもあります。このマイグレーションでは「エラーが出たパッケージから順次アップグレードする」という方針でまったく問題ありませんでした。こう考えると気楽に作業を始められるのではないでしょうか。 はじめにターミナルで表示される警告を解消し（エラーはここまでで既に解消済）、その次にブラウザのコンソールの警告やエラーを解消するという流れで進めていきました。ブラウザエラーは当然ページやコンポーネントによって出てくるものが変わる、使用しているパッケージ単位で、使用されている場所を表示させて動作確認して問題を見つけます。 実行時に発生するエラーの中には、どの変更以降でエラーが発生するのかが分かりにくいものもあったので、こまめなコミットが大切です。そうすることで原因が判断しやすくなるので、どの段階にでも立ち戻れるようにしておいてとてもよかったと思います。 Step 5 テストの修正 一番最後にテストコードを修正しました。 このプロジェクトでは Vue Testing Library を使用しています。こちらも Vue3 のためにアップグレードが必要でしたが、マイグレーションについての記事は用意されていませんでした。作業を行っていた2022年4月時点では、Vue3 向けのバージョンは next ブランチにあり、この中のソースコードやサンプルコードを読む事で情報収集を行いました。 特に大きな変更は Vuex と Vue-router の扱いです。これまでは render 関数内でそれぞれのインスタンスが作成され、vue インスタンスとともに render 関数の3番目の引数で扱う事ができました。https://github.com/testing-library/vue-testing-library/blob/96c0c2d/src/render.js#L30-L43 今回のバージョンではこの機能が廃止されたため、Vuex と Vue-router のインスタンスを自分で作成する必要があります。https://github.com/testing-library/vue-testing-library/blob/03c53e1/src/render.js#L22-L26 私たちは render のラッパー関数を作ってユニットテストを書いていますが、これをどう変更して対応したのかを見ていきましょう。 Before export const initAndRender = (TestComponent, options, configure) => { return render(TestComponent, options, (vue, store, router) => { /* common settings */ const addtionalResponse = configure ? configure(vue, store, router) : {}; return { ...(addtionalResponse ? addtionalResponse : {}) }; }); }; After export const initAndRender = (TestComponent, options) => { const global = options?.global || {}; const plugins = global?.plugins || []; /* common settings */ // vuex if ('store' in options) { const storeInstance = createStore(options.store); plugins.push(storeInstance); delete options.store; } // vue-router const router = createRouter({ history: createWebHistory(), routes: [...(options.routes || [])], }); plugins.push(router); delete options.routes; // merge options global.plugins = plugins; global.mocks = mocks; options.global = global; return { ...render(TestComponent, options), router }; }; ここでは一部を抜粋したコードを掲載していますが、render 関数の第3引数がなくなったこと、Vuex, vue-router のための記述が増えている所に大きな違いがあります。テストコード側の変更を少なくするため、store, routes の各オプションを小さな変更で引き続き使えるようにするとともに、Vuex や Vue-router のインスタンス生成をラッパー関数側で行うようにしました。 また、render 内で生成された Vue-router のインスタンスを使用していた箇所があったため、render の中身とともに router を返すことで、引き続きテストの中で router を扱えるようにしました。 元々 render のラッパー関数を用意していたことで、結果的に、大きな変更をこの中で吸収することができたのはよかったです。 これ以外にもテストコードの修正が必要になった箇所は多く、全てのテストが通るまで試行錯誤しながらテストコードの修正を行いました。 Step 6 仕上げ 仕上げに、これまで使ってきた移行ビルドを削除します。これでエラーが出なければ、正式に Vue 3 で動作するウェブアプリケーションです！ 開発完了後には、QAチームに依頼して全体的な動作を確認してもらうリグレッションテストを実施してもらいました。やはりいくつかのバグが残っていたため、こういったテストの実施は重要です。検出された全てのバグを修正して、正式にリリースとなりました。 改善結果 1 バンドルサイズ さて、おまちかねのパフォーマンス改善結果です。 Vue3 と移行ビルドの導入前と直後、そして移行ビルドの削除のタイミングで、私たちはバンドルサイズがどの程度変化するのかを記録しました。 まずは development モードでビルドしたときのバンドルサイズを比較しました。 グラフは左から、 マイグレーション作業前 [Step1] Vue3 と移行ビルドの導入直後 [Step6] マイグレーション作業後（移行ビルド削除） の比較です。 中央はただ Vue3 にアップグレードしただけなのにバンドルサイズが半減していて、この結果をチームに報告すると非常に大きな驚きに包まれました。マイグレーション作業完了後、移行ビルドを削除して純粋な Vue 3 アプリケーションになるとバンドルサイズは更に減少しました。 次に production モードでのビルド結果です。development モードでは js 内にあった css が外部化されているのでファイルの構成が若干異なります。 移行ビルドの導入中は Vue 2 のように振る舞うのか、マイグレーション作業前とほぼ変わりませんでした。一方で移行ビルドを削除して純粋な Vue 3 アプリケーションになると、バンドルサイズが半減しました。 改善結果 2 ページ表示速度とそのスコア 私たちは、Vue3 に加えて Vite の導入も進めました。 Vite は webpack に代わるフロントエンド開発環境で、高速に動作する Dev Server を有しています。 コンパイラも強力で、コンポーネントごとに細分化したファイルを出力することができます。アクセスしたページに必要なファイルのみを読み込むため、ページ読み込み速度をより一層改善することができます。 私たちは Vue 3 と Vite の導入を含むバージョンをリリースした際に、Google Lighthouse で過去のバージョンと比較することにしました。その結果、パフォーマンススコアが 44 から 65 へと大きく改善しました。 Vue2 と Vue3 の純粋な比較にはなりませんが、その効果は大きいものと思われます。 また、以下は Sentry で計測したトップページの表示に要する時間です。リリース以降にページ表示時間が実際に半減した様子がグラフにはっきりと現れました。今では75%のユーザーが2秒以内に表示出来るようになりました。 さいごに 私たちは Vue 3 をパフォーマンス改善の目的で導入しましたが、今後私たちは Composition API および TypeScript の導入を予定していて、さらに Vue 3 を活用できることを期待しています。今後ともリファクタリングや改善をしっかり取り組みながら、LINE MUSIC の Web版アプリがよりよいものになるよう開発を進めていきます。 LINE京都開発室では一緒に働いてくれるフロントエンドエンジニアを募集しています。京都で働きたい、チームでのフロントエンド開発やプロダクト改善に興味のある方、私たちと一緒に開発をしませんか？ https://linecorp.com/ja/career/position/1659
Developer Relations Team, LINE Corporation.
Developer Relations室の三木です。 10月11日に、LINEの新宿オフィスにVue.jsのコアメンバーの方々をゲストとしてお招きして、LINEのフロントエンドエンジニアとの簡単な交流会（meet-and-greet）を行いました。その様子を写真を中心にご紹介します。 LINEのフロントエンド組織について LINEには、各サービスのUIやアプリ内のWebViewを含めたフロントエンド全般の実装を担当している、フロントエンド開発センター(通称: UIT)という開発組織があります。東京をはじめ、福岡、京都、韓国、台湾など多くの拠点で、たくさんのエンジニアで構成されています。常に新しいフロントエンド技術と接点を持ちながら働いており、Vue.js、React、AngularJSなどのフレームワークをサービスに合わせて自由に選定して使っています。 今回のVue.jsコアメンバーの来訪は、先方からの希望で実現することができたのですが、普段からVue.jsを業務で活用しておりその動向に関心が高いLINEのフロントエンドエンジニアにとって、非常に刺激的な機会となりました。 当日の模様 当日はフロントエンドエンジニアを中心として50名近くの社員が会場に集まりました。 残念ながらVue.jsの作者Evan Youさんの来社はキャンセルとなってしまったのですが、Nuxt.jsの作者であるAlexandre ChopinさんとSébastien Chopinさん、Vue.jsのコアチームメンバーであるPine Wuさん、Chris Fritzさん、Kazponさんなど多くのメンバーに来社頂きました。 Alexandre ChopinさんとSébastien Chopinさん Chris Fritzさん Pine Wuさん（中央）kazuponさん（右） 冒頭に、LINEのサービスや開発組織、フロントエンド周りのTech Stackを簡単に案内させて頂きました。 次に、社員から募集した質問をベースにコアメンバーの方とのQ&Aを行いました。集まった質問は10以上。以下のような質問が寄せられました。 Reactよりも優れていると思っているポイントを教えて下さい どのようなきっかけで Vue.js の開発コミュニティに関わるようになったのか聞きたい 普段どのような仕事をしているのか気になる Nuxtの開発者としてNextをどうみているか（意識はしている？それはどんなところ？） Web Componentsについてどう思っているか Vue 3.0のアプローチについてどう思っていますか？ Vueはなぜこんなに人気があると考えていますか？そして今後もこの人気を維持し続けられると思いますか？ Vue.jsはアジア圏での利用率が特に高いと思いますが、どのような要因が考えられますか？ TypeScriptについてどう思いますか？ Vue 3.0 以降で TSX が利用可能になるが、それぞれでどこまでサポートしていくか(Nuxt.js でのサポートやエディタでの CSS in JS との連携など) 実際に行われた質問に対する回答は、11/7公開の UIT INSIDE にて紹介されますので、そちらも合わせてお聴きください。 https://uit-inside.linecorp.com/ トータル1時間と短い間でしたが、非常に濃いディスカッションが出来たのではないかと思います。 最後に集合写真を撮影し、終了いたしました。ゲストの皆さんも楽しんで頂けたようで何よりでした。 最後に LINEには、フロントエンドの領域で新しい技術を試すことができる業務が豊富にあります。 以下の各募集要項にてフロントエンジニアを募集しておりますので、ご興味のある方はぜひ応募をご検討ください。 フロントエンドエンジニア フロントエンドエンジニア（銀行/証券/仮想通貨etc）【LINE Financial】 フロントエンドエンジニア【LINE Game Platform】 フロントエンドエンジニア【O2O開発室】 フロントエンドエンジニア(Ad SDK開発)【LINE Ads Platform】 インフラ開発エンジニア(フロントエンド担当)【全事業対象】 Senior Front-end Engineer【Kyoto Office】
Developer Relationsチームの三木です。11月3日(土)に秋葉原 UDX 4F / UDX ギャラリーにて開催された、国内初のVue.jsのカンファレンス「Vue Fes Japan 2018」にて、LINEはゴールド＆ランチスポンサーを務めさせていただきました。また当日はスポンサーブースにて、LINEのフロントエンド開発チーム「UIT」が、Vue.jsユーザーの参加者の方に楽しんで頂くために、お楽しみ企画「UIT Vue.js Quiz」を提供しました。その模様をレポートいたします。 「UIT Vue.js Quiz」について問題は全部で5問で、「Vue.js入門 基礎から実践アプリケーション開発まで」の共著者である喜多啓介(@kitak)を含め、LINEのフロントエンド開発チームで考えました。当日の参加者175名のうち全問正答者が13.6%と、かなりの難問ですが、本記事に問題を掲載するので、本記事の読者の皆様も、ぜひ挑戦してみてください！※正解はこの記事の最後に記載します。Q1. Vから始まるイケてるJavaScript Frameworkはどれ？[0] Vae.js[1] View.js[2] Vue.js[3] LINE Front-end FrameworkQ2. vuejs v2.5.0のコードネームは以下のうちどれでしょう？[0] Kill la Kill[1] Dragon Ball[2] Evangelion[3] Level EQ3. 無限ループに注意しなければならないライフサイクルはどれ？[0] created[1] mounted[2] updated[3] destroyedQ4. おっと！このやり方ではComponentに変更が絶対に伝わらない！危ないのはどれ？[0] this.myObject.property = "hi"[1] this.myArray[0] = "hi"[2] this.myNumber++[3] this.myString += "hi"Q5. {{これ}} がなくて困る。どれ？[0] beforeRouteEnter[1] mounted[2] beforeRouteUpdate[3] beforeRouteLeave今回のスポンサーブースを準備するに当たり、私たち運営スタッフが目指したのは「LINEにおけるフロントエンド開発を体感してもらう」ということです。といった内容についてご紹介させていただきました。詳細は資料をご覧ください。 Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT from LINE Corporationそこで「UIT Vue.js Quiz」は、単にVue Fes Japan 2018を盛り上げるコンテンツとしてだけでなく、LINE上で動作するVue.jsアプリケーションのより実用的なデモとして開発しました。このクイズは、会場のどこからでも空き時間に回答してもらえるよう、ブースの前ではLINEでBOTアカウントの友だち追加だけしてもらえれば良いようになっています。さらに、参加していただいた方に抽選券を発行して、それを後の楽しみとしてもらえるように、Vue.jsのロゴをモチーフにしたオリジナルのTシャツや、先に触れた「Vue.js入門 基礎から実践アプリケーション開発まで」など多数景品を用意させていただきました。当選発表をPUSH通知で受け取ることができるので、抽選発表の時間を気にする必要もなく、引き換え忘れの心配もありません。本日開催のVue Fes Japan 2018でのLINEブースの企画「UIT Vue.jsクイズ」は終了しました。沢山のご回答ありがとうございました！最終的な正答率は13.2%でした。Vue.jsオリジナルTシャツ＆書籍をゲットの皆様おめでとうございます！まだFesは続きますが最後の懇親会まで楽しみましょう！#uit #vuefes pic.twitter.com/44cxTGsbeg— LINE_DEV (@LINE_DEV) 2018年11月3日といった内容についてご紹介させていただきました。詳細は資料をご覧ください。 Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT from LINE Corporation 最後にLINEは、今回のようなカンファレンス協賛などの機会を通じて、フロントエンド技術者の方との交流や、技術コミュニティ発展への支援に力を入れています。また、LINEのフロントエンド開発チーム「UIT」は、LINEの新宿オフィスを会場に、その名前も「UIT」という勉強会を定期的に主催しています（UITとは、User Interface Technology の略称です）。次回は11月29日にVue.jsをテーマに「UIT#5 わたしたちにとってのVue.js」を開催（参加は抽選となります。11月15日応募締切）。今後もさまざまなフロントエンド技術をテーマで企画していますので、お気軽に足を運んで頂けると嬉しいです。LINEでは、以下職種にてフロントエンドエンジニアを募集しています。興味のある方は応募をご検討ください。フロントエンドエンジニアフロントエンドエンジニア(Fintech)【LINE Financial】フロントエンドエンジニア【京都オフィス】「UIT Vue.js Quiz」正解Q1. Vから始まるイケてるJavaScript Frameworkはどれ？答え: [2] Vue.js言わずもがなですね！UIT Vue.js QuizはLIFF(LINE Front-end Framework)というLINEで動くWebview上にVue.jsで実装されています。Q2. vuejs v2.5.0のコードネームは以下のうちどれでしょう？答え: [3] Level Evuejs/vue リポジトリのリリースノートをチェックするとコードネームを知ることができます！どれも日本に住むひとにとっては馴染みにある名前ですよね。https://github.com/vuejs/vue/releases/tag/v2.5.0Q3. 無限ループに注意しなければならないライフサイクルはどれ？答え: [2] updated誰もが一度はやってしまうのかもしれません。updatedの中でステートを書き換えてしまうと、無限ループに陥る可能性があるため、注意しなければなりません。https://jp.vuejs.org/v2/api/#updatedQ4. おっと！このやり方ではComponentに変更が絶対に伝わらない！危ないのはどれ？答え: [1] this.myArray[0] = "hi"myObject.propertyが引っ掛けでした。前の状態が明示されていない以上[0]も正解になり得ますが、Arrayのindex変更は確実に問題が発生します。v3系ではArrayのindex変更が検知されるようになる予定です。要チェック！https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabfQ5. {{これ}} がなくて困る。どれ？答え: [0] beforeRouteEnterこの問題だけVueRouterからの出題でした。{{これ}} を「this」に変換して考えます。選択肢の中でthisが参照できないのは、beforeRouteEnterです。https://router.vuejs.org/ja/guide/advanced/navigation-guards.html#%E3%83%AB%E3%83%BC%E3%83%88%E5%8D%98%E4%BD%8D%E3%82%AC%E3%83%BC%E3%83%89今後も他のフロントエンドのイベントでも同様のクイズコンテンツの提供を予定していますので、もしLINEのスポンサーブースにご来場の際は挑戦してみてください！
