Open12

Web 記事消化

toyboot4etoyboot4e

iPad mini 注文

React の入門書を読んでいます。大体の内容を知っていました。本を買ったことで、逆に web 情報の質の高さが分かった気もします。公式ドキュメントや有志の記事をガンガン読むのは効率良いです。

そんな web の情報吸収には、端末の影響も大きいはずです。 iPad mini を注文しました。読み専端末に良い記事を蓄えておく贅沢を味わえそうです。また関心がブレた瞬間にコンテンツを切り替える自由が広がるのも嬉しいです。

Air の方が良かったかな……? その時は中古で買い足します。というか Air も買おうかな。金の力!

toyboot4etoyboot4e

今月は iPad が値上げしました。先月に買って良かったみたいです。

toyboot4etoyboot4e

iPad mini 感想

文字を読むために書いました。映像・音声は iPhone で再生します。画面分割をやるなら iPad の方が絶対に良いですね。

某 Youtube でおすすめのスタンド (Majextand M) も買ってみました。軽いのですが、角度調整や固定強度に難を感じます。磁石ではなく、ネジ相当の機構で固定する商品が欲しかったですね。探していきたい。

iPad は色の反転ができるので、白背景の Web 記事もダークテーマで読めます。スクロールすると集中が増すようで、 Zenn を読む時は最高です。ただしページ制の PDF はそんなに読みやすい気がしません。色もドギツイ。ブラウザ専用端末ですかね〜

toyboot4etoyboot4e

wip: React (1)

端末も手に入れたところで、 hooks で完全にイケているフレームワークとなった React 関係の情報を探します。

しかし何も分からない

とにかく web の知識が無いです。

https://github.com/facebook/react

まずは React のコード行数を調べます。 react は約 4,000 行、 react-dom は約 20,000 行でした。ロードするだけでそこそこ重そうな気がします。

定番の webpack は 1 枚の JS ファイルを出力するということですが、ライブラリ部分を分離してキャッシュを取ったりするのでしょうか。それとも全ページで共通の JS を使う? (SPA?)

https://dev.to/vincentntang/building-a-podcast-site-using-gatsby-react-netlify-and-amazon-s3-58m7

www.codechefs.dev の開発記です。基本 Gatsby, 音楽プレイヤーは React だとか。

長年、 Gatsby の評判は Arch Linux とか Doom Emacs のように好評で、最高の素地だという聞こえ方でした。この記事でも RSS フィードを作ってくれたりとなんだか強そうです。でも使ってみないと分からないかな? 興味は持てました。

React の用途は SPA だけでもない?

https://zenn.dev/kazuma1989/articles/a5a824a7400921

React で pre-rendering すれば SSG になるじゃないということだと思います。なるほど。

https://speakerdeck.com/dena_tech/techcon2021-17

理由を雑にまとめると、高品質な開発とサービスのため。 React をどのようなサイト制作に使っているかは、当然知っているものとして語られている気がします。ぐおおおお何を読んだらこのギャップは埋まるんだ。

https://zenn.dev/catnose99/articles/zenn-dev-stack

(未読) Zenn も React だ! 実は Zenn も SPA なのか、普通のサイトにも React を使えるということなのか。いずれにせよ、もう何でも React で良さそうな雰囲気はあります。

https://zenn.dev/catnose99/scraps/468bedaab6dbe3ecfcae

(未読)

toyboot4etoyboot4e

wip: React (2)

https://www.wantedly.com/companies/wantedly/post_articles/399501

翻訳 ID のテーブルを元に翻訳ファイルに関数を追加します。引数を取ってフォーマット文字列を返します。文字列キーや heterogeneous? なマップ要素 (メッセージ関数) の型を静的に解決できるのか興味が湧きました。

https://projectfluent.org/

React は関係ないですが、 Firefox の翻訳に使われているライブラリです。 rustc にも導入されるとか。興味あります。

ゲーム開発で使うとしたら、メッセージのキー名をエディタ上でメッセージ内容に置き換えて表示すると妄想しています。 Emacs ならできそうです。

https://zenn.dev/matcha_choco010/articles/2022-06-30-yew-introduction

Rust で hooks が実装されているのは凄くないですか……? (State 内の値が Copy なら確かに頑張れるかも?) Hooks 実装に興味が湧いてきました。 React は意外に小さなライブラリのようですから、いっそコードを読み込むのも良いかもしれません。

ホットリロードが辛そうなので、 Rust で web フロントを書く (?) のは実用的ではない気がします。でもプロジェクトとしては面白いです。 Hooks を含めより良い理解に辿り着ける気がします。ゲーム開発にも役に立つかも……?

https://nextjs.org/learn/basics/create-nextjs-app

(未読) Next.is の公式チュートリアルを閲覧中です。

React はライブラリ、 Next.js はフレームワークを名乗っています。

toyboot4etoyboot4e

そういえば WASM に変換される (?) ので、『ホットリロードできない』は無の考えでした。 Rust でウェブフロントも全然いけるのか ?!

toyboot4etoyboot4e

ほら iPad は役に立っています! 決して物欲に負けたわけでも無用な出費でもなかったんです! 値上がりも (結果的に) 回避したんですから!!

toyboot4etoyboot4e

wip: React (3)

https://zenn.dev/morinokami/books/learning-patterns-1

デザインパタンの本は常識を語り直してくれるものだと思います。この本も今の常識を反映しているわけですが、みんながこんな JS を書けるなら未来は明るい気がします。

JS って、 var があんなザマだったのに、進化して UI 方面の最先端に立ったんですか。凄い。。しかも普及しているのが面白くて、大衆のプログラミングでヒッピー的フレームワーク React が天下を取っているわけですよね。

僕も駆け出しエンジニアというものになりたいですよ! React にコントリビュートする (程度の潜在能力を持った) 人たちというイメージになりました。ネットワークにも詳しいだろうし、当然あれもこれもできるんだというイメージです。正直憧れます。

https://www.koharakazuya.net/posts/2020-05-24-didact/

↓ 記事の感想記事です。 Work loop と fiber (独自のタスク?) が出てきました。ニュアンスは分かります。

https://pomb.us/build-your-own-react/

縮小版 React (Didactic) の解説記事です。コードの見せ方が凄い。しかしこれを読んでも React 本体は読めないということで、このサイトは飛ばします。

https://reactjs.org/docs/codebase-overview.html

  • __DEV__ の定義はどこにある?

https://flow.org/

Facebook は TS を使わず JS + Flow というのが有名ですね。 Flow は React のソースに出てくるのですが、雰囲気で分かるので公式サイトは読んでいません。

https://reactjs.org/docs/reconciliation.html

(未読) React DOM の diff 算法について?

https://www.sria.co.jp/blog/2021/11/6318/

Workspace のパッケージは package.json に書かなくても import できる

https://github.com/facebook/react

読んで行きたいですね。Provider を始め共有データが多いイメージですが、 Rust のパズルに持ち帰れるか興味があります。 yew なりを直接見に行った方がいいかもですが。

toyboot4etoyboot4e

Techfeed

日本人の間で流行りの記事が分かるみたいです。見てきた感じ、 Twitter で回ってくるものは大体カバーされていました。

https://techfeed.io/

これの海外版が欲しいですね。外の人が何に注目しているのか知りたいです。トピックを絞れば RSS フィードがあるようですが……?