Murga

個人的に言いたいコト・主張・気持ち。

Neo's Release Notes v29.08.2 (2020-08-09)

3連休最高やな

先週立てた「今週の目標」と振り返り概要

2020-08-02 ~ 2020-08-08 の目標。

  1. 生活
    • 保険の解約手続き → 未達成
    • 託す先探し → 未達成
  2. 個人
    • エミュレータ遊びの成果をまとめる → 達成
  3. 仕事
    • とりあえず資格勉強などしてみるか → 未達成

生活関連の振り返り

サントリーボス・カフェベース・アイスソルティバニラを、以前景品でもらった「ワク泡サーバ」を使って泡立てて飲むなど。ウーン優雅。

いつも飲んでいるネスカフェ・エクセラが切れたので新しいのを買おうと思ったところ、Nescafe Excella Black Roast なる商品を発見。味が濃くて、牛乳と混ぜてもコーヒー感が強く残って良い。ウーン優雅。

ネスレ ネスカフェ エクセラ ブラックロースト 180g

ネスレ ネスカフェ エクセラ ブラックロースト 180g

  • 発売日: 2020/03/01
  • メディア: 食品&飲料

Google Nest Hub を買った。以前買っていて放置していた Fire 7 タブレットも引っ張り出してきて簡易 Echo 化して、スマートディスプレイに囲まれた生活を始めてみた。便利機能付きの時計としてイイカンジ。

Google Nest-Chalk ホワイト

Google Nest-Chalk ホワイト

  • メディア: オフィス用品

任天堂の抽選で当選したリングフィットアドベンチャーが届いた。運動始めるぞい。

リングフィット アドベンチャー -Switch

リングフィット アドベンチャー -Switch

  • 発売日: 2019/10/18
  • メディア: Video Game

Puchi Juwa というジュースがあったので飲んでみた。以前飲んでいて好きだった「カプセラ」みたいなプチプチで美味い。

neos21.hateblo.jp

100日記念を楽しく過ごした一方、保険の解約手続き、「託す先」の検討ができていない。

個人関連の振り返り

エミュレータ関連のネタは本家 Neo's World にまとめた。PS1・PS2・GC を追加。

Logicool F310 という安めのゲームパッドを買って、N64・GC・PS1・PS2 を操作できることを確認。ロクヨンは Z トリガーボタンの操作性がどうしても再現できないので、L2 に割り当てて誤魔化してはいるが、ちょっと惜しい感じ。ロクヨン型のジョイパッド売ってくれ~。

夜な夜な時間が出来たら映画をちょっと見る生活にしてみた。良き良き。

3連休に頭痛が酷くて、ロキソニンも効かないから何だこれーと思ってたんだけど、エナドリを飲んだら一瞬で頭痛が収まった。カフェイン不足で頭痛が起きてたらしい。ヤバ!

仕事関連の振り返り

どいつもこいつも日本語がなっとらん。誰に何の仕事を任せたいのか、どんな成果物がいつまでに欲しいのか、何でこうもハッキリさせる能力がないんだ。お前らの脳の問題だぞ。

という感じで激イラチしてしまい、ビジネスコミュニケーションがまともに出来る会社に転職したくなるが、一方で、こんな学生のサークルみたいな雑なノリで仕事するのを良しとしている、こんな会社にぬるーく留まっておいた方が、今は自由時間が多くていいのかもなーと思ったり。皆バカだからそれに合わせて自分を下げて過ごしていれば楽できる。納期も指示しないから、やってもやらなくてもいいし、なんか後出しで言われたとしても、指示が曖昧だったことを利用して言い訳し放題。そもそも自分は仕事を頑張りたくないから、几帳面な自分にとって違和感のある会社でも、それを我慢してやり過ごして楽な方を選んでおいた方が良いかなーと思った。

今週の目標

2020-08-09 ~ 2020-08-15 の目標。

  1. 生活
    • 保険の解約手続きする
    • 託す先探しする
  2. 個人
    • リングフィットアドベンチャーをやる時間を確保する
    • 銀行口座やクレジットカードを整理する
  3. 仕事
    • バカに合わせてイライラせず過ごす

