公式サイト
events.html5j.org
開催概要
公式転用
| 項目名 |
内容 |
| イベント名称 |
HTML5 Conference |
| 開催日時 |
2016年9月3日（土）10:00 ～ 19:30（予定）（受付開始 9:30） |
| 募集人数 |
1,600名 |
| 対象者 |
Web開発者、Webデザイナー |
| 会場 |
東京電機大学 千住キャンパス（東京都足立区千住旭町5番） |
| 参加費 |
無料 |
"より深く、広がるWeb"
少し前には次世代のWeb標準技術であったHTML5は、既に多くの業界に広がり、浸透しています。
今では、HTML5は当たり前のものとして利用され始めています。
また、それに留まらずHTML5に続く次のWeb標準技術は、現在も多くの仕様が検討されており、着々と歩みを進めています。
そうした中で、Web技術が多くの業界、様々な環境で活用されることによる新しいノウハウや最新情報をキャッチアップすることが、Web技術者たちに求められています。
そして、本カンファレンスが、それらのノウハウや最新情報の共有、そして交流の場としてありたいという想いがあります。
Web技術者同士だけではなく、Webを取り巻く様々な企業や団体と、垣根を超えて気楽に交われる機会を作りたい。
そういった「Web技術者の祭典」を目指しています。
本カンファレンスを通じて、皆さんの成⻑を促す機会になれば幸いです。
参加セッション
- 基調講演
- Reactの最新動向とベストプラクティス
- 昼休み
- HTMLスナップショット2016
- The First Step to Angular 2
- TechFeedのつくり方 - Angular2 / Webpack / Ionic2 / Cordova実践入門
- Atom、Sublime Text、WebStorm に Visual Studio Code、四大エディター真夏の大決戦！
初参加
初めて参加。
Webのサーバーサイドエンジニアだけど、フロントの知識欲しさに参加した。
ある程度知っているから、大丈夫だろうと思ったけど、知識不足を感じることが多々あった。
一番聞きたかったのは、AngularJS関連の話とJavaScirpt周辺事情。
セッションも、それを意識して受講。
人が多い！
思ったより人が多い。
会場のキャパオーバーな感じがした。
人が多いところで一番気になるのは、トイレ事情。
案の定、大きい方はなかなか開かない。。。
お腹弱いから、こういうイベントでトイレの確保は、最重要事項。
なんかいい方法ないだろうか？
コンビニだと、店舗によっては店員に声を掛けなきゃいけないから、小心者の俺にとっては、かなりキツいルール。
話が逸れた。
HTML5というワードで人がこんなに集まるのだと感心してしまった。
Web関連で飯を食っているエンジニアがいっぱいいるのだなと、どうでもいいことを感じた。
各種セッション感想
基調講演
初めてだったので、イマイチどういうノリなのかよくわからないけど、聞いていた。
及川 卓也氏が登壇するとのことなので、ぜひ聞きたかったから、早起きして参加。
久々に、遊戯王の再放送を生で見たわ。
中村 修 教授
話の概略としては、以下が言いたかったのだと思う。
今までのWebは紙で表現の以降が主だった。
これからは、新しいデータでWebを表現する事が必要になる。
Webは、地球が使っているOSのことだ！(ニュアンス的には、そんな感じだったはず！)
Webは、世界で動く分散OSだ！
なるほどと思ったのは、今までは紙の焼きまわしだったということ。
たしかに、いまのUIは、フラットデザインが好まれ、紙のような質感が主流になっている。
これからは、映像の時代になるのも激しく同意。
現に、映像コンテンツの需要は、結構ある。
拡張現実の重要性も、ポケモンGoで十分に確認出来た。
これからのWebには、映像＋どう表現するかが戦場になりそうだ。
そこら辺の技術は、要チェックだということがわかったのが、良かったことかな？
及川 卓也氏
経歴が凄い人だから、いろいろ自分には見えていないものが見えているのではないかと思い、心して聞いた。
Webを下記の３つの視点から見て、個人の見解を述べていた。
MSに居たころに、IE7の開発をしていたような発言があった。
本人は、その事実を隠したいようで、黒歴史にしたいのかな？と思いました！
アプリとしてのWeb
アプリの発展として、WebAPIが主流になってきたことを言っていた。
あとは、ProgressiveWebApp、WebAssemblyって言ってた気がする。
初見ワードだったので、キーワードだけ頭に入ってきた。
メディアとしてのWeb
キュレーションアプリの流通についての話だった。
情報サイトは多くあるのに、なぜキュレーションが流行ったのかにフォーカスが当たった。
簡単に言えば、UIUXが最悪だったから、生まれたものと言う見解だった。
本来見たいこと、広告が入らないからキュレーションが普及したとの見解を述べ、普及したのは、エンジニアがUXへの理解が足りていなかったから。
上手いこと、エンジニアに話を繋げたなと思った。
言いたいことは、エンジニアが怠惰だったということだ。。。
リゼロのペテルギウスを思い出す。
本来は、キュレーションが出ないように開発をする必要があり、それを防止するためにエンジニアが全力を賭さなければ行けないと、感じました。
自分にはない視点だったので、聞けて良かったと思います。
AMP？だったかな？
初見キーワードで、内容が理解しきれなかったが。
あとで、要調査しておきたい。
基盤としてのWeb
時間がなかったので、あっさりと終わった。
あんまり頭には残っていない。
たしか、HTTP/2が話に上がっていた気がする。
HTTP/2は、過去記事で書いたので、そちらを参照。
suzaku-tec.hatenadiary.jp
Softwear Desineの雑誌が非常にわかりやすかった。
まだ、置いてあるか不明だが、見かけたら一読してみることを進める。
Reactの最新動向とベストプラクティス
React周りの知識は、サーバーサイドエンジニアも欲しいので聞いた。
特徴と今後が聞きたかったので、使い方は、聞き流した。
Reactの活用事例
意外と開発事例が多いように感じる。
業務で使っているか会場に訪ねていたが、半分いかないくらいの人がつかっているらしい。
React特徴
- 書き方を学んでおくと、どこでも使える
- Component指向
- 宣言的
今後
軽量化&レンダリングの高速化・優先度の付与
ようするに、見た目と表示速度向上に力を入れていくことになる。
エンジニアよりではなく、ユーザよりの意見を強く取り入れていく方針なのだろうか？
そこら辺が気になった。
開発効率 ＜ 見た目 って印象を受けた。
ユーザに見えるところの技術だから、そうなることが当然だけどね！
お昼
休憩がてら、そこら辺を散策。
散策理由は、言わなくてもわかるな。
そう、ポケモンGoだ！
昼休み中に、フシギソウをGetして、ちょっとテンション上がった。
HTML2016スナップショット
発表内容を、もうちょいよく見ておくべきだった。。
HTMLの変革の歴史みたいな内容だった。
今の新機能の紹介かな？と思ったけど、それまでの経緯とかの話だった。
エラッタとかのワードに反応してしまった。
遊戯王ではよく聞くワードだからな！
The First Step AngularJS 2
楽しみにしていたセッションその１。
実際に業務で使うから、聞きたかった。
特徴
なんか、Reactできいたような事が。
Reactとは、競合相手なのかと感じた。
フロントエンドの知識のなさを感じる。。。
- ES2015
- web components
- web animations API
- terch API
未来の標準を意識して、仕様追加がなされている。
学習コストが減らせる反面、仕様に振り回されるデメリットもある。
シンプル
わかりやすく書けることを、実際のソース比較で説明していた。
資料を実際に参照したほうが分かりやすいので、ココでは明記しない。
高速化
チェンジディテクタと木構造
チェンジディテクタとは変更検知の仕組みのこと。
100000 / 10ms かなり高速で動作する。ただし、高速だからと言っても、変更検知は少なくなるように作るべきである。
自分の近くで、検知の仕組みを最小限にしなかったから、炎上したのを見たので。。。
ツリー構造になっており、変更検知した後の変更箇所が特定されているのが、高速に処理できる要因なのだと感じた。
TypeScript
- 静的型
コンパイラによるバグ防止。入力補完の活用。ドキュメントとして使える。
- Decorators
＠マークによる宣言的修飾子が使える。
すぐに入るわけではない
- Type-base DI
Angular2 型ベースでやることで、コンパイラによるタイピングミス防止機能が有効に働き、バグが防止でき
router
死んだり生き返ったりを繰り返しているらしい。
Googleですら、悩むことだから、ここがAngularの肝なのかと感じた。
まだ、実際にはAngularJS使ってないが、router関連は注意して見ておきたい。
Tech Feedの作り方
面白そうだな～と思って、なんとなく受講。
Webサイトは、よく見るので、気になった。
webアプリ → コンポーネント思考になる。
なぜなら、UIを突き詰めると、同じ動作が増える → 同じ処理が増える → 共通化が必要になる。
共通部品をコンポーネント化してしまえば、生産性を高められる。
Tech Feedのアーキテクチャと採用理由
Cordva
モバイルアプリをweb技術で作れる。
- 採用理由
- Webの知識を活用したかった
- コードベースの統一
- webとモバイルの統一
Angular2
Reactじゃなかった理由
- 採用当時、Reactのモバイル版がなかった。
- 強めの強制が欲しかった。
- 採用することでコードスタイルを統一したかった。
- React-Reduxが難解 学習コスト、プログラミングパラダイムの違いにかかるコストが大きかった。
Ionic2
Angularに対応したUIアプリ
Webpack
モジュールバンドラー
Javascriptをまとめて一つにしてくれるツール
開発現場
実機での確認が必須なので、デプロイしたら自動的にリブートする仕組みを構築。
つまり、CI環境を作ったってことですね！
フロント系は、実機へのデプロイ＆テストがあるので、サーバーサイドのCIよりも、１段階手間が掛かるんだなと心の中で呟いた。
開発してみての振り返り
Cordva
メリット
- コードベースの統一
- webの知識が活用できる
- Androidのバージョン差が気にならない
デメリット
- ネイティブよりも遅い
- 一人のエンジニアが全部見ないといけない
Angular2
メリット
- Angularの進化
- 使いやすい構造
- CSSのカプセル化
- 開発者によるコードの差がすくない
デメリット
- 学習コストが高い
- 静的型付けが辛い
- バージョンアップで仕様がものすごく変わる(今だけかも)
TypeScript
メリット
- 最新の言語仕様が使える
- 静的型なので、コンパイラによるコーディング補助
デメリット
- ツールが未成熟
- JSとの溝を埋めるのが辛い→静的型のデメリット
Ionic2
メリット
デメリット
Webpack
メリット
デメリット
- 機能が豊富過ぎて迷う
- 学習コストが高い→ 言語化できない謎の難しさがある
開発できるようになるまでの環境準備が大変
なんかウルトラマンみたいなタイトルロゴ・・・
山本裕介氏の名前を見つけて、ネームバリューで閲覧を決定！
人が多すぎる。やっぱりエディターへの関心が高いことを感じる。
立ち見を覚悟していたけど、特別席になんとか座れた。
ちなみに自分は、圧倒的にAtom！！
ただし、HTMLは書いてない。メモ書きに使う。あとはブログ編集。Markdownが書きやすいので、それで使っている。
特徴
機能
会場で高評価
タイピングエフェクトを見て、会場がどよめく。
タイピングのエフェクトが俺と同じだったので、驚きはしなかったが、初見の人は新鮮みたい。
そういえば、自分も初めて見た時は面白かったから、入れた！
ものすごいタイピングが楽しくなるからね！
告知
Node学園祭を告知していた。
暇かどうかは、微妙な時期だけど、スケジュールが合えば行きたい！
必要最低限の機能だけを持っているエディタ
エディタの大元
高度なテキスト編集が可能
拡張性が高いが、どのエディタも対応されるようになってしまって売りではなくなりつつある。
WebStorm
GitHubとの連携デモを交えて紹介
Issueに応じてやれるのを見た。
ブランチが自動でできるので、GitHub携わる人は必須な気がした。
Atomでもできそうではあるが。。
タイピングエフェクトがちょっとウザかった気がする。
Upsource
GitHubとの連携が凄い。
なにかでみたレビューツールで見ている。
Review Bordだったかな？
それに似ている。
VS code
バーサスコードって俺は心のなかで読んでいる。
響き的にカッコいいから。
electroenで作られているから、Atomの模造品ってイメージがある。
ターミナルがエディタ上で起動できるようになっている。
マルチプラットフォームで動くのは知っていたが、MSがって思うと、やっぱり異色なエディタなイメージがある。
若干気になったのが、mavenってどう読むのが正解なのだろう？って思いました。
自分は、メイブンっていうけど、登壇者は、マーベンって言ってた。
あとは、メイベンとか言う人もいるな。
こういういい間違えが怖いから、日本人の英語がなじめないのだと思う。
恥を捨てる心がいる気がした。
vs codeは、エディタってイメージよりも、IDEって言う方が近い気がした。
デモはJSのデバックをやっていたので、余計にそう感じた。
プラグインが補完できないところは、ターミナルのコマンド補完とかでやればいいので、汎用性が高いエディタなイメージを持てた。
感想
全体的に知識が足りてないことが多い。
己の無力さを感じる。
将来的には、フロントエンドもサーバーサイドもインフラもやれるようになりたいので、良いきっかけづくりにはなったのではないかと思う。
TODO：今後に向けて調査・実践すること
- Reactを使ったWebページ
- ProgressiveWebAppとは？
- WebAssemblyとは？
- Webpackの利用
- Node学園祭への参加
- AMPとは？
各種ブログへのリンク
HTML5 Conference 2015 講演資料まとめ #html5j | Time to live forever
HTML5 Conference に行ってきたメモ #html5j - console.lealog();
HTML5 conference 2016 スライド他まとめ - Qiita
HTML5 Conference 2016 の発表で自分の仕事が少しだけ紹介されていて嬉しい - 若き JavaScripter の悩み
