技術とかの雑なToday I Learnedメモ

即時関数、開発環境で80番ポートを見ない理由、devtoolsのnetworkタブのmethodsヘッダー

即時関数を使っているのっていいんだっけ

IIFE (即時実行関数式) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

仕事をしていたら即時関数を使っているところがあって、そういえば即時関数って今メジャーな感じで使われてるのかなと思って調べた。

即時関数というとどうしても jQuery 書いてた時代を思い出してしまうというだけで印象が悪かったんだけどこの認識は誤りの可能性があるので印象で良い悪いを判断するのはやめようと思った。

あと IIFE っていう略かっこいい。

結論から言えば、今回僕が見たコードを即時関数を利用しない方法で書くにはどうすればいいか思いつかなかったので、利用するのは問題ない気がした。

どういうコードかというと、switch-case 文の結果を直接変数に代入するというコードで、

const result = (() => {
  switch (str) {
    case 'hoge':
      return ...
    case 'fuga':
      return ...
    ...
  }
})()

みたいなやつ。

これを即時関数にしないで書くと怒られるので、変数に代入するにはこうするしかない気がする。switch-case 文の結果を変数に入れられるようにしてほしい。なんでダメなんだろう。

開発環境で 80 番ポートを見ない理由

開発環境といえばだいたい localhost:3000 とか localhost:8080 みたいなポートが多くて、組織内で別のサービスを持っているときに 3031 とか 8081 みたいにちょっとポート番号ずらして同時に開発環境として起動する、みたいなことは結構あると思うんだけど、「http は 80 番ポートだし localhost:80 じゃダメなんか?」みたいなことを思ったので調べたりツイートしたりした。

ツイートしたらすぐに教えてもらえて、結論としては「ウェルノウンポートのアクセスには root 権限が必要」ということらしい。

私はみなさんに支えられて生きています。みなさんありがとうございます。

devtools の network タブの methdos

チームの人が Chrome の devtools の network タブで「methods」という項目を表示しているのを見て、自分の devtools にも表示させたい!と思って探したんだけど全然見つからなくて、ググった結果表示されてるテーブルのヘッダーで右クリックして表示する項目を変更するという感じだった。初見で分かる人いる……?

Chrome DevTools の使い方 | murashun.jp

これを読んで知りました。

この記事、知らないことめっちゃ書いてありそう(まだ全部読んでない)ので全部読んだらまた感想でも書きたいな。