Rのつく財団入り口

ITエンジニア界隈で本やイベント、技術系の話などを書いています。

【イベント】WEBエンジニア勉強会#10にお邪魔してきた話

WEMに行ってみよう

 比較的初心者向けの勉強会を偵察してネット上の知り合いに順次ご挨拶していく作戦続行中。今回はしがないラジオの過去回sp.6 OSCAさんを予め拝聴して予習してから、OSCAさん主催のWEBエンジニア勉強会に行ってみました。
 WEBエンジニア勉強会は主に渋谷近辺で活動、だいたい1~3年目ぐらいの若手の方も多い、Web技術を総合的に扱った勉強会となっております。技術書典6の同人誌『完全SIer脱出マニュアル』などにも初心者向けのおすすめ勉強会として推奨されていますね。2017年から始まり、今回が記念すべき第10回。

web-engineer-meetup.connpass.com

f:id:iwasiman:20181113170336p:plain:w300

しがないラジオのOSCAさん出演会はこちらです。 shiganai.org

 なお記事中の参考情報リンクは、当日のTwitterハッシュタグ「#WEBエンジニア勉強会10」で流れていたものを一部使わせて頂いております。

金曜夜の渋谷へ

 うーん懐かしや青春を過ごした渋谷。僕の結婚式も卒業生割引のあるここのチャペルでやったなあ。わははは。
 しかし夜だとけっこう道に迷います。場所はあのミクシィ社が入っているビル。エレベーターを降りるとミクシィ入り口...のところで右に曲がって、普段は食堂らしいえらくシャレオツなカフェ的な部屋。丸テーブルにピザも用意、1000円払って受付すると酒を一缶もらっていける方式です。
 このイベントの一昨日に別イベントの転職LT#3にも行っているのですが、転職したいマンも来るので割とスーツ姿も多かったあちらに比べると、このイベントはさすがにスーツはかなり少数派。ノートPCはオールMacなのは約束として、私服の服装や髪型、20代~30代前半メインの若手エンジニア勢、Webっぽい雰囲気が漂っています。
 Podcastの感想呟き仲間的な安定のみずりゅさんを見つけたので、一緒の卓でピザとおつまみとビールを前にゆっくりすることにしました。ちなみに天気が悪かったのと金曜夜だったせいか直前のキャンセルが今回とても多く、ぼっち卓は一人でピザ占有が可能でしたw

WEBエンジニアなら知っているCUIクイズ

 さァ最初はその安定のみずりゅさん(@MzRyuKa)からコマンドのクイズ集です。前座といいつつ問題はかなりのガチです。『マンガでわかるDocker』シリーズの湊川あいさんにわざわざ事前に許可を得たという気合の入れ方。

booth.pm booth.pm

 問題は10問まででイベントでは4問までとなりました。Docker入門してない僕はLinux/Unixの過去の経験でなんとなく感で答えたら2問は合ってました。うむ、これでDocker完全に理解した(していない)。WEBエンジニアへの道は順調に遠いな...w
 ちなみにこの資料も実体はGitHub上のMarkdownのテキストで、JSのReveal.jsで動いているようです。時々このやり方見かけますね。

https://rykawamu.github.io/myslides/web-engineer-meetup-10/rykawamu.github.io

乾杯!

 既に飲んでた人もいましたが(含む自分)、OSCAさんが乾杯して正式に開始となりました。このMeetupのタイトルにおける「Webエンジニア」とはWeb技術を使っていたりWeb興味のあるエンジニア、Webに関することなら何でも発表してよいイベントですが、先月SIerでも参加していいかどうか問い合わせがあったそーです。

 よく考えたら、僕がツイートしたのは前回の #WEBエンジニア勉強会9 の終わった頃だったから先月でなく9月ですね。あの時はOSCAさんとしがないラジオのzuckeyさんとVTRyoさんから光の速さでレスが返ってきて「あっなんかいま気を遣われてる...」感が強くてこっちが恐縮でした。確かに一番最初に名前を聞いた時Onlyですが、これ純正のWebエンジニア以外参加禁止の怖いやつなの?と一瞬だけだけど思えるんですよね。

 発表では事前アンケートの発表も。参加者の職業は「サーバーサイド・プログラマーが一番多く、2位が「その他」、3位が「フロント・エンジニア」でした。フロントエンドのJSガチ勢が毎回集結するのかと思ったらそうでもないのですね。
 エンジニアとしての経験年数は3年以内が一番多かったです。いえーい、みずりゅさんとワイはウン年以上だぜ~ (・∀・)人(・∀・)

