ゆとり日記

心にゆとりを持って生きたいプログラマーの雑記です。気が向いたら書きます。

転職してしばらく経ったし、手元の開発環境を少しずつ見直す

事業会社に転職して3ヶ月弱が経った。

相変わらずフロントエンドエンジニアをやっているわけですが、PHPとかRubyとかも触る機会が増えたり iTerm2を開いている時間が増えたりしていたので、普段使っている道具を見直す事にした。

WebStormからIntelliJ IDEAに乗り換え

前職でReact +Reduxをやっている時はWebStormで良かったわけですが、そうもいかなくなった。 そういうわけで、入社のタイミングで個人ライセンスを購入した。

※会社で買ってもらえなかったわけではなく、申請とかが色々面倒だったです。

Railsの勉強が落ち着いたら、これでKotlinの勉強も円滑に始められるのでサイコー!って感じです。

bashを使うのを止めた

会社が変わったら、周りにbashを使っている人が全然いなかったので変えることにしました。

周りの人にはzshを勧められたのですが、「ここはあえてfish shelklかな・・」という反抗的な精神が働いたのでfish shellを入れました。 クラスメソッドさんの参考記事を見つつ、fishermanとzを入れて使ってみている感じです。

三連休でちょくちょく手を動かしている内に徐々に慣れてきたので、仕事で使うのが今から楽しみで仕方ないですね。

メモアプリをInkDropに変えた

  • 仕様に関するちょっとしたメモを残す
  • ちょっとしたサンプルコードを書き残す

業務でコードを書く上でメモを残すことが欠かせなくなりつつあるのですが、しっくり来るメモアプリに出会えずにいました。

Macの標準メモアプリを使っても良いのですが、それだとコードを書くには微妙です。 ちょっとした事を書くために、社内のconfluenceを開くのもだるいです。

悩んだ結果、「やはりマークダウンだよね」ってことでInkDropを使うことにしました。

使い始めて2日しか経ってないですが、今のところ何の不満もなく快適に使えているので、トライアル期間の60日が過ぎたら普通に課金すると思います。

自分でmarkdownエディタを作るモチベはない

感想

不要なストレスが減り、快適に開発が出来ているなーという印象です。

今後も理想の開発環境を目指して、色々とチューン・アップしていこうと思っています。

Rubyの練習のためにProject Eulerを始めた。

  • 今いる会社がRailsメインだけど、Rubyに関してはド素人過ぎる。
  • 「週一でProject Eulerの問題を解く」みたいな集まりが会社で始まったが、何の言語でやるか悩んでた。

↑のような背景があって、Project EulerRubyの練習の場とすることにした。 どこにコードを載せていくかは決めていないが、qiitaかGitHub辺りにひっそりと載せていくつもり。

進捗

周りからRubyのアドバイスを貰いつつ、4問目を解き終わった辺り。とはいえ、ただ解いただけで処理速度とかは全然考慮できてない。

一応、ここに問題とコードを載せてみることにする。

左右どちらから読んでも同じ値になる数を回文数という. 2桁の数の積で表される回文数のうち, 最大のものは 9009 = 91 × 99 である. では, 3桁の数の積で表される回文数の最大値を求めよ.

def palindrome? (number)
  number.to_s == number.to_s.reverse
end

palindrome_array = []
(100..999).each do |i|
  (i..999).each do |j|
    result = i * j  
    palindrome_array << result if palindrome?(result)
  end
end

puts palindrome_array.max

重複した計算を排除したり、eachの繰り返しを降順にするだけでも大分変わってくる気はするものの・・正直苦戦している。

目標

20問目まで解くのを、とりあえずの目標にしておく。頑張っていくぞ。

Frontend de KANPAI! #01 に行ってきた感想

frokan.connpass.com

ブログ枠で参加してきたので、ブログを書く。

参加してみての感想

面白い話は多かったけど、次回開催があってもたぶん行かない。理由は後述。

KeynoteとLTについての感想

Keynote3本 + LT7本という構成で、合計で90分くらいでした。惹かれる内容もいくつかあったので、感想を述べます。

Keynote

あと3年フロントエンドでやる力

