2021.11.8

読書の内容を整理する

関数型JavaScript

元:Functional-JavaScript-Introducing-Programming-Underscore-js-Michael Fogus
2013年に出版された本ですが、今読んでも遜色がありません.JavaScriptの主な言語設計要素に関する知識があり、関数式プログラミングを学んだことがある場合は、第1章と第2章の記述に慣れていません.
印象的な部分
Historically, func‐ tional programming has centered around building functions that work to achieve higher-level behaviors and work on very simple data constructs.
highlevel behaviorとは,技術的に高次関数を考えるとよいようである.配列を用いて行うことができる様々な抽象演算は、例(map、filter、reduce)として用いることができる.他の関数の助けで動作を完了します.別の関数をパラメータとして受け入れて動作を完了する構造は,関数を値として使用する概念が必要であり,これが第2章の主なテーマである.
JavaScriptでは、一級公民であるため、関数を値として使用できます.だから、
パラメータとして他の関数に提供できます.関数は抽象的な動作に使用される単位です.したがって,パラメータとして提供される関数と,その関数を用いた異なる階層(世界)でのコラボレーションを観察することが望ましい.

const predicate = ({
  lessThan(a, b) {
    return a < b;
  }
  // ...
}[name]);

const comparator = (predicate) => (x) => (y) => {
  if (predicate(x, y)) {
    return 1;
  }
  
  if (predicate(y, x)) {
    return -1;
  }
  
  return 0;
};

[1, 2, 3].sort(comparator);

パラメータとして用いられるpredicateは抽象化された単位となり,多様な動作を含むことができる.lessThangreaterThanなど.述語の世界では,各動作は熟語と同様に用いられる.配列演算の世界では,map,reduce,filterなどの熟語がサブアクションによって演算を実行する.
第2章では,アプリケーションプログラミング,集合を中心としたプログラミング章で,この考えをより詳細に述べた.
The point of a collection-centric view, as advocated by Underscore and functional pro‐ gramming in general, is to establish a consistent processing idiom so that we can reuse a comprehensive set of functions.
It is better to have 100 functions operate on one data structure than 10 functions on 10 data structures.
このほか、元編程の要素も印象的でした.
programming occurs when you write code to do something and metaprogramming occurs when you write code that changes the way that something is interpreted.
JavaScriptでは、この点をどのように説明するかをメタプログラミングできます.

function point2D(x, y) {
  this._x = x;
  this._y = y;
}

// 1. 생성자로 사용하는 경우, 새로만들어지는 객체가 this 로 바인딩.
new point2D(1, 2);

// 2. call, apply 등을 활용하여 this 를 동적으로 지정.
function point3D(x, y, z) {
  point2D.apply(this, x, y);
  this._z = z;
}

new point3D(1, 2, 3); // point3D 가 생성자로 사용되었을때, 새로 만들어진 객체가 point2D 의 this 로 바인딩되도록 메타 프로그래밍을 활용.

クリーンアーキテクチャ

構成部品

構成部品とは独立して配置できる最小単位.部品の歴史調査.
キーワード:ライブラリ、リンク、ロード=>リンク!

https://en.wikipedia.org/wiki/Linker_(computing )

entryからdependencyへの反復プロセス.
Linkers can take objects from a collection called a library or runtime library. Most linkers do not include the whole library in the output; they include only the files[clarification needed] that are referenced by other object files or libraries. Library linking may thus be an iterative process, with some referenced modules requiring additional modules to be linked, and so on. Libraries exist for diverse purposes, and one or more system libraries are usually linked in by default.
また、メモリにデータをロードする責任がある場合は、メモリに最適な場所を見つけるために再配置する必要があります.
As the compiler has no information on the layout of objects in the final output, it cannot take advantage of shorter or more efficient instructions that place a requirement on the address of another object.
読んでいるうちに、EcmaScriptモジュールについての内容が頭に浮かびます.

https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/

For ES modules, this happens in three steps.

Construction — find, download, and parse all of the files into module records.

Instantiation —find boxes in memory to place all of the exported values in (but don’t fill them in with values yet). Then make both exports and imports point to those boxes in memory. This is called linking.

Evaluation —run the code to fill in the boxes with the variables’ actual values.

なぜこの3つの過程に分割されたのでしょうか.ブラウザがネットワーク環境でリンクを実行するプロセスを考慮すると、これは理解できます.
blocking the main thread like this(依存性に従う解釈とインスタンス化)は、アプリケーションのモジュールの使用を遅くし、使用できません.This is one of the reasons that the ES module spec splits the algorithm into multiple phases. Splitting out construction into its own phase allows browsers to fetch files and build up their understanding of the module graph before getting down to the synchronous work of instantiating.
なぜCommonJSはこのような方法を取らなかったのですか?考えてみると、状況自体が違います.ネットワーク環境とファイルシステム.
CommonJS can do things differently because loading files from the filesystem takes much less time than downloading across the Internet. This means Node can block the main thread while it loads the file. And since the file is already loaded, it makes sense to just instantiate and evaluate (which aren’t separate phases in CommonJS). This also means that you’re walking down the whole tree, loading, instantiating, and evaluating any dependencies before you return the module instance.

ブログを読む

Stop using margin

https://javascript.plainenglish.io/stop-using-margin-use-spacer-component-instead-953d9b2dbacc
marginをスタイルとして反応素子に挿入すると、他の素子に影響を及ぼす可能性があります.次の操作を行います.

<Article>
    <Header />
    <Spacer y={2} />
    <Section1 />
    <Spacer y={1} />
    <Section2 />
    <Spacer y={2} />
    <Footer />
</Article>

個人的に同意しない考えこれは、寸法が寸法の独立した注目点としてより効果的であると考えているからです.jsxフォーマットは寸法実行機能としても機能するため、styled-componyなどのヘルプは寸法を維持しながらスタイルコードを分離することができます.
表示は画面上の表示方式に注目するのではなく、画面に何が見えているのか、何の意味があるのかを示す意味markupの流れであり、これに同意するため、上記の基準には同意しない.