フィーリングで理解するReact 1
前提:HTML/CSSの知識があり、JavaScriptでコードを書ける人(ES6の知識が要る)ここからはReactくんの説明ページhttps://ja.reactjs.org/docs/hello-world.htmlを使用する。JSXJavaScriptを叩きながらHTMLの記述ができちゃう便利なもの。HTMLを画面の隣に置いてCSS用のclass……JS用のid……と格闘する日々とはおさらばできるのかもしれない(大袈裟)。HTMLの記述とJavaScriptの記述が一度にできるから、関連性を持って書くことができるし同じ動作をするからと繰り返し同じHTMLをコピー&ペーストしなくても良いようになる。そのHTMLとJavaScriptの融合体がJSXとなるのだ(大雑把)。ここで言うHTMLは厳密にはHTMLっぽい何かである。JSXで記述したHTMLっぽいタグ内で変数や定数を用いた動作をする際、JavaScriptのようにidを取得して……といったDOM操作は使わなくて良い。ただその代わり、変数は{}内に記述する。{}内がJavaScriptのステージとなる。ないとただの文字列と化す。セミコロンは不要。その代わり中括弧・括弧で囲もう。変数を宣言するなどJavaScriptの要素が強い場合は使ってもOK。JSXは常にreturnと共に。関数で値を返す時と同じ。値を放り込んだらHTMLごと結果が返ってくるようなもの。こんな風にHTMLとJavaScriptのいいとこ取りではあるのだが、彼もまた、JavaScriptであった。変換されれば普通にJavaScriptとして使うことができる。引用符や中括弧を使うことができるが、同時に使ってはいけない。文字列は引用符、式の場合は中括弧を使うようにする。2つの単語を組み合わせて使う際、-や_は一切使えない。-_の代わりに二つ目の単語の最初を大文字にして使う。tabindexはtabIndexclassはclassNameとなる。(classはエラーになる)pタグのように<p></p>の場合なら特に気にしなくて良いのだが、imgタグのように</p>がなくても使えるようなタグでは<img src = {xxx.png} /> ↑がいる。彼はインジェクション攻撃を抑えられるつよつよな存在である。え、インジェクション攻撃?大塚商会のIT用語辞典(/words/injection-attack.html)によると「データベースやプログラムの脆弱性を利用したサイバー攻撃や不正アクセスの総称」らしい。家屋の鍵が開きそうなところ、脆く壊れそうな所をくまなく探して、家屋内の侵入を図るみたいな。空き巣と言った方がわかりやすいのかも。そのプログラム版である。使えなくなったデータ、壊れかけた壁にここではバールのようなもの……ソースコードをぶつけてぶっ壊す感じ。ぶっ壊せたらそのまま家を乗っ取ったり金品を奪えたりする。React DOMではJSXに埋め込まれた値をレンダー前にエスケープ……エスケープ?シングルクォートやセミコロンなどの記号を普通の文字として解釈するように設定すること。JSXはReact.createElement()の呼び出しへとコンパイルする。ReactでHTMLのタグを用意する場合、React.createElementにタグの中身を分割して書く必要があるのだが、JSXでは自動的に作ってくれるのでお得。お得とは。