• 公開記事
  • 2021
  • 04

React + TypeScriptでフロントエンドに入門した

Updated at2021-04-29 16:11 JST

この記事は、あくあたん工房2021 GWアドベントカレンダー1日目の記事です。

きっかけ

今年はハッカソンに出たいな〜とか、突然アプリケーション開発がしたくなった。最近はカッコいいアルファベットが並ぶ技術1があるけど使ったことないので触ってみたいな〜と思っていたところ、ちょうどアドベントカレンダーを書く時期になったので、今回はフロントエンドに手を出してみることにした。
僕自身、開発するのは好きだけど、アプリ作るとしたら、フロントエンドをやりたいのか、バックエンドをやりたいのかを見つめ直すいい機会にもしたい。

入門にあたって参考にしたもの

最近、エンジニア向けの情報共有コミュニティのZennというサービスを好んで使っている。
そのZennの面白いところの1つでもあるのだが、Zennでは本を書くことができる。本は、無料で読めるものも有料のものもあって、その中でもLikesが沢山付けられていた「【React+TypeScript】Netflixのクローンを作るチュートリアル」を使って入門してみた。

image.png (246.7 kB)

内容としては、

  • ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用
  • React Hooksによるstate管理
  • TypeScriptで外部APIを扱い、非同期通信でデータを取得
  • movie-trailerにyoutubeを組み込む
  • Firebaseでデプロイ

ということが出来るものになっている。

一応、事前にReactとFirebaseを軽く触る機会があった。2月頃、TechStudyGroup2でReact、Firebase勉強会がそれぞれ1時間程度で開催されていて、軽くどうゆうものなのかを勉強する機会があった。軽く触ってしまったが故に、今回、アプリ開発をしたくなってしまったといっても過言ではない。その時使った資料はGitHubで公開されている。

この記事の立ち位置

やってみて、面白かったです！っていう感想だけじゃ面白くないので、今回参考にした「【React+TypeScript】Netflixのクローンを作るチュートリアル」を読む時に使った参考書をまとめたり、デプロイの作業で工夫したところ、といった話を少し書いておこうと思う。

ReactとTypeScriptをちょっと書けるようにしておく

入門書やチュートリアルをやった後に、実際に何か作ってみたいという人

を対象にしているということもあり、1から全部説明しているわけではない3。勉強会で軽く触って、コードを読めるようになったけど、書けるようになってはいないので、TypeScript学習ロードマップのLevel1を参考に、サバイバルTypeScript - TypeScript入門を読んでおいた。

TypeScriptのモチベーションだけじゃなくて、TypeScriptをReactを使うチュートリアルも用意されているので、今回やりたいことにとても合っている感じがした。

後は、常にTypeScriptの型入門を開いておいて、知らない書き方が出てきたら参照するというような進め方をしていた。

環境構築

今回は、以下の環境を使った。

  • MacBook Pro 2017
  • macOS Big Sur 11.2.3
  • Node.js 14.16.1
    • 環境は、実行環境のバージョン管理をするasdf-vm/asdfを使って用意した。
  • ESLint + Prettier
    • prettier,eslintを導入する際にハマったこと2021新年を参考にした。参考記事から変更した点としては、
      • extendsのprettier/@typescript-eslintを削除したこと。extendsにすでに指定しているprettierに統合されたので不要になっているらしい。

      • Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0.

API Keyは公開されないようにしたい

ソースにベタ書きするのはできればやりたくない。GitHubに上げたりするなら、一生残り続けてしまうので慎重にしておきたい。

リポジトリのクローンやフォークからは、GitHub でキャッシュされているビューの SHA-1 ハッシュによって直接、また参照元のプルリクエストによって、到達できる可能性があることに注意することが重要です。
https://docs.github.com/ja/github/authenticating-to-github/removing-sensitive-data-from-a-repository

とはいえ、そんなに難しい事は必要無く、.envファイルを作成して、それをdotenvを使って読み込むようにするだけで出来るらしい。後は、.gitignoreに.envを追加しておけばOK。

request.js
import dotenv from 'dotenv';

dotenv.config();
export const API_KEY = process.env['REACT_APP_TMDB_API_KEY'];

https://github.com/Hiroya-W/netflix-clone/blob/main/src/request.js

GitHub Actionsを使ってFirebaseへデプロイするようにした

