GatsbyのクセとReactとの違い

Gatsbyを使って自分のサイトを開発しているのですが、進めていくうちに謎点がでてきました。
公式ドキュメントも見たりしていますが、よくわからない・・

謎点

gatsby-browser.jsとは何の為にあるのか?
gatsby-config.jsとgatsby-node.jsとの違い。両方ともサイト全体の設定だと思うけど、それらの違いがよくわからない
スタイリング時、hoge-hogeではなくhogeHogeとしないといけない理由。例えば、margin-topでなくmarginTopとか。margin-topだとスタイリングできない!←これはReactだと勉強したけどなぜこんなことをした?
<Img/>と<Layout>みたいにタグ終わりの前に/(スラッシュ)を必要なものと、いらないものとの違い
React及びGatsbyはどの概念で設計されていますか?MVC?
ReactもGatsbyも両方とも中途半端な理解なので何がReact固有の機能で何がGatsby固有な機能なのかがわからない。GatsbyJs特有ののクセがあれば教えて下さい
React及びGatsbyが勉強できる良いリンクがあれば教えて下さい

以上が謎点です。すべて答えていただかなくても結構ですので教えていただければ嬉しいです。

参考:

行動規範の内容に同意します

回答1件

ベストアンサー

あくまで私見なので突っ込みどころは多々あるかと思いますが・・・

1.gatsby-browser.jsとは何の為にあるのか?

ブラウザでページを表示される段階で何かしらの処理を行いたい場合にここに記述します。
よくある使い方としては「全画面に対して適用させたいスタイルを読み込む」が挙げられます。

2.gatsby-config.jsとgatsby-node.jsとの違い

gatsby-config.jsはプラグインやパスの設定など、静的な設定ファイルです。
それに対してgatsby-node.jsは、ビルド時(ソース諸々から静的なファイルを吐き出す段階)で実行されます。

3.スタイリング時、hoge-hogeではなくhogeHogeとしないといけない理由

これはReactがあくまでもJavascriptであるためその慣習(というか命名規則)に従っているためだと思います。
React公式 | JSXの導入に以下のような警告があります。

警告:

JSX は HTML よりも JavaScript に近いものですので、React DOM は HTML の属性ではなくキャメルケース (camelCase) のプロパティ命名規則を使用します。
JSX では例えば、class は className となり、tabindex は tabIndex となります。

同様にJSXのスタイルを決定付ける各プロパティもキャメルケースで定義されているのだと思います。

4.<Img/>と<Layout>みたいにタグ終わりの前に/(スラッシュ)を必要なものと、いらないものとの違い

回答としては「childrenを扱うコンポーネントか否か」です。
ReactにはFunctionalComponentというものがあります。
引数としてchildrenがもともと用意されており、<Component props={"hoge"}>のようにプロパティ名を明示的に指定して値を渡す必要がありません。
例えば<Test>というFunctionalComponentがあったとして、

jsx
1{/*①*/}
2<Test>hoge</Test>
3{/*②*/}
4<Test>
5  <div></div>
6</Test>
7{/*③*/}
8<Test/>

のいずれの書き方もできます。
①や②はchildrenとして"hoge"や<div></div>を渡していますが、③は渡していない(≒省略してる)イメージです。

5.React及びGatsbyはどの概念で設計されていますか?MVC?

MVCを引き合いに出したのでフレームワークの話をしているのだと思います。
その上で回答するなら、感覚的にはReactそものもがフレームワークという認識が近いかもしれません。
無理やりMVCに当てはめるならVC部分を担っています。

6.何がReact固有の機能で何がGatsby固有な機能なのか

GatsbyもReactなのでReact固有というのはこの場合ないかと思います。
Gatsby固有なのは、静的サイトジェネレータであるという点かなと思います。
React(とmarkdown)で書かれたソースをビルドすることで静的なHTML/CSS/Javascriptを吐き出しているのがGatsbyです。
その辺りは下記記事が詳しいかなと思います。

Reactの最強フレームワークGatsby.jsの良さを伝えたい！！

7.React及びGatsbyが勉強できる良いリンク

まずReactがどういうものなのかを理解した上でGatsbyを勉強するといいと思います。
Reactについては

などがいいかなと。
最後の記事はReactの前段階として覚えておくとよいFluxにも言及しています。

Gatsbyは正直、文献がまだまだ充実していない印象ですが

は自分も参考にしました。
Gatsbyについては自分で環境を作ってあれこれいじった方がイメージが付きやすいかなと思います。

以上、長文失礼しました。

投稿2020/09/24 08:45

nekoniki

総合スコア2411

Scrutiny0335

2020/09/25 11:25

ありがとうございます。モヤモヤが晴れました！ 5番の質問で伺いたいのですが、「無理やりMVCに当てはめるなら`VC`部分を担っています。」というのは`MVC`がベースにあってReactは`VC`の機能を提供しているということでしょうか？それとも`React`は`React`であり？、`MVC`とはあまり関係ないけど、無理やり`MVC`に当てはめるとすれば`VC`の機能を提供するということでしょうか？私自身フレームワークについての理解がないので的外れな質問でしたらすみません。。

行動規範の内容に同意します