初夏のJavaScript祭に行ってきました。

今更ながら5月中旬に初夏のJavaScript祭に参加してきたのでメモがてらレポートのようなものを残したいと思います。

javascript-fes.doorkeeper.jp

タイムテーブル

※上記の公式サイトから引用してきました。

時間 セッション
14:50 Firebaseを利用したフロントエンド開発
15:10 PWAで何ができるようになるのか
15:30 JSerと暗号通貨(仮)
15:50 JavaScript ( 時々 TypeScript ) でゆるやかにはじめる関数型プログラミング ( 仮 )
16:10 Dexie.jsではじめるIndexedDB
16:30 改めて理解するJavaScript Array
16:50 実践ES Modules
17:10 Bootstrap4 Source code版の利用方法
17:30 女性専用SNS tipsysから考えるプライベートプロダクトとJavaScriptの可能性
17:50 IoTのいろんなパートをJavaScriptでやってみた話
18:15 懇親会開催 LT大会ビアバッシュ

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

speakerdeck.com

FirebaseとはGoogleが運営しているサービスの一つでバックエンドで行う機能を提供、 代行してくれるクラウドサービスでアプリを素早く開発して公開できるため、コスト削減にも良いと言われています。

今回はFirebaseを用いて開発した案件を例に挙げて、Firebaseの利点などを紹介してくれました。

Firebaseの特徴

  1. Firebase Realtime Database」という機能があり、データをリアルタイムに同期してくれる
  2. Swift、Objective-CJavaJavaScriptC++、Unityなど複数の言語での開発が可能でReact Nativeにも対応している
  3. サーバの管理や保守が不要になるので人件費を削ることができて、コスト削減につながる
  4. Googleが提供しているサービスなのでGAが組み込まれていて、アプリの利用状況などを確認することができる
  5. AWSを利用するより安く済む(これは案件の内容にも寄るらしい)

Firebaseを軽い気持ちで触ってみたら使い勝手が予想を遥かに超えてきた話 - LocoPartners 開発ブログ

この記事が導入手順なども書かれていて良さそうです。

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

speakerdeck.com

個人的ここ1~2年くらいでよく聞くようになったPWA。 PWAとは何か、それで何が出来るようになったのかを紹介してくれました。

developers.google.com

PWAもまたGoogleが絡んでいるものでネイティブアプリに近い、ウェブアプリの概念のことを指します。

PWAの特徴

  1. 信頼性がある => どんなネットワーク条件でもサービスが提供できる
  2. 速い
  3. エンゲージング => デバイスのネイティブアプリのように認識できる
  4. オフライン動作ができる => インストール要否が不要なのでストアからインストールしなくて済む

PWAの背景

  1. 新しいネイティブアプリをスマホにインストールする人が減ってきた
  2. 新興国ではネットワークが整備されていない
  3. ネイティブアプリで実行中にネットワークが切断されてしまうと不便
  4. ネイティブアプリはSDカード経由でしかインストールできない

上記の特徴や背景でも述べられているようにどんなネットワーク条件でも見られるのは強みだし、ここ最近ネイティブアプリをインストールする人が減ってきたという時代の流れにもあっていると思いました。

JSerと暗号通貨(仮)

speakerdeck.com Botを利用して暗号通貨技術を実装するお話でした。

ビザンチン症候群なるものが怖い。

JavaScript ( 時々 TypeScript ) でゆるやかにはじめる関数型プログラミング ( 仮 )

speakerdeck.com

関数型プログラミングリアクティブ・プログラミングの流行で浸透してきたとのこと。 普段JavaScriptを書く人のプログラミングは以下の手続き型プログラミングと呼ばれるものだそうです。

手続き型プログラミング

  1. 変数を破壊的に書き換える
  2. 定義した関数はプログラム実行中の任意で呼び出せる

関数合成と呼ばれる方法で開発を進めると汎用性が高く、保守性の高いプログラミングコードを書くことができるとの事です。

関数を戻り値自体に差し替えてもプログラム全体が壊れないコードを書くことが大切。

Ramda.js

Ramda Documentation

www.webprofessional.jp

メリット
  1. 保守性、拡張性が高い
  2. 依存関係で頭を悩ますことがない
  3. 予期せぬバグを防ぐことができる
デメリット
  1. 関数の呼び出し回数が増える
  2. 実行コストが高くなる
  3. 高パフォーマンスのものには向かない

関数型プログラミングでオススメの書籍

JavaScriptで学ぶ関数型プログラミング

すごいHaskellたのしく学ぼう!

普段なるべく保守性の高いものを書くつもりでいてもなかなかうまく実装できないので、関数の戻り値を差し替えても壊れないコードを書く、というところから試してみようと思いました。

他にもRamda.jsなどの紹介があり、バグを事前に防ぐことができるなどメリットが多いとの事で、関数型プログラミングの浸透を実感しました。

Dexie.jsではじめるIndexedDB

DBを触ることが基本無いので難しかった…(笑)

IndexedDBとはWebブラウザ内で動くオブジェクト型ストレージのことで、データを保存する際にキーを用いるので検索などができる。

IE11とEdgeはサポートしていないがそれ以外のブラウザでは動く。LocalStrageと比較してデータ取得までの手順が多く、DBのIndexの構成変更に弱いというのがデメリット。

Dexie.jsとはIndexedDBのラッパーライブラリのこと。ドキュメントが多く、TypeScriptをサポートしている。

改めて理解するJavaScript Array

https://speakerdeck.com/armorik83/understanding-javascript-arrayspeakerdeck.com スライドを削除されてしまったようで遷移できません。

毎年改定されているECMAScriptを用いれば快適に実装ができる、また適切なメソッドを正しく使ってやつ必要があるという内容でした。 この場合の実装にはどういったメソッドを使ってやれば解決できるというのをコードを見ながら説明してもらえたので分かりやすかったです。

普段、課題の解決を優先して実装をしがちなのでこの場合にはこのメソッドを使う、などを意識しながら実装したいと思いました。

実践ES Modules

speakerdeck.com

ES ModulesとはJavaScript標準のモジュールシステムのことで、特定のツールに依存せず、モジュールの依存関係を静的に解決することができるものです。 WebpackでES Modulesをサポートするようになったことがきっかけで広まっていきました。

Bootstrap4 Source code版の利用方法

speakerdeck.com

Bootstrapは私は本当に1度くらいしか使ったことがないし、普段sassを書いて装飾する立場なのでCSSフレームワークは使用しないのだけどビルドツールが入ったBootStrap4はかなり良いという話でした。 ビルドツールだけでなくBootstrap4になってから、ますます使いやすくなったそうなので機会があったら利用してみたいと思います。

女性専用SNS tipsysから考えるプライベートプロダクトとJavaScriptの可能性

tipsys|女友達を探す女性専用ソーシャルサービス

上記のアプリをCordovaで実装したというお話でした。 合コンのメンバーが足りない時や、お酒を飲む女友達がいないからこのアプリで友達を作る、ということを目的にしてるそうです。

IoTのいろんなパートをJavaScriptでやってみた話

スピーカーの会社では営業が案件を取れたら全員で拍手をするという習慣があるようで、案件が取れた際に音楽を鳴らすというのをIoTを利用して作成したそうです。 スピーカーは3Dプリンタで作ったとのこと。