こんにちは、武井です。久しぶりにイベントレポです。
【ヒカ☆ラボ】JavaScriptの情報交換LT会~React/Redux,Node.js,アニメーション,Processing等々~
に参加してきました。
テーマがテーマなだけに、フロントエンド界隈でよくお見かけする方々が多くいらっしゃいました。
全体を通して、LT大会と思えないほど濃くて充実した内容でした。
メモや気になったことなど。
目次
大竹さん 「Processing ではじめるインタラクティブ
コーディング入門」
Flash時代の演出のようなものがJSで増えてきている。
インタラクティブな演出は世界観を作りだすのに効果的である。
事例
パーティクルやページ遷移の演出など、各所凝っててかっこいいですねー。
どんなことができるか
Flashで作ってたような、ふしゃふしゃ感がやりたい！
⇒ Processingで実現
Processing・・・聞いたことはあったのですが、よく知らなかったので興味深かったです。
なにがいいのか
・環境が整っている（書籍が多い、公式ドキュメントが充実
・お手軽（インタラクティブ演出に向いている、流行り始め、情報交換がしやすい
・手軽に試して実行しやすいので、偶発的に演出の引出が増える
デモのコードを見ましたが、なかなかシンプルそうな印象です。
永井さん 「ナウいJavaScriptアニメーション実装法」
今どきのアニメーション実装とは？というお話でした。
事例
イラストがたくさん使われてるのですが、パララックス表現やコマアニメーション、音楽までついたリッチなサイトです。これまたかっこいい。
“3つの柱でアニメーションが構成されている”とのことで、以下がそれぞれのお話。
Parallax Scrolling
・今まではスプライト画像を作って、background-positionをズラすなどで実装していた。
⇒ 重い
・WebGLを使用（CreateJS）
⇒ 軽い
たしかに、scrollイベントでcssいじるとかなり重いんですよね。
Stop motion animation
コマ送りのアニメーション、パラパラ漫画のようなもの
・今まではスプライト画像で、background-positionをズラすなどの手法
⇒ 使いにくい、単純な繰り返しならよいが複雑な調整ができない
・CreateJS（SpriteSheetClass
⇒ 非常に細かく設定できる
⇒ アニメーションごとにどのフレームを使用するか指定できる
CSSアニメーション
・今まではjQueryのanimateで実装
⇒ 動作がカクつく
Velocity.js
⇒ アニメーションがなめらか
ちょうどアニメーション周りのJS技術をもっと身につけたいと思っていたので、非常にためになりました。
今までの実装方法と比較してのお話だったので、わかりやすかったです。すぐにでも使ってみようと思います。
柏さん 「Webだけの知識で出来た！Cordovaを使った
iOSアプリ開発」
現役高校生さんの登壇、す、すごい。世の中の進化についていけない、怖い。
iPhoneにも通知を送りたい ⇒ App開発、Swiftやるか ⇒ Swift無理だ
⇒ Apatch Cordova（Webの技術を使ったアプリ開発フレームワーク）で実装
Cordova知らなかったー。プラグインを通してJSからObjectiveCに変換するんだそうです。すげぇ。
メリット
・クロスプラットフォーム
・HTML、CSS、JSで作れる
・Webの知識、財産をそのまま活用
デメリット
・デバッグの複雑さ
・ネイティブとのパフォーマンスの差
・必要な前提知識が多い
のびすけさん 「Let’s enjoy JavaScript Robotics」
昔はJSはブラウザで動かすもの。
近年はサーバーもスマホアプリもデスクトップアプリも。
最近はハードウェアも流行ってきている。
ハードウェア作る側がJSに開いている流れがある。
逆にNode.js界隈でのハードウェア対応も活発
⇒ JSを書いて、電球を光らせたり、スマートトイ・ドローンを動かしたりなど様々なことができる
⇒ フロントエンドの人でも怖くない！
IoT・ハードウェアには無縁なもので、そんなことまで出来るのかと驚くばかりでした。スマートトイ動かしてみたい。
福岡さん 「React + Redux + Node.js + Raspberry Piで
ビデオプレイヤーを作りたかった話」
「Heavensdoor」
Raspberry Piでトイレの空き状況を監視するアプリ
「FICCのトイレの状況が知りたい人はぜひアクセスしてください！」とのこと（笑）
VJツールを作ろう
Node.jsをやろう！
Redux…どこから手を付けていいかわからない
react-webpack-node
極めて今っぽいボイラープレート
どうでもいいことですが、ボイラープレートがわからずググってしまいました。「お決まりのソースコード断片」という意味だそうで。
PostCSS
いまグイグイきてるCSSプリプロセッサ
Sassとはまた違った利点があるようで。使ってみたい！
これからWebサイトは裏通りになる
プラットフォームに逆らうことはできない
フロントエンドの習得コストは増大して、得るものが少なくなっている。
だからこそ「何を実現するか」を考える必要がある
まとめ・感想
一言にJavaScriptと言っても、本当に幅広くなってきたんだなーと実感です。
今回はご登壇された方が、それぞれ違う方向性での「JavaScript」を語ってくださり、フロントエンドエンジニアの様々な可能性やこれからの技術についてインプットを得られました。
とても楽しかったです。ご登壇の皆様、イベント運営の皆様、ありがとうございました。
そして、それぞれの方が「この分野が得意」というのをしっかり持っている印象を受けました。
「新しい技術がでてきたからなんとなく触ってみる」も、それはそれでいいことですが、
福岡さんが言っていたように「何を実現するか」を考えて選択していくことが重要ですね。
私の方向性としては、インタラクティブ方面を強化していきたいので、ProcessingやCreateJSに取り組んでみようと思います！