JavaScript を使用する新しい Web プロジェクトを開始する場合、多くの場合、最初に行うのはビルドおよび開発ツールのセットアップです。たとえば、最近人気のVite。複雑なビルド ツールがすべての JavaScript (Web) プロジェクトに必要なわけではないことに気づいていないかもしれません。実際、この記事で説明するように、今ではこれなしで過ごすのが以前よりも簡単になりました。

index.html ファイルを使用して新しいプロジェクトを作成します。

  
  
  
    
Hello world
  

VS Code を使用している場合は、ライブ プレビュー拡張機能をインストールします。それを実行します。これは、ライブ リロードを備えたシンプルなファイル サーバーです。任意のファイル サーバーを使用できます。Python には
が組み込まれています。

python3 -m http.server

ライブ プレビューは、ファイルに変更を加えた後にページが自動的に更新されるため、気に入っています。

これで、ブラウザからindex.html ファイルにアクセスし、「Hello world」が表示されるようになります。

次に、index.js ファイルを作成します:

console.log("Hello world");

export {};

index.html に含めます:

ブラウザで開発者コンソールを開きます。 「Hello world」が表示されれば、正しく読み込まれていることがわかります。

ブラウザが ECMAScript モジュールをサポートするようになりました。副作用のために他のファイルをインポートできます:

import "./some-other-script.js";

または輸出用

import { add, multiply } "./my-math-lib.js";

かなりクールですよね？詳細については、上記の MDN ガイドを参照してください。

パッケージ

おそらく車輪の再発明はしたくないでしょう。そのため、プロジェクトではサードパーティのパッケージを使用することになるでしょう。それは、今からパッケージ マネージャーを使い始める必要があるという意味ではありません。

データ検証にスーパー構造体を使用したいとします。独自の (ローカル) ファイル サーバーだけでなく、任意の URL からモジュールをロードすることもできます。 esm.sh は、npm.

https://esm.sh/superstruct にアクセスすると、最新バージョンにリダイレクトされることがわかります。このパッケージは次のようにコードに含めることができます:

import { assert } from "https://esm.sh/superstruct";

安全を確保したい場合は、バージョンを固定できます。

種類

あなたはどうか知りませんが、TypeScript は私を台無しにしました (そして怠惰にさせました)。型チェッカーの助けを借りずにプレーンな JavaScript を書くのは、綱渡りのように感じます。幸いなことに、型チェックを省略する必要もありません。

npm をバストアウトする時期が来ました (ただし、npm が提供するコードは出荷されません)。

npm init --yes
npm install typescript

JavaScript コードで TypeScript コンパイラーを問題なく使用できます。それに対する一流のサポートがあります。 jsconfig.json を作成します:

{
  "compilerOptions": {
    "strict": true,
    "checkJs": true,
    "allowJs": true,
    "noImplicitAny": true,
    "lib": ["ES2022", "DOM"],
    "module": "ES2022",
    "target": "ES2022"
  },
  "include": ["**/*.js"],
  "exclude": ["node_modules"]
}

今すぐ実行

npm run tsc --watch -p jsconfig.json

コード内で型エラーが発生します。 TypeScript コンパイラは次のように通知するはずです:

/** @type {number} **/
const num = "hello";

ちなみに、上に表示されているコメントは JSDoc です。この方法で、JavaScript に型の注釈を付けることができます。 TypeScript を使用するよりも少し冗長ですが、すぐに慣れることができます。また、非常に強力なので、クレイジーな型を書いていない限り (ほとんどのプロジェクトではそうすべきではありません)、問題はないはずです。

複雑な型 (ヘルパー) が必要な場合は、いつでも .d.ts ファイルに TypeScript を追加できます。

JSDoc は、大規模な JavaScript プロジェクトに行き詰まっている人々が段階的に TypeScript に移行できるようにするための単なる足がかりでしょうか?私はそうは思わない！ TypeScript チームは、今後の TypeScript リリースなどで、JSDoc TypeScript に優れた機能を追加し続けています。オートコンプリートは VS Code でもうまく機能します。

