みんなの洋楽ランキングを超絶アップデートした
長かった〜（３週間）
「いいね！した曲の一覧が見れるようにしよう」
とひょんなことから大規模リファクタした。マジ週5で働いて、子育てして夜中やるみたいな感じで超疲労。
もうやるだけやった（迫真）
やったこと（フロントエンド）
webpackを3から4にバージョンアップ
これやらないといろいろあかん。（主にTypescript最新）。webpack4からUglifyEsPluginとか使わなくてもminify出来るのでかなりシンプルになったりといろいろ良くなったのでwebpackをゴリゴリに変更した。というのもASP.NET Core 2.1で Reactテンプレート使って作成したもののwebpackやらpackageやらいらないものが多すぎたので削ぎ落とさないとアップデートするのが大変だった。
typescript3.6.3から4.0.3、react 16.9.0から16.13.1へ
今まで地味〜にアップデートしていたのでそこまで苦労せず。
axios導入
ライブラリ使わずにFetch APIを使ってきたのだが、Jsonパースするのにいちいち面倒だったりと使い心地が悪いのでaxiosを導入。インタセプタを使うためってのが一番の理由。Fetch APIにもインタセプタあると思うけど、調べる必要性が感じられず。
redux導入
リアルタイムにいいね ！のstateを描画したかったので、この際にredux入れるかぁって感じで導入。最近のトレンドでFluxを多用するのはどうなの？って風潮だし個人的にもそこは同意なので必要がなければ入れないつもりだったけど、1アプリにグローバルな状態は大体必要になる。
ESLint導入
prettierしか入れてなかったけど、どうせリファクタするなら入れるかと思い導入。typescriptにESLint入れるのはちょっと一手間。調べればいくらでも出てくるから良いけど、１から調べるのは仕事じゃなきゃやりたくないなぁ。
any撲滅
と言いながらもESLintルールに"@typescript-eslint/no-explicit-any": 0が入ってるんだけど（笑）。Typescript信者じゃないし、最近のトレンドについていくためだけに使ってるって感じもあるからルールで縛られなくても良いかなと思って無効化した。とカッコつけたものの、結局はリファクタに心折れたときに無意識に無効化してた（笑）。まぁ、1年振りぐらい見ると本当にわからないから知らない人が書いたコード見るなら型はあった方が良いなぁ〜と思った。過去の自分は他人だと感じた。
ちょっと拘った実装
検索フォームの遅延リクエスト
入力する度にリクエストを投げるといろいろ死ぬので、入力完了を遅延させている。
一般的なテクニックとしてはスタックアルゴリズムで入力時にpush、setTimeoutでpopしていくって感じだけど、それを意識せずに使いたかったのでこんな感じで使えるようにした。結局はスタックを隠蔽して戻りをPromiseにしたってだけだが。300msは人間が入力完了する平均的な時間らしい。
<input onChange={onChange} /> const interval = 300 // ms const input = new Input(interval) onChange = async (e) => { if (await input.on()) { // 入力完了 } }
ローディング
今までは思考停止して
this.setState({ loading: true }) // 通信 this.setState({ loading: false })
って感じだったけどあまりにも冗長すぎるし何よりダサいのでちょっと真剣に考えた。上記のように通信ごとに括ってローディングを設定するのが嫌だったので以下のようにした
<Loading>
// 通信後に表示されるJSX
</Loading>
インタセプタでリクエスト数をreduxで保持、終了したらデクリメント。リクエスト数 > 0であればローディング表示みたいな。
複数のコンポーネントでリクエストが送信されてると詰むので頭の中にある案を実装したかったがやりすぎ感が強いので困ったら考える。本当は最低何msローディングを表示させるかとかオプションあるけど割愛する。
renovate導入→廃止
どうせ動作確認しなきゃだし、いらんな。って感じで廃止。便利そうに見えて全く便利じゃなかった。
やったこと（バックエンド）
Roslynator導入
C#の静的解析はディファクトスタンダードなものがないので、CLIでも使えるRoslynatorを導入。
github.com
う〜〜〜〜ん。。macだとcliが全く使いもんにならん（多分Linuxも）。Windowsであれば良いかもって感じ。現在のC#はWSL2で使い分けるのが楽しい開発スタイルだと思う（※WEBにおいては）。
パッケージはアップデートせず
やったことなのにやってないことを書くのはどうなのって感じだけど、.NET CoreとC#の魅力をちょびっとだけ。基本的に.NET Coreのコアアップデートで破壊的変更は結構少なめ。C#に関しては全くない。とにかくアップデートの容易さとLTSが3年と長期間サポートが魅力。今回、ここら辺の変更がなかったのでフロントエンドに注力出来たというのもある。言語仕様的にもある程度トレンドには乗っかってるし、バージョンアップによる変更がないのでなんか知らないけどパフォーマンスよくなってる的な感覚がある（実際に向上はしている模様）。とにかくライブラリや周辺ツールは貧弱の極みみたいな感じなので悪いところをあげたらキリないが、保守が他言語に比べてほぼないようなもんなのでモダンを維持し続けられるのは最高。ツール郡が貧弱すぎるので、構成するのが難しいのでおすすめは出来ないが、Rails等、フレームワークのアップデートに苦戦してる現場をみてるとやはりそこの容易さは強み。
ステージング環境導入
Azure App Service Linuxの無料プランがあるのでそこにデプロイしてる。releaseブランチにマージされたらステージングデプロイ。masterブランチはプロダクションって感じで。今回、超絶アップデートしたので流石に動作確認は必要だなと思い導入。CIはGithub Action
tekitoumemo.hatenablog.com
やってみて
みんなの洋楽ランキングは5万UU、15万PVで会員数も非公開ながらとそこそこスケールしてるので、継続的なアップデートとバグを生みにくい構成作りが必要なり、60点ぐらいの構成は組めたと思う。あとはテスト系の土台作りとコンテナ化かな。コンテナ化はGCPに移したいからってのがあるが、経費的にもAzureでも安いし大きな問題が起きてないのであと回しに。テスト系はやる気が起きない（笑）2020年はGihub Actionからフォーマッター、静的解析、コアアップデート等土台の再構築をやった年となった。機能的な面では去年と全く変わってないが、まぁ良いでしょう。あとは年末〜年明けに向けてアクセスが増加するので、様子をみつつスケールしていく感じで今年はおわろうかなと思います。
面接まじむずい
前回、昔に受けたかった企業に書類が通ったという内容を書いた（スカウトだったのでほぼ100%通るのだが）。で、面接をやったが、まじでなにも答えられず当然落ちた。落ちた理由は明確で圧倒的に熱量が足りなかった。答えられなかった質問を上げて、答えられない理由を考えてみる。
当社の数あるサービスからなぜ、このサービスを選んだか？
A. スカウトにきた求人がそのサービスだったから。
とは答えられず、「スキルセットが一致した」みたいなことを答えた。他のサービスでも良いのか？って聞かれたから「他のサービスの求人があるのは知らなかった」って答えた。
なぜ、フリーランスをやめて転職するのか？
転職する意思は50%ぐらいで、良いところがあれば程度なので「特に理由は考えてなかった」って答えた。現時点ではこの回答しかないが、もうちょっと言い方があったかもしれない。
弊社に入ってやりたいことはあるか？
これも「特に考えてなかったので、ちょっと考える」と言って、大規模サービスなので安定して機能を提供していきたいと答えた。あなた自身はやりたいことはあるかと深堀されたが、いやっ、ねぇよ。。流石に「特に考えていません」って言った。
弊社に入ってどのようなキャリアを考えているか？
これも超詰まる。適当に開発経験してPMになりたいとか言っておけば良いのだろうか？ぶっちゃけ入ってからロールモデル見つけて、キャリアを考えるものだと思っているからなにも知らない状態では全部嘘になる。結局、大規模サービスなので安定して機能を提供していきたいと答えた。それキャリアプランじゃないからw
総括
圧迫感も全くなく、良い面接してもらえた。最後の質問で「ないですw」って笑っちゃったけど、呆れられながらも嫌な顔されなかったので良い企業だと思う。
やはり熱量が足りない
とにかくテンプレ質問にまったく答えられなかった。今の仕事も自分でアポ取ってこぎつけたりと、より良い条件の仕事を常に探しているだけなのでその仕事でなければならない理由なんて全く考えてなかった。転職とフリーランスで委託先が変わる違いは、マインドが変わるか変わらないかの違いだと思う。フリーランスであれば自分が得することだけ考えれば良いが、転職は自分の利益とどれだけ貢献出来るかを考えなければいけない。テンプレ質問なので、これの解を用意すれば良いのだが、人間って嘘はなかなか付けないものなのでマインドから変えてく必要がありそうだなと感じた。マインド面に関しては、全く良い方向性が見つからないのでエージェントのカンセリングを受けて、思うことがあればまた書こう。面接まじむずい
転職活動中
現在、フリーランスになり3年目。報酬や働き方についてはなにも困ってないのだけれども、もう30だし、あまり魅力的な働き方でもないなと感じている。そんなこんなで、今は働きながら3年間ぐらいかけて良いところがあれば所属する方向で転職活動をしている。というかし始めた。
誘い
社会人になって年数を重ねたせいか、いくつか誘ってもらえてる。今の現場、前職の同僚の会社、新卒で入社した取引先などいくつかあるが、あまり魅力的に感じていない部分となんとなくエージェントを介さないと人間関係の面で足かせとなりそう。
転職活動
まだ1社しか受けてないが、基本的には上場している企業を受けようと思ってる。もちろんベンチャーも魅力的であるし、あまり経歴がよくない自分にとっても好条件な会社に入りやすいと思う。ただ、前職を経験して、経営が関わる距離が近いとその分ノイズが多い。それで誰でも知っているサービスの会社に応募してみた。ちなみにこの企業は6年前の転職活動中に受けたいなと思ってた企業だったが、応募資格すらなかった。もちろん、入社難易度が高く、高学歴、高経歴がほとんどなので、wantedlyのエントリ数も多いので書類からダメだろうと思ったら、ものの数時間で通った。学歴や経歴がなくてもフリーランスで活動してること、リーダー経験が豊富（みんな嫌がるからやらされてた）なことが影響しているのだろう。仮に受かったとしてもいろいろ調整しながら進めたいので、条件が会うまで地道に活動しようと思う。
App Service on Linuxが安くなった
去年のMicrosoft Build 2019でApp ServiceのFreeプラン（無料）が発表されました。それと同時にキャンペーン価格としてLinuxのBasicプラン（コア1、RAM1.75G、STORAGE 10G）が2020年1月まで1500円/月 程度となりましたが、謎に全くアナウンスが無い状態でキャンペーンが2020年7月まで延長となりました。そして今月、キャンペーンが終了かと思いきや、通常の料金として1500円/月 となったようです。ただ、期限なしですが「キャンペーン価格」と書いてあるのでいきなり値上げする可能性も0ではないかと思いますが、いまのところ安く利用出来ます。Basicプランであればherokuより安い！
買ってよかったもの【2020年上半期】
今年はコロナで不況になって節約気味なのであまり大きな買い物してない（してる）。皮肉なことに、不況ながらもフリーランスになった中で一番働いてるので前半後半比較したくて書いてみた。
Macbook Pro
￥267,080
やっぱこの金額出してもこれ買ってよかったなと思う。僕はマウス、キーボード、外部ディスプレイを使わない主義なので、そこらのUXが極まってるmacでよかったかなと思ってる。最近WSL2が出てWindowsも最高らしいのでインターフェース重視で選ぶならSurfaceでもよかったかも。
(JS)同じオブジェクトの繰り返しを作る
いつも忘れてぐぐる
new Array(10).fill({ hoge: 'piyo' })
HTMLCanvasElement.toBlobくそ遅い
3072 x 1920 とかでかい解像度のcanvasをBlobに変換するとクソ遅い。
canvas.toBlob((blob) => { // Do something })
callbackつらいのでPromise化
new Promise((resolve) =>
canvas.toBlob((blob) => resolve(blob))
)
でも遅いので結局自前
function toBlob(base64) { const bin = atob(base64.replace(/^.*,/, '')) const buffer = new Uint8Array(bin.length).map((_, i) => (bin.charCodeAt(i))) return new Blob([buffer.buffer], { type: 'image/jpeg', }) }
OffscreenCanvasだとちょっと早い。toBlobはノンブロッキングっぽいのでビデオ止めると早くなる（なった）
