こんにちわ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のページ遷移超速……
おっさんの下に「Go to page2」というボタンがあります。
コレを押すと次のページに遷移しますが……
超速です。アプリの画面遷移級の切り替わります。
このページにある「Go back to the homepage」で、オッサンのページに戻ります。
ピャッ!ピャッ!とスゴイ速度で切り替わります。
最後に
最初に調べろよって感じですが、これReactなんですね。
Vue.jsならGridsomeという、Gatsbyライクものがあるとか。
でも基本的に「こうやって簡単にできるのね!」っという感覚がすごく強かったです。
なのでReactを触ってみるか、Vue.jsをちょっと勉強したことだし、Vue.js系のフレームワークをもう少し調べてみようかなぁと思いました。
参考
コチラを参考にしました。ありがとうございました!
あとがき
Gatsbyがスゴイ!ってことなので試してみた話でした!
どうしようかなー
ちゃんとWebアプリみたいのじゃなく、ポートフォリオみたいのなら、Reactだとしてもなんとかなるかなー
ちょっと試してみようかしら、と思っている今日このごろです。