Gatsby触ってみる【プラグイン・レイアウト編】

2021/01/14

Gatsby触ってみる【スタイリング編】の続きからGatsbyチュートリアル進めていきます。

3. Creating Nested Layout Components(ネストされたレイアウトコンポーネントの作成)

今回はプラグインの使い方と,レイアウトコンポーネントのチュートリアルをやっていきます。

プラグインの使用

使いたいプラグインをGatsbyプラグインライブラリで検索します。
プラグイン毎の使い方はGatsbyプラグインライブラリに載っているので書いてある手順にのっとってプラグインの設定をしていきます。
npmパッケージをインストール → gatsby-config.jsのpluginsの項目に設定を追加する
というのが全プラグイン共通の手順となります。

レイアウトコンポーネントの作成

Reactの基礎がわかっていれば特段覚えることはなさそう。
レイアウト用のコンポーネントを作成して,各ページでインポートしてラップするだけ。

感想

プラグインの豊富さはやっぱりコミュニティの大きさに比例しますね。
レイアウトコンポーネントもReactの勉強しているからかVuePressやり始めた当初より格段に理解できている。
VueよりReactのほうが理解してしまえば応用効く気がしますね。
VuePressから乗り換え待ったなしです。

Gatsby触ってみる 記事一覧


書いた人: こへ
音楽と漫画と読書とアニメとスノボが好き。多趣味でいろんなことに興味有ります。 誰しもが一度は使った事があるもののIoT開発をしてます。
Twitterフォローお願いします。