イタリアンレストラン、Webの受託会社で働いてきた人が30歳でDeNAに入り、普段どんな事を求められながら働いているのかという話を聞いた。「最初に求められたのがスタイルガイドの作成だった」という話を聞いて、実際にどういう運用をしているのかを深掘りして聞いてみたい気持ちになった。

FrontEnd:DDD - フロントエンド実装のコアドメイン

  • 早口 + 声が小さくて、話が聞き取れず。(マイク音声が篭っていたような気もする)
  • スライドの文字が小さくて全然読めなかった。

上記のような感じだったので、内容が全然頭に入ってこなかった。

keynoteの中では一番惹かれるタイトルだっただけに残念。スライドが公開されるなら、見返したい(ヽ´ω`)。

MobXではじめるReactiveアーキテクチャ

名前は知っていたものの、MobXの話をちゃんと聞くのは初めてだった。

「stateという単語が出てきたので、Reactに似てるといえば似てるのか・・?」という印象を受けた。「observableが理解できれば、すんなり入っていける」的な話だったので、自分で手を動かしてみようと思っている。

LT

この先生きのこるためのPostCSS実践入門

まあ、autoprefixer使うくらいで十分だと思う。

個人的に、今はCSS4とかの先取りをするモチベーションが無いので、PostCSSのオレオレ構成を作る気も無い・・。

フロントエンドで大切なことはAuditから学んだ

Chrome60で大幅に機能追加があった、DevToolsのAuditsパネルの話。

  • PWA化がどれくらい出来てるか
  • 画面が表示され始めるまで何秒くらいかかったか(WebPageTestの結果で見れるようなやつ)
  • アクセシビリティの計測
  • 改善のためのヒント

などが見られるようになる。Canaryの最新版が既に61とかなので、そっちで試せる筈。

「Webの品質」について考え直すきっかけになるとも思うので、気になる人は発表資料に目を通そう。

Webフロントエンドで大切なことは全てAuditsが教えてくれた

今日から始めるShader

WebGLとかthree.jsとかそっちよりの話。

AndroidJavaをやっていた時にOpenGLを勉強していた事もあって、個人的に凄く惹かれる内容。 しかし、5分で収めるにはディープだった感が否めなかった。別の機会があれば、もっと深い話も聞いてみたい。

https://www.shadertoy.com/

GLSL Sandbox Gallery

↑この辺で遊んで見ると楽しそう。

Hello,Fire!

Firebaseでチャットルームみたいのを作ってデモをやっていた。近くで内部の社員っぽい人達がワチャワチャ喋っていて、あまり発表者の声が聞けなかったのが残念。

FirebaseでSlackチックなものを雑に作るのは楽しいかもなーと思いながら、デモを眺めてました。

AndroidとWeb

「フロントエンド開発、iPhone基準で考え過ぎ問題」がテーマのLT。

  • MediaSession API
  • Payment Request API

↑の辺を紹介しつつ、PWA化の実装を今から始めていこう的な話が聞けて面白かった。

ただ、日本ではiOSのシェアが大きい事もあり、普段からPWA化の時間をどれくらい確保できるかが悩みのタネな気がする。

フロントエンドを1つの職能として見た場合

  • 専門家少なくない?
  • マインドもバラバラ(片手間にやっている人もいますし)
  • 目的と手段が間違っていることがある ⇒ 「jQueryやること自体がダサい」みたいな風潮

↑みたいな導入から始まったLT。社内でも「jQueryやりたくないです(流行りな事をやりたいだけ)」みたいな声はちょくちょく聞くので、共感出来る所はある。

  • 環境構築とかに時間をかけない。
  • 楽をすることに時間をかけすぎない。
  • 始めることに時間をかけない。

↑みたいな話にも触れていて、自分としても耳が痛い話があった。

これからは、チュートリアルを一通りやるだけで満足せずに何かしら形にしてアウトプットすることを心がけたいと思う。

あと16年活躍しようと思います

  • 興味を持った技術はひとまず触って、知識や技術のネットワークを広げる。
  • 結果を残す。
  • 仕事の事を人に伝える。
  • 健康は大事。

Web業界に20年近くいるベテランの方から、↑みたいな話を聞けた。

「知識や技術のネットワークを広げると、どんどん面白さを感じられるようになっていく。」って辺りには凄く共感。触っていく内に徐々に慣れてきて、やれる事が広がると楽しくなるもんだと自分でも思っている。

参加してて気になった箇所

KeynoteやLTは非常に楽しめたのだが、「LT + 懇親会」という構成は辛かったように思える。

「静かに発表者の話を聞きたい人」と「おしゃべりをして懇親したい人」が混在しつつ、「静かに発表者の話を聞きたい人」の方が割合多めだった気がするので、空気が少し重かった。

個人的に一番気になった(というか不快だった)のが、発表中に社員っぽい人達が雑談してる声が聞こえてきた事。発表を聞かないのは自由だと思うけど、それならそれで静かにしてて欲しいと思った。Keynoteの時間からそんな感じで、イベントに参加して嫌な気分になったのは久々だった。

「次回開催があってもたぶん行かない。」と思ったのはこの辺りが原因。お疲れ様でした。

【React】Goodpatch×TeamSpirit Meetupに参加してきた

teamspirit.connpass.com

↑のイベントに参加してきました。
(通常枠で申し込んだつもりでいたが、直前になって「ブログ執筆枠」で申し込んでいた事に気づくという阿呆ぶりを発揮。)

  • フロントエンドエンジニア3年目。
  • Redux + React + Node.jsのSPA開発を1年くらいやってる。
  • Reactに若干飽きてる

こんな人間から見た感想を書いていきます。

各LTの感想

※発表者の方の資料は、展開され次第追記していきます。

LT1 Reactのパフォーマンスを改善する必要が無かった話

チームスピリットさんが開発してるプロダクトがReactで開発されていて、それのパフォーマンス改善の話を聞いた。

結論はLTのタイトルにもある通りでそこまでパフォーマンスを改善する必要が無かった、とのこと。普段から設計やコードレビューに気をつけていた甲斐もあって、現状のパフォーマンスは悪くないし、改善を試しにやってみても0.01秒くらいしか変わらなかったらしい。

「Reactは最初から、ある程度のパフォーマンスを保てるようにできてる。」と言いつつも、何も考えずに開発を進めていると徐々にパフォーマンスが悪くなるので、以下のような事を開発の際に意識していたそう。

  • stateを浅く保って、再レンダリングの効率を良くする。
  • スプレッドオペレータでpropsを全部渡すのを避ける。(ついついやってしまいがち)
  • 更新の前後でstateが同一でも再レンダリングが走るので、shouldComponentUpdateやpureComponentの使用を検討する。
  • Perfでコンポーネントの描画速度を計測する。

パフォーマンスが悪くなってマジで困ったら、Perfで何とかするそうです。

感想

以前は自分も「スプレッドオペレータでpropsを全部渡す」をやってしまっていたので、同じ道を通った人がいて親近感を感じた。
やはり、必要なものだけを渡した方が無駄なprops比較も無くなるし、コードの見通しも良くなって良いですね。

自分が関わっているプロダクトではrecomposeのpure、shouldComponentUpdate、onlyUpdateForPropTypes辺りを使って、再レンダリングの負荷を出来るだけ軽減してたりします。

github.com

あと、スライドにちょいちょい挟まれる「いらすとや」の画像がジワジワ来て面白かった。

LT2 いまSPAを作るなら〜Prott2の技術選定のウラガワ〜

Goodpatchのよしこさんのお話。
Prottをリニューアルする動きがあるらしく、リニューアル時に使用する技術選定の話を聞いた。

  • React
  • Redux
  • AVA
  • Flow
  • styled-component
  • yarn

この辺りの技術を使用する予定らしい。「Goodpatch = Angular」みたいなイメージを持っていたので、Reactに舵を切るのは正直意外だった。

  • Web標準に即していて、剥離しすぎていない。
  • ある程度枯れていて、情報が多い。
  • エコシステムが多い。
  • ある程度枯れている。
  • Angularの使い勝手は好きだが、情報が少なく枯れていない。
  • Angularをちゃんと書ける人よりも、Reactを書ける人の方が多いので採用も楽。

といった感じの選定基準(+Angularを選定しなかった理由)らしい。

Reduxを入れた理由は「オレオレFWへの恐怖」だそう。Reduxのstate管理は良いと思いつつも、middlewareを使ったりせずに薄く使っていくつもりらしい。
middleware不要論についての参考リンク

Flowを入れた理由は、やはり型が欲しいから。TypeScriptは候補に上がったものの、言語そのものをスイッチするよりもJSに型チェックを入れる方がライトに感じて、Flowに決めたそう。(ただし、Flowはハマりどころが多いそう)

とはいえ、まだ始めたばかり。Reduxを脱却するかもしれないし、TypeScriptに移行するかもしれないとのこと。

感想

複雑な物を作ろうとすれば、何を使おうが大変になるだろうなーと思う。自分も1年間Reduxをやってきて、多くのメリットを感じつつもかなり苦労したので・・。

Flowは導入時に結構辛い思いをしたが、入れた方がコードの品質は高まっている感覚がある。

LT3 React沼 CSS Architecture

React沼CSSArchitect // Speaker Deck

試用期間中にReact、webpack、1つの巨大なSassファイルと戦った話を聞いた(個人的主観)。

「Reactでの画面のコンポーネント化は進んでいたが、CSSは1つのSassファイルに集約されていた。」 webpackによる長いコンパイル時間、CSSの見通しの悪さをどうにか解決したかったので、技術的にCSSを解決するアプローチを始めたらしい。

とはいえ、ツールは設計の解決までやってくれるわけではない。その辺りは別で考える必要があるので、BEMを使って設計アプローチを試みたそう。最終的には「単純で誰でも理解できる設計」に落ち着いたとのこと。

コンポーネントの粒度は、JSとCSSで1:1」の原則で運用。CSSのimportルールとかも資料に詳しく書いてあるので、読むと良いかもしれない。

React-Storybookを使って、コンポーネント単位でのサンドボックス環境を作っているらしい。作った理由は、webpackのビルドが遅かったから。今後はstorybookを使って、styleguideにしていく計画もあるそう。

感想

自分も昔はBEMでCSS設計をやっていたので、苦労は凄く理解できた。特に「クラス名考えるのが大変」って辺りの件は非常に共感。 (正直、もうBEMを使いたいとは思っていない)

今のプロジェクトではCSS in JSを使っているので、今後別の仕事をする際もそれで行きたいなーって気分でいる。

スタイルガイド作るのメンドイ。

パネルディスカッション

LT後はビールを飲みつつ、スピーカーの方々のパネルディスカッションを聞いてました。

色々議題は合ったんですが、その中で印象に残ったものを少しだけ触れます。

デザイナーとの協業について

会場で話を聞いた限り、コーディングまでやるデザイナーさんは稀らしい。
Goodpatchさんでも、フロントエンドとデザイナーの業務は明確に分かれていて、デザイナーさんがコーディングまでやることは基本的にないそう。

「コーディングまで綺麗にやってしまうデザイナーさんは、もはやデザイナーという枠を超えた存在なのでは・・」という気がしてる。

ReactとjQueryの共存

結論から言えば、共存は可能。とはいえ、「jQueryが必要になる場面は殆ど無いのでは?」という意見も出ていた。

自分もReactやり始めの頃は「jQueryの世界に帰りたいよぉ・・」とか言ってたので気持ちはすげー分かる。
今ではReactにすっかり慣れたので、「アニメーションさせるなら、jQueryの方が楽だな・・」というくらいの心境。

react-sketchappでスタイルガイドを作る

github.com

Airbnb凄い。

スタイルガイドを運用する上で起こりがちなのが、「実装とスタイルガイド間のズレ」。スタイルガイド側への反映が漏れていて、気づいたらスタイルガイドが役立たずになってるアレです。

これを技術で解決しましょう、ってことでreact-sketchappの出番が来ます。 要するに「作った画面をSketch上に描画する」という仕組み。こうすることで、実装とガイド間のズレを無くそうって話です。

今まで使ってなかったけど、ちょっと興味を惹かれたので試してみようと思っています。

まとめ

翌日早起きしないといけなかったので、懇親会に出れなかったのが心残り。
スピーカーの人が作ったという、ローストビーフが食べたかった・・(ヽ´ω`)。