今週は4日間だから楽なはずだ~。

React と Next、Vue と Nuxt、Svelte と Sapper

もう語り尽くされたであろう、「コレってどう違うの?」ネタまとめ。

React (create-react-app) と Next.js

  • Create React App
    • SPA・フロントエンドオンリーのツールチェーン
    • どちらかというと学習用。ルーティングなどが含まれていない
  • Next.js
    • SSR などを取り揃えたフレームワーク
    • Facebook ではなく Vercel (旧 Zeit) が作っている
    • Razzle という似たような全部入りフレームワークもある

React の場合は、とりあえず何か作るなら CRA ではなく Next.js で始めるのが良いっぽい。SSR の有無で CRA を選ぶ必要はないようだ。

React.js & Next.js超入門

React.js & Next.js超入門

Vue (Vue CLI・Vite) と Nuxt.js

  • Vue CLI・Vite
    • ツールチェーン
    • ボイラープレート的に使った後は自由度が高い
  • Nuxt.js
    • SSR など必要になりそうなモノが全部入っているフレームワーク
    • CoC。規約がしっかりしている

SSR が欲しい、チームで規約が欲しいなら Nuxt.js。Vue CLI や、Vue 3 で用意されている Vite なんかは、フロントエンドオンリーの SPA 用って感じ。自由度も高い。

Angular は? → Angular Universal

Angular そのものが堅牢で、フレームワークの様相を呈していて、Angular CLI はそれをサポートする立場とすると、Next.js や Nuxt.js にほとんど相当しているといえる。

SSR に対応する、Universal JS を実現するという意味であれば、Angular Universal がその位置に来るかな。

もう少しバックエンドもサポートするなら、Angular に近い雰囲気でバックエンドが作れる NestJS の Universal モジュールを使うのが良いかと。

Universal JavaScript とは

サーバサイドもクライアントサイドも JS にすることでコードが共通化できるという設計論。

Svelte と Sapper

  • Svelte
    • コンパイラ。成果物はフロントエンドオンリーといえる
  • Sapper
    • ルーティング、SSR など全部入りのフレームワーク

Next.js や Nuxt.js でお馴染みの構成。フロントオンリーの Svelte、全部入りフレームワークの Sapper。

以上

  • React やるなら Next.js 一択
    • SPA でサクッとやりたければ CRA でも良いかもだが…
  • Vue でフロントだけ作るなら Vue CLI or Vite
  • Vue で SSR・大規模開発するなら Nuxt.js
  • Angular やるなら Angular CLI 一択
    • SSR したけりゃ Angular Universal を追加
  • Svelte でフロントだけ作るなら Svelte オンリー
    • Svelte で SSR したけりゃ Sapper

こんな感じかな。

Vue.js&Nuxt.js超入門

Vue.js&Nuxt.js超入門

なんでインデントは4スペースなんだ?2スペースはどうして生まれた?タブインデント見かけなくなったね?

コーディングにおける、タブやスペース文字でのインデントに関する疑問。

自分は CSS を勉強し始めた頃にどこかで見かけたタブインデントを真似し始め、その後 HTML を書く時に1スペースインデントを取り入れ、Java を知ってからは4スペースインデントを使い、JavaScript を本格的に書くようになってから現在は2スペースインデントを使っている。

タブを使うかスペースを使うか、という好みはともかく、そもそも何で「スペースが4つ」とか「スペースが2つ」とかいうルールが出来たのだろう、という歴史的経緯を知りたく、調べてみた。

個人的な意見:2スペース派

歴史的経緯はともかく、現時点で自分がどう思っているかという意見を書いておく。バイアスがかかってるかもしれないしね。

  • 基本2スペース派
    • フロントエンドの人間なので、フロントエンドで馴染みが深いのは2スペースかな
    • Python も2スペースにルールを上書きして書く
    • 1スペースより幅が取れて可読性が良く、4スペースより省スペースで、程よい幅だと思っている
  • タブ文字が混ざると、ブロックコメント内のインデントがキモい気がしている
