Reactの開発環境をWindows上に構築する。

この記事は2019年03月18日に投稿しました。

f:id:paveway:20190914064630j:plain

1. はじめに

こんにちは、iOSのエディタアプリPWEditorの開発者の二俣です。
今回はReactの開発環境をWindows上に構築する方法についてです。

いろいろ事情があり、Web開発の勉強を少しずつ始めることにしました。
Web開発は専門外なのでわからないことだらけですが、覚えたことを少しずつメモしていこうと思います。
内容に不明点や誤りがあれば、後日加筆、修正しながら進めます。

目次へ

2. Reactの開発環境をWindows上に構築する

Reactの開発環境をWindows上に構築するには、以下の3つが必要となります。

Node.js
今のところReactを動作させる環境みたいなものという認識です。
詳しくはわかった時に追記します。
create-react-app
Reactのひな型プロジェクトを作成してくれるツールです。
Visul Studio Code
Reactのコードを記述するエディタ
厳密には必須ではありませんが、プラグイン等でReactを書きやすくなります。
代わりに使い慣れたエディタを使っても構いません。

Node.js のインストール

Node.js の公式サイトからインストーラを取得します。
インストーラを実行し、 Node.js をインストールします。
コマンドプロンプトを開き、以下のコマンドを実行し、インストールされた確認します。

node -v
npm -v

create-react-appのインストール

1.コマンドプロンプトを開きます。
2.任意の作業フォルダを作成し、作成した作業フォルダに移動します。
3.以下のコマンドを実行します。

npm install -g create-react-app

4.以下のコマンドを実行し、Reactのひな型プロジェクトが作成されることを確認します。

create-react-app <プロジェクト名>

5.ひな型プロジェクトのフォルダに移動し、以下のコマンドを実行します。
ブラウザが起動し、サンプル画面が表示されます。

npm start

Visual Stduio Codeのインストール

1.公式サイトからインストーラを取得します。
2.インストーラを実行し、 Visual Stduio Code をインストールします。
3.プラグインをインストールします。
　以下のプラグインをインストールしてみました。

Japanese Language Pack for VS Code
ESLint
npm
npm Intellisense
ES7 React/Redux/React-Native/JS snippets
React Native Tools

目次へ

3. おわりに

Web開発は大昔にJava + JSPで行った経験があります。
その時はJavaScript禁止だったため、JavaScriptはほとんど触りませんでした。
今回JavaScriptを調べてみると、昔とは大きく変わったとびっくりしました。
勉強しがいがあります。

完全無料でJavaを学ぶ0円スクール【0円スクール（完全無料のJavaスクール）】

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

作者: Stoyan Stefanov,牧野聡
出版社/メーカー: オライリージャパン
発売日: 2017/03/11
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

紹介している一部の記事のコードはGitlabで公開しています。
興味のある方は覗いてみてください。

目次へ

私が勤務しているニューラルでは、主に組み込み系ソフトの開発を行っております。
弊社製品のハイブリッドOS Bi-OSは高い技術力を評価されており、特に制御系や通信系を得意としています。
私自身はiOSモバイルアプリやウィンドウズアプリを得意としております。
ソフトウェア開発に関して相談などございましたら、お気軽にご連絡ください。

また一緒に働きたい技術者の方も随時募集中です。
興味がありましたらご連絡ください。

EMAIL : info-nr@newral.co.jp / m-futamata@newral.co.jp
TEL : 042-523-3663
FAX : 042-540-1688

目次へ