あと、話に上がっていたAtomicDesignの本が面白そう。

bradfrost.com

第二回があれば、是非参加したいなと思います!

GWを振り返る

GW明けはどうにもテンションが上がらないので、GWを振り返る事で現実逃避していくスタイル。

GWにやったこと

  • ダークソウル3をとりあえずEDまで進めた。
  • 身内で開発合宿した。
  • Reduxの再入門をした。

ゲームやって、開発やって、後は酒を呑んでた。

あとは連休前に会社が買収されたので、それについて思いを馳せたりもしてた。

ダークソウル3

発売日に買ったのに途中で飽きて積んでたけど、なんとなくやり始めた。 EDを1つ見れたので、連休中の目標は達成出来た感じ。

トロフィーもコンプリートしたいけど、 ダークソウル3は3週くらいしないとトロフィーコンプが出来ないのでそこまでやる気が続くかわからん。

身内で開発合宿

開発合宿という文化に憧れがあったので、身内メンバーで千葉まで行ってきた。

  • 半年くらい前に転職した元同僚
  • 来月転職する同僚

という面子の男3人旅。

宿について

今回使った宿は↓。

土善旅館[弓道合宿・開発合宿]

宿に開発合宿プランというのもあったが、5人以上で予約しないと利用できないため、今回は普通に宿泊。15畳くらいの部屋の中央にテーブルを出してもらって、そこでずっとモクモクしてた。

  • 周辺に田んぼしかないので、開発に集中できる。
  • 歩いて数分の場所にコンビニがあるので、買い出しとか出来る。
  • 回線が早くて快適。
  • 24時間風呂に入れる。
  • 飯がなかなか旨い。

