tekitoumemo’s diary

.NET CoreとVue、Angularなどの技術ブログを書いています。みんなの洋楽ランキングを運営しています。

みんなの洋楽ランキングを超絶アップデートした

mygkrnk.com

長かった〜(3週間)

「いいね!した曲の一覧が見れるようにしよう」

とひょんなことから大規模リファクタした。マジ週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アプリにグローバルな状態は大体必要になる。
f:id:tekitoumemo:20201013221756g:plain

ESLint導入

prettierしか入れてなかったけど、どうせリファクタするなら入れるかと思い導入。typescriptにESLint入れるのはちょっと一手間。調べればいくらでも出てくるから良いけど、1から調べるのは仕事じゃなきゃやりたくないなぁ。

any撲滅

と言いながらもESLintルールに"@typescript-eslint/no-explicit-any": 0が入ってるんだけど(笑)。Typescript信者じゃないし、最近のトレンドについていくためだけに使ってるって感じもあるからルールで縛られなくても良いかなと思って無効化した。とカッコつけたものの、結局はリファクタに心折れたときに無意識に無効化してた(笑)。まぁ、1年振りぐらい見ると本当にわからないから知らない人が書いたコード見るなら型はあった方が良いなぁ〜と思った。過去の自分は他人だと感じた。

ちょっと拘った実装

検索フォームの遅延リクエス

入力する度にリクエストを投げるといろいろ死ぬので、入力完了を遅延させている。
f:id:tekitoumemo:20201015001432g:plain

一般的なテクニックとしてはスタックアルゴリズムで入力時にpush、setTimeoutでpopしていくって感じだけど、それを意識せずに使いたかったのでこんな感じで使えるようにした。結局はスタックを隠蔽して戻りをPromiseにしたってだけだが。300msは人間が入力完了する平均的な時間らしい。

<input onChange={onChange} />

const interval = 300 // ms
const input = new Input(interval)

onChange = async (e) => {
  if (await input.on()) {
    // 入力完了
  }
}
ローディング

f:id:tekitoumemo:20201015005004g:plain
今までは思考停止して

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からフォーマッター、静的解析、コアアップデート等土台の再構築をやった年となった。機能的な面では去年と全く変わってないが、まぁ良いでしょう。あとは年末〜年明けに向けてアクセスが増加するので、様子をみつつスケールしていく感じで今年はおわろうかなと思います。

子持ちで個人開発はむずい

子持ちで個人開発はむずい、というかスケジュール管理しないと死ぬ。

 

朝、支度して保育園連れてって、夜寝かせつけからの個人開発。こどもかわいいから育児も本気。まじ疲労やばい。

 

みんなの洋楽ランキングは完全黒字化してるし、ほっといても良いレベルだったんだけど、ひょんなことから一年ぶりぐらいに新機能を入れたらコードの汚さやレガシー感強めでフルアップデートしてる。ざっと

 

webpack3→webpack4

react最新

redux導入

eslint

axios導入

any撲滅(typescriptだから)

package.jsonフルアップデート+不要なの削除

