builderscon tokyo 2018にCFPを出してみた。

builderscon.io

タイトルの通り、CFPというものを生まれて初めて出してみました。

日頃からアウトプットが足りない自覚はあったし、身近な人にそこを窘められる事も多々あったので「いい加減やっていかねば！」という気持ちで行動を起こしてみてます。

シェア数なども採択の考慮に入るという情報を完全に見落としていたので、ブログでも情報発信してみようと思います。（ちょっと図々しいですかね？）

どんな話をするのか

フロントエンド領域で3年近く働き、制作会社や事業会社の仕事も経験する中で試行錯誤してきたことを掻い摘んで話していきます。

• セマンティックなHTMLって一体何だよ。
• CSSの設計・運用つらい。
• jQuery使ってまともな設計するの無理じゃない？
• WordPress分からん。
• SEOの正解が分からん。
• Webアクセシビリティは何をすればいいのか分からん。

...といった具合に、フロントエンド領域の人間が考えないといけない事はたくさんある中で、 自分がどういったアプローチを取ってきたのかを共有できたら良いなと思っています。

しない話

「React vs Angular vs Vue」みたいなフレームワーク談義はしません。

• 自分がしっかり使い込んだことがあるのがReactしかないので、他については言及できない。
• 僕よりも詳しい人たくさんいると思うので、自分が話す必要性を感じない。

という理由があるので、僕は泥臭さ全快の話に振り切るつもりです。

まとめ

採択されるかは不明ではあるものの、既にネタは練り始めています！ もし興味を持っていただけたら、SNSでのシェアをして頂ければ幸いです。よろしくお願いしますー！！

「第69回 HTML5とか勉強会」に参加してきた

最近は外部のイベントに参加してなかったので、久々に「HTML5とか勉強会」に参加してきた。

1年以上開催されてなくて「もうやらないのかな・・」と内心思っていたので、今回復活してくれて個人的にとっても嬉しいです。

内容

今回はフロントエンドのUIフレームワークがテーマ。

• Angular: 「Angular Ivyとその先」
• Vue: 「vue-cli-v3」
• React: 「Suspense」

といった流れで、それぞれのフレームワークの最前線の話が色々聞けた。

Angular Ivyとその先

Angular Ivyとその先

Angularは1系の頃に結構触った後、4系のチュートリアルを一周したくらいの知識しかないので「今のAngularはこういう感じなのか・・！」という感想。

IvyはAngularにあるrendererをより小さく、早く、シンプルにしようというプロジェクトらしい。Angular Elements（Angular上のCustom Elements）がbundleされたものを軽量化しようという目論見がある、という話が個人的には興味深かった。

最近個人的興味でAngularの近況を追う事が多かったので、Angularの進化を知れて非常に良かった。ドキュメントの日本語翻訳も盛んだし、頑張ってほしい・・！

vue-cli-v3

Vue CLI v3 - Speaker Deck

Vueは完全に趣味で30時間くらい触っただけなので、完全な初心者目線で聞いてた。

雑に言うと「CLIをGUIで操作できるツールが、ロードマップにも無かったのに爆誕した」という話だった。Vue界隈のコミュニティはよく知らないですが、なかなかファンキーですね。

@kazu_ponさんのデモを見ていたが、僕が想像していたよりもちゃんとしてて、必要な事は大体やれる印象を受けた。設定を分けてのbuildをGUI上でやれたり、設定そのものを弄れたりと、なかなかに便利そう。

「作者の人が飽きちゃって、メンテナンスされなくなったりしないのかなー・・」という不安は個人的にありつつも、Vueに対しては親しみやすさを持ちました。

Suspense

React Suspense - Speaker Deck

Reactはv15.4くらいの頃に消耗してたり、Reduxの正解が見えなくなったりしてたのが1年ちょい前。最近はプロダクトで触ることがなかったので、近況がどうなってるのかは正直気になってた（キャッチアップはサボってました）。

雑に言うと、「これまでは成功、失敗などの各状態をstateで持って頑張っていたPromiseの依存を解決する仕組み」らしい。

「画面に存在するコンポーネントの数だけ、ReduxでいうところのStateが増えていく流れを止めることが出来るのか・・。Promiseの状態管理とか、コンポーネントのキャッシュ管理が仕組み化されるのは嬉しい。」というのが個人的な感想。

v17から入るそうな。

パネルディスカッション

色んな話が上がってました。

