がみぶろ

@jumpei_ikegami

We Are JavaScripters!@14th まとめ

We Are JavaScripters!@14thに参加したので、その内容についてまとめました! プレゼント企画などもあって楽しかった!

イベント自体の詳細は、こちら!

wajs.connpass.com

LT1: node.jsでプレゼンツールつくったお話 @ykyk1218

資料

speakerdeck.com

自己紹介

twitter.com

  • ニワトリのアイコン

qiita.com

悩み

  • 勉強会で質問しにくい
  • 勉強会に登壇しても、反応がわかりにくい

SlideChat

http://slide-chat.com/

  • 作った
  • pdfをアップロードし、スライド形式に変換
  • プレゼン中にコメントできる
  • なるほどボタンで、なるほど数を表示できる

スタック

  • Meteor(node.js)
    • Mongoとの相性がいい
    • フロントエンド周りの環境を整えるのが楽
      • webpackなどを別途用意する必要がない
  • React.js
  • PDF.js
  • MongoDB

Qiitaスライドで使いたい!

  • QiitaスライドをpdfにするChrome拡張作った

chrome.google.com

LT2: Nuxt.jsで始めるPWA @takanorip

資料

speakerdeck.com

自己紹介

twitter.com

  • 株式会社スマートドライブ
  • Polymer-Japan翻訳チーム

Service Worker

  • networkとcacheからいい感じにデータ取ってきてくれる

Nuxt.js

  • ユニバーサルVue.jsアプリ
  • SSR
  • ルーティング便利

導入は簡単!

  • pwa-moduleを使う
    • ライブラリをNuxt用にモジュール化したもの
  • nuxt.config.js
    • 設定ファイル
  • gitignoreにsw.*を追加

プッシュ通知

  • One Signalを使う
    • モバイルAppもWebPushも
    • Uberも使っている
  • nuxt.config.jsにonesignalモジュールを登録し、設定を追記
  • デフォルトの通知設定ダイアログを出す前に、確認をはさまないとユーザービリティ的にだめ!
    • OneSignalで、確認用の独自UIを出せる

まとめ

  • Nuxt.jsでPWAの導入が簡単!

LT3: (スポンサー)アライドアーキテクツのサービスで使わているJavaScriptの話 @oremega

資料

speakerdeck.com

自己紹介

twitter.com

  • デザイナー
  • 社内で1人なので、UI,UX,HTML,CSS,JSなんでもやる

アライドアーキテクツ

monipla

cp.monipla.com

  • 企業と人をつなぐ

Brand Touch Manager

www.aainc.co.jp

  • 企業が、自社とつながっている人を可視化

技術スタック

告知

  • フロントエンドエンジニアとデザイナーを募集しています!

www.wantedly.com

LT4: jquery? state管理? どっち使えばいいの? @fukaminmin

資料

www.slideshare.net

自己紹介

twitter.com

  • 運営メンバーの1人
  • Taskey.inc
  • よつばと、漫画、テニス
  • 国際SEO
  • WeJS, CLEM
  • peepというアプリをリリース

画面から友達を削除する

jQuery

  • セレクタ指定で、友達かどうかを判定
  • ajaxでデータ更新
  • 画面もセレクタ指定で更新
  • つまり
    • DOMに依存しすぎる

state管理

  • state側のデータを判別して、そっちをいじればいい

使用基準

  • jquery
    • LP
    • 動きがないページ
    • animation
  • vue, knockout
    • ポップアップやコメント一覧
  • react, angular
    • 1ページで色々したい
    • フルSPA

デメリット

おすすめ

  • 最初に始めるなら、Vue!

スポンサーセッション

twitter.com

forkwell.com

LT5: facebookのフロントエンド開発 @boiyaaaaaa

資料

speakerdeck.com

自己紹介

twitter.com

  • Persol P&T
  • フロントエンドエンジニア
  • ITスペシャリストに昇格

Facebookでのフロントエンド開発

  • StackShareによるスタック
    • React, Flux, Relay
    • Jest
    • Phabricator
    • Jenkins
    • Nuclide(内製エディタ)
  • Mercurialの単一リポジトリにぶち込んでいる

弟に訊いてみた

