Stimulus

3ステップで試す

1. 1

   Stimulus 3.2.2をlocal dependencyとして追加する

   stable release 3.2.2をversion固定してinstallします。

   mkdir -p stimulus-demo && cd stimulus-demo && npm init -y >/dev/null && npm install @hotwired/stimulus@3.2.2コピー
2. 2

   package version・license・entry pointを確認する

   browserを起動せずpackage metadataからversion、MIT license、bundle entry pointを確認します。

   cd stimulus-demo && node -e 'const p=require("./node_modules/@hotwired/stimulus/package.json"); console.log(`version=${p.version} license=${p.license} main=${p.main}`)'コピー
3. 3

   controllerとHTML接続の最小例を作る

   server起動は行わず、controller・action・targetがどう接続されるかをfileで確認します。

   cd stimulus-demo && printf '%s\n' 'import { Controller } from "@hotwired/stimulus"' 'export default class extends Controller {' ' static targets = ["output"]' ' greet() { this.outputTarget.textContent = "Hello from Stimulus" }' '}' > hello_controller.js && printf '%s\n' '<div data-controller="hello">' ' <button data-action="click->hello#greet">Greet</button>' ' <span data-hello-target="output"></span>' '</div>' > fragment.htmlコピー

Built with

• TypeScript

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• Cheerio30,516 Stars

  共通タグ 3件 · 同じ言語

  jQuery風selectorでHTML・XMLを軽量にparse・検索・書き換える

  TypeScript
• Cropper.js13,902 Stars

  共通タグ 3件 · 同じ言語

  画像上の選択範囲を移動・拡縮し、ブラウザ内で切り抜き結果をCanvasとして取得する

  TypeScript
• WXT10,570 Stars

  共通タグ 3件 · 同じ言語

  Chrome・Firefox向けWeb拡張をfile-based entrypointとHMR付き開発環境で構築する

  TypeScript
• Expo52,566 Stars

  共通タグ 4件 · 同じ言語

  React NativeアプリをAndroid・iOS・Webへ一つのprojectから展開する

  TypeScript
• Vue 2212,828 Stars

  共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語

  Vue 2をEOL済みlegacy frameworkとして保守し、Vue 3移行・security/compliance対応の判断点を整理する

  TypeScript
• Angular101,019 Stars

  共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語

  component・signal/DI・routing・forms・SSR/hydration・CLIを一つのTypeScript web application platformへ統合する

  TypeScript