TypeScript の型定義ファイルの探索アルゴリズム - 30歳からのプログラミング
npm パッケージは基本的に、JavaScript ファイルで配布されている。TypeScript で開発しているパッケージであっても、JavaScript にビルドしたものを配布している。 そのため、型定義ファイルによって型付けしないと、インポートした際にモジュール全体がanyになってしまう。 これでは型システムの恩恵を受けることができないし、noImplicitAnyフラグをfalseにしていない場合はコンパイルエラーになってしまう。 npm パッケージをインポートした際、TypeScript は自動的に型定義ファイルを探索し、最初に見つかったものを使用する。 また、プロジェクト内にある JavaScript ファイルをインポートした際も、型定義ファイルの探索が行われる。 この記事では、TypeScript がどのように型定義ファイルを探索するのか、実際に検証して確認していく。 動作確
フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。
Web Worker (Dedicated Worker) によるマルチスレッド処理 - 30歳からのプログラミング
JavaScript は基本的にシングルスレッドであり、並列処理を行うことはできない。 そのため何か重たい処理があると、それによってメインスレッドが専有されてしまい、後続の処理が遅延してしまう。 その結果、ウェブアプリの速度や操作性に悪影響を与えてしまう可能性がある。 Web Worker を使うとマルチスレッドによる処理が可能になり、重たい処理をメインスレッドではなく他のスレッドに処理させることができる。 この記事では、Web Worker の基本的な使い方を見ていく。 動作確認は以下の環境で行った。 Deno 1.9.0 Google Chrome 90.0.4430.72 ワーカースレッドの作成 Web Worker には専用ワーカー（Dedicated Worker）と共有ワーカー（Shared Worker）がある。 この記事では Shared Worker については扱わず、D
AST で JavaScript のコードを変換する - 30歳からのプログラミング
ソースコードを AST（抽象構文木）と呼ばれるデータ構造に変換することで、ソースコードの検証や変換をプログラムによって行えるようになる。 例えば ESLint では、ソースコードを AST に変換して、それに対してチェックを行っている。 また、V8 などの JavaScript エンジンも、対象の JavaScript ソースコードを AST に変換してから、後続の処理を行う。 AST を使えるようになると、ソースコードの検証や変換を行うツールを自作できるようになる。 この記事では、JavaScript AST を扱うための方法を見ていく。 この記事で使用しているライブラリのバージョンは以下の通り。 esprima@4.0.1 estraverse@5.2.0 escodegen@2.0.0 動作環境は Node.js のv12.17.0で行っている。 また、この記事に出てくる木構造の画像
ブラウザにおける ES Modules の利用とパフォーマンスについて - 30歳からのプログラミング
現代の主要なブラウザでは、ES Modules（以下、ESM）を利用することができる。 つまり、import文やexport文を使った JavaScript ファイルを、トランスパイルすることなくそのまま使えるということである。 モジュールシステムをそのまま使えるので、複数のファイルをバンドルする必要もない。 この記事ではまず、ブラウザで ESM を使う方法について説明していく。 その後、処理の流れを詳しく確認していく。これを理解していないと、パフォーマンスが非常に悪いページになってしまう恐れがある。 動作確認は Google Chrome の84.0.4147.105で行っている。 ESM 利用の基本 まずは検証用にサーバを立てる。 以下のコードを Deno（バージョンは1.2.2）で実行する。 そうすると、http://localhost:8080/にアクセスしたときにindex.ht
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がインストールされている
npm link で OSS 活動の効率を上げる - 30歳からのプログラミング
npm にはlinkというコマンドが用意されており、これを使うことで npm パッケージの開発効率が上がる。 既存のパッケージに手を加えた際の動作確認にも使えるので、OSS 活動の効率も上がる。 この記事では、npm linkの仕組みと、それをどのように利用できるのかについて説明する。 動作確認に使った npm のバージョンは6.14.5。 Node.js のバージョンは12.17.0。これ以前のバージョンだと以下の動作確認でエラーが出るので注意。 サンプル用のパッケージとアプリを作る まずはパッケージを作成する。 my-package-dirというディレクトリを作り、そこに以下の内容のpackage.jsonを作成する。 { "name": "my-package", "type": "module", "main": "main.js" } そして、以下の内容のmain.jsを作る。
package.json の resolutions を使って依存パッケージのバージョンを指定する - 30歳からのプログラミング
package.jsonのresolutionsフィールドを使うことで、依存ツリーの深い部分にあるパッケージのバージョンを固定することが可能になる。 現在のところ Yarn でのみ使える機能だが、サードパーティが公開しているライブラリを使うことで npm でも使えるようになる。 動作確認に使った npm のバージョンは6.14.5。Yarn は1.22.4。 後述するnpm-force-resolutionsについては、0.0.3を使っている。 npm や Yarn でパッケージをインストールすると、指定したパッケージだけでなく、そのパッケージが依存しているパッケージもインストールされる。 そうしてインストールされたパッケージが他のパッケージに依存していれば、そのパッケージもインストールされ、それが繰り返されていく。 この仕組みについては、以下の記事で詳しく触れた。 numb86-tech
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 を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
