Web Developer's Struggle Memories

日々の業務から思ったこと、学んだことを書き連ねていきます。

東京Node学園祭2016のメモ

例によって例のごとく、今更投稿する。しかもほぼ編集なしのメモ。
今回(は?も?)海外の方が多数来られていて、物凄く刺激のある1日だったし、Node.jsって楽しい!と再確認できた勉強会だった。

Famicom programming with JavaScript

  • 当時のスペックではforループするには4回書かなければならない
  • ファミコンはバックグラウンドがスライドできるのは強みだった
  • 色は64色と言いつつ、使えるのは56色
  • doing new things
    • 新しいことをすると脳がハッピー
    • 自分で作るほうが勉強になって良いかなー
    • フロントエンドのフレームワークを作ることは実はたくさん意味がある
  • open source is awesome
  • まとめ
    • (ファミコンから見る)制約は人を工夫させやる気にさせ、良い物を生む」

GraphQL for the RESTful crowd

  • PokemonQL
  • Round1
    • GraphQLはとてもフレキシブルで使いやすい
    • ネストしたデータオブジェクト
      • キーを指定すれば全てのデータをとってこれる
    • GraphQLは型を定義できる
    • さらに型の中で別の型を使える
    • スキーマにresolverという関数を定義することでどういう値を返すか決められる
    • GraphQLは自動でドキュメントを生成してくれる
  • Round2
    • sales forceのAPIはversionが30以上ある…
    • しかしGraphQLにはエンドポイントが1つあればいい。バージョン管理は不要。
  • node modules
    • graphsq-js
    • express-graphql
    • relay

keynote

  • Webには幾つかに問題
    • パスワード
    • ドキュメントとして作られていたが、アプリとして動くように作られていない
    • 速度が遅い
    • Webから新しいシステムにどうやって動くか
  • Webの強み
    • オープンなところ
  • webじゃなくて頑張った会社
  • The Seif Project
    • webをupdateしたい
  • Seif Protocol
    • Secure JSON Over TCP
    • 乱数がコアとなる
    • ECC521を使っているのでユニークなキーが発行できる
    • パスワードがいらない
  • Full duplex
    • 送信、受信で別に道が用意されているから、送っている間は受信ができない、なんてことはない
  • Seif Apps
    • HTMLなし, JS, Nodejs, Qtで作る
    • ビュー側をQtで、ロジック側をNodejsで
  • Seif Helper App
    • the brower made seif
    • ゴールはすべての人に安全でセキュリティな通信をしたい
    • transition plan
    • first penguin
  • difficulty of software security
  • there is nothing new here

Why to Standardize your READMEs

  • readmeは最高、大事
    • ドキュメントというより最初のコンタクト
    • むしろドキュメントより大事かも
  • リポジトリにはいろんな質問がある
    • これは何?
    • インストールはどうやる?
    • どうやって使うの?
    • どうやって貢献したら良い?
    • ライセンスは?
    • …etc
  • 今までのREADMEはよろしくない!
    • 案内が必要
    • 長過ぎる
    • …などなど
  • だから簡単ではない
    • メンテナンスが難しい
    • パースも難しい
  • standardJS
    • コーディング規約について話すのはやめよう
    • それに時間を費やすより開発に時間を使おう
    • そのためにこれを使ってくれ!
  • 中身は何?
    • specification
    • generator
    • linter
    • badge
    • example template
  • 今後は
    • 動くlinter
    • 自動でコードブロックが走る(REPLで)
    • NLPによるサポート
    • もっとディスカッションがほしい

React + Reduxを使った大規模商用サービスの開発

  • SPA + SSRの作り方とハマったとこ
  • Reduxは別にReactじゃなくても使える
    • 1方向にデータがフローする
  • 個人的なメモ
    • pushのタイミング・使い方に気をつける
    • window.location.replaceを使う
    • iPhoneスワイプ問題(一瞬前の画面がちらつくことがある)
      • キャッシュを使ってさっさとunmountする
      • ただChromeは無理っぽい(ただiPhoneChromeは使う人少なそう)
      • 特にReduxはglobal stateで情報が残っているので気をつける
    • webpackを使うとjsファイルが重くなりがち
    • SSR
      • ターンアラウンドタイム的にはやらないほうが良い
      • やるならPartial Renderingも検討

Introducing now and next js

PostCSS: Build your own CSS processor

  • PostCSSとは
    • nodejs製のcssパーサー
    • cssを実行するフレームワーク
    • Bootstrap v5はPostCSS製になるかも(v4はSass)
    • 企業でも利用されている
  • PostCSS製のツール紹介
    • Autoprefixer(速い)
    • Stylecow
    • nib
    • Compass(遅い)
    • Stylelint(他にもcsslintなどもある)
      • 独自ルールのlintも作れる
      • stylelint-config-*で設定のカスタマイズ
      • フォーマットに関するものが大半
    • Stylefmt
      • フォーマッター
      • Stylelintの設定を元にフォーマットを変換してくれる
    • CSS Modules
      • グローバルスコープ問題を解決
        • いろんなCSS in JS系モジュール戦争勃発
        • (やっぱりCSSCSSファイルに書きたい)
      • webpackを使うことが前提
      • デフォルトでローカルスコープ
  • プリプロセッサとしてのPostCSS
    • cssnext
      • 未来のcssを先取りではない
      • ポリフィルではない
      • シンタックスのかき心地は分かる
    • precss
      • node-sassを使おうか
  • PostCSSのAPI
    • (全略)
  • 最後に

解決したい問題はいつも同じで道具に振り回されず良く理解して選択しよう

JavaScriptによる並列処理:共有メモリとロック

  • ゲーム「ミリオンアーサー」を全てjsで作った
  • 処理時間を専有されては困るよ問題
    • メインスレッドはみんなのもの
  • 待ち時間がもったいないよ問題
    • 他にもできるでしょ
  • JavaScriptはメインスレッドの時間を譲り合って共有する
    • Cはいきなりwhile(true)をよく書く(定期的にチェックしてくれる)
    • JSはsetIntervalsetImmediateを書く
  • マルチスレッドプログラムにするには
    • Web Workerを使う
    • 問題が…
      • 実は内部ではオブジェクトをコピーしている
      • スレッドが別れるということはデータの不整合が起きる
  • atomics
  • 食事する哲学者問題
  • まとめ
    • メインスレッドは1本
    • workerを使えば2人(複数)の世界になる
    • 競合という問題が発生する
    • デバッグが大変(再現性
    • ただし得られる大きな計算能力

Sponsors Talk