こんにちは。今回は横浜市磯子区に開業された占いサロンSarey様のWebサイトを作成させていただきました。開業間もないとのことでしたのでシンプルで控えめなデザインで、実装に関してはGatsby.jsを用いてReactベースでコーディングを行い、効率的に開発することができました。私個人としては企業様の案件に参画させていただく働き方がメインで、Web制作については紹介でのみ承らせていただいています。これまで個人としての仕事について記事に書けることがあまりなかったので、今回は紹介させていただきました。

おはようございます以前の記事でも書いたように、Gatsbyを用いてブログを構築した場合は、更新のために記事投稿ごとに手動でビルド&デプロイが必要との認識でした。しかしNetlifyとContentful側の設定で、簡単に記事投稿時に自動でビルド&デプロイできるように設定できるとのことがわかりましたので今回はその件について紹介します。NetlifyのSite SettingからBuild&Deployを選択し、任意の名前でBuild hooksを作成します。作成されたBuild hooksをコピーします。ContentfulのSettingからWebhooksを選択し、 Netlifyを選択、先ほどコピーしたBuild hooksを入力します。 これだけで設定完了です。 設定画面では、どのタイミングでビルドを実行させるかの選択可能です。 Gatsbyを用いる際の懸念点だった、記事投稿時のデプロイの設定が簡単にできて驚きました。 Contentfulは非エンジニアが使うには少し難しいところもあるのですが、 代わりにWordPressをヘッドレスCMSとして用いたりすれば、Gatsbyを用いたWebサイトを一般のクライアント様相手にも導入することができそうですね。

こんにちは自作した当ブログでは、Styled-Componentを用いて実装していました。Styled-Componentは実装の容易さと、コードの可読性の高さが良く、好んで使っていました。ただ、Styled-Componentも欠点があり、それは実行速度とSSRとの相性の悪さです。Styled-ComponentはCSS in JSの一種で、CSSファイルではなく、jsファイル内に直接CSSを記載します。そのため、実行時にCSSへのコンパイルが必要になることから、実行速度上の問題、SSR、SSGとの相性の悪さがあります。通常のReactでは上記の欠点はそこまで気になる点ではなかったと思いますが、最近のReactフレームワークではSSR、SSGや、速度の点を重視していることから、使いづらさを感じることも多くなってきました。もちろん、実装する上ではとても便利ではあるのですが...そこで、当ブログではCSS Modulesを用いることにしました。CSS Modulesは通常のCSSのように外部CSSファイルに記述する方法ですが、違うのはクラス名が衝突しないように、呼び出し時に一意なクラス名を命名してくれる点です。参考：CSS Modulesの歴史、現在、これからこの点はStyled-Compoentと同じですね。これを用いてコンポーネント毎にCSSを定義すれば、クラス名の衝突を回避しつつ、可読性もそこまで下がらずに、通常のCSSの良い点を利用できそうです。Styled-ComponentからCSS Modulesの移行ですが、Styled-Componentで利用していたCSSをそのまま流用するだけだったので、そこまで面倒ではありませんでした。

こんにちは今回からGatsby.jsについての記事を備忘も兼ねて投稿していきたいと思います。Gatby.jsReactフレームワークの一種で、静的サイトジェネレーターです。https://www.gatsbyjs.com/](https://www.gatsbyjs.com/静的サイトジェネレーターとは、従来のReactのようなWebアプリケーションではなく、ビルド時に全ての静的なHTMLを生成し、それをホスティングサービスにデプロイしたり、AWSのS3などで公開するようなものです。Reactを用いて静的なWebサイトを構築したいような場合に用いると便利ですね。単純なReactのみを用いた場合はNode.jsの実行環境が必要になりますし、CSRのため、実行速度やSEO上の問題もあります。従来の単純なHTML、CSSを用いるよりコンポーネントを用いた方が開発効率がまったく違いますし、静的なWebサイトを構築したい場合はかなり良い選択肢になると思います。またContentfulのようなヘッドレスCMSと連携し、Contentfulで投稿した記事を取得し、表示することも可能です。（当ブログはこのGatsby.js + Contentfulで作成されています）国内ではWebサイトを作成する際にWordPressが選択肢に上がることが多いと思いますが、Gatsbyは次世代のWordpressとも呼ばれており、学んで損はない技術かと思います。Next.jsとの比較同じReactフレームワークのNext.jsと比較してどうでしょうかGatsbyは静的サイトジェネレーターで、SSGに特化されたフレームワークですが、Next.jsはSSR、SSG、ISRなどのレンダリングをサポートしており、趣向が違います。Next.jsでも静的Webサイトは作成可能なようですが、それに特化した技術ではないため、そのために余計なものを省かなければいけなく、静的サイトジェネレーターとしてはGatsbyに軍杯が上がるのではないでしょうかもちろんNext.jsも開発効率や拡張機能が素晴らしく、大規模なWebサイトやWebアプリケーションを作成する場合はこちらを使うべきです完全に静的なWebサイトや、データの更新頻度が少ないブログなどを構築する場合はGatsby.jsWebアプリケーション、規模の大きいWebサイト、データの更新頻度の高いサイトを構築する場合はNext.jsのように目的に応じて使い分けるのが良さそうです。Gatsbyの欠点GatsbyはSSGに特化したフレームワークですが、それ故の欠点もあります。それは、ビルド時に全てのページのHTMLを生成することそのため、ヘッドレスCMSなどで記事を投稿した際は、反映するためにビルド&デプロイが必要になってしまうことです。先ほど更新頻度が低い場合、と書いたのはそのためです。また、ページ数が多くなってきた場合にビルドの度に時間がかかってしまいますね。あくまでSSGに特化したフレームワークですので、その点を理解して使用するべきだと思いました。

お久しぶりです。気付けばこのブログを半年近く放置していたでしょうか...このブログはこれまでWordpress　+　無料テンプレートで作られていたのですが、この度Gatsby.jsでリニューアルしました。Wordpressだと公開するのにサーバー費用がかかる → Gatsby.jsならホスティングサービスの無料プランがある自分でコーディングすることにより勉強になる&技術力のアピールになるデザインを自分の好きなように作成できるなどの理由からずっと自作したいと思っていたのですが、ようやく取り掛かることができました。Gatsby.jsはReactベースの静的サイトジェネレーターで、Next.jsと比較するとSSGに特化したフレームワークです。今回シンプルなデザインで作成したということもあり、仕事の合間に取り掛かって一週間ほどで公開することができました。Gatsby.jsについてはまた別の記事で書いていければと思います。まだもう少し手を入れたい部分もあるので、これからも少しずつ更新していく予定です。Reactベースでのコーディングは楽しいですね今回のソースコードは以下に公開しています。https://github.com/chinoshuta/free-tech-log<br>では、今後ともよろしくお願いいたします。