gaaamiiのブログ

悪気なく間違ったことを書いている時があります。コメントやTwitter、ブコメなどでご指摘ください

余計な小細工をする前に本体の最新バージョンを確認するの大事

Formikというライブラリを使ってフォームのReactコンポーネントを作っていたところ、なんだかおかしな挙動になってしまった。

textarea要素にテキストを入力しても、ボタンが押せるようにならない。

このフォームには、文字数は最低でも1文字以上というバリデーションをかけていて、正当ではないときはボタンを押せないようにしていた。期待しているのは、文字を入力しているときにその正当性がボタンの状態に反映されることだが、どうやらテキストエリアからフォーカスを外さないと、ボタンの状態に反映されないようだった。これは困った。

FormikのREADMEを読むと、validateOnChangeというpropsがあることがわかる。これをtrueにすればいいのか…?と思いきや、これはデフォルトでtrueになっている。関係なさそうだ。試しに明示的にtrueにしてみても、挙動は変わらない。うーむ。

Formikのissue一覧のページで、これを検索してみた。validateOnChangeがうまくいかないと嘆いている人が他にもいればしめたものだ。幸運なことに、こんなissueが見つかった。

答えとなっていたコメントはこれ。

しかしちょっと待ってくれ。フォームとして当たり前の挙動にしたいだけなのに、なんでよくわからん関数で包んであげないといけないんだ!

もう少しissueを眺めていると、こんなものが。

https://github.com/jaredpalmer/formik/issues/353

やはり同じことで困っている。

む、まてよ。

よくみると、こんなプルリクがこのissueを参照している…。

Fix #280. Fix the definition dirty and isValid #365 @justengland

プルリクの中身を見てみると、、どうだろう!!まさしく求めていた変更っぽいものが入ってるではないか!

このプルリクはマージされ、バージョン0.11.0としてリリースされていた。自分が使っていたのは0.10.5だったので、すぐさまバージョンを上げて実行すると…

直ってる!

バリデーションの結果がボタンの見た目に反映されてる!嬉しい!!

——

ということが、今日ありました。些細な例ですが、以下のようなことを学びました。

  • github上で星が多いからといって安定したモジュールだというわけではない
  • 当たり前の挙動を実現するために余計な小細工をする前に、本体が直されていないか(あるいは自分で直してPRを出せないか)確認するの大事
  • だいたいライブラリを使っていて困ったときは自分だけではない

仮想開発合宿どうだろう

友だちとこういうことをしたいメモ。

自宅でいいのでは

自宅でもいいけど他のこと(家事やら飯作るやら)をする余地があったらだめ

ねらい

  • 気をそらさずに一気に一つの何かを作り上げる体験をしたい

Elm入門者向けハンズオン行ってきた

集合した様子

(懇親会後の写真。ハンズオン参加者はもっと多かった。指の形はElmのEらしい)

やったこと

  • Elmな人の発表を聞いた
  • チャットアプリを実装する課題をやった

自分のツイート

感想

  • Fringe81さんのUniposというプロダクトでElmが採用されているという話に衝撃を受けました
  • Elm今後も書いていこうという気持ちになりました
  • ABABさんにめっちゃ丁寧に教えてもらって感謝してます
  • いきなり実装は難しいという意見はあったけど、座学の時間を長くしたとしても難しいことに変わりはないと思うので、今回のように最低限の説明→実装という形は良かったと個人的には思います(メンター陣がいなかったとしたら厳しそうだけど)。

auやめてLINEモバイルにした

ピザ頼むのより簡単だった。

自分が選んだのはこれ。

https://mobile.line.me/plan/communication-free

3GB、オプションは付けなかったので月額1690円。 自分は出先でほぼツイッターとLINEしか見ないのでこのプランが完璧に合ってると思う。

安いのももちろん嬉しいんだけど、契約情報見るのにいちいち使いづらいアプリやウェブサイトを開く必要がなくなったのが嬉しい。

LINEモバイルの場合は、LINEアプリでLINEモバイルアカウントを友達に追加すると色々確認できるようになってる。

f:id:shgam:20180119202910p:plain

便利。

あと、友だち招待コードみたいなのがあるのでほしい人はツイッターとかで言ってください

25歳になりました

25歳になりました。 24歳も無事生き抜くことができて嬉しいです。 25歳も頑張ります。

Elm Tutorial 読んでる

これ読んでる。

なんか趣味でReduxやろうと思ったけど、せっかく趣味なんだから何か変わったものを触りたいということでElm触ろうとしている。シンプルっぽくてよさそうだけど諸々理解が追いついてない。自分用Markdownエディタ作るところまではなんとか頑張りたい。

ISUCON7予選にくもキャストとして出場して敗退しました

ISUCONに初参加しました。

で発表されている通り、

217位 14,252 くもキャスト

でした。とても悔しい。

メンバー

選んだ参考実装

