JavaScriptでhtmlを書く技術

これまでは、web上でのJavaScriptの役割は、主にフロントエンドでhtmlやcssを書き換えてwebページに動きをもたらす事でした。
詳しくはDOM操作といい、HTML構造を変化させるために用意されたDOM（Document Object Model）という仕組みを利用します。

元来、既存のhtmlやcssの一部を書き換えるために使われってきたJavaScriptを、DOMそのものから生成してしまうために使うのがSPAです。あらかじめ書かれたDOMは何もなく、ブラウザ上でhtmlのビューがコンパイルされるのでVirtual DOMと呼ばれています。

代表的なSPA、Reactとは

2014年にFacebookは、SPAの技術であるReactのUIライブラリをオープンソース化しました。

ReactはFaceBookはもちろん、Airbnb、Uber、国内でもWantedlyやクラウドワークスにも導入され、クックパッドの一部にも使われています。また、ニコニコ動画サイトも、Flashからhtml5に切り替えられるタイミングでReactが導入されました。
airbnb/javascript
uber/react-digraph

DOM操作

今までのjQueryを使ったDOM操作では、どのDOMが今どんな値を持っているかを調べてコンポーネントが増えるたびに逐一処理をしなければならないので手間が膨大に増えていきます。

SPAではhtmlは書かない！

DOMは全てJavaScript側で構築してHTMLに流し込まれますので空っぽです。bodyの中にDOMを読み込むためのdivなりの開始タグと終了タグが1セットあるだけです。React.jsが動き出すと、このタグがJavaScript側で生成したDOMに置き換わります。

React.jsの文法

React.jsのコードはJavaScriptを拡張したJSXという文法で書かれています。JSXはJavaScriptではありませんので生のJavaScriptに変換する必要があります。ネット上にはJSXTransformerやBabeなどの変換ツールがあります。

Reactはオープンソース

著作権の表示と免責条項さえ明記しておけば、再利用も再配布も自由のBSDライセンスですが、Facebookに対し法的措置等をとるようなことがあれば、Reactライセンスはただちに剥奪されます。またGoogleやMicrosoftは社内でのReactの利用を禁止しています。
facebook/react/PATENTS

ネイティブの代わりにReactで開発されるアプリ

webサービスだけでなく、webアプリもネイティブで作るのではなくSPAで作られる事が多くなっています。それと同時にweb開発会社とアプリ開発会社の境目もどんどんなくなって来ます。

Reactを学んでいる受講生

Akrosでもhtml+css、jQueryを一通り学びReactの勉強をしている受講生がいます。受講期間はあと2ヶ月あるのですが就活をはじめたところ3社から内定をもらい、そのうちの1社アプリ開発も行なっているスタートアップ企業への就職を決めました。

次回のブログでは、内定をもらうために受講生がどのようなポートフォリオを作ったのかをお話ししようと思います。お楽しみに！