GitHub Actionsを使ってFirebaseへデプロイする際にもAPI Keyの扱いについて話が出てくる。が、こちらの場合も簡単で、API KeyをGitHubリポジトリ内のSecretsに追加するだけでGitHub Actionsで参照出来るようになる4。

また、GitHub ActionsでFirebaseへデプロイするワークフローはFirebase CLIでいい感じに生成してくれるようになっている5。
対話的にステップを進めていくことで、

  • .firebasercの生成
  • firebase.jsonの生成
  • FIREBASE_SERVICE_ACCOUNTをGitHubリポジトリのSecretsに追加する

ということをしてくれる。が、その際に、FirebaseのWelcome用ページを生成してindex.htmlを上書きしてしまった。それに気が付かなくて、デプロイされたアプリが一生Welcomeページで、困ってしまったことがあったので次は気をつけたい6。

Gitのコミットログを確認すると、firebase initしたコミットで紛れ込んでいて、このコミットで元に戻している様子がわかる。
yarn startとは別に、Firebaseへデプロイするとどう見えるのかは確認できるようになっているので、しよう。

// appをビルド
$ yarn build

// firebaseで表示される様子を確認する
$ npx firebase emulators:start
i  emulators: Starting emulators: hosting
i  hosting: Serving hosting files from: build
✔  hosting: Local server: http://localhost:5000
⚠  emulators: The Emulator UI requires a project ID to start. Configure your default project with 'firebase use' or pass the --project flag.

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
└─────────────────────────────────────────────────────────────┘

┌──────────┬────────────────┐
│ Emulator │ Host:Port      │
├──────────┼────────────────┤
│ Hosting  │ localhost:5000 │
└──────────┴────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: None

http://localhost:5000 にアクセスすれば、その様子を確認出来る。

後は、自動で生成されたワークフローを修正する。
yarn buildする際に、環境変数CIをfalseに設定する必要があること、アプリに利用したAPI KeyをSecrets経由で環境変数に設定しておくことである。僕の場合は以下のような記述を追記しておいた。

yml
env:
    CI: false
    REACT_APP_TMDB_API_KEY: ${{ secrets.REACT_APP_TMDB_API_KEY }}

https://github.com/Hiroya-W/netflix-clone/tree/main/.github/workflows

Issues

チュートリアルを読み終えた時点で見つかっているバグは次のようなもの。アプリを作る上では対処するべきものであるが、チュートリアルとして、一通り手順を追うという面では本質的じゃないとして、調査は深くしていない。

感想

チュートリアルを終えると、本当にそれの見た目を作ることができました:tada:
image.png (8.1 MB)
https://github.com/Hiroya-W/netflix-clone

HTML、CSS、JavaScriptはメモ帳コーディングで出来る程度しか書いたことが無く、こういったモダンな開発環境でWebアプリケーションを書くことは初めての体験でした。
便利なツールやサービスが用意されていて、作ったアプリはシュッとデプロイ出来たので、よく使われる理由が分かった気がします。ドキュメントもしっかり揃ってて勉強していけるので、フロントエンド、めちゃめちゃ楽しめますね。カッコいいアルファベットが並ぶ技術1に触ると、めちゃめちゃ自信が付いて、個人開発も捗りそうです。

次は、ZennのBooksでついでLiksがついていたGatsby入門、Nuxt.js + Ruby on Rails + AWS Fargate の開発・デプロイチュートリアルあたりを読んでみようと思います。無料で読んで良いんですか、というお気持ちになりますね…ありがとうございます。

開発やるぞやるぞ〜〜〜！一緒にやってくれるメンバーはいつでも募集しているので、よろしくおねがいします :muscle:

あくあたん工房2021 GWアドベントカレンダーの他のメンバーの記事もよろしくお願いします！

  1. Node.jsとかFirebaseとかVue.jsとかRuby on RailsとかFlutterとかGraphQLとか。よくわかってないけど、書いてあるとかっこよいし、強そう。 ↩

  2. VOYAGE GROUPのhironomiuさん主体でハッカソンやLT会をよく開催してくれている。connpassのリンクはここ→TechStudyGroup - connpass ↩

  3. むしろ、こういった記事にそうゆうのを求めるのは野暮というもの。 ↩

  4. 暗号化されたシークレット - GitHub ↩

  5. GitHubプルリクエストを介してライブチャンネルとプレビューチャンネルにデプロイする ↩

  6. 上書きする？って聞かれていたのに、良くわからんけどdefaultで生成したし上書きしとくか、ってしたのが良くなかった。 ↩