Date : 2018/06/03 (Sun)

初夏のJavaScript祭 に参加しました.
開催日は 5/19 ってもう結構経ってしまった…(このブログ自体何年ぶりだよ…)

このブログは middleman を使っているのですが、それを v4 にしたり、
最近 chanmery kiss という同人音楽サークルで
イラストや web担当させてもらっているのですが、
そこでアルバム用のサイトで練習兼ねて sketch でデザインやってみたり、
react にして css in js 楽しんで見たり…
google app engine 使ってみたりと色々遊んでました、、
これがそのサイト、シンプル(スクロールするにつれて動物がひょこひょこ顔出すとかやりたかった)
Traumerei Land

あと pixiv fanbox 始めました、支援してくれたら嬉しいな…(チラ)
pixiv fanbox

前置きがだいぶあれですが、当日のメモと感想になります！

Firebase を利用したフロントエンド開発

Firebase とは

• google のクラウドサービス (Googleに買収され、Google Cloud Platform（GCP）の一員となった)
• BaaS（Backend as a Service）の一種
• フロントエンドエンジニアでも、サーバーサイドを実装できる
• Realtime Database
  • js から DB に直接データを入れられる
• Firebase Authentication
  • 匿名ログインが可能
  • 永久アカウントにする場合は、facebook や google アカウントでログイン
  • twitter ログイン機能
  • CORS 問題
    • twitter API は CORS に対応しておらず、ブラウザから叩けない
    • Firebase Functions
    • 簡易な API を実装できる
    • ここで twitter API を叩くように
• aws より抜群に安かった
• 人件費が一人
• safari のプライバシーモードだと、ローカルストレージが使えない
  • トークンはローカルストレージに保存される
  • 何度でも投票できるバグが
  • 別ブラウザやローカルストレージ削除でも消えるが、明らかな不正は管理ツールとかではじくように

感想

Realtime Database 面白そうだと思った. ローカルストレージを使う時はプライバシーモード気にしないとダメなのね.. 昔作った canvas アプリ描き途中のローカルストレージに入れてたけど死んでそうだな

PWA でなにができるようになったのか

• Naitve アプリに近い web アプリの概念 / UX の提供
• 一般の人は、Native アプリを殆んどインストールしない調査結果がある
• w3c や whatng で標準化されていない
• アプリをインストールしない問題
  • ブラウザだけでも戻って来るかわからない
• lighthouse
  • パフォーマンス等測定ができるツール
  • Google Chrome 60 で統合されたよう
• ServiceWorker
  • react-pwa とかで使用されてる
  • google の workbox でも使える
• HNPWA
  • PWA で作った Hacker Newリーダーの実装例を集積するサイト
  • 仕様が色々決まってるよう
    

感想

lighthouse 使ってみるっきゃない

暗号通貨・ブロックチェーンをたしなう js フレンズ

bot は勉強にいい題材

• tradebot
  • ccxt ライブラリ
• 暗号技術
  • おすすめ書籍
  • 秘密の国のアリス
  • 暗号技術を完全に理解した気になれる本
• 独自実装は危ないライブラリ使う * Node.js Crypto API
  • BitcoinCore で使われているライブラリ
  • openssl
• ブロックチェーンのデータ構造は git に似ている / docker も
  • データ本体（ブロブ）
  • ブロブのハッシュ値（ポインタ）

感想

秘密の国のアリスは読んでみたい… ブロックチェーンはあまり学んでないが、 ブロック単位にハッシュ値を持って繋がっている所をみると似ている気はする

javascript ではじめる関数型プログラミング

• 複数の式の適用によって組み合わせるプログラミング
• 副作用のない感想をメインに扱うプログラミング

関数合成

• 高階関数
  • 引数に関数を渡す
  • 戻り値として関数を返す
  • javascript はできる
• 小さく単純な関数を作る
• 小さいものを組み合わせて大きなものを作る
• unit test を書くのが容易になる

純粋

• 外部で変更される可能性のあるデータに依存しない
• 外部にあるものに影響を与えない
• 依存関係を減らす
• ABCの順番で呼ばないと結果が変わるのは依存している
• 副作用をなくす
  • 全部引数として渡す
