採用詳細ページの取得コードの全体像Netlifyにデプロイするには?おわりにはじめにこんにちはかみむらです。microCMSで採用ページを作成するチュートリアルです。microCMSの最大の特徴は、APIを部分的に扱えることです。さまざまなユースケースが考えられます。企業のWEBサイトを作成すると仮定してください。CMSで管理する機能は、お知らせやブログが挙げられます。運用していくと採用情報やヘルプページなど、CMSで管理したい項目が増える可能性があります。そこで、ヘッドレスCMSを使えば、フロントエンドとAPIを分離して部分的にCMS化することができます。設計を一から見直すことなく、部分的な変更が可能になります。無理な工数を割くことなく、拡張性の高いWEBサイトを構築することができます。microCMSを使って実装していきます。v6.13.4microCMSのアカウントを作成してログインして下さい。)とPost(募集内容)の2つのコンテンツモデルを用意します。CareerはPostを複数持つことができる一対多のリレーションで作成します。microCMSを初めて使う場合は、こちらの記事も読んでください。管理画面からモデルとスキーマを作成します。CareerモデルCareerモデルのスキーマCaeerモデルには新卒採用と中途採用のコンテンツを追加して下さい。PostモデルPostモデルのスキーマPostモデルはお好きにコンテンツを作成してみて下さい。IT系の求人であればフロントエンジニアやプロダクトマネージャーなどが挙げられます。Nuxt.jsプロジェクトのセットアップCLIでプロジェクトの雛形を簡単に作れるcreate-nuxt-appを使って、プロジェクトを作成していきます。nuxt-microcmsいくつかオプションを聞かれます。universal(SSR)モードを選んでください。APIキーの保護microCMSでは、APIキーをheadersに含めてリクエストを送ってデータを取得します。そのため、APIキーはenvファイルなどで保護する必要があります。}なのでdotenvを使ってenvファイルを扱います。ライブラリをインストールします。@nuxtjs/dotenvnuxt.config.jsに環境変数を使うための設定を追記します。API_KEY},そして、.envファイルを作成してmicroCMSで取得したAPIキーを入力します。//.envAPI_KEY=your_keyこれで、process.env.API_KEYを定義することで、APIキーを取得することができます。外部のデータを取得する場合は、PromiseベースのHTTPクライアントaxiosが便利です。axiosコードの全体像https://your.microcms.ioには、作成したプロジェクトのURLをいれてください。ここではNuxt.jsのasyncDataを使って初期化前に非同期処理によって、データを取得しています。CareerモデルのIDで遷移先を設定しています。)に紐づいた採用情報を取得します。フィルター機能を使えば、filtersパラメータをリクエスト時のURLに付与することで取得できます。[equals]のみです。こちらがリクエストURLの例です。?filters=careers[equals]content_idhttps://your.microcms.io/api/v1/posts?filters=careers[equals]content_id例えば、タグとブログ記事が紐づく複数のコンテンツ参照では、[contains]を使用します。?filters=tags[contains]content_idhttps://your.microcms.io/api/v1/posts?filters=tags[contains]content_idmicroCMSのフィルター機能をもっと詳しく知りたい場合はこちらの記事も参考にして下さい。コンテンツを絞り込んで取得できるようになりましたコードの全体像Careerデータ取得時との違いは、asyncDataのparamsを使っているところです。これで、URLのIDを取得することができます。ここではCareerモデルのcontent_idを取得しています。}};</script>採用詳細ページの取得ただしこのままでは、htmlタグがそのまま画面に出てしまうので、@nuxtjs/markdownitを使ってパースしてあげます。@nuxtjs/markdownitそして、@nuxtjs/markdonwitの設定をnuxt.config.jsに追記します。},コードの全体像こちらが採用情報の詳細ページの全体像です。Nuxt.jsの特徴で、pagesのフォルダ構成で、ルーティングを作成することができます。ここでは、careersの中にpostsフォルダがあることに注目してください。これで/careers/posts/:idといった、ネストしたURLを作成しています。}};</script>Netlifyにデプロイするには?ホスティングサービス「Netlify」にデプロイするための設定をしていきます。Nuxt.jsには静的サイトとしてビルドできるコマンドgenerateがあります。これをpackage.jsonに追記します。generateを使うと、静的な状態のファイルが入った、distフォルダが出力されます。},ただしこのままでは動的なパラメーターを用いたルートを生成することができません。Promiseを返す関数(ここではaxios)を使って、microCMSのデータを取得します。取得したデータを配列に入れることで、動的なルートを実現しています。},Netlifyの公式サイトはこちらです。https://www.netlify.com/Netlifyへデプロイする設定です。directoryには出力されたフォルダを指定します。settingsからmicroCMSのAPIキーをValueに設定して下さい。おわりに今回はmicroCMSを使って、簡易的な採用ページを作成しました。さまざまなユースケースに対応できるだけでなく、拡張性も高くなります。さまざまなアイディアでmicroCMSをご活用ください。参考https://ja.nuxtjs.org/guide/async-data/https://github.com/nuxt/nuxt.js/issues/1018-----microCMSは日々改善を進めています。MEかみむらフロントエンドエンジニア。テックブロガーでもあります。JAMstackアーキテクチャーやSPA(React、Vue)技術が好きです。