Roslynator(C#静的解析)

nugetフルアップデート

renovate導入

 

かなり勢いづき気づけば100ファイル以上のdiffに。仕事だったら200%リジェクトされる。

 

これを一週間、子どもが寝たあとの数時間やってるもんだからマジ眠すぎて辛い。みんなの洋楽ランキングに愛着あるし、ユーザー数も多いからモダンになるモチベが一気に上がり、アドレナリン出まくって開発した。マジ疲労すぎてヤバい。

 

その疲労の中にも個人開発の気づきがあって

 

一日の作業時間を決める

5日以内のタスク単位でリリース

仕事と違う技術はなるだけ使わない(調査工数とモチベが無駄に上がる)

機能改修で過去のコードは見ない

過去のコードは消すときとリファクタのときだけ見る

過去の自分は知らない人

静的型付き言語使う

命名は具体的に

 

結局は細かい単位でタスク切ってやればいいって話。言語に関してはTypescript、C#使ってたのにもかかわらずany、dynamicを多用してて、過去の俺さんこれは何ですか?状態になった。命名に関してはカッコ悪くてもわかる名前であることは大事だと思った(searchコンポーネントとか読まなきゃわからん)。

 

まぁ〜〜〜〜でも個人開発は結局モチベだからやりたいときがやりどきなんだけどねぇ〜〜

 

子持ちで個人開発はむずい

 

面接まじむずい

tekitoumemo.hatenablog.com

前回、昔に受けたかった企業に書類が通ったという内容を書いた(スカウトだったのでほぼ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より安い!


azure.microsoft.com

買ってよかったもの【2020年上半期】

今年はコロナで不況になって節約気味なのであまり大きな買い物してない(してる)。皮肉なことに、不況ながらもフリーランスになった中で一番働いてるので前半後半比較したくて書いてみた。

Macbook Pro

tekitoumemo.hatenablog.com

¥267,080

やっぱこの金額出してもこれ買ってよかったなと思う。僕はマウス、キーボード、外部ディスプレイを使わない主義なので、そこらのUXが極まってるmacでよかったかなと思ってる。最近WSL2が出てWindowsも最高らしいのでインターフェース重視で選ぶならSurfaceでもよかったかも。

体重計

www.amazon.co.jp

¥3,299

マジ太り過ぎやばいので買った。自粛期間意識したら五キロ痩せた。まだデブだけど(笑)

手袋

¥1,480

www.amazon.co.jp

原チャクソ寒いので買った。速攻ほつれたけど、雨風割としのげるからよかった。中型以降はこんなんじゃだめだけどね。

ワークマン イージス

¥6,800


workman.jp

あまりカッコよくないけど、ものの30分ぐらいであれば原チャ程度はしのげる。首元や地味な配慮がうれしい。

AirPods Pro

¥27,800

www.apple.com

結婚記念日に嫁からもらった。ノイキャンすごい。地味に充電が持つのがいい。でも高すぎ。

ASUS Zenfone Live (L1)

¥18,180

www.amazon.co.jp

iphone10 max持ってたけど壊しちゃったので、ローン終わるまでのしのぎで。この値段だから許せる。

ルーター

¥9,980

www.amazon.co.jp

自宅が3LDKの70平米以上あるので寝室や納戸まで全然届かなくなった。結局これ買っても気持ちよくなった程度。

Kindle Fire HD 10

¥15,980

www.amazon.co.jp

車で娘がぐずるので、娘用に買った。ネトフリとyoutubeしか使わないので普通にコスパ最高だった。

タブレットを車載にするやつ

¥1,666

www.amazon.co.jp

うちのチャイルドシートが360度回転するやつなので前向き後ろ向きにも付けられるようにこれを買った。えぐい安いけどかなりよい。

ノートPCを縦置きするやつ

¥4,090

www.amazon.co.jp

wifi届かない問題で書斎でネットが届かないので基本リビングで仕事してる。ダイニングテーブルに置くために買った。まぁよいって感じ。

トルクレンチ

¥3,890

www.amazon.co.jp

太ってきたし、運動がてらタイヤぐらいは自分で変えようと思い購入。工賃と同じぐらいの値段なので体力的な面を考えると得はない。

OLYMPUS ミラーレス一眼カメラ

¥99,240

www.amazon.co.jp

娘をちゃんと撮りたくて購入。購入してから単焦点レンズというものがないとオシャレに取れないと気づく。

¥32,598

www.amazon.co.jp

意外に高かった。

中継機

¥3,579

www.amazon.co.jp

ネットが届かない問題が完全に解消された。よくよく調べてみるとルーター隠したくてこれを買ったんですが、遮るものがあると電波くそになるらしいのでこれが原因でした。まぁ中継機でチャラなのでまぁ良いでしょう。

レイバン

¥ 21,800

japan.ray-ban.com

単純にカッコつけたいから購入。梅雨だとマジつける機会ない。

思ったほど、お金使ってないな。