• 参照透過性
  • 関数をその戻り値自体に差し替えてもプログラムが壊れない
• もなど

デメリット

• 関数の呼び出し回数が増える、富豪プログラミングになる

勉強法

• Ramda.js をつかうといい
• 関数型プログラミングの基礎
• parser を書いてみる
• 写経

感想

とても分かりやすかった 純粋さは本当意識して書けるようにしていきたい. 関数型プログラミングの基礎、買ったので読む

Dexie で始める IndexDB

• IndexDB とは
  • Webブラウザ内で動くオブジェクト型ストレージ
  • オフライン時にデータを溜め込んでおく
• LocalStorage とのちがい
  • 容量無制限
  • 自動採番、複合キーが使える
  • インデックスつけれる
  • 構成変更はつらい
• Dexie.js
  • IndexDB のラッパーライブラリ
  • O/Rマッパー越しに DB を触る感覚
• ライブラリでだいたい回避できるが、マイレグレーションの整合性合わせる等苦労はある

感想

IndexDB… 使う時が来たら LocalStorageではなくこっちにしてみようかな…

改めて理解する JavaScript Array

• map メソッドを使うと for とか無しに配列に対して操作ができる
• js の配列は Array インスタンス
• ES 2018 毎年進化する？
• ES5 で多くの配列メソッドが追加
  • 全てのブラウザが対応 / 2018年において
• ES2015
  • find や findIndex 追加
• 標準が大半カバーしてきている
  • ライブラリが持つ配列処理大半
  • 安全な書き方として、テンプレートリテラルを使うように
• 依存先は少なければ少ない方がいい
• 標準はネイティブコードとして動作
• どうしてもライブラリつかいたい
  • npm -i –save lodash
  • 全部入って来る
  • npm -i –save lodash.isequal
  • それだけ
• コードは意図を伝える
  • 書き手の意図を読み手に伝える
• どんどんメソッドが増えていく
  • 適切な書き方は都度変わっていく
  • 読み手が理解しやすい書き方を意識する
• 途中で抜けたいときは for
  • break が for しか使えない
• […Array(100)].for -> es2015 で追加
  • i++ とか書かなくていい
• ECMAScript は毎年変わっていくと思え
  • 使用と動向をチェック
  • まずは MDN を読む
  • ブラウザの実装状況をチェックする
  • ライブラリを使わずに標準で実現できるか考える

感想

標準で書けるものをちゃんと追っていかないと 依存コードが増えていくばかり.. 最近は生js ばかり書いてはいるが、 古い端末意識してなかなか新しいの使えなかったりと辛いものはある.. babel 入れたい

実践ES Modules

• モジュールシステム
• import, export できるように
• ES2015 で標準化
  • 色々あって
  • 2018年 webブラウザでトランスパイルなしで使えるように
• script タグに type module 属性が
• Dynamic Import
  • 必要な条件下で読み込める
• Web Components
  • HTML Imports が ES Module に
• web標準だけで本格的なコンポーネントが作れる
• PRPLパターン
• モジュールの lazy load
  • 今はまだライブラリとか使わないとしんどい
• HTTP2 は細かいファイルの読み込みに最適化
  • モジュール化してわけるため、webブラウザとhttpサーバー両方で最適化ができる

感想

HTTP2 での接続の多重化と相性が良いとのことで 積極的に使ってみたいなぁと 管理しやすいだろうし..

bootstrap build tool

• sorce file版
  • scss や js の追加・改修ができる
• eslint
  • json に各種設定があってエラーレベルを編集できる

感想

管理ツールで bootstrap 使ってるけど古すぎてつらい.. コンパイル後のファイルしか置かれてないし…

ionic

• PWA の恩恵
  • 必要なロードを必要な時に
    • preload
      • 先読みし遷移が 0秒に
    • lazy preload
• google は SPA を読んでくれる
  • SEO に悪くない

感想

webアプリケーション動作自体もどんどんリッチになっていく…

まとめ

PWA 意識した webアプリケーションを何か作ってみたくなるような
内容が盛りだくさんでした…
関数型プログラミングや EcmaScript も意識して可読性の高いコードを残していきたい