Deno では外部モジュールを利用する際、URL を指定してインポートする。 Node.js とは異なり、npm やpackage.jsonも使用しない。 ではどのようにモジュールを管理していけばよいのか。公式ドキュメントに書かれてある内容をまとめ、整理した。 Deno のv1.1.1…

最近 Deno を触り始めた。 エディタには Visual Studio Code を使っているのだが、現状では、通常の TypeScript での開発のような「ゼロコンフィグで様々な支援を受けることができる」という状態にはなっていない。 Deno での構文がエラーになるし、インテリ…

ウェブベージで JavaScript ファイルを読み込むためには<script>タグを使うが、その際にasync属性やdefer属性を設定することができる。 そして、これらの属性を使うかどうかで、ウェブベージの表示速度や JavaScript ファイルの実行順序に違いが生まれる。 この記事…

npm にはlinkというコマンドが用意されており、これを使うことで npm パッケージの開発効率が上がる。 既存のパッケージに手を加えた際の動作確認にも使えるので、OSS 活動の効率も上がる。 この記事では、npm linkの仕組みと、それをどのように利用できるの…

npm パッケージのなかには、CLI ツールとしての機能を持っているものがある。 ESLint や Mocha、Jest などは、多くの人が使っていると思う。 この記事では、それらのパッケージがどのようにして CLI ツールとして機能しているのか、その仕組みについて説明す…

他の図形も作れるようにしたい気持ちはあるが、今はツリー図だけ。 shape-painter.numb86.net ソースも公開している。 github.com 作った動機 単純に、自分が欲しかった。 図形を作成するツールは、もっと高機能で高品質なものが、他にたくさん存在する。だ…

package.jsonのresolutionsフィールドを使うことで、依存ツリーの深い部分にあるパッケージのバージョンを固定することが可能になる。 現在のところ Yarn でのみ使える機能だが、サードパーティが公開しているライブラリを使うことで npm でも使えるようにな…

この記事では、npm installやnpm ciを実行したときにどのようにパッケージがインストールされるのか、依存パッケージにバージョンのコンフリクトが発生した際にどのように処理されるのか、などを見ていく。必要に応じて Yarn での挙動にも触れる。 動作確認…

fetchは、JavaScript で HTTP 通信を行うための API。SPA で Web API とやり取りを行う際などによく使われる。 例えば以下のコンポーネントでは、ボタンを押下するとfetchによるリクエストが発行され、そのレスポンスに応じて表示内容が変わる。 import Reac…

タイトル通り、GitHub Actions の入門書。いわゆる技術同人誌で、商業出版されたものではない。 「技術書典 応援祭」で、電子版と紙版のセットを買った。 techbookfest.org 「技術書典 応援祭」は既に終了しているが、電子版は今も BOOTH で買える。 booth.p…

ウェブに関するネットワーク技術について網羅的に扱った書籍。 TCP や UDP のようなトランスポートプロトコルの話から、WebSocket や WebRTC のようなブラウザで使える API まで、幅広く扱っている。 www.oreilly.co.jp 読書メモは Gist に置いた。 『ハイパ…

History API は、HTML5 で導入された API。 これを使うことで、JavaScript で URL の履歴を管理できるようになる。 多くの場合、そういった操作は React Router や Vue Router などのルーティングライブラリを通して行うことになる。そのため、History API …

Redux では原則として、ひとつのアプリに対してひとつのstoreを作成する。 アプリ内に複数のstoreを共存させることも可能ではあるが、基本的には単一のstoreを利用するべきであり、公式ドキュメントでもそのように説明している。 Store Setup | Redux Style …

コンポーネントの再レンダリングを適切に抑制していくことが、React アプリのパフォーマンス改善の基本。 コンポーネントの再レンダリングが発生する要因はいくつかあるが、「親の再レンダリングによって発生する子の再レンダリング」については、以下の記事…

デプロイの自動化と History API のフォールバック設定を行うことで、GitHub Pages で SPA を公開できるようにする。 具体的なゴールは以下の通り。 masterブランチにプッシュすると、自動的にビルドが行われる ビルドした内容が GitHub Pages として公開さ…

モーダルは、ウェブアプリケーションでよく使われる機能であり、実装する事が多い。 便利だし、利用者にとっても見慣れた UI なので導入しやすい。 だが、ブラウザや HTML には、モーダルという要素は用意されていない。 似て非なるものとしてalertがあるが…

TypeScript にはabstractキーワードという機能があり、これを使うことで抽象クラスや抽象メンバを宣言することができる。 この機能を上手く使ってクラスを作ることで、可読性が高く、変更にも強いコードを設計できる。 abstractキーワードを使ったクラスやメ…

TypeScript は、まだ ECMAScript に追加されていない提案段階の機能を積極的に先取りしている。 それはクラスも例外ではなく、例えば先日リリースされたv3.8では、現時点ではまだ提案段階であるプライベートフィールドが使えるようになった。 この記事では、…

「発生し得ない値」などのように説明されるnever型。 概念としては分かるのだが、実際にどのようなケースで使えばよいのかイメージできずにいた。 neverを使ったテクニックを調べていて多少のイメージは掴めてきたので、整理しておく。 動作確認は TypeScrip…

TypeScript の構造的部分型という概念は、直感的で分かりやすい。 だが一方で、Freshness やプリミティブ型の挙動など、よく理解しておかないと戸惑ってしまうような挙動も多い。 例えば、なぜ以下のコードがエラーにならないのか、最初は分からなかった。 c…

Cookie に対しては「属性」というものを設定することができる。そして属性の設定内容によって、Cookie の生存期間を指定したり、送付先の制限を行ったりすることが可能になっている。属性のひとつであるSameSiteは、正しく使うことでセキュリティ対策やプラ…

Cookie とは、HTTP でステートフルなやり取りを実現するために、ブラウザとサーバ間で情報を送受信する仕組みである。 HTTP は本来ステートレスなプロトコルである。そのため、同一のユーザーが連続でリクエストを行っても、それぞれ独立したリクエストであ…

HTML や CSS に、斜線を描画するための仕組みは用意されていない。 だがlinear-gradientを利用することで、このような斜線を描画できる。 「Can I use...」で確認すると、主要なブラウザは全てlinear-gradientに対応している。 linear-gradientはその名の通…

React.SuspenseとReact.lazyを使うことで、import()で動的に読み込んだコンポーネントを通常のコンポーネントとしてレンダリングすることができる。 動的読み込みはパフォーマンス向上のためなどに使われるが、それを簡単に React アプリに取り入れることが…

ECMAScript では、モジュールを読み込むための仕組みとしてimport文を定義している。 // sub.js export const foo = 1; export default 2; // main.js import value, {foo} from './sub.js'; console.log(value, foo); // 2 1 import文は仕様上、トップレベ…

React Test Rendererのcreateメソッドは、オプションでcreateNodeMockという機能を使うことができる。 ref属性を使っているコンポーネントのテストに便利なのだが、初見では理解しづらい機能だったので、整理しておく。 React Test Rendererについてはこちら…

React コンポーネントのユニットテストを書くときは、React Testing LibraryやEnzymeなどのサードパーティライブラリを使うことが多いはず。 だがそれらを使わなくても、公式が提供している機能だけでも十分にユニットテストを書くことが出来る。 この記事で…