次世代の認証技術 WebAuthn / FIDO2

 本題の最初の発表がOSCAさん。(@engineer_osca)
 パスワードを使わない次世代の認証技術の標準を策定するための標準化団体「FIDO Alliance」が策定した標準技術が「FIDO2」。これに従った認証をWebブラウザで実現するため、Webの標準仕様を策定しているお馴染みW3Cが策定したのが「WebAuthn」。読み方は「ウェブ・オースン」でいいようです。
 このWebAuthnをGoogle/Mozilla/Microsoftがサポートし、ついにブラウザにも実装され始めたのでその仕組みを概観してみよう…というお話。このへんにニュースで出ています。

cn.teldevice.co.jp about.yahoo.co.jp

 Web系技術では有名な雑誌『WEB+DB PRESS』Vol.107にもFIDO2が載っているとのこと。 gihyo.jp

 このWebAuthnでは認証時に毎回サーバーに送るリクエストでは、認証の結果だけしか送らないそうです。クライアントサイドの端末の傍にあるのであろう認証情報を読み取る装置、指紋とか光彩とかはどうしてるのかというと…

 セキュリティ技術でお馴染みの公開鍵・秘密鍵の話が出てくるのが認証の話っぽいですね。秘密鍵は認証デバイスの中、公開鍵はサーバに保管してやっていくそうです。
 会場のツイートでは、実装コストがどれぐらいになるのか?という感想が多めでした。確かに物理的なデバイスを予め用意してパソコンの傍に繋げとく・スマホにインストールしておく・鍵情報を事前に送る・となるとかなりの大ごとですからね。
 僕が主に活動しているエンタープライズ寄りの世界の社外の顧客/社内システムのWebアプリケーションでも、要件を固める上で認証・認可は重要ファクターのひとつであり、標準化・部品化のまっさきの候補になります。パスワードなしのログイン画面を作ったりする日がいつか来るのかなあと思いました。
 

"検索の成功" と "ユーザの満足度" の関係

 続いてはMacの猫マークがかわいいと評判のYuyaさん。(@yu__ya4)
 Twitterアイコンも猫です。猫アイコンって割と見かけますね。この日のハッシュタグに集まった中には猫アイコンが特に多かったような…?
 英語バリバリの登壇資料は国際会議のWeb Conferenceで論じられている数々の論文の中から、タイトルにある論文を概説したものもの。
 Web Conferenceの様子はこうした記事に載っています。

The Web Conference 2018 レポート

 内容は検索成功とユーザの満足はイコールになるときもあるが、実は片方しか達成できない時もあるというもの。調査によるとそのWeb情報のRedability(読みやすさ)が高ければユーザはほぼ有用だと判断するのに対し、Credibility(信頼性)の高い低いは実はユーザの有用度の判断にはあまり影響していないとのこと。まずは見やすさなんですね。
 ほかにも元から難しい検索では有用度を感じにくい、興味があることへの検索は内容が良いと有用度を感じやすい、事前知識がある検索では内容の悪さが有用度の低下に直結しやすい。こういう論文系も調べてみると面白いよ…というお話。

 Web系勉強会というと発表の題材はJS系の最新ライブラリとかフロントエンドフレームワークの最新動向とかすごいサービスの作り方とかそういうのが多いのかなと勝手に思っていたのですが、こういう学術系の話題も登場するのですね。
僕も前にR&D系の開発とかで英語の資料とにらめっこしていた時期もありますが、ひとつ前のWebAuthenの話も含め、懐かしく感じました。
 

