カテゴリー: 技術

投稿日:

axios.getの型

1/3（金）

自宅の気温や湿度を表示するwebアプリをいろいろとリファクタリングしていた。APIを叩いたレスポンスには型の保証がないが、 axios.get にジェネリクスを与えておけばその型が来たという想定で書くことができていい感じだった。このコードで渡すジェネリクスを更に外から与えられるT型にしているのは、インフラ層でドメイン層で定義した型を使ってはいけないから（ホンマか？）。

moment.jsはめちゃ便利。JavaScriptの組み込みのURLオブジェクトはパスの結合が便利にできるかと思いきやそうでもない。ホストとパスの結合だけ。

投稿日:

droneで自動デプロイする

12/22（日）

masterにマージするだけでデプロイされてほしかったので。

結論

  • Docker Pipelineでビルドが通るか確認し、OKならSSH PipelineでサーバーにSSH接続してgit clone→docker build→docker runしている。
  • SSH Pipelineはデフォルトでは/tmp下に適当なディレクトリを作ってcloneしてstepを実行していくのだが、サーバーに置いている設定ファイルを使いたい都合でそのデフォルトの挙動を無効にし、cd /home/satoru/workして手動でcloneしている。
  • SSH認証関連の情報はdroneのsecretsに保存してある
    • セキュリティ上の理由で、デフォルトではPRをトリガーにPipelineが実行されるときはsecretsを読み込めないので注意
投稿日:

VPS上でdroneを動かした

12/21（土）

CI環境ほしいので作った。基本的にはこれを読みながら進めるだけ。

結論

  • 単純にドキュメンテーションのdocker runのオプションをdocker-compose.ymlの形式に落とし込んだだけ
  • .env.sampleを.envにコピーして中身を埋める
  • common_linkはVPS上で動かしているnginx-proxyに接続するためのものなので気にしなくていい
投稿日:

ESLint入れた

12/18（水）

TypeScript+ReactのプロジェクトにESLintとprettierを入れた。ESLintのプラグインを上手く組み合わせていくテクニックが難しかった。

結論はこんな感じ。

.eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "tsconfig.json",
    "sourceType": "module"
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended"
  ]
}

yarn lint で能動的にlintを実行できるようにしつつ、lint-stagedとhuskyでcommit時にも仕込んだ。

投稿日:

初心者の壁は環境構築/スケーティング巧者/酒蒸しと化したちゃお

12/16（月）

初心者の壁は環境構築

今日はプログラミングを人に教える機会があった。コードを解説するのは簡単なのだが、OSや言語のバージョンの問題を解決するのは（リモートだったこともあり）非常に難しかった。

今回のケースではPythonのIDLEがMacにプリインストールされている2.7を見てしまっていて、pipすら入っていなかった。一方で3系もanacondaでインストールされており、pip installで入れたつもりのパッケージはそちらに入っていた。

Pythonの環境構築は（ググって見つかる記事の質の低さ・不統一さを含めて）難易度が高い。プログラミングを教えるならそういうところを含めてサポートする必要がある。デバッグ実行の方法やlinterの設定などもそこで教えれば学習効率も上がりそうだ。

ちなみに僕は環境の切り替えが必要になったことがないのでpyenv+pipだけでやっている。

スケーティング巧者

既に書いたテーマかと思ったが、検索したらまだ書いてなくて驚いている。

僕はフィギュアスケートを見るのが好きだ。ユーリ!!! on ICEの影響だ。

フィギュアスケートのシングルではジャンプの配点が高い。度重なるルール改正で若干のトレンドは変動するものの、やはり高難度ジャンプを複数回成功させるのが強い。

しかしながら。スケートを演技としてみると滑りの上手さ、スケート靴の操り方の上手さが印象に大きく響く（もちろんこれらの技術も採点対象ではあるが、配点は小さい）。一蹴りで長く進むとか、加速が速いとか、滑りが美しい弧を描いているとか、上半身の動きが足元の影響を受けないとか。

パトリック・チャン

