押すんじゃないよ

押すんじゃないよ！

\r\n>

\r\n> \r\n>

\r\n> \r\n> \r\n>\r\n>```\r\n>/src/main.tsをtype=\"module\"で読み込むのがミソです\r\n>開発時はmain.tsはTypeScriptで記述しますが、ビルド時には普通のJavaScriptにコンパイルされて出力されます\r\n>\r\n>![0193baa1-d5fe-7361-9bec-7c2c3196f05c.webp](https://res.cloudinary.com/dpemgubzm/image/upload/v1734008822/kroriv.official.site.strapi/0193baa1_d5fe_7361_9bec_7c2c3196f05c_4e5ef94427.webp)\r\n>### TypeScript\r\n>例としてボタンのコールバック関数を定義したモジュールを書いていきます\r\n>exportして他のモジュールからも参照できるようにしてみます\r\n>```javascript\r\n>// /src/button.handler.ts\r\n>export const onClickHandler = ({ ...props }: { message: string; }): void => {\r\n> // Props\r\n> const { message } = props;\r\n> // 型安全なアラートメッセージを表示\r\n> alert(message);\r\n>};\r\n>```\r\n>メインのモジュールでimportして使ってみます\r\n>```javascript\r\n>// /src/main.ts\r\n>import $ from \"jquery\";\r\n>import { onClickHandler } from \"./button.handler\";\r\n>import \"./style.css\";\r\n>\r\n>document.addEventListener(\"DOMContentLoaded\", () => {\r\n> // TypeScriptっぽさを出すために型定義で明示的に型を指定する\r\n> // Mainセクションの要素を取得\r\n> const main: JQuery = $(\"main\");\r\n> // Mainセクション内のボタン要素を取得\r\n> const buttons: HTMLButtonElement[] = main.find(\"button\").toArray();\r\n> // ボタンごとに処理を実行\r\n> buttons.forEach((button: HTMLButtonElement) => {\r\n> // 現在のボタンをjQueryオブジェクトとしてラップ\r\n> const $button: JQuery = $(button);\r\n> // クラスが\"button-do-click\"の場合の処理\r\n> if ($button.hasClass(\"button-do-click\")) {\r\n> // ボタンにクリックイベントを登録\r\n> $button.on(\"click\", () => onClickHandler({ message: \"なんで押した！\" }));\r\n> }\r\n> });\r\n> });\r\n>```\r\n>### 補完機能\r\n>![0193ba90-97b5-7b46-b644-94c858149221.webp](https://res.cloudinary.com/dpemgubzm/image/upload/v1734001944/kroriv.official.site.strapi/0193ba90_97b5_7b46_b644_94c858149221_aaad7189af.webp)\r\n>TypeScriptのおかげで、こんなかんじで型定義に基づく補完機能が有効になります\r\n>\r\n>サンプルコードはシンプルすぎてTypeScriptの恩恵はないですが、コードが肥大化するとTypeScriptのモジュール指向は機能を管理しやすくなり、機能が抽象化して複雑になるほどTypeScriptの補完機能や、型安全（型ガード）の恩恵は大きくなります\r\n>※あくまでサンプルコードであり、新規でjQueryを使うのはおすすめできません\r\n>\r\n>TypeScriptつかわないよ！という場合は普通にCDNから読み込んで

カテゴリ

タグ

Viteで爆速フロントエンド開発環境をつくる