くふうカンパニーのグループ会社であるオウチーノのデザイナーの あおきりょーた です。
この記事はくふうカンパニーアドベントカレンダーの5日目になります。

先日、くふうカンパニーのコーポレートサイトをリニューアルしました。

https://kufu.co.jp/

こちらのサイトをReactで実装したのですが、最初は「Reactか。。いよいよ禁断の地へ足を踏み入れる時が来たか…」なんて思っていたのですが、やってみたら「あれ？意外と難しくないぞ？🤔」と思ったので、同じようにReactに抵抗感があるデザイナー向けに書いてみることにしました。

本記事は、こんなデザイナー向けの内容です。

・jQueryは触れるけど、Reactはちょっと…
・Wordpressがあるから間に合ってます！
・React？なにそれおいしいの？

…の前に

先ほどReactと言いましたが、先にネタバレしますと「厳密にはReactで作られてる静的サイトジェネレーター Gatsby.js で実装している」です。Gatsby越しにReactに触れるので、内容はほぼ100% Gatsby.jsについてですw
予めご了承ください🙏

目次
　・Gatsby.jsって何？
　・Gatsby.jsの特徴
　・まずは試してみよう
　・デザイナーがReact (Gatsby) と仲良くしていくには？

Gatsby.jsって何？

Gatsby.jsとは「React.js製の静的サイトジェネレーター」と言われており、
ちなみに名前の由来はアメリカの小説「グレート・ギャツビー」から来ているとか。（ここでサムネにピンと来た方とは、いいお酒が飲めそうな気がしますｗ）

Gatsby.jsの特徴

Gatsby.jsを体感した特徴をあげますと、

　・ページの表示が爆速…!!!
　・最初からモダンな仕組みが備わっている
　・様々なプラグインがあり、簡単に拡張できる。

といった点が私の印象です。
具体的にお話していきます。

ページの表示が爆速…!!!

百聞は一見にしかず。こちらをご覧ください。

こちらはAirbnbのEngineering & Data Scienceなのですが…

表示速度ヤバくないですか？😇

ページを見てもらうとちゃんとURLが変わっててページ遷移してるのが、わかるかと思います。

近年では、リッチな表現がしやすくなった反面でサイトの表示速度が遅くなりつつあったり、Googleの評価もスピードが重要視されるなど、表示速度が重要になってきている印象がありますが、それにしてもこの表示スピードは爆速すぎるでしょ…と最初見た時は驚きました。。

また、デザイナーでしたら最近耳にする機会が多いかと思いますが、デザインツール「Figma」もGatsby.jsで作成されています。

最初からモダンな仕組みが備わっている

Gatsby.jsの特徴を見てみると、このように説明しています。

