ズブの素人がReactに手を出してしまった話

広告
プログラミング
プログラミング メモ
広告

はじめに

Javascriptにちょっと慣れたド素人が「そろそろ次のステップに進んでみようかなぁ」と調子に乗ってReactの勉強を始めようとした結果、学習環境の構築で躓いた記録。

Qiitaなどで環境構築系の記事を見てもよくわからず、手探りでなんとか最低限の環境を構築できたから、もしもの時の為に復習を兼ねて思い出しながら順を追って書いてみる。

Windowsで構築したけど、Mac環境も同じような感じらしい。Macは持ってないから試せないし詳しく調べてもない。

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

Reactの開発環境を構築するには、「npm」というもの使うと簡単らしい。
純なJavascriptをペチャペチャいじってるレベルの私は「npm」なんて知らない。

「npm」について調べた所、Node.jsをインストールすれば自然と使えるようになるらしい。
とりあえずNode.jsのインストール方法を調べてして、書いてある通り試してみた。

Node.jsをインストールする - Qiita
はじめまして, Sefoo(せふ)です。 Node.jsをインストールして確認するまでをまとめた。参考にして頂ければ幸い。 背景 デスクトップアプリを作りたくてElectronに興味を持った。ただ, JavaScriptやNod...

上記の記事を見ながらそのまま試したら、Node.jsのインストールは難なくできた。
インストールは簡単だった。一応、やった事としては、

  1. Node.jsの公式(?)ページから推奨版をダウンロードする。
  2. インストーラを起動し、指示に従ってインストールする。(基本そのままNextでOK)

無事、インストールできたか確認する方法も上記の記事に書いてあったので、その通り試してみる。

  1. コマンドプロンプトを起動する。
  2. node -v または node –version を入力する。
  3. 入力した下に、バージョンが表示されればインストール成功。

念の為「npm」もインストールされているか確認しておく。

  1. コマンドプロンプトを起動する。
  2. npm -v または npm –version を入力する。
  3. 入力した下に、バージョンが表示されればインストール成功。

2. 新しいプロジェクトの作成

ここからは、Reactのチュートリアルに書いてあるローカル環境の構築手順に沿って進めた。

チュートリアル:React の導入 – React
ユーザインターフェース構築のための JavaScript ライブラリ

また知らない言葉「プロジェクト」が出てきて困った。
「プロジェクト」は作業フォルダ?っぽいものらしい。

試しにデスクトップにわかりやすく「React」とフォルダを作って、コマンドプロンプトが参照してるフォルダを、新しく作った「React」フォルダに変更しておく。
※参照フォルダの変更方法は割愛

変更できたら、npx create-react-app [好きなフォルダ名] って打ち込んで実行すると、やたらと時間がかかった後に上で打ち込んだフォルダ名のフォルダと色々なファイルが生成される。
作成されたフォルダが「新しいプロジェクト」なんだと思う。

3. 動作確認

ここまででもう、ローカル環境の構築は完了してるっぽい。
不安なのでちゃんとデフォルトページが表示されるか確認しておく。

  1. コマンドプロンプトで、参照フォルダを「新しいプロジェクト」のフォルダに変更する。
  2. コマンドプロンプトに npm start を打ち込んで実行する。
  3. 自動的にブラウザが起動して「http://localhost:3000/」に移動する。
  4. Reactのロゴが回転してるページが表示されたら成功。

これでローカルで作成中のページを見れるようになった。
「http://localhost:3000/」で表示できなくする方法は、コマンドプロンプト上で ctrl + c を押す。
「ローカルサーバーを閉じる」っていうのかな?

4. 最後に

こうやって書いてみるとすごく簡単。
でも初めて構築した時は、解説ページによって書いてある事が微妙に違ってたからかなり手こずった。
私が構築した環境は本当に最低限だと思うし、玄人さんからしたら間違いや無駄があると思う。

他にも「yarn」ってものを使う方法があるらしいけど、ヤーンなんて知らない。
それに、これ以上複雑になると無理そうだったから、後々余裕ができたら覚える。

間違いや誤記があったら教えて下さい。

コメント

タイトルとURLをコピーしました