Gatsbyを使ってみた

簡単に自分の自己紹介

私の技術レベルをまず紹介しないと参考にならないよね？

• HTML
• CSS
• javascript
• nodejs

HTML、CSS

はまぁそれなりに知っています。CSSの動向もわりと追ってましたのである程度は分かっているつもりです。 しかし真面目にやったのは7~8年前にやってみただけ。ウェブサイトも3つぐらい見せられないレベルでは作って見ました。

javascript

アロー関数があるんですねっ。なんとなく理解しました　同期非同期難しいですのレベル。

nodejs

チュートリアル通りやってみてexpressとかelectronとか試して見て、ちょっとgoogleMapを使ったアプリ作ってみたけど（未完成）

React

あぁー聞いたことあります。

C#windows用はある程度作れる。

Wordpressではだめだったのか?

ブログを作りにあたって一番人気のWordpressがあります。
はじめは私も使ってましたが、色々と気になる点、不便な点があったので、勉強もかねてGatsbyを選びました。

Wordpress弊害?

Wordpressで何が気に入らなかったか?

• デザインの変更が難しい
• 記事を結局コードで書いてしまう。
• セキュリティも考えないといけない。
• バックアップが大変
• プラグイン互換性を気にする必要がある。
• 表示が遅い

特にバックアップ、デザイン変更が難しい（プラグインとか確かにありますが...）
記事を書く時もコードになれているせいかコードで記入しているためこれWordpress意味なくね？っと思ったため早い段階で卒業しました。セキュリティもかなりの頻度で脆弱性があるのでプラグインのバージョンアップ、ワードプレスのバージョン、phpのバージョン...orz

なぜGatsbyを選んだのか？

他のフレームワークでNext.js,Hexoとかあったのでちょっと使って見た。Hexoはデザイン変更が難しそうだった Next.jsは難しそうだったそしてGatsbyが人気が高かったため選びました。 Gatsby以外は深く使ってないのでわかりませんがNext.jsかGatsbyを選んでおけば間違いないと思いました。

最終的にここのReactの最強フレームワークGatsby.jsの良さを伝えたい！！の記事を見て決定しました。

Gatsbyは簡単？

うんチュートリアル通りやってみたら構築自体は非常に簡単でした。とりあえず見た目が良いと思った 公式のスタートアップページからgatsby-starter-netlify-cms を選んでソースをダウンロードしてビルドしたらあっすんなりビルドが通った簡単じゃん、netlifyも丁寧に公式通りやってみたら自動でアップ終了 らくらく構築が終わった。

で、ここから本題cssを記入して追加してみようか、タグやカテゴリーページ、追加してみようか。 .....?? 分からん。分からんぞ

デザインしてみる

まず分からなかったことが。「画像」この画像はどこでどうやって使っていますか？ mdファイルにjpgと書いてあるよしよし、これを変えたらできるんだね。へーーー 次。

・ブログのヘッターをちょっと変えたいんだけど。どうすればいいの。

・h1 p タグを変更したいんだが？

公式を見てみる

srcフォルダーのpagesに入れたらページが生成されるのかよしわかりました。 mdは違うところに入っているんだけどこれはなんだよ？

ヘッダーはコンポーネントの中にあるんだね？propsって何？ extendsってなに？

本当に本当に右も左も分からなかった。

難しいぞ？

プラグインの追加方法も分からなかった。HTMLのコードを追加したかったんだけど。分からなかった。 テンプレートをそのまま使うのは最初からデザインされているので楽でいいんだけど テンプレート以上のことをやろうと思うと全く分かりませんでした。 そのためテンプレート通りであれば非常に楽なフレームワークだと思いました。 それでもWordpressを使うのが嫌なので使い続けてみます。

まとめ

gatsbyをテンプレートをそのまま使うのであれば非常にいいです。マークダウン形式の方が Wordpressよりやり易くてとてもいいです。 ですが、覚えたいといけない部分が多く、テンプレート以上のことをするのであれば大人しくWordpressを使う方が楽でした。