前回のReact ~基礎編~ Propsでは、Reactのプロパティについて学習しました。今回は、Reactのアプリケーション開発について、学びましょう。
環境構築
今まではCDNを使った環境でReactを勉強してきましたが、今回からはNode.jsをローカル環境にインストールし、Reactの開発環境を整えていきましょう。
構築内容については、React ~基礎編~ 事前準備に記述しています。
尚、私は「npm install -g create-react-app」の設定を行っていますので、その前提でアプリケーションを作成していきます。
terminalで次のコマンドを実行しましょう。
1 2 3 4 5 6 7 |
# プロジェクトの作成 create-react-app start-react-app cd start-react-app/ # プロジェクト起動 npm start |
Reactのスタートアップ画面が表示されることを確認してください。

Webpack
create-react-appは、”Webpack“というjavaScriptのユーティリティによって支えられています。 簡単に特徴を書いておきますね。
<Webパックの特徴>
・モジュールのインポート/エクスポートを効率化する
– Chromeなどのブラウザに対して、CSS/javaScript/画像を一つのファイルに纏めてアップロードする
– HTTPリクエストを劇的に減らし、パフォーマンスを向上させる
・ローカルのソースファイルを修正した時にリアルタイムで画面をリロードする
・テストやデプロイを簡単に行えるようにする
「ローカルのファイルを修正した時にリアルタイムで画面をリロードする」という部分が特に便利です。少し試してみましょうか。
「npm start」で、プロジェクトが起動していることを確認後、src/App.jsを修正して下さい。私は、「This is a First React Learning!!!!!」を元々書いてあったテキストに上書き保存してみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
src/App.js import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> {/* edit */} This is a First React Learning!!!!! </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App; |
画面を確認すると画面リロードなしに変更が反映されていることがわかります。

インポート/エクスポート
続いては、Reactのインポート/エクスポートについて学びましょう。先ほどのApp.jsをもう一度見て下さい。
1 2 3 4 5 6 7 8 9 10 |
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { ... } export default App; |
モジュールのインポートに「import」、エクスポートに「export」キーワードが使用されていますね。これらのキーワードは、javaScriptファイル間で、クラス、データ、関数などに使用できます。
簡単なサンプルコードを記載しておきます。
1 |
touch src/helper.js |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
helper.js function run() { console.log('I AM RUNNING IN THE PARK WITH MY DOG!'); } function stop() { console.log('I STOP RUNNING BECAUSE I AM TIRED') } function sing() { console.log('I SING A SONG FOR CHANGING MOOD') } export {run, stop, sing} |
このhelper.jsファイルをsrc/index.jsファイルで読み込みます(デフォルトで記述してある内容は、コメントアウトしておきます)
1 2 3 4 5 6 7 |
src/index.js import {run, stop, sing} from './helper' run(); stop(); sing(); |
画面を見てみましょう。私は、Chromeを使用しているのでChromeのデベロッパーツールを開きます(Macの場合は、command+option+i, Windowsの場合は、F12)。

「console.log」の内容が出力されていることがわかりますね。
defaultキーワードは、他ファイルからインポートした際のデフォルト関数を指定できます。例えば、run関数をデフォルトに指定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
src/helper.js function run() { console.log('I AM RUNNING IN THE PARK WITH MY DOG!'); } function stop() { console.log('I STOP RUNNING BECAUSE I AM TIRED') } function sing() { console.log('I SING A SONG FOR CHANGING MOOD') } export default run export {stop, sing} |
defaultキーワードに指定した関数は、他のjavaScriptファイルから好きな名前で呼び出せます。
1 2 3 4 5 |
import r, {stop, sing} from './helper' r(); // run -> rで呼びだし stop(); sing(); |
やってみよう
プログラムの勉強で大切なことは、学んだ知識を「アウトプット」することです。アプトプットを行うには、「アプリケーション」を作ることが最適です。
もしプログラマとして就職した場合、アプリケーションの設計を担当する可能性もありますし、「学んだ知識をいかに活用できるか」について常日頃考えられるといいですね。
今回は、献立アプリを作ってみましょう。
・献立アプリの要件
毎日の献立を考えるのは、主婦にとって大変です。主婦が献立を考えることを手助けしてあげましょう。

<One Point>
アプリといっても簡単なやつでいいんです。難しいものを作ろうとすると時間がかかって、学習が進みません(汗)
まずは、menuプロジェクトを作成します。
1 2 3 4 5 |
# menu project作成 create-react-app menu # 移動 cd menu |
続いて、以下のファイルを作成しましょう。
1 2 |
touch src/menu.js touch src/helper.js |
menu.jsには、献立を書きます。7つ書いておきましょう。
1 2 3 4 5 6 7 |
src/menu.js const menuList = [ "🍛", "🍖", "🥗", "🥩","🍜", "🍔" ] export default menuList; |
helper.jsには、献立を選択する機能と外す機能を実装しておきましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
src/helper.js // 献立を選択する function choice(items) { let idx = Math.floor(Math.random() * items.length); return items[idx] } // 選択した献立を外す function remove(items, item) { for (let i = 0; i < items.length; i++) { if (items[i] === item) { return [...items.slice(0, i), ...items.slice(i+1)]; } } } export {choice, remove}; |
最後に、index.jsからこの2つのファイルを読み込みます。
1 2 3 4 5 6 7 8 9 10 |
import menuList from "./menu"; import {choice, remove} from './helper' let menu = choice(menuList); console.log(`今日の献立は、${menu}にしよう!`) console.log(`さあ、お食べ: ${menu}`) let remaining = remove(menuList, menu); console.log(`美味しかった. 明日は、${menu} 以外でお願いね.`) console.log(`残りの献立: ${remaining.length}つ`) |
では、「npm start」でプロジェクトを起動し、コンソール画面を開いてみましょう。

コンソールに今日の献立が表示されたでしょうか?
静的ファイルの読み込み
最後にCSS(スタイルシート)と画像の読み込み方法を勉強しましょう。
新しいプロジェクトを立ち上げます。
1 2 3 4 5 6 7 |
create-react-app cra_sample cd cra_sample touch src/Dog.js touch src/Dog.css npm start |
srcフォルダ配下に「pug.jpeg」ファイルを格納します。

まずは、Dog.jsを実装します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
Dog.js import React, { Component } from 'react'; import pug from './pug.jpeg'; import './Dog.css'; class Dog extends Component { render() { return ( <div className="Dog"> <h1>DOG!</h1> <div> <img className="Dog-img" src={pug} /> </div> <div>PUG IS AWOSOME DIG IN DOGS</div> </div> ) } } export default Dog; |
CSSおよび画像はどちらも「import」キーワードで読み込みます。CSSは、適用させたいHTMLタグにclassName(ここではDog, Dog-img)を付与し、画像については中括弧({})で変数を囲むと取り込みができます。
続いて、Dog.cssを実装します。
1 2 3 4 5 6 7 8 9 |
Dog.css .Dog { color: purple; } .Dog-img { width: 200px; } |
最後に、App.js(プロジェクト作成時にsrcフォルダに自動作成されるファイル)にDogコンポーネントを取り込みます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
App.js import React from 'react'; import './App.css'; import Dog from './Dog'; function App() { return ( <div className="App"> <Dog /> </div> ); } export default App; |
画面を確認してみましょう。

CSS及び画像を取り込めたようですね。
次回
次回は、ReactのStateを学びましょう。
コメントを残す
コメントを投稿するにはログインしてください。