• コントリビュートは仕事中にしてる。
• コントリビュートのチャンスは、ドキュメントの整備を狙うといい。
• サードパーティのライブラリのメンテも狙い目。
• Angularはコアメンバーがすぐに対応しちゃうので、本体はコントリビュートのチャンスがあまり無い。
• Angularあんまりいじめないで。

辺りの件が強く印象に残ってたけど、他は忘れてしまったので動画を見直します・・(ヽ´ω`)。

まとめ

久々の「HTML5とか勉強会」でしたが、非常にワクワク出来て楽しかったです！ 今後はWeb技術全体を俯瞰出来る会になるそうなので、今後の展開に期待ですねー。

会社に掛け合って会場を貸し出したり、運営のお手伝いとかやってみたい気持ちはあるんですが、どこで声をあげればいいのだろうか・・。

anime.jsを導入する

「なんかこう・・ｼｭｯって感じでスクロールアニメーションさせたい」

随分前にReact/Reduxの開発をやっていた時期にも同じ台詞を聞いたのですが、この台詞を再度聞く事になるとは思いませんでした。

自分が関わっているプロダクトではjQuery2系が余裕で現役です。手早く実装しようとすると「animateメソッドで特定の箇所までbodyを動かす」という実装に走りがちなのですが・・案の定パフォーマンス上で問題が生じたので対策を考えることにしました。

考えた対策

• requestAnimationFrameを駆使して、自力で実装。
• Web Animations API導入ワンチャン・・？
• いい感じのライブラリを探す。

思い浮かんだのはこの3つです。

タイトルで言っちゃってますが、結果的には3つ目の方法を選択しました。 とはいえ、せっかくなので他の2つにも触れようと思います。

requestAnimationFrameで自力実装

僕は基本的に自力フルスクラッチを好む人間なので、まず自力実装を検討してみました。しかし、今回は自力実装はしない方針にしました。理由は以下の通りです。

動きのバリエーションを増やすのが大変

今回実現したい要件として「イージングをつけたスクロールをしたい」があります。

イージングの動きを自力で実装するのはなかなか大変です。多くの人が一度は耳にした事があるであろうベジェ曲線との戦いは避けられません。イージングの種類を増やしたいという要望が増えれば、自力実装は雪だるま式に増えていく未来が今から見えています。

メンテしていくのも面倒だし、他の誰かにそれをメンテナンスさせるのも嫌だったので、今回は自力実装はしない方針にしました。

※余談ですが、ベジェ曲線に入門したい方は以下のリンクがおすすめです。

blog.sigbus.info

Web Animations API

個人的興味はあったんですが、これも早々に諦めました。ブラウザ互換性がまだまだで、Safariの対応が無かったことが大きな理由です。

弊社プロダクトのユーザの半分がiPhone、つまりSafariユーザなのでPolyfillは絶対に必要です。Polyfill併用の運用もなかなかに手間だと考え、導入は見送りました。

いい感じのライブラリを探す

選んだ手段はこれでした。選定基準は以下の通り。

• ブラウザサポートがそこそこ。
  • Android > 4.4、iOS Safari > 9を満たせてればOK。
  • IE11で動けばベター。
• ドキュメントがある程度整っている。
• ライブラリ本体が軽量である。
• ライセンスはなるべくMIT。
  • プロダクト内で使う範囲を広げた時、ライセンスが足枷にならないようにするのが目的。

この辺りを踏まえつつ、↓のリンクを参考に選定したのがanime.jsでした。

The Top 9 Animation Libraries for UI Designers in 2017 — SitePoint

実装例のサンプルがやけに充実しているので、興味のある方は是非に。

animejs.com

デモ

ボタンを押すと画面最上部まで戻るだけのデモです。

codepen.io

jQueryに依存しないコードを書いたら、古めのChromeやSafariで動かない地雷を踏み抜いたので、その辺の対応が入っています。

「動かなくない？？」という方がいれば、コメントして頂ければ幸いです。

参考にしたリンク

新しいChromeでスクロールが取れない？ scrollingElement？ | Ginpen.com

古めのChromeやSafariで動かなかった時に参考にしました。

結局のところ、比較的新しいのモバイル環境であれば「scrollingElement」をつかうで良いと思います。PCの場合がIE11を想定した分岐処理が必要にはなるでしょう。

ServiceWorker導入を一旦諦めようと思った話

自分が関わっているプロダクトにServiceWorkerを入れる試みを4月中盤からやっていたのですが、直近でやり切るのは無理そうな気がしてきたので一旦諦めました。（完全に諦めるわけではなく、地道に研究は続けます。）

その過程で検討した事を記録に書いておくことにします。

やり始めた経緯

社内で技術投資枠（業務時間の10％を使い、実業務に活きるチャレンジングな事をする仕組み）を設ける取り組みが始まったので、前から興味があったServiceWorkerを試してみたくなったのがきっかけです。

「Safariで使えないしなー」という言い訳も通用しなくなりつつあるので、本格的に触らなければと思っていたのも理由の一つです。

入れようとしたプロダクトはどんなもの？

僕は今、リブセンスという会社でアルバイトを探すサービスの開発を担当しているのですが、ユーザの行動は以下の3つに絞れると思っています。

• アルバイトの求人情報を探す。
• アルバイトの求人情報の詳細を見る。
• アルバイトに応募する。

ユーザに応募してもらわないことにはお金が生まれないビジネスモデルなので、応募率をいかに増やすかを考えなければなりません。

ということで、応募に辿り着くまでの体験を良くするためにServiceWorkerを活用する余地はあるかどうかを検討していきました。

実際に試してみる

検討したものは以下の通り

• 静的リソースのキャッシュ
• ページそのもののキャッシュ
• プッシュ通知

静的リソースのキャッシュ

これはそこまで難しい話ではありません。

• 何のファイルをいつキャッシュするか？
• 運用フローをどうするか？

決めるのはこれくらいです。

ServiceWorkerのインストール成功時に、更新頻度の少ないファイルを選択してキャッシュしておく・・くらいの事なら楽にやれると思います。

とはいえ、今回の場合はキャッシュできるファイルが存外少なく、大した効果が見込めないことがわかりました。（手早くキャッシュに回せるのはロゴのが画像や、フォントファイルくらい）

リソースの更新が発生した場合のServiceWorkerの更新が煩雑になるだけな気がしたので、今回は一旦見送っています。

ページそのもののキャッシュ

どのページをキャッシュして、そのキャッシュをいつ破棄するのかが難題だなと感じています。

ニュースサイトやブログサービスであれば、TOP画面に出ている直近のコンテンツを幾つかキャッシュしておくのは良さそうと思っているのですが、今回の場合はどうすべきなのか非常に悩みました。（やたらとキャッシュしまくって通信料を食いすぎたら意味がないですし）

アイデアベースで今回考えられたのは、以下の2つくらいでした。

• 求人情報にレコメンドされて表示される求人をいくつかキャッシュ
• 「後で読む」的な機能が存在するので、それに追加された求人情報をキャッシュ

アイデアとしては悪くない気がするものの、一人で先走って実装するのは早計なので周りへの相談が必須かなというところに落ち着いています。

（ここ半年、一人で先走って失敗した経験があるので大分慎重になっています・・）

プッシュ通知

悪名高いアレです。

ページを初訪問した途端、「ども！！自分、通知いいすか？？」と許可を求めてくるサービスも多く、辟易している方も少なくないと思います。

Rebuild.fmのように配信を通知してくれる使い方は素敵だと思うので、ああいうユーザ体験が増えるといいのですが・・。

というわけで、本番運用するまでの準備は相当慎重に運ぶ事に留意しつつ、アイデアを練ってみました。

「後で読む」している求人の掲載期限が切れそうになったら通知を飛ばす

弊社サービスでは「キープ」と呼んでいる機能があります。

「気になるし、とりあえず保存しておくか」という時に使う機能ですね。 キープしている求人の掲載期限が終わりそうになったら、キープしているユーザにお知らせ通知を飛ばそうという話です。

自分はTwitterの「いいね」を「後で読む」と同じような使い方で使っているのですが、自分でいいねした事を忘れてしまうことがよくあります。 （毎週末、整理するようにはしているのですが）

これと同じ話で、「キープ」されただけで応募されずに埋もれてしまっている求人は多いんじゃないかなーと、個人的に思うわけです。 （書いてる内に気になってきたので、分析したくなりました）

自分一人で進められる話でもないので、これも周りとの相談が必須ですけどね。

試してみた感想

技術的にも興味深い領域で面白くもあり、導入の検討を進める内にプロダクトへの理解も深まったのでやってよかったと思いました。

事業会社に転職して8ヶ月ほど経ちましたが、事業そのものへの理解を深める事への重要性を再認識しました。

「成果を爆速でリリース！」といかなかったのが残念ではありますが、地道にやっていこうと思います。

※手元のメモが消えていたので、参考にしたサイトのURLなどは後で発掘して書きます。

余談

PWAの研究も並行して進めていたのですが、manifest.jsonでフルスクリーン指定にする場合はUIをアプリと親しい構造にしないと逆に使いづらくなるという知見がありました。

Google I/Oのセッションは全然チェックしてないのですが、PWAのセッションはあるんですかね・・？

Railsを始めて一ヶ月半経ったので振り返りをする

「Webアプリケーションエンジニアになるぞ！」という意気込みで事業会社に転職し、Railsのプロダクトコードを書き始めて少し経ったので現状を振り返ってみる。

プロダクトコードでRailsを書いてみての感想

なかなかに楽しい。

設計を本格的に考えると答えは出てこないし、プロダクトコードはがそもそも複雑だし、PullRequestのレビューは厳しいし・・といった感じで頭を抱える事案は多いものの、自分の血肉となっているので良しとする。

実戦に入るにあたってやったこと・やっていること

定番のサイト達

• Railsチュートリアル

  • Railsにもなかなか慣れなかったけど、Rubyの文化になかなか慣れることが出来ずに苦戦。
  • 1回の挫折を挟み、完走まで1ヶ月以上かかった。

• Railsの教科書

  • Railsチュートリアルよりも内容がコンパクトだったので、一時期こっちに逃げていた。
  • 感覚をつかむには、まずこっちをやった方が良かったかなと今では思っている。

• Ruby on Railsガイド

  • ActiveRecordがイミフ過ぎたので、ここのActiveRecordの基礎を何度も読んでいた。
  • ルーティングの書き方が分からなくなった時も戻ってきている。

この辺りの定番をやりつつ、最初はRailsの感覚を養うことから始めた。適当にググった情報を拾い読みしていると、断片的な知識が混ざって混乱してしまうので、しばらくは情報を意図的にシャットアウトしていた。

その他にやったこと

• プロになるためのRuby入門

  • Railsを理解するにはRubyを理解しないといけないと感じたので、この本で入門していた。
  • moduleとclassの使い分けなど、モヤモヤしていた部分を解消出来て非常に助かっている。
  • Railsを始める人はとりあえず買った方が良いと思う。

• Everyday Rails

  • rspecの記法に全然慣れることが出来ず、この本を見つつrspecの練習をやった。
  • contextの粒度を大きく過ぎてしまったり、subjectの挙動に毎回混乱させられたり、コードをDRYにしすぎてしまったりと苦戦はしているが、少しは慣れた気がする・・。
  • 困ったときは、とりあえずQiitaの参考リンクを見ている。

使えるRSpec入門・その1「RSpecの基本的な構文や便利な機能を理解する」 - Qiita

• オブジェクト指向設計実戦ガイド ～Rubyでわかる 進化しつづける柔軟なアプリケーションの育て方

  • 周りの人が大体読んでいたので釣られて読んでみたが、非常に面白い。
  • オブジェクト指向の本はエンジニアなりたての頃に読んでいたが、今になると理解できる内容が多いように感じる。

• 変数名や設計に悩んだ時

  • gitlabhqのコードを眺めている事が多い。
  • 参考になるコードが多いと聞き、ちょくちょく手探りで読んでみている。

実戦に入ってみて感じていること

とにかく設計に悩む事が多い。

特に最近悩んでいるのが「controllerがファットになった時の対処法」。Viewに渡す情報が多い画面を作っていると、あっという間にcontrollerの処理が膨らんでしまい、対処法で毎回悩んでいる。

techracho.bpsinc.jp

迷った時は、ひとまず↑を見つつ考えることにしている。とはいえ、「View Objectでどこまでの事をやっていいのか」を理解できずに現在進行形で悩んでいる。

設計の話で進展があれば、またブログに纏めてみようと思う。

新しくみかけたビールを普通に呑む

はい。Beer Advent Calendar 2017の8日目です。

30歳になってからというものの、1日に2缶空けて晩酌するのが当たり前になってしまった僕が8日目を担当します。

本日のビール

今日はたまたまコンビニで見かけた「キリン ブラウマイスター」というビールを飲みました。

どうやら、セブン＆アイグループで限定発売らしいですね。

感想

普通の一番搾りと比べると少し苦め。味はサッポロ黒ラベルに近い印象で個人的には好きな味です。

程々の重厚さで飲み飽きないので、今週はこればかり飲んでる未来が見えます。

オチは

ないです。酔っ払いの駄文です。