function hoge() {
  /* ほげ  ← ココは2スペース
   * ふが  ← この行のインデント!!ココだけ「3スペース」になるのだが、タブを組み合わせるより自然な気がしている
   */
}
  • IDE (VSCode) を使えば、タブキー1回でで2スペース打ったり、1回の Delete キーで2スペース消せたりもできるので、不便していない
  • カーソル移動も2スペース単位で動けるし
  • タブ文字は表示幅の設定をしないとキモくて見づらいが、スペースなら必ずその幅で見えるから気持ち良い
  • 2スペースは全角文字1文字の幅と一致させられるので日本語が混じった時も扱いやすい
  • HTML およびウェブ上でコードを扱う時に、タブ文字はテキストエリアでタイプできず、半角スペースは行頭にあると表示時に無視され、どちらも一長一短

個人的にはそんな感覚があって2スペース派であるが、好みや優劣ではなく、それぞれの手法が生まれた歴史的経緯を知りたいというのが今回の趣旨である。

タブインデント・8スペースインデントの起源

Is there any historical reason for 8 space ? I don't know.

I guess something to do with reading a byte. Like you know, if you know that block comprises of 8 spaces, you replace that with 1 byte while storing. Just a wild guess.

8スペースは1バイト換算して扱えるから歴史的に重宝されていた過去があったりするかも?という推測。


Despite five characters being the typical paragraph indentation on typewriters at that time, the horizontal tab size of eight evolved because as a power of two it was easier to calculate with the limited digital electronics available.

Using this size tab to indent code results in much white space on the left, so most text editors for code, such as IDEs, allow the size of the tab to be changed, and some (in particular on Windows) default to four instead of eight.

Disagreements between programmers about what size tabs are correct (and whether to use tabs at all) are common.

Modern editors usually have Tab key insert the indentation the programmer wants as spaces or combinations of tabs and spaces.

英 Wikipedia の記述。タイプライターに装備されたタブは5スペース分で表現されるのが主流だったが、2の累乗である 8 のスペースとして扱う方が、古いデジタル環境では都合が良かったという話。なるほど前述の推測が当たっていた。


というワケで、タイプライターのタブ機能をコンピュータに持ち込むにあたって、デジタルで扱いやすい8スペース分として取り扱うようになったのが、一番最初の歴史的経緯であろう。


Some programmers such as Jamie Zawinski state that spaces instead of tabs increase cross-platform portability.

Others, such as the writers of the WordPress coding standards state the opposite, that hard tabs increase portability.

タブ文字は OS 間で扱いが異なり、可搬性に乏しいという意見があったようだ。ただコレも、タブなら良い、スペースなら良い、というのは宗教論争状態らしいが。

いずれにせよ、タブ文字の代用として8スペースが登場したと思われるのは、納得かな。

タブインデント・8スペースインデントの利点

資源が乏しい時代に扱いやすかった、という理由で採択された「1タブ = 8スペース」だが、副次的な効果も見い出されている。

Linux カーネルのコーディングスタイルでは、8スペース分の幅を取るタブ文字をインデントに使うことが書かれている。

  • 8スペース分もあるとインデントが深くなった時に見づらいって?そもそもインデントが深いコードの方が間違ってんだよ
  • 8スペースでインデントされてても読みやすい平易なコードを書け
  • 8スペースでインデントされてれば、そういう臭いコードにすぐ気が付けるだろ?

といった趣旨だ。なるほど、逆にインデントを深くさせないための工夫として8スペース (分のタブ文字) を使わせるワケだ。