5分でだいたいわかった気になるアプリケーションアーキテクチャ

 続いてこちらも割と直近の飛び入り参加?だったらしい、tom_myzさんによる5分のミニLT。
 よく聞く「アーキテクチャ」とか「アーキテクト」とはなんぞや? 上流工程でなんか難しいことをして高い金とって消えるよくわからん人とか新人に難しい言葉の羅列を浴びせてくるよくわからん人もいるが、ごく簡単にいえば本質は「設計」である。
-完-。
 でなくてもう少し続けるとアプリケーションの将来のことを考える人で、本とかいろいろあるよ……というお話。短いながら根本的なところに絞り、内容は分かりやすいものでした。

 参考文献では最近話題のあの『Clean Architecture』が出てきました。Unity方面でも話題のクリーン・アーキテクチャのタマネギみたいな図が最後の方に出てくるというあの本ですね。僕もKindleのセールで買って絶賛積読待機中です。(読めよ)

Clean Architecture 達人に学ぶソフトウェアの構造と設計 (アスキードワンゴ)

Clean Architecture 達人に学ぶソフトウェアの構造と設計 (アスキードワンゴ)

 はてなidやWEM#9の参加記事からしてご本人と思われるブログに感想が上がっていましたので、貼っておきます。 tommyz91.hatenablog.com

 この発表にあった、本質は設計である…というのは大体正しくて、深堀りするとソフトウェア設計をしていく上での重要な要素が幾つかある、という理解の仕方でよいと思います。プログラムが書ける人にまずイメージしやすい要素でいうと、以下あたりからでしょうか。

  • 拡張性:機能の数や中身を増やしても、既存コードの修正が最小限で済む
  • 保守性:開発担当者以外がいじることになっても修正箇所が特定しやすい、修正量が少ない、設定ファイルなどで振る舞いを変えやすい、リリースの手間が少ない
  • 再利用性:DRY原則を守ったコードで使い回しがしやすい
  • モジュール性:クラスが疎結合を保っている、テストしやすい、2人以上で開発しても分業できる

……などなどなど。→Wikipedia:ソフトウェア設計
 

React+Redux 次の一歩

 参加者が40人ぐらい?でお酒も余っているので2杯目を取りに行ってOKの流れに。そして再開したのはYoichiro Shimizuさん。(@budougumi0617)
 メイン資料では透明度を落としたかっこいい写真が背景、ずらりと並ぶフロントエンド系のライブラリのアイコンと英語名、日本語も英文もフォントが綺麗……と、いかにもWeb系勉強会っぽい資料。
 今年ものすごい勢いでフロントエンドを学習し始めてからググりまくってLT資料もさんざん見たのですが、よく見て回りましたこういう資料。JSのライブラリや技術ってみんなカラフルなアイコンがあって楽しいんですよね。これや!こういうおシャンティなふいんきを待ってたんや!(勝手なWeb系のイメェジw)

 なんとGitHub補足資料まで完備という至れり尽くせりです。

https://budougumi0617.github.io/2018/11/09/presentation-web-engineer-meetup-10/budougumi0617.github.io

 普段はあのGo言語のコミュニティなどで活動中とのことで、初めてReact+状態管理のRedux+その他で開発をするにあたって導入してみたツールのお話。

  • Flow: Facebook提供、型を導入して綺麗なコードになる
  • ESLint: VSCodeでコーディング中に静的解析&フォーマット適用
  • Prettier: さらに強力にコード整形
  • Jest: ボイラープレートのcreate-react-appにも含まれているテスティングフレームワーク単体テストRuby使いにもなじみやすい
  • Storybook: 状態を変化させた際の見た目の動きがリアルで分かる
  • Netlify :使うとGithub上のものがそのままホスティングされてWeb上ですぐ公開できる!

というものでした。僕もネットで調べて今のプロジェクトにESLintとPrettierは導入したのですが、コードを書くにあたってまずは基本のこのへんからですね。

 StorybookはVue.js界隈などでもよさげだという話をよく見聞きしていたのですが、今回資料の中で動画があって大変分かりやすかったです。
 なおその後ご本人からTwitterで、資料を作るメソッドで参考にした資料をリプライいただきました!