パッケージ管理

  • 全社でYarnを使っている
  • 必要なモジュールを全て内製している

Facebook製のものしか使えない?

  • 強制ではない
  • Nuclideが自社構成だと使いやすい

nuclide.io

品質管理

  • Flowで型チェック
  • Jest

facebook.github.io

YarnやJestは書き換えた?

  • 1週間でソースがほとんど変わることがある

バンドラは?

  • 内製

Facebookの開発者になるためには?

LT6: SlackはどうやってBrowserViewに乗り換えたか @tipo159

twitter.com

資料

speakerdeck.com

内容

  • 以下の内容に沿って、Slackの実装上の変化を紹介

slack.engineering

WebViewからBrowserViewへの乗り換え

  • まだβ版
  • webViewよりもChromeのタブに近い動作
  • Electronで維持管理できる

electronjs.org

複数Redux Storeの同期

  • 前は必要だったが、不要になった

非同期Actionによる副作用

  • redux-observableを使い、非同期Actionとユーザー操作に伴うActionを一元化

リファクタリング

LT7: 関数の話 @chikoski

twitter.com

資料

speakerdeck.com

function宣言とアロー関数式

  • 書き方が色々

関数適用

  • 関数を呼ぶ方法
  • add(1,2)

パイプライン演算子

  • 最近議論されている仕様
  • value = 7 |> double |> addOne

関数適用は遅い

  • 普通に演算子で書いた方が早い
    • 関数呼び出し時にローカル変数を使ったりするので、メモリ操作が多い
  • でも、関数で書いた方が読みやすい

末尾呼び出し

  • ES6の仕様で、内部的に演算子で展開してくれる
  • なかなか実装されなかった

関数

  • 手続きの列に名前をつけたもの

関数はオブジェクト

  • つまり、関数 = モノ

クロージャ

  • 外の変数を使って定義できる

部分適用

  • クロージャがあると、関数の一部分だけを固定した別の関数ができる
  • utilityが簡単に作れる

ロジックのパラメータ化

  • map, reduceなど、ロジックを引数で渡せる
  • 部分適用と組み合わせるといい

シューティングゲームに使ってみる

  • 当たり判定の計算をしてみる
  • Enemyクラスに、ColliderとRendererのプロパティを設ける例

LT8: アウトプットしよう! @brn0227

自己紹介

twitter.com

  • V8のコントリビュータになった!

新卒時代

  • JS書けるだけで即戦力に

転職

  • CAへ
  • 上司に勉強会を勧められるが、嫌いだった
    • 発表内容も大したことないし...
    • 懇親会が苦手...

インプット

  • ひたすらインプット
  • babelよりも前にトランスパイラを作ったが、公表せずに殺した

世間から消える

  • 社員数が多いと、知られていないことも多い
  • フロントエンドテックリードになったが、自分を知っている人があまりいなかった

行き詰まり

  • インプットだけを続けても、成長が見えなくなってきた
  • OSSはPR送っていたが、遠い存在に感じていた

2017年

  • 月に2〜4登壇を目標
  • 23登壇した
  • speaker deckが2ページになった

感じたこと

  • 世界が広がった
  • 勉強会駆動勉強
  • 自分はまだまだ
  • 執筆や登壇の縁ができた
  • OSSの作者やコミッターと話す機会が増えた
  • OSSコントリビュートする意識が増えた

伝えたいこと

  • 明日からでもアウトプットすべき
  • 自分の価値を高めるのは、自分の責務
  • 社会から受けた恩を返していこう
  • 立ち止まっている間に、ベテラン達はさらに先に行ってしまう

伝えたいこと2

  • インプットとアウトプットのバランスをとる
  • アウトプットがあるから新鮮な情報に触れられる
  • 自分の情報の鮮度を確認できる
  • 「十分な目玉があれば、全てのバグは深刻ではない」

知見

  • ありとあらゆる知見は、価値がある
  • 自分にとって取るに足らない内容でも、他の人にとってはとても価値がある

方法

  • 片っ端からLT枠に申し込む
  • 申し込んでから内容を考える
  • 喋る練習をする
  • 懇親会で人と話す
  • ブログ頑張る

まとめ

  • 迷う必要はない!