React Gatsbyの公式チュートリアルをやってみた
auです。
最近、React Gatsbyのチュートリアルをやりました。
最近、静的サイトジェネレーターのツールである、Gatsbyを勉強しています。
公式チュートリアルがあるのでやろうと思い、一通りやってみました。
最初からやってみた感想になるのですが、src/pageの中にjsファイルを作成していくだけで、ページを追加できるのは簡単だしやり易いと感じました。
また、React Nativeをやっていたこともあり、ページの記法についてはあまり苦労しませんでした。やはりReact共通の書き方みたいですね。
HTMLにあるタグはほとんど使えるみたいでした。リンクを作成する時は、gatsbyのLinkをimportする必要がありました。
<Link to="/example/">Example</Link>
それでもこんな感じなので、より分かり易いと感じました。
CSSの適用も、src/stylesというディレクトリの下に.cssファイルを作り、それをimportするだけでした。限りなくHTMLですね。
他にも、React Nativeと同様に、ファイルの変更はその場で書き換わるため、デバッグはやりながらできます。流石にconfigの変更などは無理みたいでした。
共通のパーツをcomponentディレクトリに置いておくことで、簡単に使いまわすことができました。React共通の考え方みたいですね。
GraphQLというクエリ言語も触ってみました。どれくらいのファイルがあるのか、ファイルの中のステータスといった情報をSQLみたく検索することができ、表示する内容をコードとして書くことで、indexに別のページ情報の一部を表示するといったことができました。慣れるまで時間がかかりそうですが、Gatsbyを使うなら覚えておきたいと思います。
一通りやって、よかった点や印象にに残ったことを書いてみました。フロントの知識をもっとつけようとも思いました。