マップをインポートする

ビルドツールを使わずに外部パッケージをプロジェクトに追加する方法を学びました。ただし、コードを多数のモジュールに分割する場合、完全な URL を何度も書き出すのは少し冗長になる可能性があります。

index.html の head セクションにインポート マップを追加できます:

これで、
を使用してこのパッケージをインポートできます。

import {} from "superstruct"

「通常の」プロジェクトのようなもの。もう 1 つの利点は、パッケージをローカルにインストールすると、型の補完と認識が期待どおりに機能することです。

npm install --save-dev superstruct

node_modules ディレクトリ内のバージョンは使用されないことに注意してください。これを削除しても、プロジェクトは引き続き実行されます。

私がよく使うトリックは次のように追加することです:

      "cdn/": "https://esm.sh/",

インポートマップへ。その後、esm.sh を通じて利用可能なプロジェクトをインポートするだけで使用できるようになります。例えば。：

import Peer from "cdn/peerjs";

このタイプのインポートの開発用にも、node_modules からタイプをプルしたい場合は、jsconfig.json の COMPILEROPTIONS に以下を追加する必要があります:

    "paths": {
      "cdn/*": ["./node_modules/*", "./node_modules/@types/*"]
    },

導入

プロジェクトをデプロイするには、すべてのファイルを静的ファイル ホストにコピーすれば完了です。レガシー JavaScript プロジェクトに取り組んだことがあるなら、1 ～ 2 年も経っていないビルド ツールを更新する苦労をご存知でしょう。このプロジェクト設定では、あなたも同じ運命をたどることはありません。

テスト

JavaScript がブラウザ API に依存していない場合は、Node.js にバンドルされているテスト ランナーを使用するだけで済みます。しかし、ブラウザ内で直接実行できる独自のテスト ランナーを作成してみてはいかがでしょうか?

/** @type {[string, () => Promise | void][]} */
const tests = [];

/**
 *
 * @param {string} description
 * @param {() => Promise | void} testFunc
 */
export async function test(description, testFunc) {
  tests.push([description, testFunc]);
}

export async function runAllTests() {
  const main = document.querySelector("main");
  if (!(main instanceof HTMLElement)) throw new Error();
  main.innerHTML = "";

  for (const [description, testFunc] of tests) {
    const newSpan = document.createElement("p");

    try {
      await testFunc();
      newSpan.textContent = `✅ ${description}`;
    } catch (err) {
      const errorMessage =
        err instanceof Error && err.message ? ` - ${err.message}` : "";
      newSpan.textContent = `❌ ${description}${errorMessage}`;
    }
    main.appendChild(newSpan);
  }
}

/**
 * @param {any} val
 */
export function assert(val, message = "") {
  if (!val) throw new Error(message);
}

次に、ファイル example.test.js.
を作成します。

import { test, assert } from "@/test.js";

test("1 1", () => {
  assert(1   1 === 2);
});

すべてのテストをインポートするファイル:

import "./example.test.js";

console.log("This should only show up when running tests");

ページの読み込み時にこれを実行します:

await import("@/test/index.js"); // file that imports all tests
(await import("@/test.js")).runAllTests();

これで完璧な TDD セットアップが完了しました。テストのセクションのみを実行するには、いくつかの .test.js インポートをコメント アウトできますが、テストの実行速度が問題になり始めるのは、多数のテストを蓄積した場合のみです。

利点

なぜこんなことをするのですか？そうですね、使用する抽象化レイヤーの数が少ないと、プロジェクトのデバッグが容易になります。 「プラットフォームを活用する」という信条もあります。学んだスキルは他のプロジェクトにもより良く応用できます。もう 1 つの利点は、このようにして構築されたプロジェクトに 10 年後に戻っても、まだ機能しており、8 年間使用できなくなった構築ツールを復活させるために考古学を行う必要がないことです。従来のプロジェクトに携わった多くの Web 開発者にとっては馴染みのある経験です。

その他のアイデアについては、plainvanillaweb.com をご覧ください。