はじめに
2019/2/1(金)に開催された、WEBエンジニア勉強会 #11に初参加してきました。
web-engineer-meetup.connpass.com
会場
会場は渋谷にある株式会社ミクシィさんの本社です。
勉強会の進め方と参加者間の交流について
当日の参加者は60〜70名ほど。
最大4人まで座れるテーブル席でピザとお酒などのドリンクをいただきながら、登壇される方のお話を聞くスタイルです。
勉強会後の懇親会は希望者のみ別途移動して渋谷駅前のお店で開催されたようです。
より多くの方と交流したい方は懇親会に参加されると良いのではと思います。
私は勉強会が始まるまでの時間と休憩時間に同じテーブルの方と色々とお話しさせていただきました。
勉強会メモ
写真共有アプリ「みてね」に見る簡潔な良UI/UX
@ngmt83さん
「みてね」を推す理由/Reason for recommending "Mitene" - Speaker Deck
- 写真共有アプリは数多あるが、多機能な写真共有アプリは祖父母世代にとっては操作が難解
- サービスとして「なんでも提供できる」は「何も提供していない」のと（ある意味）同じ
- 自由度を定義・制限することで、使いやすさを向上できる
- このアプリの場合、ITリテラシーの高い子育て世代がアップロードなどの複雑な操作を担い、祖父母世代は写真を見るだけ、でも良い
- 【感想】ユーザーを点では無く線で捉えることでサービスとして完結しているかどうかを評価できる、という視点を得ることができました
- ユーザーの最大の関心はアプリの機能やサービスの内容ではなく、こども（孫）がかわいらしく写った写真
- 「みてね」はそこに集中してもらえるような作り
WEBエンジニアが知っておきたい決済の仕組み
@ykaganoさん
WEBエンジニアが知っておきたい決済の仕組み - Speaker Deck
- ECサイトで、買い物カートに商品を入れてくれるユーザーは全体の10%ぐらいで、決済してくれるユーザーは当然さらに少ない
- より多くの決済方法を用意することで売り上げを伸ばせる
- ただし、サービスや客層に応じた決済方法を用意する必要がある
- クレジットカードを持たない若年層向けには携帯電話のキャリア決済など
- クレジットカード決済における消費者、加盟店、アクワイアラ、イシュアの関係性やオーソリに関するお話
- 【感想】クレジットカードに紐付けたQRコード決済も、同じ仕組みの上に成り立っているのだろうなと勝手に理解しました
- 【疑問】与信審査が無く高校生でも持てるデビットカードのオーソリは、銀行口座残高をリアルタイムに確認に行くのかな？
心理的安全性の「持ちつ持たれつ」
ユアマイスター株式会社CTO 星 長亮さん(@inase17000)
心理的安全性の 「持ちつ持たれつ」 - Speaker Deck
- 心理的安全性を高めるためには(抜粋)
- 理解を示す
- 同意できる点、できない点を素直に伝える
- 共に意思決定する姿勢を示す
- 意思決定の根拠を示す
- 【感想】傾聴は大事ですが、迎合することが心理的安全性を高めるわけではなくて、同意できない点や根拠を素直に伝えることもまた必要なのですね。そのあたりを曖昧にしてしまうことは、相手に対する無関心であり心理的安全性を低めることに繋がる、と私は理解しました。
- 理解を示す
gRPC入門
みずりゅさん(@MzRyuka)
- gRPCはGoogleが開発したRemote Procedure Callのプロトコル
- 様々なプログラミング言語でサポートされており、異なる言語間で通信できる
- REST APIのようにcurlで気軽に叩くことはできないらしい
- 【感想】調べたところ、Pythonではgrpcio-toolsというライブラリで使用することもできる様子
なぜ僕はプログラミングが苦手なのか
VTRyoさん(@3s_hv)
なぜ僕はプログラミングが苦手なのか / Why am I not good at programming - Speaker Deck
- プログラミング初心者はエラー文を読めていないことがままある
- 本当に全く読んで無いケース
- 自分が追加・修正したコードをエラー原因もわからないまま、また別の追加・修正をしてエラーから抜け出せない
- エラー文を読んではいるが読み解けていないケース
- 経験不足のため、各エラーに適切に対処できない
- 本当に全く読んで無いケース
- 自分にセンスが無いと感じ自信を喪失した際にマネージャーに相談したところ、周囲の協力も得ながら修正できたのであればそれはちゃんと貢献できているのではないか、とのコメント
- 難しく考えすぎて、自らハードルを上げてしまっていたことに気づく
- 良い習慣を積み重ねることで、センスは身に付く
- 【感想】とても勇気付けられる内容であると同時に、相談先のマネージャーさんのコメントがとてもセーフティ！(心理的安全性が高い、の意)
Word CloudでTweetを可視化してみた
なおとさん(@naoto_7713)
- Twitter APIと形態素解析のライブラリとWord Cloudを組み合わせることで、特定のtweet群を1枚のイメージに可視化
- 【感想】お話を聞く限り、APIの申請や形態素解析を使うためのコードはコピペで済ませたそう。まずは最短距離で「動くモノ」を実現してしまう、というのはモチベーションを維持しながらのものづくりを行う点でも大事な観点だと感じた。
- 以下はWEBエンジニア勉強会#11に関するtweetを登壇中に可視化したもの
MDX-DECKとCode Surferでスライドを作ろう
たくもんさん(@inouetakumon)
- スライド作成ツールはパワポ、MacであればKeynoteなどがあるが、MDX-DECKはマークダウン記法で書ける
- Reactコンポーネントでリッチな見た目にもできる
- Code Surferはmdx-deckのプラグインでソースコードをリッチに表示してくれる
- 【感想】スライドといえば会社ではパワポ、個人ではKeynoteでしか作ったことが無いので、MDX-DECK含む様々なスライド作成ツールに触れてみたい
フロントエンドコーディングにおけるPageSpeed Insights対策
Kouさん(@kkoudev)
フロントエンドコーディングにおけるPageSpeed Insights対策 / frontend pagespeed insights- - Speaker Deck
- PageSpeed Insightsは、サイトアクセスのパフォーマンスを測定し改善点を提案してくれるGoogleのサービス
- 【感想】私は、自分の作ったサービスのパフォーマンスを調べるのに https://testmysite.withgoogle.com/を使っていましたが、PageSpeed Insightsの方がわかりやすいですね。どちらもGoogleのサービスですが、なぜ似たような目的のサービスが2つ存在するのだろう？
- よく指摘されやすいパフォーマンス上の問題点はレンダリングブロック、画像読み込み
- レンダリングブロックについて
- headタグ内に指定したJavaScriptやCSSの読み込み中は、HTMLの読み込みを実行できない
- JSやCSSを非同期で読み込むことで改善可能
- JSやCSSファイルをそれぞれ1つにまとめることでも読み込み時間を短縮できる
- ブラウザがひとつのドメインに対して一度に並列接続できる数は決まっているため
- なお、CSSの非同期読み込みすると画面崩れが一瞬発生してしまう
- FOUC(Flash Of Unsyyled Content)とも呼ばれる
- ファーストビューの描画に必要なstyleをHTMLにインライン記述することで対策(Critical Path CSSの指定)
- criticalというNPMモジュールでインライン要素を自動生成
- 画像読み込みについて
- 画像解像度ごとに読み込む画像を指定できるsrcset属性を利用し、画像サイズを最適化
- CSSではimage-set関数を使う
- 画像の遅延読み込みの利用
- 画像解像度ごとに読み込む画像を指定できるsrcset属性を利用し、画像サイズを最適化
- その他サーバーサイドの配信時の改善点としてcss, js, 画像のgzip圧縮
- 【感想】Webサイトのパフォーマンス向上に関して非常に参考になる内容でした。Webサイト全般に利用できる汎用的なテクニックだと思うので、ひとつずつ実際に試して覚えていきたい。
最後に
上記の通りテーマは多岐に渡り、非常に多くの気づきを得られる勉強会でした。
主催されたOSCA(@engineer_osca)さん、設営に携わられた方々、会場を提供されたミクシィさん、登壇者の方々、ありがとうございました！
