では ReactJS 第２回目いってみましょう。 今回は下図のような感じが完成図です。 単純にToDoが一覧されており、ToDoの横には削除ボタンがあり。 ToDoを追加したい場合は上部のテキストボックスに文字を入力し 追加ボタンを押す。 たったこれだけです。 まぁこのたったこれだけが結構難しいんですけどね。 ではいってみましょう。 まずは初期値となる変数をこんな感じで用意します。 [bash] var DATAS = [ {id:1, content:”Softbank解約”}, {id:2, content:”R-SIM10購入”}, {id:3, content:”圏外病を克服するSIMフリールーターゲット”}, {id:4, content:”楽天モバイル申し込み”} ] [/bash] この変数がToDoリストの初期値です。 では次、画面イメージから、何個の独自クラスを定義しなきゃいけないか考えましょう。 簡単に言ってますが、これかなり重要なポイントです。 要はどんなが完成図があるから、どういうパーツを組み合わせて画面を作ろうか？？ と考えるのです。そのパーツが classであり、その classが独自タグなんですね。 ToDoリストは至ってシンプル。 ToDoの一覧となるパーツ。これ⇓⇓⇓。 とToDoを追加するためのパーツ。これ⇓⇓⇓。 そしてToDoの一覧の一行を構成するパーツ。これ⇓⇓⇓。 パーツは決まりましたので、このパーツをクラスとして定義することにします。 まず最初のパーツ ToDo一覧を　DataList。 次にToDoを追加するパーツを NewToDo。 ToDoの一行を構成するパーツを　DataLine 最後にこれら全部を包含する ToDoList　とします。 図で書くとこんな感じになります。 ではまずToDo一覧である　DataListをクラスとして定義してみましょう。 [bash] class DataList extends React.Component{ constructor(props){ super(props); } handleOnDelete(id){ this.props.onDelete(id); } render() { var dlist = []; var i; for (i=0; i < this.props.datas.length; i++){ var data = this.props.datas[i]; dlist.push( this.handleOnDelete(id)}/>); } return ( {dlist} ); } } [/bash] なんのことか理解できますか？ 普通難しいなぁと思いますよね。 クラス定義の説明は HelloWorldを出力する部分でやったので割愛します。 では 次のconstructor　とは何でしょうか・・・ 要はクラスの初期化処理をここで行いますよ　ということなのですが・・ 初期化ですることは特にないので、お決まりのおまじない super(props)だけを記述しておきます。 [bash] constructor(props){ super(props); } [/bash] 次の handleOnDelete これなんですが・・ 必要ですが、この説明は後回しにします。 [bash] handleOnDelete(id){ this.props.onDelete(id); } [/bash] 最後に renderメソッドです。 HelloWorldでもやったように、renderメソッドで、このクラスが出力する HTMLタグを構築するんです。 ToDoの一覧なんで、このクラスを作るときにToDoの一覧となるデータを引き渡してもらうことを想定します。 それが　this.props.datas　という変数で参照できます。 renderメソッドの中では、この変数をループで回して、 dlistという変数に pushしていってます。 pushする内容は、ToDoの１行を構成する DataLineタグ（オブジェクト）です。 そして renderメソッドがリターンする内容は <div>タグの中に上記の配列変数を組み込んだものになります。 [bash] render() { var dlist = []; var i; for (i=0; i < this.props.datas.length; i++){ var data = this.props.datas[i]; dlist.push( this.handleOnDelete(id)}/>); } return ( {dlist} ); } [/bash] 肝心なことを忘れていました。 ３つのパーツを包含する一番大きなパーツが必要です。これをToDoListクラスとします。 ToDoListクラスのソースは以下のような感じになります。 [bash] class ToDoList extends React.Component{ constructor(props){ super(props); this.state = { datas: props.datas } } render(){ return ( ); } } [/bash] ToDoListクラスの renderメソッドでは、NewToDoタグとDataListタグを構築しているのが解ると思います。 そして DataListタグの datasアトリビュートに this.state.datas　を渡しています。 this.state.datas　とは何でしょうか？ stateとはクラスが管理する動的な変数のようなものです。 ReactJSでは stateの値が変更されると、自動的にそのstateの値が指し示す HTMLを書き換える仕組み になっているのです。 で、実際にここでは　this.state.datas　に何が入っているかというと、最初の方で説明した ToDoリストの中身である DATAS変数が入ることになります。 これでは言葉足らずですね。 ToDoListクラスが全クラスのトップレベルのクラスであるので、 ReactDOM.render では　ToDoListクラスを　renderしてもらいます。 ソースで書くとこんな感じ。 [bash] ReactDOM.render( , document.getElementById(“root”) ); [/bash] で、これだけだと、ToDoListの初期値を渡せていないことになるので、 正しくは　以下のようになります。 要はクラス内で使いたいデータは アトリビュートで渡そうね。ということになります。 で、データとは動的に変化するものなので　｛｝　で括って渡そうねというルールになります。 [bash] var DATAS = [ {id:1, content:”Softbank解約”}, {id:2, content:”R-SIM10購入”}, {id:3, content:”圏外病を克服するSIMフリールーターゲット”}, {id:4, content:”楽天モバイル申し込み”} ] ReactDOM.render( , document.getElementById(“root”) ); [/bash] で、まだこれでも DataListクラスの　this.props.datas　に DATASの値が渡っていく仕組みが説明できていませんね。 DataListクラスは　ToDoListクラスの子供です。つまり DataListクラスは ToDoListクラスのrenderメソッドで 作成され、その時にDataListクラスが扱う変数として datasアトリビュートに DATASを渡すことになります。 日本語で書くとややこしいですね。 つまりは、ToDoListクラスのrenderメソッドでは　以下のようなことが定義されていることになります。 [bash] class ToDoList extends React.Component{ constructor(props){ super(props); this.state = { datas: props.datas } } render(){ return ( ); } } [/bash] renderメソッドのアトリビュートで渡された変数は、 クラス内で props（プロパティ）として参照することが可能です。 ToDoListクラスは datasアトリビュートで渡された DATAS変数の中身を自身のクラスの stateとして管理しようとします。 これが constructorの中にある。 this.state = {datas: this.props.datas}; これで ToDoListクラス 内では this.state.datas で DATASの内容を参照できることになります。 やっとこれで DataListに DATASの値が渡ることが説明できましたかね・・・ では、次はDataListの renderメソッドでToDoの一行一行を構成するDataLineクラスを作っているところを 見てみましょう。 [bash] render() { var dlist = []; var i; for (i=0; i < this.props.datas.length; i++){ var data =...

ずっと前からはやっているなぁ、と思いつつ、やり過ごしていたReactJS。 ついに重い腰を上げて学習してみることにしました。 ただ、ネットで情報を漁っても、日本語で丁寧に解説しているサイトって少ないのですよね。 仕方なく本家の「Get Started」を読んで、「Tutorial」を読んで、大雑把に理解できたので、 これからReactJSを学び始める人の役に立てればいいなと思いつつ、これから何回かにわたり ReactJSの初歩（というかこれが全てか・・・）を連載していこうと思います。 まずはそもそもReactとは何をするものか・・・ というと、今の僕なりの解釈ですが、動的なコンテンツを表示する場合に・・・ 一般的なWebアプリだと、HTMLのBodyタグを大半普通のHTMLタグを使って記述し、 一部動的に変化する部分をテンプレート言語などを使って、動的な変数の内容を出力します。 Reactの場合、変化するものがあるのなら、その部分はHTML言語として記述せず・・・ 全部JavaScript（厳密にはBabelやJSX）で記述しちゃえばいいじゃん、というコンセプト。 なのでHTMLテンプレートに記述するのはごく普通のHTMLで、かつ、めっちゃ短い。 なぜ短いかというと、ReactJSでHTMLをほぼまるまるレンダリングするので・・・ レンダリングするためのきっかけとなるdivタグなどが１つだけあればOK。 日本語でごちゃごちゃ説明しても理解しがたいかもなので、何はともあれ、 「Hello World」を。 まずは雛形となるHTMLを作成。 [bash] [/bash] 雛形はこれだけでOK。 今後 どんどん複雑な処理をするにしても、HTMLに書くのは、基本これだけ。 ReactJSを使わなきゃなので、ReactJSに必要なJavaScript３つを、Headタグに挿入。 [bash] 　　〜 中略　〜 　　〜 中略　〜 [/bash] ここまででReactJSを行う準備ができたので、いざBabelScript（ReactJS）を記述していきましょう。 基本的にReactJSを記述するのはBodyタグ内です。Bodyタグ内に Scriptタグを作り、そこに記述していきます。 [bash] [/bash] 結果は Hello World! 以上。 「Hello World」を出すだけで、どんだけめんどくさいんだよとお思いになるかもしれませんが、 我慢してください。これだけは最低のルールです。 まずはScriptタグでこれからReactJSを書きますよーと目印をつけます。 そして 「root」というIDを持ったタグに HelloWorldクラスをレンダリングしてねとおねがいします。 その部分が [bash] ReactDOM.render( , document.getElementById(“root”) ); [/bash] ここで疑問が出てくると思います。HelloWorldタグってなんぞね？？？ そんなタグ HTMLにはありませんよね。 じゃあなにかというと、要はReactJSは独自のタグをScriptで作っていこうというコンセプトなのです。 聞いたことのない独自のタグ名を class 名として、クラスを作ります。 そのクラスの継承元は固定で React.Componentです。 よくわからないかもしれませんが、おまじないで、 [bash] class 自分が作りたいタグ名 extends React.Component [/bash] と書くと覚えてください。 じゃあ、実際に作ったタグ名がどんなHTMLをレンダリングするかというのを決めるのが、 自作のタグ名のクラス（ここではHelloWorldクラス）の renderメソッドなのです。 [bash] render(){ return ( Hello World! ); } [/bash] renderメソッド内では、HTMLライクなタグを戻り値として戻します。 ここでは、 <h2>タグですね。 メソッドの戻り値というと普通は変数を連想するものですが・・・ ReactJSの場合はこのタグのようなもの を戻すのがルールです。 「タグのようなもの」というのが味噌で、これがタグではなく ReactJSのオブジェクトというもののようです。 （正確には間違っているかもしれません・・・） たんに <h2>Hello World!</h2> と出力するのにどんだけ記述しなきゃならないんだよと お思いかと思いますが・・・これは最低限のルールですので我慢してください。 これだけじゃあまりにつまらないので、動的に変化するものも入れてみましょう。 [bash] class HelloWorld extends React.Component{ render(){ var dt = new Date(); var hms = dt.getHours() + “:” + dt.getMinutes() + “.” + dt.getSeconds(); return ( Hello World!{hms} ); } } [/bash] こうすると出力結果はブラウザーをリフレッシュするたびに変化させることができます。 結果はこんな感じ。 Hello World!19:20.33 とりあえず、初回はここまで。 覚えておかなきゃならないことは 独自のタグ名を作り、それをクラスとして定義し、 クラス内に renderメソッドを定義して、そこに出力したいHTMLライクなものを記述する。 最後に ReactDOM.render で、HTML上の固定のエレメント内に renderで出力する。 わかりにくいかもしれませんが、ざっとこんな感じです。 次回は TODOリストを作ってみましょう。