初夏の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プリンタで作ったとのこと。

お花見に行ってきました

今年は桜の開花が早くて既に散ってるので今更な内容になりますが…。

今住んでいるところに越して来る前は、東京の東側に住んでいたので散歩と花見を兼ねて上野恩賜公園や皇居周りをよく歩いていたのだけど、引っ越してからはなかなか気軽に行ける距離ではないので今年は目黒川の桜だけ見てきました。 目黒川も毎年見に行ってるけれど、今年はちょっと小洒落たレストランも予約してみました。

目黒川沿いの桜桜スパークリングとビール
目黒川
スーパームーンと桜川沿い
目黒川その2
川沿いの桜川に花びらが沢山流れている様子
目黒川その3

見に行った時期も若干例年より遅かったので、写真にも写ってますがところどころ葉桜になってます。

で、今年初めて予約して行ったお店がこちらのHUIT(ユイット)というお店。フランス語で8ですね。

https://tabelog.com/tokyo/A1317/A131701/13018861/

EAST MEETS WEST

お店が川沿いにあって、大きな窓からは桜が見えるようになってます。 ただ、お店の前にある桜並木は八重桜らしいので、行った時にはまだ殆ど咲いてなくて、多分まさに今頃が綺麗に咲いて見頃なのではないかなと。 予約は公式サイトに手順が載っていて、電話では予約受け付けてくれませんでした。 桜の時期は相当混むと思うので仕方無さそう。

huitお店の中
HUIT
メニューサラダ
コースメニューとお料理
鳥パスタ
お料理

頼んだコースは4000円行かないくらいで量も個人的にはまあまああったし美味しくて満足でした。 彼はもう少し量が欲しそうでしたがw

そんな感じで今年は少しリッチに花見を楽しみました。

セルフジェルネイルをはじめてみた

つい先週、ふと思い立ってセルフジェルネイルをする為のライトとか諸々を買い漁りました。 今まで表参道にある、ネイルサロンに通っていたのだけれど仕事が忙しかったり、金銭的にずっと通ってたら高いなと思ったこともあって自分でやってみようと思いました。

ネイルサロンに行けていない間は気分転換でマニキュアを塗ったりしてたんだけれど、不器用なので上手く塗れないとか乾くまで待てないとかあって心配だったのだけど意外と上手く出来ました。

購入したもの

  • UV/LED対応ライト
  • ベースジェル
  • トップジェル
  • ネイルパーツ
  • カラージェル

Amazon CAPTCHA

Amazon CAPTCHA

Amazon CAPTCHA

Amazon CAPTCHA

https://www.amazon.co.jp/gp/product/B07BJ5YVVD/ref=oh_aui_detailpage_o02_s00?ie=UTF8&psc=1

Amazon CAPTCHA

https://www.amazon.co.jp/gp/product/B06XRVSLN3/ref=oh_aui_detailpage_o04_s00?ie=UTF8&psc=1

https://www.amazon.co.jp/gp/product/B0179O3T1Q/ref=oh_aui_detailpage_o05_s00?ie=UTF8&psc=1

ライト、ベース、トップ、カラーネイルパーツ
購入したライトと会社の人からもらったネイルパーツ

まだ届いてないのもあるけど、大体1万円くらい使いました。 後はいくつか会社の人からネイルパーツを貰いました。

試しにワンカラーで塗ってみたけれど、マニキュアと違って早く乾くし失敗しにくくて良いです。 セルフジェルネイル初心者なので普通にサロンでやって貰うよりは当たり前ながら細かいところ下手だし、きっとモチも悪いけどセルフでやるだけでも気分上がるしストレス発散になって良いです。

初セルフジェル
初セルフジェル

練習してアートとかも出来るようにしたいですw

上手く塗れたやつはこれから気まぐれにブログに載せようと思います。

長ネギのアヒージョが旨すぎで万能

表題の通り、長ネギのアヒージョが美味し過ぎました。

余った油は葱油になって色々活用出来るし、かなりの頻度で作っても飽きがこなさそう!て感じの料理だったのでメモがてら記事に残します。

長ネギのアヒージョ

材料

  • 長ネギ 1本
  • 和風顆粒だし適量(私は小さじ1とちょっと)
  • 冷凍のエビ
  • オリーブオイル
  • にんにく 3粒くらい
  • スキレット

