lisz-works

プログラミングと興味を貴方に

Gatsbyがスゴイ!ってことなので試してみた

【スポンサーリンク】

Gatsby

こんにちわlisです!

Gatsbyがスゴイ!ってことなので試してみました!

インストールして、初期ページの表示までです!

インストール

> npm i -g gatsby

プロジェクト作成

「test-page」というのを新しく作ってみます。

> gatsby new test-page

最終的に

Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd test-page
  gatsby develop

と出てきたらOK!

プロジェクトの実行

指示通りに

  • cd test-page
  • gatsby develop

を順に叩きます。

暫く待ちます……

このように表示されたらOK。

You can now view gatsby-starter-default in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 17.479s

書かれている通り、「http://localhost:8000/」にアクセスします。

このように「やぁ、人間。」と奇妙なこと言ってくるオッサンが表示されたら成功です。

Gatsbyを表示

Gatsbyのページ遷移超速……

おっさんの下に「Go to page2」というボタンがあります。

コレを押すと次のページに遷移しますが……

Gatsby 2ページ目

超速です。アプリの画面遷移級の切り替わります。

このページにある「Go back to the homepage」で、オッサンのページに戻ります。

ピャッ!ピャッ!とスゴイ速度で切り替わります。

最後に

最初に調べろよって感じですが、これReactなんですね。

Vue.jsならGridsomeという、Gatsbyライクものがあるとか。

でも基本的に「こうやって簡単にできるのね!」っという感覚がすごく強かったです。

なのでReactを触ってみるか、Vue.jsをちょっと勉強したことだし、Vue.js系のフレームワークをもう少し調べてみようかなぁと思いました。

参考

コチラを参考にしました。ありがとうございました!

qiita.com

qiita.com

mottox2.com

あとがき

Gatsbyがスゴイ!ってことなので試してみた話でした!

どうしようかなー

ちゃんとWebアプリみたいのじゃなく、ポートフォリオみたいのなら、Reactだとしてもなんとかなるかなー

ちょっと試してみようかしら、と思っている今日このごろです。