Gatsbyをためす
Gatsbyってなんだ
前々から少し気になってはいたものの、本格的に調べたことはなかったんですよね、Gatsby。静的コンテンツには向いてる、という売り文句しか知らない。もしかしたら使うかもしれない、ということで調べてみました!(「いかがでしたか?」ブログ感…)
と思ったら、調べるまでもなくいい資料を書いてくださってる方がいるのでそちらを見ましょう。わたしはReact経験はあるので、裏方のしくみで比較して教えてもらえるのは大変ありがたいです。「静的」という言葉から無意識に行なっていた誤解についても書かれていて、納得できました。 qiita.com
というわけで、使ってみようと思います。まずは環境構築。簡単とは書かれているものの、さらに安全にやるべくDockerを使うことに。さらにVS Codeを常用しているのでRemote Containersも使います(検索すれば他にもたくさん出てきますね、ありがとうございます)
コーヒー飲んでビルド完了を待ちます。できたらコンテナ内でgatsby new blog
。また少し待ちます。
最後にcd glog && gatsby develop --host 0.0.0.0
すると、サーバが立ち上がりますよ。
http://localhost:8000
にアクセスすれば、少し時間が経った後、最初のページが立ち上がりますよ!
内容を追加したい
さて、この中に自分でページを追加していきたいですよね。 というわけで書籍を買ってみました(マイナビさん、情報が埋め込みで出ないのか)。
https://book.mynavi.jp/ec/products/detail/id=115483
この書籍をパラパラを眺めている感じだと、技術者向けというよりはもともとシンプルなWebサイトを作成していた方々がターゲットみたいですね。ただ、素晴らしいのはGatsbyがそういった人でも使えるほど簡単なものになっているということじゃないですかね。React特有の概念はもちろん様々な場所に顔を出しているんですが、ページを追加してリンクを貼る、ブログ記事を足していくというだけであれば全くそういったことを気にする必要はありません。ふつうにHTML5 / CSS3が書ければ問題ない。つまり、複雑な部分をうまく隠蔽できているということでしょう。ただし、まだ詳細に使ったわけではないので、今後、不便な部分が見つかるかもしれません。それをさて置いても、最近のフロントエンド開発技術は、素のHTML / CSSからかけ離れ、しかもそれがカッコいいことだという風潮になっているので、Gatsbyのとっつきやすさは、なんだか安心しますね。
本音を言えば、確かにHTML / CSSの言語仕様が最近のWebアプリの要望に応えきれておらず、無理をしていることが一番の問題だとは思うんですけどね。複数の技術がシームレスにつながるようになればいいですね(他力本願)。