マガジンのカバー画像

Nuxt.js 刷新プロジェクト

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

#nuxt

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

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

こんぴゅ

ダッシュボードのNuxt化が完了しました Nuxt移行プロジェクト リリースノート （2020年5月）

noteではフロントエンドをAngular.jsからNuxtへ刷新作業中です。2019年4月に記事ページのNuxt化をリリースし大きな山を超えましたが、引き続き残りの主要ページのリプレイスを進めています。 ダッシュボードのNuxt化が完了しました クリエイターが日々のビューや売上を確認するためのダッシュボードページがNuxtで書き直されリリースされました。対象は以下のページです ・アクセス状況 ・バッジ ・売上管理 ・振込履歴 ・販売履歴 - - - - - - -

こんぴゅ

記事投稿機能のNuxt化が完了しました Nuxt移行プロジェクト リリースノート （2020年3月）

noteではフロントエンドをAngular.jsからNuxtへ刷新作業中です。2019年4月に記事ページのNuxt化をリリースし大きな山を超えましたが、引き続き残りの主要ページのリプレイスを進めています。 記事投稿機能のNuxt化が完了しました半年ぶりのNuxt化プロジェクトのご報告です。エディタや投稿設定、有料ライン設定といった記事投稿部分のNuxt化が完了しました。 今後ですが、4月にはダッシュボード、5月にはアカウント設定のNuxt化を予定しております。いよいよ終盤

こんぴゅ

マガジン設定ページのNuxt化が完了しました Nuxt移行プロジェクト リリースノート （2019年9月）

noteではフロントエンドをAngular.jsからNuxtへ刷新作業中です。2019年4月に記事ページのNuxt化をリリースし大きな山を超えましたが、引き続き残りの主要ページのリプレイスを進めています。 マガジン設定ページのNuxt化が完了しました マガジンに関する各種設定やフォロワー情報確認などを行うページのNuxt化が完了しました 対象URLは以下となります /:username/m/:key/edit 基本編集 /:username/m/:key/editors

こんぴゅ

独自ドメインページのNuxt化が完了しました Nuxt移行プロジェクト リリースノート （2019年8月）

noteではフロントエンドをAngular.jsからNuxtへ刷新作業中です。2019年4月に記事ページのNuxt化をリリースし大きな山を超えましたが、引き続き残りの主要ページのリプレイスを進めています。 独自ドメインページのNuxt化が完了独自ドメイン機能で運用されているnoteアカウントについて、記事ページ、トップページがNuxtでレンダリングされるようになりました noteの独自ドメイン機能を利用したサイトの例↑ ※ 現在、noteの独自ドメイン機能は法人プラン

こんぴゅ

マガジントップページを本番公開 Nuxt移行プロジェクト リリースノート （2019年8月）

noteではフロントエンドをAngular.jsからNuxtへ刷新作業中です。2019年4月に記事ページのNuxt化をリリースし大きな山を超えましたが、引き続き残りの主要ページのリプレイスを進めています。 マガジントップページをリリースnoteをまとめて管理・販売できるマガジン機能のトップページについてNuxt化が完了しました！設定系のページを今後対応していく予定です。 - - - - - - - - - - Nuxtへの刷新プロジェクトに関する記事やリリースノートは、

こんぴゅ

マガジン一覧ページを本番公開 Nuxt移行プロジェクト リリースノート （2019年7月）

noteではフロントエンドをAngular.jsからNuxtへ刷新作業中です。2019年4月に記事ページのNuxt化をリリースし大きな山を超えましたが、引き続き残りの主要ページのリプレイスを進めています。 マガジン一覧ページをリリース 自分の所有しているマガジンを管理するマガジン一覧ページがNuxtに置き換わりました！ マガジン一覧ページ（ログインしている必要があります） https://note.mu/magazines v-sendai meetup #2で登壇しま

こんぴゅ

ノート一覧ページを本番公開 Nuxt移行プロジェクト リリースノート （2019年6月）

noteではフロントエンドをAngular.jsからNuxtへ刷新作業中です。2019年4月に記事ページのNuxt化をリリースし大きな山を超えましたが、引き続き残りの主要ページのリプレイスを進めています。 ノート一覧ページをリリース自分が作成したノートを管理する一覧ページがNuxt化されました！ ノート一覧ページ（要: noteIDを登録したアカウントでログイン） https://note.mu/notes おしらせ7/1に開催されるv-sendai meetup で弊

こんぴゅ

ハッシュタグページを本番公開 Nuxt移行プロジェクト リリースノート （2019年6月）

noteではフロントエンドをAngular.jsからNuxtへ刷新作業中です。2019年4月に記事ページのNuxt化をリリースし大きな山を超えましたが、引き続き残りの主要ページのリプレイスを進めています。 ハッシュタグページをリリース指定したハッシュタグに紐づく記事を表示するハッシュタグ詳細ページのNuxt版を本番リリースしました #vue が含まれる記事一覧 https://note.mu/hashtag/vue noteでは様々なコンテストを開催しています。指定され

こんぴゅ

マイページを本番公開 Nuxt移行プロジェクト リリースノート （2019年6月）

noteではフロントエンドをAngular.jsからNuxt.jsへ刷新作業中です。2019年4月に記事ページのNuxt化をリリースし大きな山を超えましたが、引き続き残りの主要ページのリプレイスを進めています。 マイページをリリースクリエイターのマイページがNuxt化完了しました！ noteの中でも特にAngularでの描画が遅いページだったので、Nuxtでの高速化が実感しやすいのではと思います。とはいえ、細かいチューニングまでまだ着手できていないので今後さらに磨いていき

こんぴゅ

トップページを本番公開 Nuxt移行プロジェクト リリースノート （2019年5月）

noteではフロントエンドをAngular.jsからNuxt.jsへ刷新作業中です。2019年4月に記事ページのNuxt化をリリースし大きな山を超えましたが、引き続き残りの主要ページのリプレイスを進めています。 トップページをリリーストップページ(https://note.mu)のNuxt化を本番公開しました。noteにログインしている場合はタイムライン、ログインしていない場合はおすすめ記事ページが表示されます。 次回予告クリエイタトップページ（note.mu/xxxxx

こんぴゅ

Nuxt.jsでnoteの記事ページを置き換えました

noteの記事ページがリニューアルしてパワーアップしました。記事の読み込み、描画が格段に高速化されています。 noteのフロントエンドはAngular.jsの1系で運用されてきましたが、実行効率が悪く表示速度が遅いという問題がありました（特に古いスマホで顕著）。問題を根本解決するためにNuxt.jsへの移行を進めていました（詳しい経緯は以下の記事をごらんください）。 今年から、おすすめページ、マガジンページ、コンテスト一覧ページなど部分的にNuxt版に置き換えていきました

こんぴゅ

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

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

こんぴゅ

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

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

こんぴゅ