新採点時代の選手で言えば、スケーティングといえばパトリック・チャンだ。若い頃からスケーティングの技術は抜きん出ており、2011年シーズンから4回転を取り入れ、以降世界選手権を3連覇した。2014年ソチオリンピックでは羽生結弦に敗れ銀メダルとなった。2010年以前の発展期・2011~ソチの絶頂期・ソチ以降の円熟期でそれぞれ素晴らしい演技を残している選手だが、ここでは円熟期の演技として2017年世界選手権SPを紹介する。

ステップシークエンスから再生されるようになっている。01:36辺りのチェンジエッジ→ロッカー→カウンター（自信なし）は非常にエッジが深い。エッジが深いというのは傾きが大きいということであり、高く評価される。01:48辺りも複雑なステップを踏んでいるのに、軌跡と体重移動によって減速どころか加速している（ファンの間では靴にエンジンなどと言われる）。全体を通して上半身も脱力してしなやかに動いている。スケート靴の接地が柔らかく、流れを損なわない。難易度の高い足技を、明確なエッジで、かつ簡単そうに滑っている。このステップシークエンスはレベル4＋GOE2.1、つまり当時のルールで理論上最高の評価を得ている。

山本草太

パトリック・チャンは引退してしまったが、山本草太はこれからの選手だ。滑らかで伸びるスケーティングに加えて姿勢が美しく、気品がある。手足も長い。今シーズンは怪我から復帰し、4回転サルコウや4回転トウループを成功させている。

ハン・ヤン

彼も怪我から復帰してきた。滑りがずっと速い。圧倒的な幅と高さの3回転アクセルと、深いアウトエッジに乗ったお手本のような3回転ルッツも魅力的だ。

彼らのような美しい滑りを持つ選手が勝てるルールであってほしいのだが、スポーツとしては難しいジャンプが跳べるかどうかで判断するほうが健全だろうし難しい。

酒蒸しと化したちゃお

土日はハッカソンで休まらなかったので今日は休暇を取っている。いつも通り銭湯に行った。今日の入浴剤は祝い酒の湯。確かに日本酒の匂いがした。アルコールは入っていたんだろうか。いや、そうすると子供の入場を制限しないといけないのか？

投稿日:

Yahoo! JAPAN Hack Day 2019 ハッカソン 参戦記

12/15（日）

メンバー

2年前にドワンゴのインターンに参加した6人。我々のチーム以外からも当時のインターンメンバーが2人出場していた。得意分野の内訳はフルスタック・フロント・フロント・フロント・フロント・低レイヤー。

作ったもの

サーバーの異常事態などの通知を受け取ったときに、ラズパイ経由で予め指定したルーティンでデバイスに通電して物理的な通知を行えるソリューション。推しはビジュアルプログラミングができるルーティン作成画面と、ラズパイ側がシングルバイナリであること。デモンストレーションではパトランプとウォシュレットを用いた。

プレゼン動画

1:20:18辺り、24番秘密結社Dev。

やったこと

フロントエンド人材が余ってたので特に技術的なタスクはなかった。が、そういうポジションにいたおかげで個別の技術にとらわれず全体でモデルを共有する重要性がわかった感じはある。

  • リーダーと一緒に諸手続き
  • 買い出し
  • 適当にメンバーの後ろに座って悩みを聞く
  • HTMLペラ1枚書いた
  • プレゼンのアイデア出し
  • 寸劇に出演

学び

技術的な貢献の少なさに反して大きな学びがあった

firebaseがすごい

FunctionsとFirestoreを使った。サーバーやDBの設定を自分でしなくても、Firebaseが提供するAPIをTypeScriptで叩くだけでシームレスに連携できる。細かいチューニングをしたいときには不向きだろうが、素早くプロダクトを世に出すという点ではとても便利なサービスだと感じた。

DDDの意義がわかった

最近は『エリック・エヴァンズのドメイン駆動設計』を読んでいる。この本の序盤では作るべきものをよく考えてモデルに落とし込むことの重要性が語られている。仕事だとすでに完成して動いているプログラムを改修することが多いのであまり実感が湧かなかったが、チームで新しいプロダクトを一から作るとなると書かれていることの意味がよくわかった。具体的にはエンティティと値オブジェクトの区別とか、仕様を精査しながら本当に必要な概念を抽出して名前やオブジェクト構造に反映するとか。

