「勉強会に行ってみた!」第13回「JavaScriptフレームワーク勉強会」
event

「勉強会に行ってみた!」
第13回「JavaScriptフレームワーク勉強会」

2015.06.11

ent106_img01.jpg

最近各地でよく開かれているIT勉強会。あなたは参加したことはありますか?
一口に勉強会といっても、企業によるセミナー形式のものから有志による輪講形式のものなど様々ありますし、「行く価値があるのかな?」とか、逆に「自分だとレベルが追いつかないんじゃないか?」みたいに考えてしまって、二の足を踏むことも多いんじゃないかと思います。また、勉強会のテーマについては事前に分かっても、具体的にどんな雰囲気までは分からないことがほとんどです。
そこで実際に勉強会にお邪魔して、こんな雰囲気でしたよ!と紹介するのがこの記事の目的です。「こんな感じなら行ってみようかな」みたいに思ってもらえたらうれしいです。
三土たつお

今回はJavaScript の勉強会に参加しました。JavaScriptのフレームワークは次々に新しいのが出てきて、今まで主流だったものがもう古いと言われたりしてどれを選べばいいかよく分からない感じです。いま、どういう雰囲気なのか?を知りたいなと思ってやってきました。

勉強会のタイトルは「第6回勉強会 フレームワークの世界まる見え!JS特捜部 ~ React,Angular,WinJSだらけの2時間SP!~」。主催は、html5j というコミュニティの「Webプラットフォーム部」です。

ent106_img02.jpg

会場は品川の日本マイクロソフトでした。広くてきれいな会場。そしてみてください、この休憩所を!

ent106_img03.jpg

この自動販売機の淹れたてのコーヒーも飲み放題なんです。それから冷蔵庫の中に入っているジュースもお茶も。なんて太っ腹。さすがマイクロソフトですね。html5jコミュニティの中にマイクロソフトで働いている方がいるので、そのつてで会場として提供してもらっているんだそうです。いいですね。ジュースが飲み放題っていうだけでマイクロソフトをどんどん好きになりそうです。

■ Angular

勉強会の最初のセッションはAngularでした。演者はAngularJS Japan User Group の金井さん。

ent106_img04.jpg

お題は、Angular2について。Angularはいまは1.4系が最新ですが、新しい2系の開発が進んでいるそうです。変わることはいくつもあるのですが、分かりやすいところでいうとまず文法が変わります。

ent106_img05.jpg

いままでは HTMLの属性として ng-model=”myModel” のように書いていましたが、これからはDOMのプロパティとして [value]=”myModel” のように書くようになるとのこと。

他には、Web Component ベースになるそうです。

ent106_img06.jpg

たとえば、Bootstrap を既存のサイトに取り入れようとしても、この写真のようにp要素にグローバルでマージンが設定されていたりして、既存のCSSと衝突してしまいます。こういうことがないように、DOMをカプセル化したりして使えるようにするのがWeb Component です。便利ですね。

他には仮想DOM的なフィーチャーも取り入られるそうです。でも仮想DOMじゃないんです、とのことで、何か意味深ですね。

■ WinJS

つづいてはWinJS。日本マイクロソフトの物江さんです。

ent106_img07.jpg

恥ずかしながらWinJSというものを知らなかったんですが、物江さんの話も

「誰も知らないと思うんですがWinJSの話をします」

と始まり、なんて自虐的な!とちょっと笑ってしまいました。ところが、話がはじまってみるとWinJSまじですごいな!と思いました。

ent106_img08.jpg

たとえばこれは、リストビューです。かっこよくないですか。アイテムを選択するとちょっと押されたアニメーションがあって色が変わったりするんですが、この動きがスマホで見たときでも滑らかなんです。

これはかっこいいし、いいなと思いました。

物江さんが語っていた要点は次のとおりです。

  • ・WinJSはリッチなアプリケーションを作るためのライブラリー
  • ・もともとはWindowsストアのアプリ用に作られた
  • ・でも、オープンソースにしてからクロスプラットフォーム化がすすんだ
  • ・みんなのおかげ!
  • ・アイコンがウェブフォントなので画像がいらない