kakakakakku.hatenablog.com

 発表中でも、Netlifyの詳しい話は次に出る人が語ってくれるでしょうと前振りがありました。

 そしてみずりゅさんがさらに前振りをして、ニャンと出てきたのは……
 

FirebaseとNetlifyを使ってサーバーレスでサービスを作った話

 さァニャーンと出てきたのはしがない界隈やインフラ/SRE界隈でもお馴染みの、Morixさん! (@morix1500)
 ここでも阿部寛の人というキャラ立てをまたしておりました。

qiita.com

blog.haramishio.xyz blog.haramishio.xyz

 という訳でお題は11/5リリース、Twitterでもかなり話題になったネコになって本音を言えるWebサービス「Nyaaan」のお話。正しいサービス名はaが3つですニャン

 LTではサーバの運用保守が発生しないことを今回便宜上サーバレスと呼ぶ、という定義にあたって出てきたキョーフの「サーバレス警察」が受けていました。正規表現警察とか、JAVAscriptを検知する大文字小文字警察とか、ITエンジニア界隈には警察がいっぱいいますからねw
 個人の負担を減らした開発で今回はサーバレスアーキテクチャを採用、フロントエンド部分を配信するにあたり選択肢が幾つかある中で今回はNetlifyを採用。超簡単にホスティングできてしまうとのこと。
 そしてサーバレスでバックエンド(=サーバサイド)の処理を何に乗せるかは、AWS(Amazon Web Services)/Firebase/GCP(Google Cloud Platform)/Herokuと主に4種。サービスの性質やコスト、自分に合うものを選ぶとよい。今回はオールインワンで済ませたいこともあり、最近話題のFirebaseを選択。見た目の部分はVue.jsのSPA用フレームワークNuxt.jsで構築し、あのニャーンが動いているとのこと。Netlify+Firebaseの組み合わせで手軽にサービスが作れる時代になったニャーン...というお話でした。

nyaaan.haramishio.xyz

 トップページのHTMLソースを表示して分かりました。ほんとだ…コンテンツ本体は一枚のdivタグだけで、id="__nuxt"になっとる...!

 会場ではハッシュタグにニャーンが満ちて猫だらけになっていました。

 アイデアで勝負の個人開発でサーバ側の手間を省いてくれるFirebaseは最近かなり注目されていますね。WEB+DB PRESSの特集の他にがっつりした専門書はまだのようですが、技術書典でも同人誌が出ています。

WEB+DB PRESS Vol.105

WEB+DB PRESS Vol.105

  • 作者: 小笠原みつき,西村公宏,柳佳音,志甫侑紀,池田友洋,木村涼平,?橋優介,大塚雅和,飯塚直,吉川竜太,末永恭正,久保田祐史,浜田真成,穴井宏幸,大島一将,桑原仁雄,牧大輔,池田拓司,はまちや2,竹原,WEB+DB PRESS編集部
  • 出版社/メーカー: 技術評論社
  • 発売日: 2018/06/23
  • メディア: 単行本
  • この商品を含むブログを見る

Vue.jsの先にあるNuxt.jsは、最近しがないラジオにも出演しためぐみんアイコンの花谷さんの本が出ています。僕もまだ実体を正しく理解しきれていないので後でちゃんと読もう。

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

 エンタープライズ寄りのtoBや社内向けのWebアプリケーションの開発をしていると、なかなかこのへんのサーバレスアーキテクチャにまで触れる機会がなく、僕も用語レベルでしか押さえていないのですが、今後もうちょっと深堀りして知っていこうかなと思いました。

みんなで読めばつらくない!Web技術の輪読会の話

()

www.slideshare.net

 続いての発表者は、なんとアイコンをあちこちでお見かけしていた渡り鳥さんでした。(@migrateur_k)
 Webエンジニアに転身して数か月、読むべき良書もいろいろあるのだが積読が捗ってしまう。そこで輪読会を始めました…というお話。
 Twitterにはこの積読がかなりグサッときた人が多く、やはり共通の問題のようです。

 『Code Complete』は2000年代の本だけどいいですねー。ほんと分厚いんだけど何とか僕も読破して記事も書きました。もっと早く読めばよかったと思える確実に役立つ本です。