といった感じで、環境については文句無し。ひたすらAngularの勉強してただけなんですが、凄く集中できた。

Reduxの再入門

去年はずっとSPAの開発を業務でやっていて、そこで常日頃触れていたReduxについて復習したかったので再入門してた。

ひたすら公式ドキュメントを読み込むのもアリだと思ったが、動画を使った学習を試してみたかったのでUdemyで学習コンテンツを買って勉強してた。買った動画は↓。

https://www.udemy.com/react-redux/

内容も結構良かったし、セールで安売りしてる事も多いのでオススメ。

ハマったこと

学習コンテンツが少しだけ古いので、使用しているモジュールを現行の最新に上げようとするとハマる。

具体的にはreact−routerのバージョンが2系だったり、webpackが1系だったりするので その辺を雑に最新にすると、そもそもローカル環境の立ち上げに失敗したりして冒頭からハマる事になる。

ハマる経験をしたい人は、あえてやってみるのも一興かも。

GWが終わってからの予定

フロントエンドエンジニアの需要がありそうな会社を探して、会社訪問でもして行く予定。 会社を6月くらいに辞められるよう、地道に動いていきます。

以上。

Chrome Tech Talk Night #10に参加してきた。

朝起きたら書こうと思ったが、絶対書かない未来が見えたので寝る前にブログを書く。

