はじめに
本記事はプログラミングスクール「JISOU」課題1の勉強時間記録アプリの開発記録の記事です。0からReactの環境構築を行い、アプリケーションを作成しました。
が、React のローカル開発環境の構築に開発の5倍時間がかかったこと、自分が一度挫折した際も開発環境の構築で引っかかっていたことから、同じような人もいるのではと思い、開発やコーディングよりは環境構築を中心に記述することにしました。
しかし、まだ自分も React をよくわかっていないため、実行コマンド等の具体的な方法は記述しておりません。参考にしたサイトのリンクをトピック毎にまとめましたので、そちらをご覧ください。
本記事の対象者
- IDE 無しでの開発方法がわからない微経験者
（Eclipse に全てを任せきりにしてなんとなく Java を使っているような人） - 一旦 React のコードを書いてローカル環境で実行できるようにしたい人
- 検索ワードさえわかればどうにかなりそうな人
1. Node.js を入れる
React は JavaScript のライブラリですが、JavaScript はブラウザ上でしか動きません。そこで Node.js を入れ、ローカル環境でも JavaScript が動けるようにします。Homebrew のようなパッケージマネージャーを入れると楽です。
具体的なインストール方法については詳しい記事がたくさんあるため割愛しますが、絶対にOSのバージョンを上げてからインストールしてください。私はそれで3時間ほど無駄にしました。
ちなみに Node.js 自体については以下の記事がわかりやすく解説されています。
2. プロジェクトを作る
ここが個人的な挫折ポイントだと思います。
いつもならIDEがワンクリックで作ってくれるため、手も足も出なくなってしまうのですね。
実はコマンドひとつで作ることができます。
3. VSCodeを拡張する
React に IDE は存在しませんが、Visual Studio code に拡張機能をたくさん入れると IDE のように使用することができます。
以下の記事を参考にしたところ、とても快適になりました。
git の利用も GUI から使用可能になります。
4. npm コマンドをワンクリックで実行する
ついでに毎回ターミナルを開くのも嫌だったため、以下の記事を参考にワンクリックで npm コマンドを実行できるようにしました。
終わりに
自分は React の学習をこの環境構築の段階で諦めており、スクールの（そのまま実行するだけの）ドキュメントがあっても苦戦しました。
環境構築が苦手なだけかもしれませんが、挫折してしまったのは、React がなんなのか、どう動いているのかもよくわからない状態で環境構築から入ってしまったのも敗因だと思っています。
この記事を読んでもさっぱりだった方は、ブラウザで動作するオールインワンな開発環境もあるため、そちらで React の動作を把握してから再挑戦しても良いかもしれません。
今回自分がアプリ開発まで辿り着けたのは事前に React の基礎知識をインプットしており、適切な検索ワードを捻り出せたのもかなり大きかったです。
ちなみに、React学習のロードマップは以下の記事で公開されています。
ご参考までに。
本投稿はリンク先の課題1に相当し、初めての React アプリとして、画像の学習時間記録アプリを作成した際の記事です。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