iwasiman.hatenablog.com

 LT資料に出てきた輪読会のお題の本はあの『Webを支える技術』。これもWeb開発やるなら文句なしのおススメ本です。

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

 SlideShare上の資料からは消えているようですが、発表時の資料には初心者向けRuby勉強会「よちよち.rb」の懇親会で開催のきっかけになった話で、しがないラジオご出演&『カイゼン・ジャーニー』作中の某部分にもこっそり出てくるぷぽさんがゲスト出演されていて面白かったです。
 そして輪読会は範囲を狭めてハードルを下げたり、アイスブレイクを入れたり話し合いを多くしたり、ツールの活用にKPT、と捗る工夫をいろいろこらしているとのこと。

コメントが同時編集できるテキスト編集ツールのHackMD、そしてUIが可愛いesaが注目を浴びていました。

HackMDの記事。 qiita.com

esaがよさげという話はよく聞きますね。うーん月500円か... esa.io

 
 

それでも、私が個人サービスを作る理由

 今度は飛び入り参加のフジワラ ユウタ さん。記憶に残りやすいTwitterアイコンの方です。(@Fujiyama_Yuta)
 現在はフリーランスとして仕事&個人開発も継続的にやられているとのこと。Qiitaにも作ってみた系などかなり記事を投稿しており、大規模にバズった記事もあります。

yutafujiwara.hatenablog.com qiita.com

 発表は自分のキャリア・サービス開発をするに至った話・実際のサービス例として勤怠管理サービスの「OFFICECLOCK」、関連したHoge ClockシリーズでSNS遮断でポモドーロできるChrome拡張「BLOCK CLOCK」、そしてどこでもビンゴ大会ができる「THE BINGO」の話。

the-bingo.jp

その場でツイッターWebサービスのURLが流れてきて、クリックするともうそこでBINGO大会ができます。こういう風にその場でもう体験できるというのは強いですね。

はい、という訳でポチポチやってたら超目立つBが僕の端末から出ました。発表の中にアーキテクチャ構成が出てきますが、これもVue.js+見た目がSemanticUIで作られてるんですねー。

 ほか、せっかく作ったサービスもあまり使われず低空飛行したり収入に結びつかなかったりすることもあり、個人開発ならではの辛みもあるという話。でも仕事につながることもあるし、そして、使ってくれたユーザからの声がとても貴重で励みになるというお話。
 もりっくすさんもああ言ってるしやっぱりフィードバックは大事なんですね。よしおいらも引き続き人のアウトプットにはどんどん反応していこう。と思いました。

qiita.com qiita.com

 ちなみにこの勉強会の後日の結婚式イベントでも2次会で「THE BINGO」を使って盛り上がり、開発側のフジワラさんご自身がビンゴしてしまったそうです。(笑)
 

勉強会に参加していたはずなのに、ちっとも勉強していなかった話

www.slideshare.net

 最後の飛び入りLTは なおと さん。(@naoto_7713)
このWEMの2週間ほど前の10/27の別の機会でもこの資料でLTしたようで、Qiita記事にもスライドと一緒に載っています。

qiita.com

 最初の自己紹介で前前職がSIerExcel職人してた…という、もはや約束めいたSIerネタでアイスブレイクをかまして1社経て現在はフリーランス、Vue.jsやAngularを使うフロントエンドで活動中とのこと。

 本題はVue.jsを使うのでいざ勉強しようと勉強会に行ったり人と話したりしたが、手段と目的が逆転、勉強会に参加してるだけで勉強した気になったマンになってしまったというお話……!
 ハッシュタグを見ると皆さんかなりグサグサ刺さったようで、かなり共感の声が上がっていました。なるほどー。