イベントURLは↓。 Google Developers Japan: Chrome Tech Talk Night #10 を開催します

  • Progressive Web Appsの名付け親が来るのかー、面白そう。」
  • 「HTTP/2はめっちゃ気になるから聞こう。」
  • 「ServiceWorkerはプロダクトで使ってないからよく知らんけど、まあ・・とりあえず聞いとこう。」
  • 「通訳無しだけど、DevFest.asiaで二日間英語漬けになった時に比べればチョロいでしょ」

こんな感じの心境で参加したので、適当に感想書いてきます。

一部のセッションを除いて、↓で録画が見れるので気になる人は見てみると良いかもしれないです。

www.youtube.com

“HTTP/2” 😂

@DasSurma さんのセッション。

「HTTP/2化すれば、とりあえずページの表示早くなるよ」的な話からスタート。 その後は、HTTP/1.1だとなんでページの表示が遅くなるのかを聞いた。

主な理由は

  • 「レスポンスが遅いリクエストが一個あると、その後にリクエストにも影響が出る(ヘッドオブラインブロッキング)」
  • 「一度に張れるリクエストの数が少ない(6つとかそれくらい)」

HTTP/2だとTCPコネクション内でストリームの多重化が出来たり、張れるリクエストの数が多くなるから効率的ですね、という流れ。

(HTTP/1.1環境での高速化を図る場合は、画像とかSVGのSprite化をしたり、JSのbundle化とかして頑張るのが一般的なので 早くwebpack捨てたいなって思いながら聞いてた。)