アイコンがフォントだっていうのも冴えてますよね。これはぜひ使ってみたいなーと思いました。

■ OnsenUI

つぎはアシアルの田中さんによる OnsenUI の紹介です。

ent106_img09.jpg

OnsenUI は、アシアル製のHTML5アプリ向けUIフレームワークです。もちろんモバイルを含め各種プラットフォームに対応しています。

よく見かけるドロワーメニューとか、引っ張って画面を更新したりとかのあらゆるパターンを用意していて、しかもモバイルでも高速に動作するようにチューンしているので、プログラマーは自分が本当に作りたいアプリケーションの中身に注力できる。そしてそれを実現するために目指して開発しているんだそうです。

ent106_img10.jpg

UIフレームワークはもちろん他にもありますが、世界的にも広く使われているものとしては唯一の国産なのだとか。プログラミング言語でいうRuby的な感じでしょうか。そういうのを作るのってかっこいいし、応援したいなあと思います。

■ React.js

最後はトレタの増井さんによるReact.js の紹介です。

ent106_img11.jpg

増井さんが React.js いいかも!と思うようになったのは今年の初めで、そのきっかけはお正月の休みに React.js のチュートリアルを試してみたからだそうです。お正月みたいな時間のあるときに、ふだんできない新しいことをやるっていうのは見習いたいですね。

ent106_img12.jpg

まず、jQueryなどを使ったDOM操作では、

  • ・DOMがいつどこで書き換えられるか分からない
  • ・イベントがどこで処理されるか分からない

といった難しさがありました。大規模になると破綻しやすくなります。

一方で、昔のやり方は単純でした。

  • ・DOMを書き換えず、常にHTML全体を生成
  • ・EventListenerではなく、onXXXプロパティを使う
  • ・HTMLとJavaScriptを一つにまとめる

分かりやすいモデルです。React.js は、ある意味ではこのモデルを実現していると言えます。

ent106_img13.jpg

プログラマーがDOMは直接操作するのではなく、状態だけを変えます。すると状態の変化をReact.js が捉えて、DOMを書き換えます。このときに、全体をいちいち書き換えると重くなるので、それを防ぐために差分だけをうまく書き換えるための仕組みがバーチャルDOMだ、ということのようです。

■ 懇親会

セッションが終わった後は、会議室脇のスペースで懇親会が開かれました。

ent106_img14.jpg

懇親会のおともはピザ。

ent106_img15.jpg

そしてもちろん、ジュースとコーヒーは飲み放題!うーむ。すばらしい。

参加した人にお話を聞いてみました。

  • ・WinJS知らなかったけどかっこいい。
  • ・React.jsはきれい。ぜひ実践投入したい。

といった感じでした。

主催のmecoさんにも話を聞きました。

ent106_img16.jpg

mecoさんはhtml5jのWeb プラットフォーム部の部長さん。自分自身はAndroidの技術者で、HTMLやJavaScriptなどのウェブのフロントエンドの技術にはそこまで詳しくないとのことです。勉強会の開催やコミュニティの運営を通じて、モバイルに詳しい人とHTML5などに詳しい人を結びつけたい、とのことでした。

■ まとめ

どちらかというとReactとかAngularの話に興味があったんですが、意外とWinJSすごいな!と思いました。モバイルで軽いっていうのがいいですね。ぜひ使ってみたいと思いました。あとは日本勢でがんばっているOnsenUIもすごい。期待したいです。

今回参加した勉強会:
第6回勉強会 フレームワークの世界まる見え!JS特捜部 ~ React,Angular,WinJSだらけの2時間SP!~
https://webplat.doorkeeper.jp/events/22013

三土たつお。1976年生まれ。プログラマー、ライター。プログラマーとしてはふだんPHPを書いてます。
ライターとしてはニフティのデイリーポータルZとかで書いてます。
http://mitsuchi.net/

この記事はどうでしたか?

おすすめの記事

キャリアを考える

BACK TO TOP ∧

FOLLOW