All Articles

フロントエンド(特にReact)を学ぶとき、Gatsbyでブログ運用してちょっとずつ慣れていくと、いいお手本がない問題の解決になる

マイブームはこのブログとFlutterによるアプリ開発です。 将来を見据えてRustを学びたいと個人的に考えているのは愛から割らずです。 ただ、フロント(アプリを含む広義)の基礎に触れる機会がなかなか楽しいです。

nodeの登場以降Webフロントが隠蔽されてしまった

昨今のWebフロントエンド技術習得の壁は、Reactとかその他node系の様々なツールの登場によって、いい感じの実運用されているコードが手に入りづらくなったことだと思っています。 昔はHTML, CSS, JavaScriptのすべてがブラウザからアクセスするだけで読めたので、隠蔽されてしまったのは大きな痛手です。 まあ、おちついてReactでも学べって話になるのですが、独学だと流石に限界があります。

そういうわけでいい感じに運用できるGatsbyは、学習教材として宝の宝庫かなと思います。 もちろん、学びに適したツールがGatsbyだけではないはずですが、自分で運用しているサイトだとソースコード読むのもはかどりますよね

個人的経験「カスタマイズするとReactのいいコードに触れられる」

私はGoに軸足をおいてフロントやアプリを避けてきたタイプのプログラマなので、フロントとアプリの知識はほぼゼロです。 (強いて言うなら10年前のjQueryとbootstrapの時代くらいは触っていました)

そんな私でも、Gatsbyでブログをやろうと思えば、JSXとか、モダンなJavaScriptとか、そういったものに触る機会を得ます。 すると不思議なことに、解説されただけではいまいち腑に落ちなかったコンポーネント指向がなんとなくわかってきます。 私の理解はなんとなくだから完全な理解とはまた違いますし、自分で一から書くことはできません。 それでも、コンポーネントをバラバラにして読み込んでいるようなイメージはなんとなくつかめます。 もちろん、Gatsbyとテンプレートのソースコードを読めば更に理解が深まるでしょう。

フロントエンドの壁である「いいお手本がない」問題の解決策として、Gatsbyはイケてる

Gatsby自体が相当にイケてるツールなので、イケてるツールに触れることで昨今のイケてるWebサイトの作り方を学びましょう。 ブログって運用していると、いろいろとカスタマイズしたいところが出てくるもので、必要そうなところに当たりをつけて、えいやっと改修を入れてみるといろいろわかります。 (ミスってブログが壊れてもmdファイルさえ無事なら比較的簡単に再建できます)

私個人としては、新しい概念に触れて学びをえる非常に良い機会でした。

私が行ったカスタマイズの紹

私がGatsbyで行った改修は、ダークモード化です。 最初は、昔のpostで書いたようにgatsby-starter-templateでブログを作りました。 このテンプレートだと、aタグの色の変更方法がわからず、テンプレート自体のソースはだいたい全部読みました。 読み切った結果、aタグの色はテンプレートリポジトリではなく、Gatsbyの処理中に指定されているっぽいことがわかりました。 その設定場所をみつけられなかったため、今はgatsby-starter-lumenという別のテンプレートに変えました。

この経験から得た教訓は、わからないコードを読み砕いていく作業は、読んだ人の学びになるということです。 加えて「チュートリアルではわからないことも実際に運用されるコードだとわかる」というのも、やはり私にとっての再発見です。

こういう経験が積めるのでGatsbyおすすめです。

なぜかFlutter開発に活きている

新たな概念に触れたことで、なぜか趣味のFlutterアプリ開発で生きてきている気がします。

共通する考え方(学んだこと)

昨今のWebやアプリでは、Component(React), Widget(Flutter)と呼ばれる部品の組み合わせでViewが生成されています。 (名前はツールによって変わります)

各部品の位置は、部品の形を保ったままちょっとした改変でずらすことができます。 テストも部品単位で書けるためシンプルに保ちやすいです。

各部品の状態(state)は各部品が自己完結的に所持しているため、変更がよそに影響を与えません。 モノリシックな塊であったフロントが徐々に細分化されている、という流れがあるようです。

まとめ

Gatsbyという実運用に耐えるReactのコードを通して、Reactを学ぶと捗ります。 私個人としては、もうちょっとブログのカスタマイズを重ねたいところです。