動機: フロントエンド、ガッツリやってみたい！
- 普段はサーバーサイドエンジニアとして、主に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