公開日 : 2018-10-30最終更新日 : 2018-10-30

真っ白なReactからの脱却

この度、素のReactから静的サイトジェネレータGatsby.jsに移行しました。と言っても、中身はReactで構成されているし、基本的には何も変わった感じがしない今日この頃。とりあえずメリットになったっぽいことを書き下してみることにします。

その1「Markdown実装。ブログ感覚で書ける」

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

簡単そうに聞こえますが、実際に開発しているとここがなかなか痒い所に手が届くんです。頭の整理がつきやすいというか...処理系等を完全に分けられるというか...etc... ともあれ、Gatsby.jsに移行した理由の30%くらいは「Markdownに簡単に対応できるというから」です。

その2「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

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

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

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

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

その3「個人的に良い」

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

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

まとめ

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

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