未経験から2ヶ月のインターンで、React × Next.js × Firebaseでサイトを作った話 #React

はじめに

こんにちは、@takashima_katsuです！

実務未経験からインターンとして株式会社m-Labにジョインし、2ヶ月が経ちました。

弊社のコーポレートサイトを、Next.jsとFirebaseで実装したので
その時に得た知見をまとめてみました。

2ヶ月前のわたし

独学で、Reactを2ヶ月ほど学習

Reactチュートリアルやったよ！
Reduxなにこれ？必要！？
ReactかいてるけどJavaScriptわかんない...
CSS？よくわかんないからBootstrap 使うー

こんな私を拾ってくれてありがとうございます。(陳謝)

使用技術

React 16.8.6
Next.js 6.1.2 (理由は後述しますが、途中までは8)
Firebase
- Firebase Hosting
- Cloud Functions

開発の流れ

開発は私1人

とりあえず調べながら作っていく
↓
詰まったら質問
↓
機能ごとにプルリクを出す
↓
コードレビューをもらう
↓
修正

の繰り返しです。

デザインはすでに用意されており、それを見ながら作っていきます。
細かいところなどは、デザイナーさんと都度すり合わせながら作っていきます。

実装

特に勉強になったところをまとめています。

Reactでアニメーション実装

スマホ版では、左上のハンバーガーを押すとメニューが出てくるようにしているのですが

デザイナーさんからの要望で
出てくる時にフェードをかけたいとのことだったのでアニメーションをつけることにしました。

↓実装済みがこちらです

(わかりづらいですが、一瞬フェードイン、フェードアウトしてるんです。笑)

Reactでのアニメーション実装はreact-transition-groupを使いました。
このモジュールでReactでCSSアニメーションを使うことができます。

公式が多くのテンプレートを提供してくれてるので、
そこを参考にしながら、自分好みにカスタマイズできると思います。

お問い合わせをSlackに流す

SlackAPIとaxiosを使い、弊社Slackのお問い合わせ専用チャンネルに下記のように送られるようにしました

↓全て記入すると

↓こんなふうにSlackに送信される

具体的には、各々の入力情報をstateとして扱い(Hooksを利用しています)

const [values, setValues] = useState({
  name: '',
  kana: '',
  corporate: '',
  mail: '',
  tel: '',
  message: ''
});

送信ボタンを押した時に、Slackへ送信されるためのイベントを発火します

const handleFormSubmit = async () => {
  await axios.request()
  Router.push('/thanks')
}

SASSとBEM

CSSはSASS化させ、BEMによるCSS設計で書きました
両方とも初めて使ったのですが、可読性をあげすっきりとしたコードにするためには必須だと感じました。

特にBEMは途中から導入したのですが
最初の頃に命名規則的などを分かっておらず、色々なところでが競合が発生していたのが解決した時は感動しました。

BEMを知らない人に説明するのには、かなり奥が深く難しいので他の記事に任せますが、
個人的に良いなと思ったのは、クラス名だけで構造がわかるようになるところです。

↓例えば、こちらのBEMを利用したクラス名は

form__button--disabled

フォームの
ボタンが
無効な時

と、一目で
どこの、どの部分が、どういった状態なのかを把握することができます。

↓こういった感じで書くこともできます


.form {
  color: #fff;
  width: 100%;
  &__button {
    width: 40rem;
    &--error {
      background-color: #ccc; 
    }
  }
}

かなりスッキリと書けますね

IE対応

VirtualBoxに仮想環境を立て、スタイルの修正をしました。
IE滅べ以外の感想は特にないです

Googleアナリティクスの導入

サイト分析ツールとしてGoogleアナリティクスを導入しました。

Next.jsにGoogleアナリティクスを導入方法を調べたところ、候補としては以下の4つをみつけました。

analytics.jsの追加
gtag.jsの追加
react-gaの追加
next-gaの追加

採用したのは、next-gaです

理由としては、
analytics.jsとgtag.jsはSPA対応がなんとなく面倒臭そうなので不採用
react-gaはissueにNext.jsでも使えるようなことを見たが、あくまでもReact向けのなので不採用

next-gaを使ったGoogleアナリティクス導入はかなり簡単です。

1. next-gaをインストール

$ yarn add next-ga

2. カスタムAppをラップする

_app.js

import React from 'react';
import App, { Container } from 'next/app';

//以下をインポート
import Router from 'next/router';
import withGA from 'next-ga';

class MyApp extends App {
.
.
.
.

//export default MyApp　ではなく
export default withGA('UA-*********-1', Router)(MyApp)

公式の通りです
簡単に導入することができました。

Firebaseを使ったデプロイ

最もハマったところです

Firebase Hostingで静的ファイルをホスティングして
Cloud Fonctionsでバックエンドコードを実行しました

結論から書くと、FirebaseがNext.js8に対応しておりませんでしたのでNext6.jsまで下げてデプロイしました。

↓サポートに問い合わせた返信です

※Next.jsのFirebaseデプロイ方法に関しては長くなるので、別記事にまとめてからリンクを貼ります。

ここではかなり長い間詰まってしまい、代表に相談した結果、
そもそもサポートされていないのでは？という疑問が生まれ、
サポートに問い合わせると上記のような返答が届きました。

代表が調べている間、横でただただ傍観していることしかできなかったのですが、
私では追えなかったよう、node_modules内などの深いところまで追って調査しており、
実際のベテランエンジニアがどのように調べているのかを見ることができたので、勉強になりました。

この部分では、結果的には他の人の手を借り、自己解決をすることができなかったのですが
・自分で調べる力
・コードの深いところまで見る力
を少しでもつけれることができました。

そして何よりも自分自身がわからないことに対して、根気強く調べることができる人間
だということが知れたのが大きかったのかと思います。

これからエンジニアという仕事をやっていく中では、何度も未知の技術に触れていくことがあると思うので
これに対して楽しむことができることを早期に知れたのは、技術の習得以上に重要なことになったかも知れません。(知らんけど)

最後に

冒頭に書いたことからもわかるように、本当によちよちレベルからのスタートでした。

ですので正直な話、いきなり1人で任せられた時には、かなり不安でした。笑
(もちろん毎日質問、毎日コードレビューして貰って修正の繰り返しです)

ですが、自分でポートフォリオも作ったことのない状態で入らせて貰った私としては
初めて作った成果物なので、できた時の達成感はもの凄いものでした！(語彙力...w)

それに当たり前ですが、独学でやっていた時よりも周りに聞ける人もでき、多くのことを吸収できるのではるかに楽しいです！

そして、次からは自社サービスの開発に入っていきます。

クラウド型の広報(PR)サービスを作っているのですが、
フロント(React)とインフラ(Firestore)辺りを担当させていただくことになりそうです！
~~(AIを使ったサービスなので、個人的には機械学習領域も気になっていますw)~~

まだリリース前なのですが、毎日のようにサービス案を出しては議論をしているので、
おもしろそうなサービスの開発には入れそうで楽しみです！笑

もし気になった方は、事前登録もしており無料枠もありますので、覗いてみてください！

HARVEST

またWebデザイナーのインターンも募集していますので、一緒に働いてみたい方がいましたらTwitterのDMにてご連絡ください。

最後まで読んでいただきありがとうございます！