React.js チュートリアル[超入門] #01 プロジェクトの始め方

山口夏生

2018年5月8日 19:17

前回のレッスンでは、コースの概要と目標を確認しました。今回からいよいよReact.jsの開発を実際に学んでいきます。

このレッスンの目標
・プロジェクトフォルダーの作成・環境構築
・デフォルトで生成されるファイルの確認
・ブラウザーで開いてみる
・JSXを編集してみる

レッスンを始める前に
このボーナスレッスンに目を通しておくと、サクサク進めます。このチュートリアルで当たり前のように使われている「JSX」や「DOM」という単語もここで説明しています。もちろんスキップしてもかまいません。

1.　プロジェクトフォルダーの作成・環境構築

node.js
React.jsが正常に機能するためには、node.jsというjavascriptがサーバーサイド言語として機能するための環境が必要です。

まず自分のコンピューターにnode.jsがインストールされているかどうかを確認しましょう。ターミナル（コマンドライン）を開いて下のコマンドを実行してください。

$node -v

もしここで'v7.1.0'のようにバージョンが表示されたら、インストールされている証拠なので、インストールの必要はありません。「node.jsのインストール」をスキップしましょう。

node.jsのインストール
インストールの方法は、windowsとmacで多少異なります。下の記事を参考にnode.jsをインストールしましょう。

npmのインストール
node.jsはその機能を拡張するpackageを併用することで、いろんな機能をプロジェクトに実装することができます。そのpackageを管理するのがnpm(node package manger)です。

node.jsと同じように、npmがインストールされているか、確認します。

$ npm --version

// もし６より下の場合は、npmを最新版をインストールしましょう。
$ npm install npm -g

プロジェクトを保管するフォルダーの作成
次にターミナルでプロジェクト用のフォルダーを作成します。僕はデスクトップに作成しました。作成後、そのフォルダーに移動します。

$ mkdir react_tutorial

$ cd react_tutorial/

プロジェクトの作成
次に実際のプロジェクトファイルを作成します。自分のアプリの名前を代入して下記のコードを実行してください。なんでも大丈夫です。今回はわかりやすいように、first_projectと名付けました。コマンドの実行には、少し時間がかかります。

$ npm install -g create-react-app
//Error: EACCES: permission denied,と表示された場合は、 sudoを先頭につけて実行すると通ります。

$ create-react-app first_project

一昔前は必要なパッケージを全てマニュアルでインストールしていましたが、facebookの開発チームのおかげで基本的なreact.jsの環境構築はコマンド一つ（create-react-app）で行うことができるようになりました。

2. デフォルトで生成されるファイルの確認

２で作成したプロジェクトフォルダーの中身を確認してみましょう。
テキストエディターで開いてください。僕の場合、Atomを使っているのでこんな感じで開けます。

$ cd first_project
$ atom .

そうすると、デフォルトで作成されたフォルダーの構成がわかります。下の写真をみてください。①のnode_modulesフォルダーはnode.jsのパッケージを大量に保管しているところです。高度な技術が求められるプロジェクトでないかぎりまず触ることはないと思います。逆にわからないまま触るとアプリが機能しなくなったりする可能性もあります。

②のindex.htmlは、ウェブサイトの基盤になるhtmlファイルです。プロジェクトを通して、必要なただ一つのhtmlファイルでもあります。ごく普通のhtmlで書かれているので皆さんも見慣れているはず。しかし開けると中身はほぼ空っぽです（下のコードでは見易くするためにデフォルトのコメントは削除しました）。というのもjavascriptで開発するwebサービスは動的にDOMを生成するので、javascriptを実行する対象の<div id="root"></div>と<head>タグがあれば十分なのです。

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="theme-color" content="#000000">
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
   <title>React App</title>
 </head>
 <body>
   <noscript>
     You need to enable JavaScript to run this app.
   </noscript>
   <div id="root"></div>
 </body>
</html>

③のsrcフォルダーには自分の書いたコードを保管していきます。④のapp.jsファイルを開くと下のようなコードが出てくるはずです。詳細は説明しませんが、主にReactのこのようなファイルは３つの部分に分かれています。

上段にあるのが、他のライブラリ、パッケージ、コンポーネントをファイル内で使えるように取り込むインポート（import）の部分。

中段にあるのが、ファイルの実質上の中身、JSX,method,state等を定義している部分。

下段にあるのがこのファイルを他のファイルでインポートできるようにするエクスポート（export）の部分。

必ずこの３つがあるとは限りませんが、典型的な形として覚えておいてください。

// インポート
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


// ファイルの実質上の中身
class App extends Component {
 render() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
       </header>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

// エクスポート
export default App;

３. ブラウザーで開いてみる

では実際に、これらのコードがどのように機能するかを確かめましょう。まずローカルのサーバーを立ち上げます。

$ npm start

//  ctr ＋ c でサーバーを停止。

上手く立ち上がれば、http://localhost:3000/でデフォルトのプロジェクトをブラウザー上で確認できます。下のページが表示されたら成功です。なかなかかっこいいページですよね！ロゴが回転する感じも好きです。

４. JSXを編集してみる

では、実際にapp.jsのJSXを編集してみます。中段にある、h１タグを見つけてください。

<h1 className="App-title">Welcome to React</h1>

この「Welcome to React」を「Hello World」に変更してください。

<h1 className="App-title">Hello World</h1>

ブラウザーを確認すると、下のようなページになっているはずです。こんな感じでJSXはほぼhtmlと同じ要領で編集して行くことができます。あと気づいた方がいるかもしれませんが、create-react-appで作ったプロジェクトは、編集した内容をテキストエディターで保存するとブラウザーが自動的にリロードして、新しい内容を更新してくれます。便利ですよね！

まとめ

とりあえず今回はここまでです。レッスンの目標を振り返ってみましょう。

#01 プロジェクトの始め方
✔︎ プロジェクトフォルダーの作成
✔︎ デフォルトで生成されるファイルの確認
✔︎ ブラウザーで開いてみる
✔︎ JSXを編集

いかがでしたか？内容的にはそこまでまだ難しくないと思いますが、重要な部分がギッシリつまったレッスンではありました。お疲れ様です。質問があればいつでも、noteのコメント欄やtwitterのDMで受け付けています。

次のレッスン

この記事が気に入ったらサポートをしてみませんか？