もう少し現代に寄って、スペースインデントとの比較で論じている人も。

  • 参考:Python: using 4 spaces for indentation. Why? - Stack Overflow
    • スペース文字はインデント以外にも使われるが、タブならインデントのみを表現する文字として切り分けられる
    • タブなら表示時に文字幅を設定できる
    • 「1インデント = 1タブ文字」ならスペースを連打するよりキーストロークが少なく済む
    • 「1インデント足す」は「1タブ文字を入力」、「1インデント削る」なら「1回 Delete キーを押す」だけで、インデントを追加・削除する時も理にかなっている
    • スペース文字を多用すると、タブインデントと比べてソースコードのファイルサイズが多くなる

タブインデントの方がスペースでのインデントより理にかなっていることが多いよ、という意見。確かに納得できる。

ただ、最近の IDE やビルドシステムを考えれば、それを利点として扱うほどのことはないかな、という感じ。逆に「IDE がないような環境でも読み書きせにゃならん」という、イマドキからすると逆に特殊な環境であれば、タブ文字の方が汎用性は高いのかも。

昔はこうしたデータサイズや入力効率なんかが、生産性に物凄く響いていたってことね。

4スペース・2スペースが登場した理由

そんなタブ・8スペースの時代から、どうして4スペースや2スペースが登場したのか、というところを調べてみる。

8スペースだとインデントが深すぎて辛いよ、奇数よりはキリが良いよ、という理由で何となく生まれたのかな、という推測は立つが、もう少し起源を調べてみた。

4スペースを広めたのは Java の Sun だという話。そうなのか。確かに Java は4スペースが多い気がするが。Python だと def_ (末尾はスペース) の4文字と、インデントの4スペースが一致するから気持ち良い、という意見も見かけた。w

2スペースは JS 界隈のコールバック地獄に対応するため主流になったとか。確かに、インデントを増やさざるを得ない構文上の問題があったと思う。

あと私見だが、HTML はどうしても入れ子 (ネスト) で構造を表現するので、より狭いインデント幅が好まれたのかなと思う。自分が CSS を勉強し始めた2004年頃なんかは、HTML は4スペースとかで、CSS はタブインデント、みたいな人も多かった気がする。で、JS の2スペースに合わせて、フロントエンド界隈はまるっと2スペースに置き換わったのかと。

ネタ:フィボナッチ・インデント

void foo()
{
 foo { /* 1 space */
   bar { /* 3 spaces (1 + 2) */
      baz { /* 6 spaces (1 + 2 + 3) */
           qux { /* 11 spaces (1 + 2 + 3 + 5) */
                   foobar { /* 19 spaces (1 + 2 + 3 + 5 + 8) */
           }
      }
   }
 }
}

インデントが深いのはよくない!でも浅いインデントは許してほしい、という考えに一番合っているのかも。w

現在の多数派はスペース

GitHub の40万リポジトリを調査した結果、ほぼ全ての言語でタブよりスペースが多かったとのこと。タブ派の方が多かったのは C 言語と Go 言語だけだったそうで。

まとめ

以上、自分が調べた限りでの、歴史的経緯をざっくりまとめる。

  • タイプライターでインデントを表現していた「タブ」の概念が、コンピュータにも移植された (元々のタブは5スペース程度の幅だった)
  • タブ文字として移植された際、2の累乗で表現しやすい8スペース分として扱うことにした (データ量の削減にも繋げられたと思われる)
  • タブ文字は OS 間の可搬性が良くなかったのか、代替として8スペースが登場した (スペースをインデントに使う文化が生まれる)
  • Java などの高級言語で、タブが8スペース分の幅を取っていると鬱陶しくなり、4スペース派が登場した (特に Sun が広めた説がある)
  • HTML は構造上ネストが多く、JavaScript には「コールバック地獄」があったことから、フロントエンド界隈ではさらに2スペース派が主流になった

…こんな感じかな。

Linux カーネルだったり、Sun だったり、Google だったりといった権威がコーディングスタイルを定めると、それに準拠する人が増えるのだろう。慣例だったものが標準化されたのか、標準化されたから慣例になったのかはよく分からないところも多かったが、結局はみな好みで決まったことなのかなと思う。

その他参考文献