こうしたIT勉強会に行く目的・意義の話はTwitterやブログ、Podcastでも時々話題に出るような気がします。
僕の場合は技術自体の学習は別に本・ネット・実地でできるし、主に人を知るために来てるのでこう思ったことはないのですが、エンジニアとして成長過程の最初の方にいる人には難しい問題のようです。
 なおとさんの発表は5分だったのでその後本題のVue.jsは果たしてマスターできて解決できたのかは出てこなかったのですが、勉強会に参加して聴講した後も何かアウトプットしよう!ということですね。

 そしてアウトプットだぜい~とこのエントリを書いていて思い出したのですが、あれ…? よく見たらこのなおとさん、2018/11/19のEveryone Outputerのイベント『ぼくのわたしのセイチョウ・ジャーニー』で登壇される方かな…? 僕は行けないのですが、こちらは界隈で知ってる人がいっぱい参加しますぞい。

everyone-outputer.connpass.com

 
 

LT終わって

 今回は時間オーバーにより懇親会はなしで終了したので、ほとんど人と話せませんでした(笑)
 みずりゅさんとは同卓、そして一昨日の転職LT#3でもご挨拶いただいた ih6109@長岡 さんとまた再会できました。今後の予定を聞いたら『ぼくのわたしのセイチョウ・ジャーニー』、『#しがないラジオmeetup 2』、12月はエンジニアの登壇を応援する会の忘年LTと、また会う機会がありそうです。

ih6109.hatenablog.com

 そして忙しそうだったのであまり話ができなかったのですが、終了後を見計らってOSCAさんにやっとご挨拶できました……! 今日の一番の重要目的達成…!
 しがないゲスト出演ゲスト勢&リスナー勢に順次挨拶していくというワイの計画がまた一歩進んだぜ…(謎の達成感)
 そしてハッシュタグを見ていてアイコンでピンときていたのですが、8月の『あにべん!』でアイマス愛に溢れたアツい発表をしてくれたnikkieさん(nikkie-ftnextの日記)もこの会場のどこかにいたはず…! まったく分かりませんでした。それどころかあにべん主催の1人&Nyaaanリリースのもりっくすさんとも挨拶できずに終わっちゃいました(笑)

あにべんのレポ↓ iwasiman.hatenablog.com

 全体としては、学術系の話や認証の話、いかにもフロントエンドっぽいJS界隈の話、サーバレスに個人サービス開発といかにもWeb系ぽい話題あり、一方でアーキテクチャや本の読み方、学び方と普遍的な話題もあり、多彩な発表でした。
 参加者陣や会場の空気も(自分から見ると)よりWebエンジニアぽい感じがあり、感覚的な話ですが雰囲気が分かってきた感じです。

 あとはアイスブレイク的な話でSIer時代の仕事がExcel罫線引きとか、SIer的案件の上流工程でアーキテクトが金だけ取っていったとか、あ~やっぱりWeb系の勉強会界隈からするとSIerはそういう文脈で語られるイメージが強いのだなと思いました。(注:思っただけでハラスメントだからやめてとかそういう話ではないですニャーン。)

 そういえば初参加の邪魔してる身から言うことでもないですが、OSCAさんが一人だけでだいぶ忙しそうだったので、スタッフ募集中とのことですが確かにもう何人かスタッフ側人員が正面をサポートしていた方が良いような気がしました。
そしてOSCAさんがだいぶ心を痛めておられましたが、今回金曜夜で天気も悪かったこともあり、キャンセル率がかなり高かった……!
 この勉強会のキャンセル・特に直前ドタキャンが多い問題はいろんなコミュニティでけっこうあちこちで見聞きするので、悩んでいるイベント開催者の方は多いようです。イベントが多い東京や大都市圏ならではの問題ですね。
 かといって体調不良や突然の仕事や障害対応で来れなくなる人もいるわけで一概に責める訳にもいかないし、対応する工夫も何通りかあるようですが難しい問題ですね。これもなるほどなあと思いました。

 という訳で、前から一度行ってみようと思っていたWEBエンジニア勉強会にお邪魔してきた話でした。主催のOSCAさん、準備&登壇した皆さん、参加者の皆さん、会場提供のミクシィさん、ありがとうございました!

リンク集

 OSCAさんが当日のツイートをtogetterにまとめ、またイベントレポもアップされています。

togetter.com

techblog.oscasierra.net

the.arcさんのイベントレポ。

arc-tech.hatenablog.com