ReactでHello Worldする最速の手順

node.jsやbabel、webpackを導入しなくても、Reactできますよ。

ReactでHello Worldする

HTMLファイルを作ります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
</html>

<head>~</head>に次のタグを追加して、reactのライブラリを読み込みます。

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

<body>~</body>に次のタグを追加します。

<div id="root"></div>

ここに、reactで作成した”Hello, world!”の文字を表示します。

最後に、JavaScriptのコードを記述します。

<script>
    ReactDOM.render(
        React.createElement('h1', {}, "Hello, world!"),
        document.getElementById('root')
    );
</script>

HTML全体は次のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        ReactDOM.render(
            React.createElement('h1', {}, "Hello, world!"),
            document.getElementById('root')
        );
    </script>
</body>
</html>

ブラウザでHTMLファイルを開くと、”Hello, world!”の文字が表示されます。

JSXを使う

JSXを使う場合は、babelも必要になります。

<head>~</head>に次のタグを追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.js"></script>

<script>~</script>を次のように書き換えます。
scriptタグのtype属性を忘れずに。

<script type="text/babel">
    ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root') );
</script>

ブラウザでHTMLファイルを開くと、”Hello, world!”の文字が表示されます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root') );
    </script>
</body>
</html>

この記事が役に立ったら、この本↓もおすすめです。

TypeScriptの–strictNullChecksでnullやundefinedの代入をチェックする

TypeScriptでは、すべての型の変数にnullやundefinedを代入できます。

let str: string = "Hello";
str = null; // OK
str = undefined; // OK

strictNullChecksモードを有効にすると、nullとundefinedはそれぞれの型とvoid以外の変数に代入できなくなります。

strictNullChecksモードを有効にします。

tsc index.ts --strictNullChecks

今度はstring型の変数にnullやundefinedを代入すると、エラーになります。

let str: string = "Hello";
str = null; // error TS2322: Type 'null' is not assignable to type 'string'.
str = undefined; // error TS2322: Type 'undefined' is not assignable to type 'string'.

strictNullChecksモードを有効にすることで、nullやundefinedによるエラーを減らすことができます。

TypeScriptでサーバーからファイルをダウンロードして、ローカルに保存するサンプルコード

TypeScriptでサーバーからファイルをダウンロードして、ローカルに保存するサンプルコード。

imagesディレクトリを作成して、ファイルを保存します。
ダウンロードするファイルと保存するファイルのファイル名は、download()関数の引数で設定します。

事前準備

npm install node-fetch --save
npm install @types/node-fetch --save

ソースコード

import * as fs from "fs";
import * as path from "path";
import fetch from "node-fetch";

// ダウンロードしたファイルを保存するディレクトリ
const download_dir = path.join(process.cwd(), "images");

// ディレクトリがなければ作成する
if (!fs.existsSync(download_dir)) {
    fs.mkdirSync(download_dir);
}

/**
* URLを受け取り、該当するファイルをダウンロードして保存する
* @param url ダウンロードするファイルのURL
* @param filename 保存するファイルのファイル名
*/
function download(url: string, filename: string) {
    fetch(url, { method: "GET" }).then((response) => {
        console.log(`OK: ${filename}`);
        response.body.pipe(fs.createWriteStream(filename));
    }).catch((error) => console.log(`error:${url} ${error}`));
};

download(
    "http://~/example.jpg",
    path.join(download_dir, "sample.jpg"));

TypeScriptでMap

Mapはキーと値の組み合わせを保持するコレクションです。

前準備

TypeScriptをインストールします。

npm install -g typescript
npm install -g typings

プロジェクトの初期設定を行います。

npm init
tsc --init
npm install tslint --save-dev
tslint --init

定義ファイルのインストール

npm install --save-dev @types/core-js

使用例

// Mapオブジェクトを生成する(キーと値の型はstring)
let map = new Map<string, string>();

// 値を追加する
map.set("key1", "value1");
map.set("key2", "value2");

// 要素の数
console.log(map.size); //=> 2

// キーから値を取得する
console.log(map.get("key1")); //=> value1
// キーが存在しないとき
console.log(map.get("hoge")); //=> undefined

// キーの一覧を取得する
console.log(map.keys()); //=> MapIterator { 'key1', 'key2' }

// 値の一覧を取得する
console.log(map.values()); //=> MapIterator { 'value1', 'value2' }

// キーと値の一覧を取得する
console.log(map.entries()); //=> MapIterator { [ 'key1', 'value1' ], [ 'key2', 'value2' ] }

// 反復処理
map.forEach(
    (value: string, key: string) => console.log(key + "=" + value)
);