その他お気持ち

  • 軽い気持ちで徹夜しようとしたらめちゃくちゃしんどくて、結局効率を落としてしまった。会社員になったせいで規則正しい生活に体が慣らされてしまっている。
  • ハッカソンで評価されるためにはクリエイターとしての視点の鋭さとエンジニアとしての腕前の高さを併せ持つ必要がある。僕はエンジニアのことを「技術を使って問題を解決する人」と考えているが、問題を見つけ出す能力も育てていく必要があるのか、別に気にしなくてもいいのか。答えは出ていない。
  • 開始前に参加者を集めてキメ台詞を叫びながら写真を取ったり、SNSバズ賞があったり、審査員にタレントを呼んだり、Yahooはハッカソンの参加者にある程度の社会性があることを想定しているんだなと思った。
  • スポンサーが提供してくれたCOMP完全食は未来の味がした。
投稿日:

毛布がない/ディスプレイの高さ/dアニメストアのスペースだけ入ったspanタグ

11/30（土）

毛布がない

風邪のあと咳が長引いていた。そろそろ収まりつつあるのだが、ハウスダストの影響もあり得ると考えて毛布をクリーニングに出した。当然だが、クリーニングに出すと自宅に毛布がなくなる。寒い。現在進行形で。賢い人間は冬が来る前に毛布をクリーニングに出していたのだろう。どうして僕にもそうしろと言ってくれなかったのか。水曜日まで耐えねばならない。

ディスプレイの高さ

僕はバロンチェアをヘッドレスト付きで使っている。頭をヘッドレストに預けると視線が上を向くのでディスプレイがある程度高い場所にあってほしい。そこでツクモでディスプレイの台を買ってきた。概ね満足しているが、一つ計算外だったのはマウスのケーブルとディスプレイ台の足がぶつかることだ。現状問題ないが、少し気にする必要がある。

dアニメストアのスペースだけ入ったDOM

dアニメストアの作品ページにはエピソードリストがある。一つひとつのエピソードは話数番号・サブタイトル・サムネイルを持つが、作品によっては各エピソードにサブタイトルを振らないものもある。そういう作品はどうなるのかなと思ったら、サブタイトルとして 　 （スペース） が設定されていてひっくり返った。

話数番号とサブタイトルにはマウスオーバーしたときにクリック可能であることを表現するアンダーラインを表示するスタイル（text-decoration: underline）が当てられている。つまり、スペースにアンダーラインが付加されて謎の線分が出現するのだ。

これは強気すぎる。表示すべきものがないなら要素を消せばいいのに。

投稿日:

パソコンが壊れた（7ヶ月2回目）

11/29（金）

たぶんこのブログを始めてからは2回目で合ってる。

今度のは理由がよくわかっていない。久々にPCを再起動したら起動時にログインできなくなった。ユーザーを選択すると認証エラーと表示され、直後にフリーズする。ユーザーを選択せずにCtrl+Alt+F3でCUIからログインすることはできる。ログ見てググった感じNVIDIAのドライバが悪そうな感じがあるが、Linuxがわかりそうな同僚を召喚しても直せなかったので諦めて再インストールした。

Ubuntuのインストール時にもエラーが出て困った。これは使っていたisoイメージが壊れていたのが原因だった。割と壊れたイメージをつかまされることがあるので、ちゃんとチェックサムを確認しよう。ストレージ用HDDを外してUbuntuをインストールし、あとからマウントすることでほとんどのデータは残せた。

投稿日:

Nコン2019中学校の部

10/14（月）

Nコン中学校の部を途中から見た。豊島岡と郡山5が銅で文の里が銀というのは波乱だが清泉の金は妥当だったろう。

自宅のネット回線の工事があってから速度は上がったけどGoogleとYouTubeで特大の（数十秒）のstallが発生するようになっていた。ISPにもっとデータが欲しいと言われたので毎分curlして所要時間をcsvにまとめるスクリプトを書いた。