<p>リニューアルにあたり、デザインやフレームワークを一新しました。<br>様々な発見がありましたので、ここに記録しておきます。<br></p><h2 id="h8b83653d7f">デザインの改変</h2><p>旧デザインはトップページが2カラムだったので、1カラムに変更しました。<br>目に入る情報は可能な限り減らして、記事の閲覧に集中できるようにしたほか、<br>夜間でも読みやすくするためダークモードも実装しました。<br></p><h3 id="h5ecf5daf36">旧デザイン</h3><p><img src="https://images.microcms-assets.io/protected/ap-northeast-1:53c80905-842b-4ee9-a157-ed176bb46df7/service/tyai-a-develop/media/old-design-blog.png" alt=""><br></p><h3 id="hb771f524f3">新デザイン</h3><p><img src="https://images.microcms-assets.io/protected/ap-northeast-1:53c80905-842b-4ee9-a157-ed176bb46df7/service/tyai-a-develop/media/new-design-blog.png" alt=""><br><br>ブログのデザインは凝りだすと時間が無限に溶けてしまい、<br>肝心の記事が書けなくなってしまうため、程々にすべきと感じました。<br></p><h2 id="h6b7c2d596f">Nuxt.js から Next.js に乗り換え</h2><p>以前は <a href="https://ja.nuxtjs.org/" target="_blank" rel="noopener noreferrer">Nuxt.js</a> を使用してブログを構築していましたが、リニューアルに伴い <a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a> に移行しました。以下のような印象を受けました。<br></p><h3 id="h3ab24f6f50">メリット</h3><h4 id="h182df68167">ホットリロード機能が優秀</h4><p>Nuxt.js に比べてホットリロードがとても早いです。一瞬で終わります。<br>Next.js 9.4 から <a href="https://github.com/facebook/react/tree/master/packages/react-refresh" target="_blank" rel="noopener noreferrer">React Refresh</a> というパッケージが使われているからだそうです。<br><a href="https://nextjs.org/blog/next-9-4#fast-refresh" target="_blank" rel="noopener noreferrer">公式サイト</a> の更新履歴に詳しい情報が書かれていました。<br></p><h4 id="hf4b7627c9a">エラーの特定が容易</h4><p>Vue.js に比べるとエラーの特定が容易になった感じがあります。<br>問題点の指摘、改善策の提案がかなり具体的で、開発者に優しいフレームワークと感じました。<br></p><h3 id="h7e4a670898">デメリット</h3><h4 id="h3a98d192c0">JSXが受け入れにくい</h4><p><code>class</code> を <code>className</code> と表現したり、JSの式を埋め込めたりと正直受け入れづらかったです。たくさん触って手に馴染ませる必要があります。<br></p><h4 id="h0f53cfbe32">関数型プログラミングの難しさ</h4><p>手続き型プログラミングとは考え方がまったく異なるため、<br>時間はかかりそうですが、メリットもたくさんあるため是非とも取得したい概念です。<br></p><h2 id="h068b5c0e22">Contentful から microCMS に乗り換え</h2><p>ヘッドレスCMSを <a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a> に乗り換えました。<br><a href="https://www.contentful.com/" target="_blank" rel="noopener noreferrer">Contentful</a> は英語ですが、microCMS は日本語のため使い方がわかりやすく、<br>リッチテキストエディタが使いやすいため、記事を書くのが楽しくなりました。<br>ヘッドレスCMSの導入を考えている方は、まず microCMS から使ってみると良いでしょう。<br></p><h2 id="h78cd50d54d">Netlify から Vercel に乗り換え</h2><p>ホスティングサービスを <a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">Vercel</a> に乗り換えました。サービスに関しては Netlify と大差ありませんが、Next.js との親和性が高い印象を受けました。<br></p><h2 id="h1171965eb8">Tailwind CSS を導入</h2><p>日本でも知名度があがってきた ユーティリティファーストなCSSフレームワークを導入しました。数十ページあるWebサイトの構築には不向きですが、コンポーネントの組み合わせで画面を構築する<strong>コンポーネント指向</strong>とはすごく相性が良いと感じました。<br><br>記事を書くのが楽しくなり、Reactについて学ぶこともできたため、<br>乗り換えてよかったと感じています。<br><br>ご閲覧いただき有難うございました。</p>

カテゴリーが「雑記」の記事

カテゴリ