ルールとかベンチ実行方法の把握

始まってまずよくわからないままベンチ実行してみたらエラーになった。レギュレーション読んだら3台サーバがあって2台はWebサーバー、1台はDBサーバーとのことだったので、ベンチ実行先は1台のWebサーバーに対してでいいんじゃないかってことで1台を決めてそこでずっと作業していた。

やったこと

  • インデックスはる
  • SQL直す
  • Nginxの使い方をぐぐって設定ファイル更新して sudo nginx -s reload

インデックス追加をふるかわくんがやってくれたり、N+1つぶしたら地味にスコアが上がったり、Nginx実践入門に書いてある通りにしてみたらスコアが1万5000点くらいになったりした。Nginxの設定についてはなんかキャッシュすれば速くなるだろうくらいの認識で、各directiveを理解してconfファイルを作ったとは到底言えない。

その他感想

  • とにかく実力不足だった
  • 各年のISUCON過去問や他社の社内ISUCONなどあれば今後も時折漁ってやっていきたい
  • エンジニアやってるはずなのにHTTPサーバとかRDBMSがまだ深く理解できていないので疑問をつぶしていきたい

関連

何か思い出すための通知はすべてTwitter botに任せたい

何か覚えておきたいことがあっても、何かしら強制的に思い出させる仕組みがないと忘れてしまう。興味が薄いことや面倒で忘れたいことほど、その傾向はひどい。

興味があるはずの技術的なことも、普段使わない知識だとせっかく本を読んでも次の日には忘れていたりする。たとえば最近DNSの本を読んだはずなのに、ドメインに関するLTを聴いたときに、Zone ApexのApexってどういう意味?というのがすぐ思い出せなかったりした(ぐぐって「頂点」という意味だったのを思い出した)。立派な記憶力を持つことが目的ではなく、必要なことを必要なときに思い出せる程度でいいので、なにかいい方法はないか。

トイレに貼り紙

考えてみたら、トイレに貼り紙をしておく方法を思い出した。受験勉強や資格勉強のときなどはたいていこれをやって、良い感じだった気がする。しかし、日々の細かい予定やら忘れそうなこと全てを、トイレの貼り紙に詰め込むことは現実的じゃない。代わりに、トイレ的な場所をiPhoneの中に見つければいいのでは、と思った。

Twitter botに任せればよさそう

自分の場合はこれがTwitterだった。トイレの場合は考えるより先に身体がトイレへ行くように促してくるけど、Twitterもどういうわけかそれに近い感覚になってる。Twitterを開くときに、情報が欲しいとか誰かに何かを伝えたいとか、そんなことを考えていない。じゃあTwitter botに予定通知やら思い出したいこと通知を任せればいいのでは。

IFTTTで Google CalendarTwitterを連携

予定であれば、Googleカレンダーに予定を入れて、それをTwitterbotアカウントにツイートさせればいいと思った。IFTTTでその設定ができる。Googleカレンダーの予定が始まったときに@付きのツイートが自分に飛んできていれば、Twitterを開いたときに今自分が何をしているべきなのか気が付く。

f:id:shgam:20170813191703p:plain

そのほかやりたいこと

  • Scrapbox
    • Scrapboxのメモをランダムでとってきて定期的にツイートさせたい。IFTTTで出来ると嬉しいけど今は出来ない。何か作るしかない。
  • RunKeeper
    • 走った記録も自分宛にツイートさせたい

検討したけど諦めた方法

iPhoneのpush通知

一生懸命見ずに通り過ぎてしまうので、あれをちゃんと活用するのは自分の場合無理そう。

メール

メールも流してしまうのでだめ。

なにがしたいのか

「◯◯を管理するアプリ」みたいなのがたくさんあって便利なんだけど、それすらも続けられないダメ人間なので、ジャンキーな情報がだらだら流れるところにその通知を集めれば少しはセルフマネジメント的なことがうまくいくのではないかという試み。

ISUCON7出るぞ

ISUCONに出ることにした。100万円欲しい。

ISUCONとは

Iikanjini Speed Up Contest。LINE株式会社主催。今年で7回目を迎える。

何をするのか

ウェブアプリをいい感じに速くする。ベンチマークをとってスコアが高いチームが勝ち。

チーム

2人〜3人。ポッドキャストの宣伝がてら、くもキャストというチーム名でふるかわくんと出ようと思っている。もう1人誰か誘った方がいいんだろうか。

やばさ

まともなスコアを取れるイメージが全く湧かない。 過去問の環境がVagrantfileで配布されてるのでとりあえずvagrant upしてruby実装(sinatra)のやつを動かしておお〜と言ってる段階。

ねらい

100万円欲しい

休日の丸の内は人が少なくて良い

