マガジンのカバー画像

Nuxt.js 刷新プロジェクト

28
noteのwebフロントエンドをAngular.js 1系からNuxt.jsへ移行するプロジェクトです。進捗や技術的な説明などをまとめていくマガジンです。
運営しているクリエイター

#フロントエンド

noteのNuxt.jsへの移行が完了し次世代のフロントエンド構築を進めています

本記事では、noteのフロントエンドについて2つトピックを紹介します。Nuxt.jsへの移行が完了した話と、見えてきた課題を踏まえ次世代のフロントエンド構築を模索している話です。 Nuxt.jsへの移行が完了noteでは、AngularJSで構築していたフロントエンドをNuxt.jsに移行するプロジェクトを2018年から進めていましたが、2021年12月、ついに移行が100%完了しました! 最初の1年弱は移行プロジェクトを組み専任リソースを張って実装し、ページ単位で移行し

おすすめページ、マガジン一覧ページを本番公開 Nuxt移行プロジェクト リリースノート (2019年3月前半)

noteではフロントエンドをAngular.jsからNuxt.jsへ刷新作業中です。今回は、すべてを作って一気に置き換える「ビッグバンリリース」を避け、ページ・機能単位でこまかいリリースを重ねて徐々に置換していくことで、慎重に進めつつ、知見やフィードバックを反映させていく予定です。 おすすめページ、マガジン一覧ページを本番公開先月から、サイレントリリースしてきたNuxtページを徐々に一般ユーザへ導線開放を進めています。3月前半は以下のページを本番公開しました。 おすすめペ

カテゴリ一覧ページを本番公開 Nuxt移行プロジェクト リリースノート (2019年2月後半)

noteではフロントエンドをAngular.jsからNuxt.jsへ刷新作業中です。今回は、すべてを作って一気に置き換える「ビッグバンリリース」を避け、ページ・機能単位でこまかいリリースを重ねて徐々に置換していくことで、慎重に進めつつ、知見やフィードバックを反映させていく予定です。 Nuxt.js版カテゴリ一覧ページを本番公開事前にサイレントリリースしていたカテゴリ一覧ページを本番公開しました。コンテスト一覧ページに続き、第二弾の本番公開となります。 カテゴリ一覧ページ

TypeScriptへ移行中 Nuxt移行プロジェクト リリースノート (2019年2月前半)

noteではフロントエンドをAngular.jsからNuxt.jsへ刷新作業中です。今回は、すべてを作って一気に置き換える「ビッグバンリリース」を避け、ページ・機能単位でこまかいリリースを重ねて徐々に置換していくことで、慎重に進めつつ、知見やフィードバックを反映させていく予定です。 TypeScriptへ移行中Nuxt.js 2.4からTypeScriptが公式にサポートされました。 前々から移行チーム内ではts移行を行う機を伺っていました。これ幸いということで、2.4に

マガジントップページのデモと注目カテゴリーページをテストリリース Nuxt移行プロジェクト リリースノート (2019年1月後半)

noteではフロントエンドをAngular.jsからNuxt.jsへ刷新作業中です。今回は、すべてを作って一気に置き換える「ビッグバンリリース」を避け、ページ・機能単位でこまかいリリースを重ねて徐々に置換していくことで、慎重に進めつつ、知見やフィードバックを反映させていく予定です。 マガジントップページのデモをリリースマガジン機能のNuxt移行を進めています。先行して、マガジントップページを表示させる部分をデモアカウントでリリースしました。 リスト表示(PC) https

noteのフロントエンドをNuxt.jsへ刷新します

webサービスのUXを向上させるために、表示速度は非常に大切です。 しかしながら、noteはリリース当初からフロントエンドの実行速度が遅い=表示が遅いという構造的な問題を抱えており、継続率や離脱率など重要指標に悪影響を及ぼすリスクが強くありました。 noteチームはnoteを本格的なメディアプラットフォームへ成長させるスピードを加速していきます。それを踏まえ、手遅れになる前に技術的な負債を解消し、最新のベストプラクティスに沿ったフレームワークに移行することで、高性能なサー