6/25(木)に21cafeにて開催されたグッドパッチ協賛のイベント「JSオジサン #5」のレポートをお届けします。
目次
JSオジサンとは？
JSオジサンはJavaScriptにまつわるLT(ライトニングトーク)を、気軽にアルコールも入れつつ、普段の勉強会とは一味違う感じで楽しむイベントです。
LTの内容はオジサンらしく濃い話ばかりで、普段の仕事への活用の意味でもネタの意味でも好評をいただいております。
こんな名前のイベントですが若い方はもちろんのこと、多くの女性にも参加・登壇いただいています。
昨年3月に行われた第1回から数えて、ついに第5回目。今回も定員80名のところに200名あまりから参加希望をいただきありがとうございました！
残念ながら参加できなかった方も、この記事をで少しでも雰囲気がつたわればと思います。
LT紹介
それでは、各登壇者さんたちがどのようなLTをされたのかを紹介していきます。
(まだ当日のスライドをアップされていない方もいらっしゃいますので、順次更新していきます)
ウェルカムLT
開演前に今回もまた、吾郷協さんがウェルカムトークをおこなってくれました。
この吾郷さんによるウェルカムトークはJSオジサンおなじみのネタ。開演ぎりぎりではなくて早めに会場に来てくれた方だけのお楽しみとなっておりますので、次回開催の際にはみなさまもぜひ余裕を持って会場にいらしてください。
内容は、最近よく話題になっているAngularJSやReactなどのフレームワークが辛いという声を受けて「それって本当にフレームワークのせいなの？」「やろうとしたことがフレームワークの本来の範疇を超えるものだったんじゃないの？」というお話をしていただきました。
西田 寛輔 氏 (とのさまラボ)
『ペッパーをJSで動かす』
ソフトバンクのロボット、ペッパーがJSオジサン参加者に向けてお話をする動画を流してくれました。
PythonではなくJavaScriptでも動かせる、という話は聞いたことはありましたが、jQueryが内蔵されている、という話には私も驚かされました。
ペッパーが自分で「僕の中でsocket通信でAPIを叩ける」みたいな話をしている姿は非常にシュール。。この発表資料内に動画もあるのでみなさんぜひ一度見てみてください。
重田 桂誓 氏 (グッドパッチ)
『Atomをもっと使いやすくする方法』
弊社グッドパッチのエンジニア、重田のLTです。
重田は2年前くらいにフロントエンド界隈でバズったこちらの資料を作成した期待の若手エンジニアです。
LTの内容はGithub製のテキストエディタ「Atom」の話で、「HTML/CSS/JavaScriptでパッケージを作れる」点がその一番の魅力とのこと。
パッケージを管理するための便利なパッケージの説明と、自分で作ったパッケージの紹介をしてくれました。
国分 佑樹 氏 (mixi)
『ESLint・JSCSの意義とアンチパターン』
国分さんはVimScriptのLint Developerをされているとのことで、その経験からLintの意義とアンチパターンについてのお話をされていました。
「そもそもLintを使っていないのはかなり問題」という話からLintを使う上でありがちなアンチパターンまで、普段なかなか聞けない内容でした。
また、新しい言語を学ぶ際やコードレビューの際にもLintは有用だという話も。
とても良い内容でしたので、詳細はぜひ資料を見てみてください。
菅原 のびすけ 氏 (LIG)
『Cylon.jsでIoTする話』
IoT向けのJavaScriptライブラリ「Cylon.js」のお話。
最近、IoTが騒がれている中で、JavaScriptで開発できる様々なボードや、開発可能なガジェットがいっぱい出てきています。
しかし、それぞれのSDKはバラバラで開発が大変という問題がある中、Cylon.jsを使うとベンダーロックイン回避ができるとのこと。
みんなもJavaScriptでIoTを楽しもうぜ！とのことでした。
よしこ 氏 (グッドパッチ)
『Let’s portfolio!』
重田に続き、同じくグッドパッチのエンジニアよしこさんのLTです。
よしこさんは昨年に自分のポートフォリオサイトがかなりバズり、はてなブックマークの人気エントリー入りもしています。
私ももちろんこのサイトは見ていたので、グッドパッチの求人によしこさんが来てくれた時には会いたくて会いたくて震えました。
そんなよしこさんが言う「しっかりとしたポートフォリオを作っておくと転職が有利に進む！」という話にはかなりの説得力が。
ポートフォリオがあることで転職側と採用側と双方にメリットがある、という話には頷けました。
moriyaman 氏 (アトラエ)
『service worker & indexed DBで作るオフラインWEB』
Service Workerとはページのバックグラウンドで動くイベント駆動のスクリプトで、主に「キャッシュ機能」「PUSH通知機能」が目玉とされています。
そんなService Workerですがmoriyamaさん曰くPUSH通知はチャラいので、キャッシュの話を今回はするとのこと。
バックグラウンドでもキャッシュの更新をかけられるためオフラインでもページを閲覧可能になりますが、通信ができない環境ではユーザのアクションに対応できません。そのようなときこそindexed DBを使うことでオフラインでその情報を貯めておいて、オンラインになったときにサーバに送るようにする、ということも可能になるというお話でした。
Googleのサービス評価基準に、そういったオフライン⇔オンライン連携への対応具合も入ってくるのでは……、という予想もmoriyamanさんはされています。
青山 民人 氏 (トゥギャッター)
『トゥギャッターを支えるJS』
トゥギャッターでまとめを作ったことがある方はわかるかと思いますが、あの画面はかなり使いやすいですよね。
今回はそのまとめ画面で動いているJavaScriptについてのお話でした。
jQueryベースで、サービス開始時から運用を続けて今では数千行にもなっていること。
よくそういったコードを「秘伝のタレ」なんて言ったりしますが、むしろこれは「秘伝の書」みたいなものだと。
また、Titaniumを用いることで、トゥギャッターのiOSアプリもAndroidアプリもJavaScriptで書かれているそうです。これは私も初めて知りました。
ねろ 氏 (KAYAC)
『MAX』
なかなか聞き慣れないこの「MAX」ですが、映像と音響の扱いに長けた開発環境との説明があり、なんとこのMAXはその中でJavaScriptも(しかもまぁまぁモダンな)書けるということでそのデモがありました。
このMAXもそうですが、実はウェブブラウザ以外でもJavaScriptを書ける場所はいっぱいある、というのは普段の仕事の中だけでは気づきにくいですね。
kubosho_ 氏 (グラニ)
『高品質な CSS を書きたい』
フロントエンドを触られている方は誰しも感じているとは思いますが、CSSってかなりカオスですよね。。
kubosho_さんはそれを解決するためにも「CSSをいい感じにするツール」を自作されて、今回のLTではそのお話をされました。
CSSのもつ「!important強すぎ」「ベンダープレフィックスめんどい」「ファイルサイズ肥大化」などの問題をこのツールで解決できるとのこと。
このツールはGithubでソースも公開されています。
発表資料はこちら
田島 真悟 氏 (KAYAC)
『Milkcocoaによる新しいWeb体験』
このMilkcocoaは「リアルタイム通信を実装したいが、サーバーサイドの知識がない」「モックレベルでさくっと作りたい」というフロントエンドエンジニアにはまさにピッタリなリアルタイム通信を実装できるライブラリです。
LTの中では2つのデモがありました。
1つは、ご自身のMacとiPhoneでリアルタイム通信をさせ、iPhoneを振ることによってブラウザではキャラクターが世界地図に向けてダーツを投げ、そのあたった場所のGoogleストリートビューが表示されて気軽に海外旅行気分が楽しめるものでした。iPhoneを傾けてまわりの景色を眺めたり歩く動作で前に進んだり、ということまで実装されていました。
もう1つは、ブラウザの各ウィンドウを楽器にしてバンド演奏させるというもの。各ウィンドウがギターだったりドラムスだったりして、そのウィンドウサイズで音量が変わるのですが、リズムの同期をMilkcocoaを使ったリアルタイム通信で実現しているとのことです。ギター(のウィンドウ)同士を近づけすぎるとハウってしまうなんていう細かい演出もｗ
どちらもテキストではなかなかその面白みを伝えにくいのですが、その魅力に会場はかなり湧いていました。
発表資料はこちら(後日更新します)
比留間 和也 氏 (KAYAC)
『JSで動かすOculus Rift 〜WebVR〜』
Oculusの伝道師、比留間さんの登場です。
Oculusをはじめ、ハコスコやCardboardなどのVRガジェットが話題ですが、普通のウェブサイトもこれらで動かせるということでそのデモを見せていただきました。
VRの体験がある方はわかると思いますが、そうではない人たちにはなかなかその魅力が伝わりづらい……、それをこのWebVRで簡単に体験できるようになればもっともっとVRが来るというお話がありました。
見せていただいたサンプルはthree.jsを使ってつくったWebGLでのもの。こちらのサンプルはMac/PCよりもぜひお手持ちのスマートフォンで試してみてください！WebVRの場合、1ソースで様々なVRガジェットに対応できるということも魅力ですね。
吾郷 協 氏 (チャットワーク)
人呼んでLT芸人こと吾郷さん、なんと今回は限られた短い時間で4つのLTを行うという離れ業をやってくれました。
離れ業過ぎて内容の詳細があまり私の頭に入ってないので、それぞれ簡単にさわりだけ紹介しておきます。
どれも内容は実用的なものでしたので、資料がアップされたらぜひゆっくり読み込みたいですね。
『tscとnpm』
TypeScriptでnpmパッケージをつくる際に気をつけたことのお話。
発表資料はこちら(後日更新します)
『30パッケージ構成とnode_modules重い問題』
node_moduleそれぞれにプロジェクトにインストールする負担をnpm linkを使って解決しようというお話。
発表資料はこちら(後日更新します)
『Flux / ScalaJS』
Frontend-Frontend/Frontend-Backendに概念をわけて、前者は今までのフロントエンド開発のようにViewに関わる部分を、後者は今までバックエンドでやっていたようなViewに関わらない処理をそれこそService Workerなども使ってやる、というお話。(すみません、タイトルうろ覚えです。。)
発表資料はこちら(後日更新します)
『Frontend DDD』
ソフトウェア開発では普通に行われているDDD(ドメイン駆動設計)をフロントエンドでもやろうよ、というお話。
発表資料はこちら(後日更新します)
物江 修 氏 (マイクロソフト)
『酒と泪とEdgeとIE』
Windows10に、InternetExpoler11とともに搭載されるもう1つの新しいブラウザである「Edge」についてのお話でした。
IE11が旧バージョンとの互換性目的に作られていて、Windows8や8.1と同じものをマイナーアップデートしたのに比べて、Edgeは相互運用性、Web標準を意識して作られた全く新しいブラウザとの説明がまずありました。既存のIEから22万行のコードを削除し、30万行のコードを足したとか。
Chromeと同等に動くことを1つの目標としているらしく、調査した膨大な数のサイトでそれが実現できたとのこと。クライアントから「Edge対応どうする？」という話が来たら「Chromeで問題ないなら問題ない」と言ってしまっても良いほどだそうです。
ちなみに、Edgeのユーザエージェントはこのように設定されているそうですｗ
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.9600
おわりに
そんなこんなでいつも以上に濃い内容になった今回のイベント、参加できなかった方もぜひまた次回参加いただけると嬉しいです！
JSオジサンはFacebookページでは、イベントの情報も含めてJavaScriptに関する様々な情報を発信していますのでまだ参加していないかたはこちらからどうぞ。
https://www.facebook.com/groups/jsojisan/
それでは、(いつになるかはわかりませんが……)次回のJSオジサンをお楽しみに！！