はじめに

投稿者について

初投稿です。
受託開発の企業でサーバーサイドエンジニアをやっています(2年目)。
仕事では、主にLaravelを使用して開発しています。

本記事について

構築したサイトを技術やサービスも含め、共有させていただきます。
また、目次の「Nuxt.jsとは？」「Netlifyとは？」「microCMSとは？」については、
初学者の方、自身の備忘録用に記載させていただきます。

目次

サイト構築の経緯
使用した技術・サービス
Nuxt.jsとは？
Netlifyとは？
microCMSとは？
構築したサイトについて
技術的な課題
所感

サイト作成の経緯

フロントエンドの技術をもっと身につけたいと思い、UdemyでNuxt.jsを学習。その後、東京都がNuxt.jsを使い、Netlifyというホスティングサービスでサイトを公開しているという話を上司から聞きました。

自分でも調べていくと、他の都道府県のコロナウイルス対策サイトも続々と作られていました。

しかし、中には一回の検索ではヒットしない非公式のサイトもあり、一覧で見れたらいいなーと思って構築しました。

参考記事
東京都、Vue＋Nuxt.jsで構築した「新型コロナウイルス感染症対策サイト」をNetlifyで公開
 岡山県の高校生エンジニアが「新型コロナウイルス感染症対策サイト」

使用した技術・サービス

Nuxt.js
Netlify
microCMS(途中まで使用)

Nuxt.jsとは？

Nuxt.jsはVue.jsのフレームワークです。
Vue.jsの欠点だったSSR(サーバーサイドレンダリング)を可能とし、SPAよりも初回表示速度の向上やSEOの向上が見込めます。
開発時には、SSR、SPA(シングルページアプリケーション)、Static Site(静的化)の中から選ぶことができます。

詳しくは下記をご覧ください。

参考記事
Nuxt.jsとは何か
 【Nuxt.js】Vue.jsをより効果的に使えるフレームワークのメリットや利用シーンを紹介！

Netlifyとは？

Netlifyは個人ブログや簡易な静的サイトを公開できるサービスです。
機能はサイトを公開するだけにとどまらず、ビルドやドメイン登録など様々な機能を使うことができます。

GitHubと連携することで、pushやmergeする度に自動でdeployされるので非常に便利でした。

参考記事
高機能ホスティングサービスNetlifyについて調べて使ってみた

microCMSとは？

microCMSは日本製のHeadless CMSです。

Headless CMSとは、表示する画面のないCMSという意味であり、CMSで代表的なWordPressとは異なりAPIベースで作成していきます。

代表的なCMSには、microCMSの他にContentfulやStrapiなどが挙げられます。

webサイト開発時、途中までmicroCMSを使用していたのですが、jsonで作ればいいやってなったので、結果的には使わなくなりました。

参考記事
ヘッドレスCMSとは何か？従来CMSとの違いやメリデメを解説！
Headless CMSとは？代表的な９のCMSを比較してみました！

構築したサイトについて

地方名をクリックすると各地方に紐づく都道府県を表示するように実装しています。
地方名と都道府県(都道府県名、サイト名、URL、画像)はv-forで表示し、
各地方のリンクにはvue-routerで設定しています。

デザインは東京都新型コロナウイルス感染症対策サイトを参考にさせていただきました。

高度な技術は使用していないので、Javascriptを触っている人なら簡単に構築できると思います(僕は苦戦しました)。

技術的な課題

サイドメニューをVuexで実装できるかなと試みたが、componentsディレクトリ配下では使用できないことを知り断念。どこかで使用できないか検討中。
netlify_fomsを使い、お問い合わせフォームを作成したが、submit後にメールが届かない問題が発生し断念。現在調査中。
サイトがシンプルすぎるので、機能の追加や各都道府県の表示項目を追加しようか検討中。
HTMLとCSSで苦戦したので、学習が必要。

まだまだ実装で不備なところも多いので、アドバイス等ご教示いただけると幸いです。

所感

サイト構築に当たって、使用したNuxt.js、Netlify、microCMSはこれまで触ったことがなかったので、とにかく新鮮で、調べるのも使うのも夢中になっていました。

今後もポートフォリオを作るなりして、サーバーサイド、フロントエンドの技術を上げ、高度な実装ができるように努めます。