Gatsbyを実際に使ってみる [プログラミング]
先にGatsbyの入門をしようと見ていたら、本家のチュートリアルをやってみた、みたいなクソみたいな記事がググって上位に出てくる始末だったと書いた。Qiitaの記事って本当に価値がある情報もあるんだけど、7割がクソみたいなやってみた記事とかだったりするので、正直そのどちらかを踏むかでQiitaを開くのを躊躇う。
まだチート表みたいにわかりやすくまとめているのはいいとして、やってみた記事はQiitaみたいな総合サイトでやることじゃないだろ。自分のところでやってろ、といつも思うんだけど。自分が書いたものを読まれたいのは分かるけど今一度他の人に見せて有用かどうかを考えるべきだろうな（人のこと言えんけどQiitaのように大きなところじゃ書いていない）。
ともあれ、ググって上位がいいというものでもないというのはわりと最近はっきりとしてきたように思う。確かにSEOが流行ってGoogleのアルゴリズムといたちごっこで、中国人とかが人のサイトにリンクを貼るSEOをやっている頃よりかはマシなのかもしれないけど、それでも必ずしも良質なページが出てくるわけではないことははっきりしている。というか、自分が調べる事がニッチな事が多いのかもしれないけど、それにしてもSEOが効いてるなぁと思われるサイトはわりとある。
ちがうちがう、そうじゃそうじゃないｗ。今回はGatsbyを使うという記事を書こうとしたんだった。そこそこReactのイロハを見てきて、少し何が書いてあるのかわかるくらいにはなった。そんなわけで参考にしたページを見てみる。
こういう噛み砕かれたページが欲しかったんだよね。
https://tsukamon.com/blogs/3
とりあえず、出来合いのものを導入するだけの訳の分かってないページよ滅びろ、と言いたい。そんなこと誰だってできんだよって。そこから先がしんどいからみんなで共有するのが筋ってもんでしょ。
npxは自分では使っていないけど、使っていない方が一般的なような気がする。
静的サイトと言っているけど、作っている時は動的に動く。保存したらすぐに反映される。初め、保存したらリロードせずに反映させられるって、普通の動的サイトよりか動的でしょと思ったりしたが、それはデプロイする時は別らしい（まだ確認してない）。静的なのが便利なのはデプロイするときで、実際に開発する時は動的に動いた方が楽でいいでしょって話。
でコマンドが走ったままになるけど、そこは動的に生成されているらしい。静的であると言われていて、こういう挙動をされるとちょっとアレ？と思ってしまった。実際にファイルを書き換えて反映されるのを見ると分かるのだけれど、わざと間違ってみると動的に生成されているのがよく分かる。
下のはjsxのソースの最後に「)」を閉じないでおいたものだ。ファイルを保存するだけで、ばっちりシンタックスエラー（Parsing error）が出ている。
これはgatsby cliの方で、同じようなエラーがブラウザの方にも出ている。Failed to compileと出ていて、HTMLとして生成するのをコンパイルと言っているようだ。直して保存するだけで、ブラウザのリロードもせずに直ったのを確認できる。まさにアジャイルという感じではある。
実際に静的ページを生成するには
で、publicディレクトリに配置されるみたい。
https://www.gatsbyjs.org/tutorial/part-one/#deploying-a-gatsby-site
そこではsurgeというツールが紹介されているが、surge.shというサイトにしかデプロイできない。まぁ他のにしたってnetlifyだけとかそんなに変わらないんだけども。たぶん、publicディレクトリをまるっと上げているのだろうけど、実際に何かを選んであげているのかもしれないので、実際に何を上げているのかを知っておきたい気はする。
public/index.htmlをファイルとしてブラウザで開いてみたけど、gatsby developの時のように表示されない。HTMLとしては同じみたいなんだけど表示は違う。別のファイルはHTMLに変換されてうまくいっているんだけど。あ〜ビルドエラーの状態で作っちゃったのかな？ いろいろやっているうちに更新されてファイルで開いても問題ありませんでした。というか、エラーでもhtmlの生成はされるのか…。もしかすると何かの勘違いかもしれない。
次はApacheか何かを入れて、publicフォルダをWebサーバ経由でアクセスしてみようと思う。でも文字列を表示するだけのページしか作っていないから、後でマークダウンが表示されるようなページを作ってからにしようかと思う。ファイルとしてブラウザで開けるぐらいだから、試しにWebサーバのドキュメントルートに置いてみたけど普通に見れた。まぁそうだよな。
もう少しブログ的なものを作ってみてから、自分のWebサーバに上げてみます。とりあえず、メリットが見えてくるところまでやってみる。そうしないとやる意味があまりない気がするし。爆速言うても、手でHTML書いたり、オーサリングツール使ってページを生成しているのと違いがなければ、そっちの方がいいような気がするしね。正直、最近の静的サイトジェネレーターの存在意義を図かねている。確かに最新のJavaScript系の知見を使って作られているのはそうなんだろうけど、それを実感できるところまで行くのは難しいかもしれん。
まだチート表みたいにわかりやすくまとめているのはいいとして、やってみた記事はQiitaみたいな総合サイトでやることじゃないだろ。自分のところでやってろ、といつも思うんだけど。自分が書いたものを読まれたいのは分かるけど今一度他の人に見せて有用かどうかを考えるべきだろうな（人のこと言えんけどQiitaのように大きなところじゃ書いていない）。
ともあれ、ググって上位がいいというものでもないというのはわりと最近はっきりとしてきたように思う。確かにSEOが流行ってGoogleのアルゴリズムといたちごっこで、中国人とかが人のサイトにリンクを貼るSEOをやっている頃よりかはマシなのかもしれないけど、それでも必ずしも良質なページが出てくるわけではないことははっきりしている。というか、自分が調べる事がニッチな事が多いのかもしれないけど、それにしてもSEOが効いてるなぁと思われるサイトはわりとある。
ちがうちがう、そうじゃそうじゃないｗ。今回はGatsbyを使うという記事を書こうとしたんだった。そこそこReactのイロハを見てきて、少し何が書いてあるのかわかるくらいにはなった。そんなわけで参考にしたページを見てみる。
こういう噛み砕かれたページが欲しかったんだよね。
https://tsukamon.com/blogs/3
とりあえず、出来合いのものを導入するだけの訳の分かってないページよ滅びろ、と言いたい。そんなこと誰だってできんだよって。そこから先がしんどいからみんなで共有するのが筋ってもんでしょ。
npxは自分では使っていないけど、使っていない方が一般的なような気がする。
静的サイトと言っているけど、作っている時は動的に動く。保存したらすぐに反映される。初め、保存したらリロードせずに反映させられるって、普通の動的サイトよりか動的でしょと思ったりしたが、それはデプロイする時は別らしい（まだ確認してない）。静的なのが便利なのはデプロイするときで、実際に開発する時は動的に動いた方が楽でいいでしょって話。
gatsby develop
でコマンドが走ったままになるけど、そこは動的に生成されているらしい。静的であると言われていて、こういう挙動をされるとちょっとアレ？と思ってしまった。実際にファイルを書き換えて反映されるのを見ると分かるのだけれど、わざと間違ってみると動的に生成されているのがよく分かる。
下のはjsxのソースの最後に「)」を閉じないでおいたものだ。ファイルを保存するだけで、ばっちりシンタックスエラー（Parsing error）が出ている。
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
/Users/hogehoge/src/gatsby/hello-world/src/pages/index.js
4:1 error Parsing error: Unexpected token, expected ","
2 |
3 | export default () => (<div>Hello!aaa</div>
> 4 |
| ^
[×] 1 problem (1 error, 0 warnings)
File: src/pages/index.js
これはgatsby cliの方で、同じようなエラーがブラウザの方にも出ている。Failed to compileと出ていて、HTMLとして生成するのをコンパイルと言っているようだ。直して保存するだけで、ブラウザのリロードもせずに直ったのを確認できる。まさにアジャイルという感じではある。
実際に静的ページを生成するには
gatsby build
で、publicディレクトリに配置されるみたい。
https://www.gatsbyjs.org/tutorial/part-one/#deploying-a-gatsby-site
そこではsurgeというツールが紹介されているが、surge.shというサイトにしかデプロイできない。まぁ他のにしたってnetlifyだけとかそんなに変わらないんだけども。たぶん、publicディレクトリをまるっと上げているのだろうけど、実際に何かを選んであげているのかもしれないので、実際に何を上げているのかを知っておきたい気はする。
public/index.htmlをファイルとしてブラウザで開いてみたけど、gatsby developの時のように表示されない。HTMLとしては同じみたいなんだけど表示は違う。別のファイルはHTMLに変換されてうまくいっているんだけど。あ〜ビルドエラーの状態で作っちゃったのかな？ いろいろやっているうちに更新されてファイルで開いても問題ありませんでした。というか、エラーでもhtmlの生成はされるのか…。もしかすると何かの勘違いかもしれない。
次はApacheか何かを入れて、publicフォルダをWebサーバ経由でアクセスしてみようと思う。でも文字列を表示するだけのページしか作っていないから、後でマークダウンが表示されるようなページを作ってからにしようかと思う。ファイルとしてブラウザで開けるぐらいだから、試しにWebサーバのドキュメントルートに置いてみたけど普通に見れた。まぁそうだよな。
もう少しブログ的なものを作ってみてから、自分のWebサーバに上げてみます。とりあえず、メリットが見えてくるところまでやってみる。そうしないとやる意味があまりない気がするし。爆速言うても、手でHTML書いたり、オーサリングツール使ってページを生成しているのと違いがなければ、そっちの方がいいような気がするしね。正直、最近の静的サイトジェネレーターの存在意義を図かねている。確かに最新のJavaScript系の知見を使って作られているのはそうなんだろうけど、それを実感できるところまで行くのは難しいかもしれん。
タグ：GATSBY
コメント 0