auの日記

プログラミング初心者の日記。(auはハンドルネームです)

React Gatsbyの公式チュートリアルをやってみた

auです。

最近、React Gatsbyチュートリアルをやりました。

www.gatsbyjs.org

最近、静的サイトジェネレーターのツールである、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を使うなら覚えておきたいと思います。

一通りやって、よかった点や印象にに残ったことを書いてみました。フロントの知識をもっとつけようとも思いました。