フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。
『コンピュータシステムの理論と実装』を読んだ - 30歳からのプログラミング
「コンピュータが動いている仕組みを知りたい？ だったら実際に作ってみるのが一番！」というわけで実際にコンピュータを作っていく、他に類を見ない一冊。 単純な電子回路から始まってアプリケーションソフトウェアの開発まで行うので、各論よりもまずは全体像を掴みたい、各モジュールがどのように連携してひとつのシステムとして動いているのかを知りたい、という人に特にお勧めできる。 どのモジュールにおいても詳細には立ち入らないので、低レイヤの入門としてもよいかもしれない。 www.oreilly.co.jp Twitter でお勧めされてよさそうだったので、読み始めた。 存在は知っていたが敷居が高そうで敬遠していたのだが、そうでもないとのことだったので。 自分ももっと低レイヤのこと知りたくてやってるのですが、この本おすすめです。https://t.co/8yk4hdWCkI— ほげぴよ (@sannennem
webpack のコード分割の初歩 - 30歳からのプログラミング
JavaScript や TypeScript を使ってウェブアプリを提供する場合、開発時はimportやexportなどの ES Modules を使い、公開時はファイルをバンドルして公開することが多い。 以下の記事に書いたように、現在の主要なブラウザは ES Modules に対応してものの、バンドルせずに公開してしまうとパフォーマンスに悪影響を与える可能性がある。 numb86-tech.hatenablog.com ファイル数が増えれば増えるほど影響は深刻になるため、依存関係が深いライブラリを使っている場合などは、レイテンシが飛躍的に増加してしまう。 そのため、バンドルせずに公開するのは現実的ではない。 バンドルしてひとつのファイルにまとめてしまえば、JavaScript のダウンロードは一度で済む。 しかしそうすると今度は、バンドルファイルの肥大化という問題が発生する。 巨大なフ
TypeScript における変性（variance）について - 30歳からのプログラミング
プログラミングの型システムに関する記事を読んでいると、共変や反変といった用語が出てくることがある。 TypeScript や Flow についての記事でも、見かけることがある。 それらは TypeScript を使う上で必須の知識ではないが、把握しておくに越したことはない。 この記事では、TypeScript を題材にして、変性について説明していく。 TypeScript に関する議論を理解できるようになることがこの記事の目的であり、より詳細な、学術的、数学的な内容には踏み込まない。 この記事の内容は、TypeScript のv3.9.5で動作確認している。 変性 変性（variance）とは、任意の型Tに対してどのような性質を持つのか示したものであり、以下の 4 種類がある。 不変性（invariance） Tそのものが必要 共変性（covariance） Tそのものか、そのサブタイプが
TypeScript の型ガードの注意点と解決法 - 30歳からのプログラミング
TypeScript には型を推論する機能があり、条件分岐の際に自動的に型を絞り込んでくれる。この仕組みを型ガード(Type Guard)と呼ぶ。 ただし万能ではなく、自動的な絞り込みが機能しないケースもある。その場合、isを使って開発者が TypeScript に型を教えることで、解決できる。 この記事の内容は TypeScript のv3.9.5で動作確認している。 typeof による絞り込み 型を絞り込む方法はいくつかあるが、まずはtypeofを使った方法を紹介する。 const foo = (arg: number | string) => { const x = arg; // const x: string | number if (typeof arg === "number") { const y = arg; // const y: number } else { co
TypeScript の共用体型（Union Types）は or ではない（追記あり） - 30歳からのプログラミング
〜2020/7/8 追記〜 本記事に対して指摘を頂いた。 qiita.com 「余剰プロパティチェックの存在やそのルールによってorではないかのように見える（ことがある）というだけで、型システム的にはorである」と、私は解釈した。 特に「余剰プロパティチェックは、型システムに対する違反を検出するものではなく言わば追加の親切なチェック」という点が重要であり、確かにそこを無意識のうちに混同していた。 分かりやすく説明して頂いているので上記の記事を読めば十分かもしれないが、勉強も兼ねて、自分でも整理しておく。 共用体型は or である TypeScript では、オブジェクトに余計なプロパティがあっても問題にならない。 以下の例だと、string型のaというプロパティが存在していればAの条件を満たしていることになり、余計なプロパティが存在してもエラーにはならない。 type A = { a: s
TypeScript の「オーバーロード」について - 30歳からのプログラミング
オーバーロードとは、関数に対して複数の型を定義すること。 複数の型を持つ関数を「オーバーロードされた関数」と呼んだりする。 オーバーロードによって、「渡された引数の数によって各パラメータの型が変わる関数」や「パラメータの型によって返り値の型が変わる関数」を表現できる。 以下の内容は、TypeScript のv3.9.2で動作確認している。 渡された引数の数によって各パラメータの型が変わる関数 まず、「渡された引数の数によって各パラメータの型が変わる関数」について。 具体的な型を例示すると分かりやすいので、早速、定義してみる。 type HasFoo = { foo: number; }; type HasBar = { bar: string; }; type ReturnFooAndBar = { (arg1: number): HasFoo & HasBar; (arg1: strin
TypeScript のジェネリック型の初歩 - 30歳からのプログラミング
ジェネリック型は、型を定義したときには具体的な型を指定せず、型を利用する際に具体的な型が決まる仕組み。 後述するが、プレースホルダや関数のパラメータのようなものだと考えると、分かりやすい。 ジェネリック型はそれ自体が便利だし、TypeScript の他の機能と組み合わせることで複雑な型も表現できるようになる。 この記事の内容は TypeScript のv3.9.5で動作確認している。 宣言時には型が決まらず、あとから具体的な型がバインドされる 以下に、関数の型を 3 つ定義している。 type Foo = (arg: number) => number; // number を受け取り、number を返す type Bar = (arg: string) => string; // string を受け取り、string を返す type Baz = <T>(arg: T) => T;
npm パッケージを CLI ツールとして機能させる仕組みについて - 30歳からのプログラミング
npm パッケージのなかには、CLI ツールとしての機能を持っているものがある。 ESLint や Mocha、Jest などは、多くの人が使っていると思う。 この記事では、それらのパッケージがどのようにして CLI ツールとして機能しているのか、その仕組みについて説明する。 動作確認に使った npm のバージョンは6.14.5。Yarn は1.22.4。 package.json の bin フィールド npm パッケージに CLI ツールとしての機能を持たせるためにはまず、package.jsonのbinフィールドでコマンド名とファイル名をマップさせる必要がある。 具体的な記述を見たほうが早いので、題材としてcowsayのv1.4.0をインストールする。 $ npm init -y $ npm i cowsay@1.4.0 node_modulesにcowsayがインストールされている
package.json やロックファイルによるパッケージの依存関係の管理 - 30歳からのプログラミング
この記事では、npm installやnpm ciを実行したときにどのようにパッケージがインストールされるのか、依存パッケージにバージョンのコンフリクトが発生した際にどのように処理されるのか、などを見ていく。必要に応じて Yarn での挙動にも触れる。 動作確認に使った npm のバージョンは6.14.5。Yarn は1.22.4。 特に npm はバージョンによって動作が大きく異なるので、注意する。 package-lock.json によるバージョンの固定 package.jsonだけではインストールするパッケージのバージョンを固定できず、package-lock.json（Yarn の場合はyarn.lock）によってバージョンを固定する。 多くの人が知っている話ではあるが、重要な機能なので改めて触れておく。 package.jsonのdependenciesやdevDependen
ルーティング機能を自作して学ぶ History API - 30歳からのプログラミング
History API は、HTML5 で導入された API。 これを使うことで、JavaScript で URL の履歴を管理できるようになる。 多くの場合、そういった操作は React Router や Vue Router などのルーティングライブラリを通して行うことになる。そのため、History API を直接操作する機会は稀だと思う。 しかし、ルーティングライブラリを使いこなし、特殊なユースケースにも対応できるようになるためには、History API そのものについても理解しておきたい。 この記事では、ルーティング機能を持った React アプリを開発しながら、History API について学んでいく。 使用している React のバージョンは16.13.1。 動作確認は Google Chrome の81.0.4044.113で行っている。 コンテンツに対して URL を
React Ref の基本 - 30歳からのプログラミング
React におけるRefには、2つの意味がある。 ひとつはRefオブジェクト。もうひとつは DOM 要素やコンポーネントのref属性。 この2つは関連がないわけではないが、それぞれ別の概念なので、分けて考えたほうが理解しやすい。 まずRefオブジェクトについて扱い、次にref属性について見ていく。 なお、この記事のコードは React のv16.10.2で動作確認している。 Ref オブジェクト 最初にRefオブジェクトの特徴を述べると、コンポーネントがマウントされたときからアンマウントされるときまで存在し続ける、書き換え可能なオブジェクト、である。 この特徴を理解するためにまず、Refではない一般的なオブジェクトの挙動を確認する。 以下のAppコンポーネントは、ボタンを押下するとstateが更新され、その度に再レンダー、つまりAppという関数が再呼び出しされる。 その際、Xとコメントし
never 型を使った TypeScript のテクニック - 30歳からのプログラミング
「発生し得ない値」などのように説明されるnever型。 概念としては分かるのだが、実際にどのようなケースで使えばよいのかイメージできずにいた。 neverを使ったテクニックを調べていて多少のイメージは掴めてきたので、整理しておく。 動作確認は TypeScript のv3.7.5で行っている。 never 型の特性 まずはnever型がどういった型なのか、理解する。 決して発生し得ない値や型は、never型になる。 例えば以下のif文では、elseブロックは絶対に実行されないため、そのなかではfooはneverになる。 const foo = true; if (foo) { foo; // const foo: true } else { foo; // const foo: never } 「存在し得ない値」なので、どんな値も代入することはできない。 const foo: never
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
