整理整頓

思考を整理するためにアウトプットするブログ。

React デプロイ/ビルド環境整備 & デバッグ方法調査

プログラミング React 調査

作業概要

GitHub pagesでReactのアプリをデプロイ/ビルドできるようになった。React DevToolsを使えるようになった。

作業時間/見積：2.5h / 3h

学び

  • create-react-appはリポジトリ作成もやってた

    • やはり、よしなにやってくれすぎて裏で何起きてるか分からない
    • 最初からこういう何でも揃っているツールで開発始めると、自分の中で要素を分解/体系立てる作業が大変だろうなぁ
    • 要素を学んだ上でツールを使うのがよいと思ったけど、作りたいというモチベーションとのトレードオフになってしまうのか？
    • 人によって学習ロードマップは変わるという話か…

  • ビルドツールのありがたみが分かった

    • これもyarn build (react-scripts build) がよしなにやってくれている
    • 上記同様、何をなぜ行うのかが隠蔽されているのでトレードオフ感ある

  • React DevToolsあればデバッグに困ることはなさそう

    • state, propsの確認
    • ブレイクポイント
    • スタックトレース
    • デプロイ & ビルド後の状態でも使える
    • 使い方も直感的で迷うこともなかった

メモ

  • production buildとは？

    • チュートリアルではyarn startしか使わなかったけど、アプリ直下のReadmeに詳しく書いてた
    • yarn buildでproduction向けにビルドできる
    • 軽量化、ファイル名ハッシュ化、パフォーマンス最適化など色々やってくれるらしくてまぁ便利
    • これをサーバー上で行うか、でき上がったbuildファイルをサーバーに置けば良い

  • デプロイ環境何が良いんだろう？

  • React DevToolsの使い方

    • React Developer ToolsでReactで作ったページをデバッグする
    • アドオン入れた直後、development環境で使えなかったのでbuildしないと駄目か？と思って先にデプロイ環境整えたけど、勘違いだった
    • 開発環境でも本番環境でも使えることが分かったので、良しとしよう
    • buildコマンドも使えたので未調査が少し減った

  • 未調査

    • GraphQL
    • プロトタイプベース言語
    • create-react-appがやってること
    • yarn test用いた開発フロー

学習計画