Experts.jp日本に、もっとエキスパートを。1.0のリリースがいよいよ近づいてきました。SSR)を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。Nuxt.jsとは?Nuxt.js(ナクストと読みます)はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります。https://nuxtjs.org/Nuxt.jsでできることそれではそのNuxt.jsではどのようなことができるのでしょうか。現在挙げられている主な機能一覧としては以下のようなものがあります。(現在準備中のv1.0向け日本語訳プロジェクトから抜粋。3つと考えることができます。SSR基盤としての優秀さVue.jsの2系からはコアでSSRのシステムを内蔵しており、単体でもSSRを行うことは可能ですが、より円滑に、かつ柔軟なシステムをNuxt.jsでは提供しています。<meta>タグの編集などが可能となっており、より効率的なSSR基盤の構築が可能となっています。画像などのアセットのパスの解決、そしてSassなどのCSSプリプロセッサの対応など、webpackなどのビルドツールの設定を必要とするものが一通りサポートされています。その上で、それらの基本的な構成をまとめたボイラープレートをnuxt-community/starter-templateとしてNuxt.jsコミュニティが公式で提供しており、webpackなどのモジュールバンドラやbabelなどのビルドシステムに精通していない人でも簡単にモダンな環境を構築することが可能となっています。vue-cliを利用してセットアップが可能となっており、すぐに開発をはじめることが可能です。https://github.com/vuejs/vue-clihttps://github.com/nuxt-community/starter-templateミドルウェアやasyncDataなどの拡張システムの提供また、Nuxt.jsでは、ミドルウェアやasyncDataという構造・システムを利用することで、SSR結果に非同期処理(例えばAPIからのデータフェッチ)の結果を出力・その後SPA側からデータストアとして参照できるシステムがあります。これを利用することにより、記事データを取得した上でOGPとして出力を行うことや、i18n処理の結果をHTMLとして流すなど、様々なことができるようになります。Cardを重視すべきものというのは非常に多く存在します。メディアサイトなどであれば、そもそもWordPressなどで運用するほうが筋が良い場合も多いでしょうが、SNSや求人サイトの場合は、SPAのほうが都合が良い場合も存在します。化されていることは多くなってきました。いった場合のSEO、OGP生成エンジンとして、比較的一般的なディレクトリ構成がなされているNuxt.jsを採用する、Nuxt.jsへと移行するというということは選択肢として十分現実的なものです。技術ドキュメントの運用にも有効活用が可能です。generateが存在しており、このコマンドを利用すると、Nuxt.jsで作られたものを全て静的サイトとして、ルーティングをそのままに書き出すことが可能となります。Markdownで原稿は管理を行い、Vue.jsの強力なコンポーネントシステムのもと、デザインを効率的に管理する。Nuxt.jsの公式ドキュメントは、この手法にて管理されています。驚くかもしれませんが、一般的なホームページ制作においてもNuxt.jsは大きく貢献してくれます。CSSを利用することが可能となっており、CSSの影響範囲についての考慮を最小限できるためコーディングのスピード化に貢献するほか、ライブリロードなどの効率的な開発基盤が既に整っているからです。本稿では詳しくは紹介しませんが、Nuxt.jsはプログラムから呼び出すことも可能であるため、お問い合わせだけをExpress.jsで受けるということも実現可能です。実際にPush7というサービスのWebサイトはi18n化をmiddlewareで、メール受け付けをExpressで実装しました。https://push7.jpNuxt.jsをはじめるそれではいよいよNuxt.jsを利用して実際にアプリケーションを作成してみましょう。サンプルプロジェクトを作成した後、実際にAPIと連携するWebサイトを構築してみます。プロジェクトのセットアップと実行プロジェクトの初期化にはvue-cliを利用しましょう。ターミナル上で以下を実行してください。nuxt_sampleこれを行うことで実行したディレクトリに新たにnuxt_sampleという名前でプロジェクトが作成されます。これで一通りのファイルはセットアップされていますので、そのまま依存関係をインストールしてサーバーを立ち上げてみます。パッケージ管理については、Nuxt.js自体がYarnで管理されているため、個人的にはYarnを用いることを推奨します。アクセスが可能であることが確認できるようになっています。実際にアクセスしてみます。このように表示された時点で成功です。ページのソースコードを見ると、きちんとSSRされて結果が出力されていることがわかります。APIからデータを取得してSSRするページを作成する基本的なサーバーの起動はここまでで完了したので、ここからはルーティングの追加と非同期データの取得を行っていきます。利用し、ユーザー情報を表示してみます。要件としては、以下を満たすものの開発とします。形式でそれぞれのユーザーにアクセスするユーザー情報からIDと名前を取得し、アイコン画像と共に表示するルーティングを追加するまずはルーティングを追加してみます。Nuxt.jsにはファイルに応じたルーティングの自動生成機能がありますので、これを有効活用して作成します。_id.vueファイルを作成します。内容については、index.vueの中身をコピーしておくと良いでしょう。完成したディレクトリ構成はこのようになります。参照するようになります。アクセス時にURLパラメータのオブジェクト内にidというキー名で格納されます。これを例えば_nickname.vueなどとした場合は、idの代わりにnicknameというキーで保存されます。これでひとまずルーティングの作成は完了です。ページ内でHTTPリクエストを行い、結果を取得する次は_id.vueの中でGitHubからデータをフェッチしてみます。HTTPリクエストのためにaxiosをインストールします。axiosその上で、_id.vueを以下のように記述します。hidden;}</style>ここでポイントとなるのはasyncDataの記述です。asyncData(){}に置き換えることで、SSR時に非同期のデータを取得した上で、SSRに流し込むことが可能となります。Nuxt.jsではデフォルトでasync/awaitの変換用のbabel-presetも導入されていますので、モダンな記法でこのように取得することが可能となっております。実際に表示をみてみるここまで完了した段階で、実際に表示を見てみましょう。/users/potato4dを。アクセスしてみましょう。このように表示されると成功です。ソースコードを見ると、正しくSSRされた結果が返ってきていることがわかります。APIからの取得結果をSSRに流すことが可能となります。これを用いることにより、例えばサービス内の投稿について、ツイートされたときにコンテンツを表示する。CardやOGPなどを正しく表示する。いうことが可能となります。最後に、このサンプルについては私のGitHub上に掲載しておりますので、お手元にすぐNuxt.jsを試す環境がない場合は適宜ご参照ください。https://github.com/potato4d/nuxt_html5expertsjpおわりにここまででNuxt.jsの基本とできること・活躍しやすいシーンをご紹介した後に、簡単なサンプルアプリケーションを作るところまでを行ってみました。実案件で投入する際は、新規でないとディレクトリやビルドシステムの移行コストがそれなりに存在しますが、新規においては効率的な開発にも大きく貢献し、将来的なSSR要望にも先んじて対応を行うことができます。基本的にSPAの後からのSSR対応というものは非常にコストがかかるものでもありますので、これからのSPA開発においては、Nuxt.jsの存在は、開発効率化ツールとしても、また、SSRだけではない統合開発フレームワークとしても無視できないものになってくると考えております。Nuxt.js単体がフロントエンド開発のフレームワークとして一定以上の存在意義をもつ未来や、ほかのNode.js製のフレームワークと組み合わせてのレンダリング用フレームワークとして利用される未来も十分にあるでしょう。Changesについてもひとまずは収まることが予想されますし、日本語ドキュメントの1.0追従も盛んに行われております。活躍できるシチュエーションに遭遇した時は、Nuxt.jsを是非利用してみると良いでしょう。本稿の執筆にあたって参照した情報ソースとなります。