昨日は久しぶりの外食、昼からビール飲みたい、でもデートなのできれいめなところで飯を食いたいという感じだったので、丸の内の東京ビアホール&ビアテラス14というところでビールを飲んできました。休日の丸の内はとにかく街に人が少ない。それでもって道やら建物がきれいで飯もうまいのでとても良い感じでした。店内はそれなりに賑やかでちょうどよかったし、何より牛すじピザが美味しかったです。

r.gnavi.co.jp

帰りは有楽町の無印良品涼んで買い物をして帰宅。

こういう人混みを避けるデートプランみたいなものを誰かまとめて欲しいけど、人混み嫌いの人たちが集まるデートスポットみたいなのが出来てしまったらそこに人混み嫌いの人の人混みができてしまって本末転倒っぽい。

スタディプラス株式会社に入社して1年経ちました

スタディプラス株式会社に入社して1年経っていたので急いで1年を振り返りたいと思います。

やってきたことざっくり

ウェブフロントエンドの方をやらせてもらってきて、今もウェブフロントエンドの方をやらせてもらってます。とてもやりがいを感じてます。

やってきたこと詳しく

https://studyplus.jpAPIと切り離されているので、僕らウェブチーム(二人)は基本的にはAPIからもらったデータをごにょごにょしたりユーザーがブラウザ上で起こした行動をAPIサーバーへ伝えるというようなことをやってます。

アプリケーションとコンテンツのSEOを考慮した苦肉の策的な data-xxx 属性

studyplus.jp は記事コンテンツや大学情報ページのようなSEOを気にしないといけないページと、ユーザーが勉強記録をつけるためのアプリとしてのページを一つのアプリケーションとして管理しています。そのため、アプリケーションの大半をJS側で管理するようなウェブフロントエンドではなく、Rails側にSlimテンプレートをたくさん書いて、表示のロジックをRails側のヘルパーやデコレーターで全部やるみたいな部分もあります。RailsとJS側フレームワークの共存はとても単純な仕組みでやっていて、<hoge data-hoge="{ 'my-json': 'my-value' }"></hoge>みたいなものを書いて、コンポーネント側の初期化の際にこの data-hoge の中身をパースしてコンポーネントのプロパティに流し込んでいます。とても低コストで済んでいます。同じようなHTMLをRails側にもJS側にも書かないといけないのが難点ですが、それ以外はそれほど困ることもありません。どこか他の会社でも同じことをやってた気がします。

CSSつらい

CSSはとにかくつらい。知らない人が書いた巨大なシェルスクリプトと同じくらいつらい。

class名を増やさないようにCSSフレームワークの変数をカスタマイズする形でデザイナーのデザインを当てていきつつ、それ以外の最低限について自前CSSを書いていくのが良い気がしている。逆に、CSSフレームワークを使わない場合はCSSフレームワークのような良い感じのclass命名を良い感じにする努力が必要になりそう。正直studyplus.jpの昨年末のリニューアルでは良い感じでできなかったので今になってCSSに苦労している部分があるかなと思っている。

不具合に引っ張られて忙しくなる問題から学んだデグレ防ぐためのテストの大切さ

昨年末急いで作って出して入れてしまった不具合に引っ張られてつらいみたいな場面が何度かあった。リニューアル後の機能開発をしている最中に不具合の報告が入って、謝って急いで直す。しかし不具合を直すのは予定にないので、機能開発の時間が減っていく。不具合を直すのは機能開発より難しかったりするので、どんどん時間が減っていく。うあああ、、ということでテスト書かないとあかんなという気持ちが高まった。やってみて単純に効果があったのはRailsのコントローラのテストで、とりあえず時間がなくても render_views して 200返すことを確認するだけのテストを書いておけば、なんかしらでエラーになるデグレを入れてしまった時に「ああコケたわ」といって気付ける。とても当たり前なことを書いてるような気がするけど、自分の学びとしては、デグレを防ぐためのテストというのがポイントで、たとえばRailsのバージョンをあげたときにどこでエラーが出るかすぐ分かるというのはとても心強い。誰だって書いた瞬間にブラウザで赤いRailsのエラー画面が出ていたら気付くけど、デグレはいつのまにやら起きてて怖い。

まとめ

はてブで話題になってるような記事ばかり読んでいるとこういう素朴な経験がすごいダサい感じがしてブログ書けてなかったけど、1年振り返ってみると色々失敗やら学びがあったなあという気がする。そしてこういう学びがある仕事ができることも、昨年の自分を思い出すと、エンジニアとしてずいぶんいい環境に移ったなと思える。各ポジション募集がありそうなので興味の有る方はぜひ「gaaamiiの紹介で来た」と言って入社してください。以上です。

www.wantedly.com

決まった時間に勉強をする習慣づけをするためのScrapboxを作成しました

決まった時間に勉強をする習慣づけをするためのScrapboxを作成してみました。

参加したい方いらっしゃいましたらTwitterのDMかなんかで招待リンク送ります。

詳しくは以下をご覧ください。

scrapbox.io