見出し画像

真っ白なReactからの脱却 -Gatsby.js-

どうも〜最近自分の中でフロントエンドが流行りに流行っているTuckerです。今回はその余波でGatsby.js最高だぞ!という話をします
※React.js と Gatsby.jsを名前くらいは聞いたことある前提で話していくのでご容赦ください。また、この記事は私のポートフォリオサイト(鋭意開発中)にも掲載していますので、そちらを読んでいただければ幸いです。

そもそもGatsby.jsとは?

まずはGatsby.jsについてざっくり説明。Gatsby.jsとは、React.jsとGraphQLを用いたWEBサイトを生成するフロントエンド開発用の静的サイトジェネレータです。

…わかりづらいですね。ちょっぴり丁寧に書きます。

 React.jsはコンポーネント(HTMLのパーツのようなもの)を作り出し、それらを統合してアプリケーションを作っていくのですが、如何せん煩雑になりやすいのでコードの管理が難しかったり、人によってディレクトリわけが違ったり、公開する時には「結局一つにまとめるんかい!?!?」みたいな感じだったりと…
 色々と自由度が高すぎるので逆にある程度のルールが欲しかったりするんです。

そんなあなたにGatsby.js!! Gatsby.jsはReact.jsのプロジェクトにある程度の秩序と見通しの良さをもたらしてくれます。Gatsby.jsにはディレクトリ分けにある一定のルールがあり、そのルールに従うことでReact.jsの足りない機能を補えるようになります!

詳しくは以下を参考にしてください!
https://qiita.com/kikuchi_kentaro/items/985b182a78c3553981ee

Markdownに簡単対応!まるでブログ!

 これがまぁまぁ大きいです。これまではデータ構造的にどうしても文字列を直読み込みした後にチマチマと整形しなくてはいけなかったのですが、Gatsby.jsはプラグインのおかげでMarkdownをしっかりHTMLに出力してくれます!

 Markdown?簡単に実装できるんじゃないの?って感じに聞こえますが、実際に開発していると思った以上に痒い所に手が届くんです…頭の整理がつきやすいというか...処理系等を完全に分けられるというか...etc... 

 ローカルに保存したMarkdownファイルを自分なりのスタイルに書き出せすコントロールも簡単なんです!

 ともあれ、Gatsby.jsに移行した理由の30%くらいは「Markdownに簡単に対応できるというから」です。

Routingが簡潔でわかりやすい

 Reactの弱点というか気になる点としてRoutingがどうやるのかわからない...というめっちゃ初心者の悩みを抱えてました…(ReactはSPA[シングルページアプリケーション]向けなので基本思想ではURLがルートただ一つなんですね。それはそうって感じ。) 解決方法は色々あるようですが、僕が調べた限りだと次の3通りのうちどれかでやるのが定番っぽいです。

 ・自力で実装(javascriptでゴリゴリ書く)
 ・React-Routerを使う
 ・Gatsby.js や Next.jsのような上位フレームワークを使う

言わずもがな3つとも触ったので、それぞれの所感を紹介したいと思います。

・自力実装
 これはjavascriptの window.location や history.pushState() を使ったRoutingです。onClickなどのリスナーにjavascriptの関数をセットしておくことで、ボタンが押された時に画面切り替え(ルーティング)を行うという実装方法です。

 単純に記述量が多くなったり、だんだんとルーティングがわからなくなったり、読み込みが入ってしまったりと、なかなかReactと噛み合わない部分が目立つようになってきたので、おとなしくReact-Routerを使うようにしました。

・React-Router
 Reactのようなフロントエンドフレームワークによくある「変更部分だけを描画処理する」という機能をうまく表しているライブラリです。SEO対策的にもURLと表示画面の関連付けは重要ですし、画面に表示されているコンポーネントがどのコンポーネントなのかはURLを見れば一発でわかります。

 動的ページ生成(RESTAPIでいうところの/user/:idのような、対応するidのページを自動的に作ってくれる機能)にも対応しており、痒いところに手が届きます。

 しかしもちろん弱点があって、リンク先のURLをブラウザで直打ちしてしまうとCannot GET/URLみたいな感じで描画してくれません。クライアントサイドレンダリングという技術のおかげで素晴らしいことは素晴らしいのですが、ちょっぴり嬉しくなかった...。

 はじめは「React-Routerよ〜カバーしてくれなかったかぁ〜」くらいで済んでいたのですが、実は意外と問題なんです。(主にSEO対策的に...。) また、Routingを記述していくにあたってコンポーネントのファイルがフォルダ内に飽和しがちでとても管理が大変でした...。

・Gatsby.js or Next.js
 「とんでもねぇ...待ってたんだ!」 そこで登場、上位フレームワーク。彼らがサポートしてくれたのはサーバーサイドレンダリング[通称:SSR]と呼ばれる技術で、サーバがあらかじめWEBページを生成するため、React-Routerの時とは違いURLに対応した実体ページが存在します。このおかげでSEO対策的にはとても考えやすくなっておりクローラにも親切になりました〜。

 またそれだけではありません。Gatsby.jsではURLを持たせたいコンポーネントファイルは/pages/というディレクトリに置くという規約があります。これがサーバーサイドレンダリングのキモで、特に何も設定する必要はなくとも/pages/に配置するだけでそのまま(ファイル名の)URLになります。

わかりやすい...シンプル・イズ・ベスト...。


 そして、(他にもたくさんありますが)こういった規約のおかげでファイルのディレクトリ分けがわかりやすくなっています。ファイルの管理コストが低くなり、プロジェクト全体の見通しが立ちやすくなっているため、とても快適に開発ができます。

あと、個人的に良い

 説明がちょいと難しいのですが、私はこのサイトをNetlify.comという静的サイトホスティングサービスで公開しています。

 Netlify.comでは、静的サイトの公開のみならず、Amazon Lambda を基盤としたサーバーレスサービスや、フォームの入力内容をサーバがなくとも保存してくれるサービス。また、ユーザ認証基盤の提供などなど...多くの高機能なサービスがあります。これらの機能とGatsby.jsは相性がとてもよく、プラグインでのサポートも充実しています。

 NetlifyにGatsby.jsを使って生成したサイトを簡単に公開する。このとても簡単なワークフローを活かさない手はないと思い使い始めた次第です。

まとめ

 最後まで読んでくださってありがとうございます。まだまだ開発途中のWebサイトですが、これからもどんどん作り込んでいきたいと思います。

みなさんもGatsby.jsを使ってみてはいかがですか?

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

徒然と書いていますが、支援してくださると今後の活動の励みになります。何卒、よろしくお願いいたします。

ありがとうございます。とても励みになります。
4
Webエンジニア.最近はReactとかExpress.jsとか. UI/UXデザインを専攻.写真にも興味があるけど最近はお蔵入り. 
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。