作り方

  1. スキレットの準備をする*1
  2. 長ネギを切っておく、大体人差し指の第二関節くらいの長さ
  3. 冷凍エビを解凍しておく
  4. にんにくをみじん切りにしておく、いくつか輪切りにしておくと見栄えが良いかも知れない
  5. スキレットの表面が熱せられたら、ニンニンを炒めてキツネ色になったらカットした長ネギを敷き詰めていく
  6. 解凍した冷凍エビの水気をとって、長ネギの隙間に詰めて、油に浸るようにしておく
  7. 長ネギと冷凍エビを詰めたら、オリーブオイルを注ぐ*2
  8. 長ネギに少し熱が通ったら和風顆粒だしを適量入れる
  9. 長ネギとエビに火が通ったら完成

長ネギとエビのアヒージョ
長ネギとエビのアヒージョ

お出汁の味が効いて、とっっっても美味しいです。 余った油は葱油になるので、取っておいて炒飯やラーメン、パスタに使えます。 大体、冷蔵庫で1ヶ月程持つそうです。

うちでは、葱油でペペロンチーノを作りました。 こちらの作り方もメモがてら載せておきます。

葱油で作ったペペロンチーノ

材料

  • ベーコン 適量 (私は5枚)
  • ほうれん草もしくはキャベツ 適量
  • にんにく 適量(私は2カケ)
  • パスタ
  • 葱油
  • 鷹の爪 適量

作り方

  1. ベーコンを短冊形に切っておく
  2. ほうれん草を軽く湯通ししておく*3
  3. にんにくをみじん切りにしておく*4
  4. 鍋いっぱいにお湯を沸かして、沸騰したら人数分のパスタを茹でる*5
  5. フライパンに葱油をひと回しひいて、にんにくの色がキツネ色になるまで炒める
  6. にんにくの色が変わったらベーコンを炒める
  7. パスタが茹で上がったら、フライパンに入れて具材と一緒に炒める
  8. 乳化させるようにパスタの茹で汁をお玉1杯分、フライパンに入れる
  9. 具材とパスタがいい感じに絡まったら、ほうれん草を投入して焦げ付かないように具材とパスタと絡める
  10. お皿に盛りつけたら鷹の爪を適量乗せる

葱油で作ったペペロンチーノ
葱油で作ったペペロンチーノ

葱油の味とパスタの塩味がとてもいい感じで美味しく作れました。 コスパ良いし美味しいしなので、また作る予定ですw

*1:熱してから全体に油を塗りつけてならしておく

*2:長エギが7割浸るくらい

*3:後でフライパンで炒めるしなしなにならない程度にする

*4:多少輪切りのやつもあると見栄えが良いかも知れない

*5:塩が個人的には2ツマミ程度入れておくのが丁度良い

今更ながらAmazon Primeがアツい

最近、Amazon Echoを買ったこともあって、ますますAmazonに頼りきりの生活が加速したんだけど便利過ぎてもう離れられない。

以前住んでたところは徒歩圏内に映画館とか商業施設があったり、銀座や上野の方まで徒歩圏な場所だったのでそこそこ出歩いてたんだけど10月に引っ越して来てから徒歩圏内に何もないので買い物に出るのも億劫ということもあって利用することが増えましたw

利用中のサービスたち(アプリ含む)

ここら辺を利用してるんですが、特に音楽とビデオはかなり利用してますw 先に書いた通り、健康的じゃないけど出歩くことが減ったので、その分家で映画見てたりしてます。 長風呂したい時に丁度良いです。 音楽も仕事の時とかに捗るので重宝。邦楽も結構あるけど、当たり前のことながら洋楽の方が充実してます。

後はAlexaがうちに来たので、お遊びでスキル開発して見たりするのにAWSを契約しました。 12ヶ月無料で、無料期間過ぎても一定の利用料超えなければお金がかからないみたいなので有難いです。

Alexaのスキル開発についても、その内自分の備忘録としてブログにまとめたい。 とりあえず、今は作ってみたスキルをwebのテストツールで動かしてうまく行くところまでは出来たけど、実機のAmazon Echoでスキルを有効にしてテストしてみたところ、ひたすらスキルの紹介しか喋ってくれないので多分JSONの書き方がよろしく無いのかもしれない。

そんな感じでひたすら生活の中にAmazonが溶け込んでて、回し者レベルで無いと辛い感じになってます。

