Reactを触ってみる（その1）

動機: フロントエンド、ガッツリやってみたい！

• 普段はサーバーサイドエンジニアとして、主にPHP/Javaで開発することが多いのですが、JavaScriptでゴリゴリにフロント動かしてみたい！という欲求が昔からありました。かつ、どうせだったら「altJS」（alternative JavaScript）× 「JSフレームワーク」を使ってみたい！という思いがあり、今回Javascriptをガッツリ触ってみることにしました。

フレームワーク何にしようか問題

• さて、JavaScriptをガッツリやっていくのはいいとして、どういう組み合わせを選ぶか？日本のGoogleトレンドを見てみると、以下のような結果に。

<順位>
React > Vue > Angular

【参考】
React,Vue,Angularのトレンド比較（日本）

ふむふむ。結構ReactとVueが拮抗してますね。もっとよく調べてみると、世界の有名サービスは軒並みReactで作られている、かつグローバルではReactのシェアのほうが高い。（Vue.jsもコミュニティがかなり頑張っているので、結構いい勝負ではあるようです）悩んだんですが、Reactを以前から触ってみたかったので、今回の学習では「React」を学ぶことにしました。

何はともあれ触ってみる: 開発環境構築

• 開発環境PC: Windows10 Home

Node.jsのインストール
まずPCに「Node.js」をインストール。そもそも、React使うのに何でNode.jsインストールする必要があるんだっけ？今一度整理。

• Node.js

  • JavaScriptをRubyやPythonと同じようにPCのターミナル上で動かすことができるようにするためのソフトウェア。JavaScriptをサーバーサイド言語として使えるようになる。
  • npm: Node.jsの為に作られたパッケージ管理システム。Node Package Managerの略。パッケージのインストール・アップデート・アンインストールだけでなく、リポジトリ機能も完備。
  • フロントエンド用のパッケージを提供するのにも用いられるようになる。Javascriptのパッケージ管理はnpmを使う。

  以下のリンクの記事を参考にWindowsマシンにNode.jsを入れていきます。

【参考】
Windows 10へNode.jsをインストールする

Visual Studio Codeのインストール
React開発元のデフォルト開発環境でもあるらしい「VS Code」をインストール。

プロジェクトの作成 ~ Hello World!まで

• Create React App（CRA）でプロジェクト（スケルトン）を作成する。適当なディレクトリで以下のコマンドを実行。

npx create-react-app hello-world --template typescript

今回はaltJSに「TypeScript」を使います。

• Create React App
  • react: React本体パッケージ
  • react-dom: DOMを抽象化してReactから操作できるようにするレンダラーのパッケージ
  • react-scripts: 50個以上のパッケージ群を隠蔽してくれる。

コマンド実行が終わると、最後にメッセージが表示されるので、言われた通りに実行する。

$cd hello-world
$npm start

• コマンドを実行すると、ローカルにHTTPサーバーが3000番ポートで立ち上がってアプリが起動されてる！ブラウザにデフォルト画面が表示されました。

• Hello World!と表示させる為、App.tsxを編集

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>
          Hello World!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

• Reactで作られるアプリケーションは全て「コンポーネント（Component）」の組み合わせで構成される
• Reactではコンポーネントの実装は関数またはクラスで定義する

まとめ

• 第一回はいったんこれにて満足ｗ
  今後、参考にしている本を読み進めて、さらに理解を深めていきます。

参考
『りあクト！ TypeScript で始めるつらくない React 開発 第3.1版』
https://booth.pm/ja/items/2368045