その後は、

  • HPACKを使ったヘッダー圧縮の話
  • HTTP/2を使うならHTTPS化ほぼ必須なのでは
  • ローカルでHTTP/2サーバー作って開発する
  • HTTP2 PUSHの話

など、色々な話を聞いてた。その中でも、ローカルでHTTP2サーバー試せる話は良かった。 URLは GitHub - GoogleChrome/simplehttp2server: A simple HTTP/2 server for development。まだ試してないけど、dockerでも動かせるっぽい。

HTTP/2以降ガイド、みたいなページも共有されていた気がするけど、動画から掘り起こすのが面倒になったので省略。

Streams (Streamy streamy stream stream)

@jaffathecake さんのセッション。ServiceWorkerの仕様決めに関わっている方からのServiceWorkerの話。

async awaitを使ったコード説明からスタート。次にasync Iteratorsの話になって一気に分からなくなった/(^o^)\。

帰り道に調べたんですが、ES2017の仕様なんですねー。 GitHub - tc39/proposal-async-iteration: Asynchronous iteration for JavaScript

セッションのメインになっていたのは、Streamsという新たな仕様の話でした。 集中して聞いてたつもりなんですが、正直あまり理解できてないので明日復習します。

HTMLのパースが始まるまで、他のリソース(CSSとかJSとか画像とか)のリクエストが始まらなくて表示が遅れるからasync属性で並行してリクエストしておく。SPAは最初に読み込むJSがデカイから初回表示が遅い。SPAは複雑だから、streamを使ってHTMLを構成していく仕組みを作ろうとしている。という感じの話は聞いた気がするけど、脳内で上手く纏まってない。

Real World PWA Performance

@slightlylate さんのセッション。

動画も非公開だし、ここでは詳細を書かないことにするが、ページの表示速度についての話が主だった。 パフォーマンス計測をWebPagetestで行って、色々デモをやっていた感じ。

スペックがそんなに高くなくて、回線状況も良くない端末でページを開いた時に firstviewまで何秒かかるかとかを可視化出来るので、使った事がない人は触ってみると良いかもしれないです。

懇親会

夕飯も食べずにセッションに集中して腹ペコだったので、ピザを遠慮なくムシャムシャしてました。

話しかけた人がたまたま「Angular使ってる人」「ScalaとかJavaでサーバ側やってる人」「Railsやってる人」という面々で、それぞれ違う目線の話が聞けて楽しかった。自分もReactの話とかすれば良かったし、名刺交換とかすれば良かったなとちょっと後悔している。

反省

英語を話せないと、普段出会えない人と話すチャンスすら掴めないと強く感じたので、本気でなんとかしようと思った。

ある程度は聞けて書けるとはいえ、やっぱり日常会話レベルで話せないと気軽に質問とかするのは辛い。

PassiveEventsListenerを試験的に入れた

EventListenerOptions/explainer.md at gh-pages · WICG/EventListenerOptions · GitHub

今個人的に熱いと思っている↑を、関わっているプロジェクトに試験的に入れることにしてみた。 入れることにした理由としては、

  • スクロール時に発生するイベントが多い画面があるので、少しでも軽くしていきたいと考えた。
  • ブラウザ対応が割と進んできた。(IE11から目を逸しながら)

この辺りが大きい。ブラウザの対応状況については↓を見ると良い。 http://caniuse.com/#search=passive

Safariも10以降であれば対応しているので、iOSユーザが多めなサービスであれば、入れるメリットが大きいと思う。

polyfillを書く

少し調べたらpolyfillはちょこちょこ見つかったのだが、最小限の実装で済ませたかったので自前で簡単に書いた。 解説とサンプル説明をQiitaにも上げているので、興味のある人はご覧ください。

間違った説明とかしてたら指摘頂けると助かります。

入れた感触

「目に見えて軽くなった!」という程ではないが、スクロールの詰まりは多少改善されたように思える。 特にモバイルで、「スクロールに追従する要素」「lazyload」のコンボをキメている画面については大分マシになった印象を受けた。

更なる改善

スクロールに追従する要素については改善し切れていないので、position:stickyの先行導入を検討中。

stickyの導入でスクロール時の負荷がより減ると良いのだが、どうなるかはまだよく分からない。