肉が好き

暫く更新出来てなかったけど、遊びでつけてみたGAとかはてブ自体のアクセス解析見て見たところ、偶然検索に引っかかったりとかでポツポツ見てくれている方がいるようでちょっと嬉しいです。

1月の半ばに地元の友達と仕事終わりに焼肉屋に行って来ました。 肉系は本当になんでも好きなんですけど、やっぱり焼肉が一番好きですw楽で美味しいw

友達が仕事で丁度恵比寿にいたので、恵比寿でご飯食べようということになり、焼肉屋を検索して見たところヒットしたのがまる福さんというお店。 食べログで評価3.5でレビューも結構いいのが多かったので電話して見たところ、木曜日だったこともあってサクッと予約取れました。

https://tabelog.com/tokyo/A1303/A130302/13029722/

お店に入ってまず良いなと思ったのが、分厚いブランケットが借りれる所。 割と扉に近いカウンター席に座ったんだけど、かなり分厚めのブランケットのお陰で寒くなく過ごせた。

後はお肉に悩んでたら店員さん(多分お店のママさん的な方…?)がオススメのお肉を提案してくれたりした所。 私はザブトンが好きなので、あるか聞いたんだけど、丁度その時は無かったようでちょっと残念だった。

メニューを見てみたところ、基本的にお肉はA5ランクの和牛を取り扱ってるようでした。

和牛盛り合わせ七輪で焼いてる様子
まる福のお肉

写真の通り、かなり肉厚でサシも多めでした。 和牛の盛り合わせと上ハラミとタン切り落とし、ホルモン、チャンジャとかサイドメニューを少し頼んだんだけど肉厚なのでそこそこお腹いっぱいになります。 白飯と一緒に食べてたら結構キツかったと思う。

これくらいの時点で丁度7割くらい。

そぼろ丼の具と黒毛和牛タン飯
黒毛和牛タン飯

シメに友達と黒毛和牛タン飯を半分ずつ食べました。 これもかなり美味しかった。。 これだけ食べるのに割と毎日通いたいw

満腹になったし、基本A5の和牛だから結構値段いってるかと思ったら、2人で9800円くらいでした。 かなり安く済んだのでは…。

このクオリティで満足感も高い感じがたまらないので、友達とまた行く約束をしてその日は解散しました。 次は必ずザブトン食べたいw

金土日はかなり混むようなので平日がやっぱりいいみたいです。 次もまた平日狙ってゆきます。 偶然見つけたけど、満足度高いお店に行けてよかった!

Amazon Echoが来た

今務めている会社に昨年Amazon Echo Plusが来てから、時々遊んでるうちに自分も欲しくなって招待メールを申請しました! 招待メールが来るまで、早い人で一週間で長い人は2ヶ月っていう記事を見かけたんですが私も11月最終週に申請してから1/11の昨日まで招待メールが来なかったので約1ヶ月とちょっと待ちました。

会社の先輩は私より全然後に招待メールの申請をしたんですが一週間でメールが来て、翌日に届いてたので、早いもの順とかではないみたいです。 どういう基準で招待メール送ってるのかは謎です…w

私はEcho PlusとEchoで申請したんですが、Echoの方が当選しました。 どうせならEcho Plus当たって欲しかったなあと思うけど、Echo PlusデカいのでEchoで良かったのかも。(と、思うことにしました。)

当選メール
amazonから当選のメール

当選メールが来てすぐに購入手続きをして、今朝届きました。 私は保証にも加入しておきました。

開封の儀

いざ開封の儀!ということで開けてみたところ、内容物は以下の3点でした。

  • Amazon Echo
  • 充電器
  • 取扱説明書2枚
    Amazon Echo
    中にものが入れられそうな筒みたいな見た目

持ってみた感じ、そこまで重たくはないです。 何処かに充電しておかないと使えないようなので置く場所は固定でどこか決めておかないといけなさそうです。

セットアップ

  1. Alexaアプリをスマホに入れておきます
  2. アプリの指示に従いながらwifiを繋いであげて、住所設定とかする
  3. アプリからスキルを入れる

とりあえず入れてみたスキル一覧

ざっとこんな感じです。 家電連携とかしたいんだけど、それはまた別にハブ買わないといけない?ようなのでお金に余裕ができたら買います!