Loading...

【2/16開催】TypeScript & React.jsハンズオンセミナー(TODOアプリを作ってみよう)

TypeScript & React.jsハンズオンセミナーを12/14(水)に開催しました。会員登録された方はセミナーテキストを閲覧頂けます。

概要

フロントサイドの開発でもはやデファクトスタンダード的な位置に登りつめたReact.jsを使ったハンズオンセミナーを開催します。また、AltJSとして台頭してきているMicrosoft社の提供しているTypeScriptを使ってTODOアプリケーションを作りながら学習できるセミナーです。

React.jsとは

Facebookがオープンソースとして公開しているWebアプリケーションのUIを作るためのライブラリです。

GoogleトレンドでもReact.jsの人気が上昇しているのが見て取れます。

React jsのGoogleトレンド

React.jsの特徴

  • 規模が大きくなっても管理できるような仕組みを提供してくれるライブラリ
  • コンポーネントを極力ステートレスにすることが可能
  • Virtual DOMで状態変化時も効率よくDOMの再構築が可能

React.jsが有効なケース

様々なUIをコンポーネント化(部品化)して使いまわしたい場合 UIから入力された内容をリアルタイムに画面に反映させたい場合

React.jsの導入事例

実にいまReact.jsは先進的なIT企業のWebプロダクトで採用されています。 日本国内でもReact.jsを利用して開発しているプロジェクトも増えてきています。

  • Facebook
  • Instagram
  • Yahoo
  • Airbnb
  • Atom

TypeScriptとは

TypeScriptはマイクロソフトによって公開されたオープンソースのプログラミング言語です。 TypeScriptはJascriptのスーパーセットであるAltJSの一つで、Javascriptに静的型付けやクラスベースのオブジェクト思考を加えたプログラミング言語です。

最近はフロントエンドのWebアプリケーション開発においても、大規模で安全な開発が求められており、ネイティブのJavascriptでの開発からより安全に開発できるTypeScriptで開発するプロジェクトも増えてきています。GoogleトレンドでもReact.jsの人気が上昇しているのが見て取れます。

TypeScriptのGoogleトレンド

TypeScriptの特徴

  • TypeScriptは最新のJSの仕様であるES2015(ES6)に準拠している
  • 静的型付けやアクセス修飾子があり安全に開発可能
  • 型などのチェックが厳しいため、保守が必要になる大規模開発に向いてる
  • TSファイルをコンパイル(トランスパイル)してJSファイルとして出力
  • マイクロソフトが保守しているので保守体制が強力

環境構築(Macの場合)

今回のセミナーでは下記をMacの環境構築としてインストールします。

名前 説明
nvm Node.jsのバージョン管理ツール(Mac用)
Node.js Javascriptエンジン
npm Node.jsのパッケージ管理ツール
Visual Studio Code Microsoft社にて提供している総合開発エディタ

nvm(Node.js + npm)インストール(Macの方)

git clone git://github.com/creationix/nvm.git ~/.nvm

nvmのPATH設定

下記コマンドでPATH設定できます。

. ~/.nvm/nvm.sh

nvmのインストール確認

nvm --version

下記のように表示されればインストールできています。

Node.js + npmインストール

まず、nvmでNode.jsのインストール可能なバージョンを確認します。

nvm ls-remote | tail

nvm installコマンドでLTSの最新のNode.jsとnpmをインストールします。 LTSはLong-term Supportの略で、長期の保守運用が約束されたバージョンです。

nvm install lts/boron --lts

インストールが完了しました。 nvmはNode.jsを任意のバージョンに切り替えが簡単ですので今後の開発に合わせバージョンを切り替えてください。

Visual Studio Codeのインストール(Macの方)

Microsoft社にて提供している総合開発エディタをインストールします。 下記のURLをブラウザで開いて、矢印の箇所をクリックすればダウンロードが開始されます。

http://code.visualstudio.com/

ダウンロードしたzipファイルを解答して、それをアプリケーションフォルダに移動してください。

Visulal Studio Codeのインストールは完了です。

これでMacの方の環境構築は完了です。お疲れ様でした。

環境構築(Windowsの場合)

今回のセミナーでは下記をWindowsの環境構築としてインストールします。

名前 説明
nodist Node.jsのバージョン管理ツール(Windows用)
Node.js Javascript実行エンジン
npm Node.jsのパッケージ管理ツール
Visual Studio Code Microsoft社にて提供している総合開発エディタ

nodist(Node.js)インストール

nodistというツールを使ってNode.jsのインストールやバージョン管理をおこないます。 下記URLにアクセスして最新のリリースパッケージをダウンロードしてください。

https://github.com/marcelklehr/nodist/releases

ダウロードが完了したらダウンロードフォルダにexeファイルがありますのでダブルクリックしてインストールしてください。

インストールウィザード画面が表示されますので、いつもどおりインストールしてください。

コマンドプロンプトを使って、nodistがインストールされてコマンドが使えるようになったことを確認します。

コマンドプロンプトで実行

nodist -v

nodist distコマンドでインストール可能なNode.jsのバージョンを確認する事ができます。

コマンドプロンプトで実行

nodist dist

それではNode.jsをインストールしましょう。今回はv6.9.1のバージョンをインストールします。

コマンドプロンプトで実行

nodist + v6.9.1

インストールしたNode.jsを選択します。選択するには下記のコマンドを実行してください。

コマンドプロンプトで実行

nodist v6.9.1

これでNode.jsのnodeコマンドが使えるはずです。node -vコマンドでバージョン情報が返ってくるか確認してください。

コマンドプロンプトで実行

node -v

下図のようにバージョン情報が表示されればインストール完了です。

Visual Studio Codeのインストール(Windows)

Microsoft社にて提供している総合開発エディタをインストールします。 下記のURLをブラウザで開いて、矢印の箇所をクリックすればダウンロードが開始されます。

http://code.visualstudio.com/

ダウンロードしたexeファイルをダブルクリックしてください。

いつものインストール時と同様の画面が表示されます。インストールを進めて完了してください。

Visulal Studio Codeのインストールは完了です。

これでWindowsの方の環境構築は完了です。お疲れ様でした。

すべてのコンテンツをご覧になるにはログインまたは会員登録が必要です

すべてのコンテンツをご覧になるにはログインまたは会員登録が必要です。



情報戦略テクノロジー