(こんなにハッキリと他社製品マウンティングするのすげーな…と思いつつ）

ここで注目なのが、サーバーサイドレンダリングやAMPなどSEOに強い仕組みや、画面解像度に最適な画像の表示やフォントのホスティングなどキレイに見せる仕組みが最初から準備されている点です。

多くのデザイナーはフロントは触ることはあっても、バックエンドやインフラまで触る機会は少ないので、「自分でどうにかしてやっ!! ………れたらいいんですけど。。」と挑戦するにはハードルが高いと思いますが、こういったモダンな技術が最初から準備されているので、デザインに集中できるのではないかと思います。

様々なプラグインがあり、簡単に拡張できる。

Gatsby.jsには便利なプラグインが564個あります（2018.12.05時点）
その中には開発スピードをあげたり効率化させるものもあれば、
　・SCSSで書く
　・Twitterのつぶやきを埋め込む
　・GA仕込む
　・noteみたいなプログレスバーを表示させる✨
　・Google Font使う
　・dribbbleを埋め込む
など、デザイナー的に嬉しいものもあります。

また、GatsbyプラグインだけでなくReactのライブラリも利用できるので、例えば「アイコンを動かしたい」や「パララックスにしたい」といったインタラクションなども可能です。

まずは試してみよう

ここまでGatsby.jsのざっとしたお話をしてきました。
ちょっと気になってきた方の為に、Gatsby.jsでサイトを作成するところまでお話したいと思いますが…

安心してください、コピペだけですよ！
(人によってはファイルのダウンロードがあります)

大まかなステップはたった4つです！
1. Node.jsをインストール
2. Gitをインストール
3. Gatsby.jsをインストール
4. Gatsby.jsでサイトを作成する

Gatsby.jsを動かすためには「Node.js」と「Git」が必要になり、人によってはすでにインストールされてる場合があるので、ご自分にあったところから始められます。
それでは始めてみましょう💪

1. Node.jsをインストール

まずはNode.jsがインストールされてるか確認します。
⌘キーとスペースキーを押してSpotrightを開き「terminal」と入力してターミナル.appを起動してください。

ターミナルを開いたら以下のコマンドをコピペしてください。

node -v 

こちらを叩いて「v〇〇」とバージョンの数字が出てきた人は次のステップへ✈️
出なかった人はこちらからNode.jsをダウンロードしてください。

2. Gitをインストール

まずはGitが入っているかターミナルで確認しましょう。(Macユーザーの方はおそらくインストールされてると思います)

git --version

こちらを叩いて「git version 〇〇」とバージョンの数字が出てきた人は次のステップへ✈️
出なかった人は以下を参考にGitをインストールしてみてください。（こちらも基本はコピペでいけると思います）

3. Gatsby.jsをインストール

おまたせしました！いよいよ本命のGatsby.jsのインストールですね😃
それでは始めましょう！！！

npm install --global gatsby-cli

こちらをターミナルで叩いてください。
以上でインストール完了です🎉

4. Gatsby.jsでサイトを作成する

最後のステップです！ゴールはもう目の前です！！
Gatsby.jsでサイトを作ると専用のフォルダが作成されますので、特定の場所に作りたい方は予めフォルダを作成し、ターミナルでそのフォルダに移動してください。(何回でも作ったり消したりできるので、そんなに気にしなくても大丈夫です👍)

例えばデスクトップに「demo」というフォルダを作った場合は以下のようにコマンドを叩いて移動します。

cd Desktop/demo

それではGatsby.jsでサイトを作りましょう！
ターミナルで以下のコマンドをコピペしてください。（コマンドを叩いたあと、セットアップに少し時間がかかります。）

gatsby new demo https://github.com/LekoArts/gatsby-starter-portfolio-cara.git

「✨Done in 〇〇s.」と出たらセットアップ完了です。

次に以下のコマンドを叩いて作成されたフォルダに移動します。

cd demo

移動したら以下のコマンドを叩いてGatsby.jsを起動します。

gatsby develop

このコマンドを叩いたら モニョモニョと画面が動くかと思います。
しばらくすると

ℹ ｢wdm｣: Compiled successfully.

と表示されて動きが止まります。
そうしたらブラウザを開いて「http://localhost:8000/」にアクセスしてみてください。

メチャクチャかっこいいサイト、表示されてません？

これで作成完了です！お疲れ様でした！
表示速度だけでなく、サイト作成まで爆速なGatsby.jsでした。

デザイナーがReact (Gatsby) と仲良くしていくには？

Gatsby.jsを触った所感ですが、デザイナーにとって嬉しいのは、「エンジニアがいなくても1人で強いWebサイトが作れる」というところでした。
なので、ポートフォリオサイトにしてみると良い気がします。

というのも、Gatsby.jsには71種類のスターターキット(2018.12.05時点)があり、その中にいくつかのポートフォリオに関するものがあります。
スターターキットから始めるだけで、カッコ良いポートフォリオサイトが手元でスグ動かせるのでテンション高めな状態でReactと触れ合っていけるかと思います。

またGaysby.jsの公式サンプル集のカテゴリにポートフォリオがあり、たいていはgithubにコードがあがってるので、参考にしやすいです。

いかがでしたでしょうか。
Reactに抵抗感があったデザイナーの方に「お、意外と簡単そうじゃん！」と思ってもらえたら幸いです😊