Gatsbyをためす

Gatsbyってなんだ

前々から少し気になってはいたものの、本格的に調べたことはなかったんですよね、Gatsby。静的コンテンツには向いてる、という売り文句しか知らない。もしかしたら使うかもしれない、ということで調べてみました!(「いかがでしたか?」ブログ感…)

www.gatsbyjs.com

と思ったら、調べるまでもなくいい資料を書いてくださってる方がいるのでそちらを見ましょう。わたしはReact経験はあるので、裏方のしくみで比較して教えてもらえるのは大変ありがたいです。「静的」という言葉から無意識に行なっていた誤解についても書かれていて、納得できました。 qiita.com

というわけで、使ってみようと思います。まずは環境構築。簡単とは書かれているものの、さらに安全にやるべくDockerを使うことに。さらにVS Codeを常用しているのでRemote Containersも使います(検索すれば他にもたくさん出てきますね、ありがとうございます)

blog.flan999.com

qiita.com

コーヒー飲んでビルド完了を待ちます。できたらコンテナ内でgatsby new blog。また少し待ちます。 最後にcd glog && gatsby develop --host 0.0.0.0すると、サーバが立ち上がりますよ。 http://localhost:8000にアクセスすれば、少し時間が経った後、最初のページが立ち上がりますよ!

f:id:ironoir:20210116215054p:plain

内容を追加したい

さて、この中に自分でページを追加していきたいですよね。 というわけで書籍を買ってみました(マイナビさん、情報が埋め込みで出ないのか)。

https://book.mynavi.jp/ec/products/detail/id=115483

この書籍をパラパラを眺めている感じだと、技術者向けというよりはもともとシンプルなWebサイトを作成していた方々がターゲットみたいですね。ただ、素晴らしいのはGatsbyがそういった人でも使えるほど簡単なものになっているということじゃないですかね。React特有の概念はもちろん様々な場所に顔を出しているんですが、ページを追加してリンクを貼る、ブログ記事を足していくというだけであれば全くそういったことを気にする必要はありません。ふつうにHTML5 / CSS3が書ければ問題ない。つまり、複雑な部分をうまく隠蔽できているということでしょう。ただし、まだ詳細に使ったわけではないので、今後、不便な部分が見つかるかもしれません。それをさて置いても、最近のフロントエンド開発技術は、素のHTML / CSSからかけ離れ、しかもそれがカッコいいことだという風潮になっているので、Gatsbyのとっつきやすさは、なんだか安心しますね。

本音を言えば、確かにHTML / CSSの言語仕様が最近のWebアプリの要望に応えきれておらず、無理をしていることが一番の問題だとは思うんですけどね。複数の技術がシームレスにつながるようになればいいですね(他力本願)。