Webマーケティングに
強くなるメディア

  • ログイン
  • 会員になる
  • ログイン
  • 会員になる

  • 総合

    • 新着
    • Webマーケティング講座
    • 資料ダウンロード

    トレンドを知る

    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -

    体系的に学ぶ

    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典

    Info

    • 運営会社
    • 著者一覧
    • お問い合わせ
    • 広告掲載について
    • 広告掲載に関する規約
    • 利用規約
    • プライバシーポリシー
    • 特定商取引法に基づく表示

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード
  • トレンドを知る
    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -
  • 体系的に学ぶ
    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典
  1. Webマーケティングメディア ferret
  2. ニュース
  3. JavaScript初心者にもオススメ!クリーンなコードでHTMLを拡張する「Stimulus」とは?
  1. action
  2. URLをコピーしました

JavaScript初心者にもオススメ!クリーンなコードでHTMLを拡張する「Stimulus」とは?

  • 2018年7月20日
  • ニュース

HTML や CSS は得意だけれど、 JavaScript は苦手…という方は、多いのではないでしょうか。 HTML や CSS は書き方がある程度統一されていますが、 JavaScript は数えきれない フレームワーク やライブラリがあるので、どれを使えばいいのか迷ってしまいます。

そのような方にこそおすすめしたいのが、Stimulusという JavaScript ライブラリです。

今回は、クリーンなコードで HTML を拡張する「Stimulus」の概要や基本的な操作方法を紹介します。初心者でも比較的簡単に扱えるので、ぜひ利用してみてはいかがでしょうか。

Stimulusとは?

stm.png

Stimulusは、世界的なプロジェクトマネジメント ツール Basecamp(旧37シグナルズ)を開発しているメンバーによって開発されている フレームワーク です。

JavaScript は フレームワーク だけでも、Angular.JSやReact、Vue.jsと、様々なものがあり、特に初心者・中級者にとってはどれを学べばいいのか迷ってしまいます。もちろん、近年流行しているモダンな フレームワーク をゼロから勉強するのもよいですが、DOM操作に関してより気軽に使えるのが、今回紹介するStimulusです。

Stimulusは、簡単にいえば、 HTML にある属性を付与することで、 HTML をコンポーネント単位で JavaScript オブジェクトと連動させることができる フレームワーク です。

スライド1.png

コンポーネントとは、「見た目」と「振る舞い」をグループ化して部品化したもののことです。たとえば、パスワードの強度を測定するパスワードチェッカーは、 HTML で組み立てる テキスト ボックスという見た目部分の他に、実際にパスワードの強度を測定する振る舞い( アルゴリズム )が必要です。コンポーネントの考え方では、この「見た目」部分と「振る舞い」部分をセットにして開発します。

フロントエンド開発者と違い、デザイナーやディレクターの方は HTML や CSS には詳しくても、 JavaScript の難しい話は倦厭されがちかもしれません。しかし、 HTML と簡単な JavaScript の知識さえあれば、Stimulusは簡単に扱うことができます。

StimulusはWebpackやBabelのようなビルドシステムを使ってインストールすることができます。以下の URL でもアクセスできるので、src属性に貼り付けて利用してみましょう。

https://unpkg.com/stimulus/dist/stimulus.umd.js

参考:
Installing Stimulus in Your Application

Stimulusの基本の「き」

code.jpg イメージ画像 / Unsplash

それでは、Stimulusの基本をゼロから解説していきます。

1. HTML と JavaScript を紐づける「data-controller」

HTML と CSS について少しでも勉強したことがある人は、次のコードを理解できると思います。

<div class="hello"></div>

これは HTML と CSS をつなげるもっとも基本的な方法です。div タグ のclass属性に「hello」と名付けることによって、 CSS でスタイルを操作することができます。

同じように、Stimulusでは HTML と JavaScript をdata-controllerという属性で紐づけていきます。例えば、以下のようなコードです。

<div data-controller="hello"></div>

この「見た目」の部分に対して、 JavaScript 側でcontrollerと呼ばれる「振る舞い」部分を作成します。

import { Controller } from "stimulus"

export default class extends Controller {
  greet() {
    document.text.value = "Hello, ferret!";
  }
}

これで、 HTML と JavaScript がつながりました。

2. HTML から JavaScript の動作を呼び出す「data-action」

しかし、これだけでは何も起こらないので、 HTML 側を少し変えてあげましょう。

<div data-controller="hello">
  <input type="text">
  <button data-action="click->hello#greet">挨拶する</button>
</div>

これで、「挨拶する」ボタンが押された時に、 テキスト ボックスに「Hello, ferret!」と表示されるようになります。

このように、「data-action」を指定したボタンは、クリックすることで JavaScript 側のgreet関数を呼び出すことができます。

HTML から JavaScript に値を渡す「data-target」

もう一つ、別の例を出してみましょう。 JavaScript 側のコードは省略しますが、以下の HTML をご覧ください。

<div data-controller="clipboard">
  パスコード:<input data-target="clipboard.source" type="text" value="ferret" readonly>
  <button data-action="clipboard#copy">クリップボードにコピー</button>
</div>

ここでは、「data-controller」「data-action」の他に、「data-target」が指定されているパーツがあることに気づくでしょう。上記のコードでは、「クリップボードにコピー」というボタンを押すことで、「data-target」が指定されている テキスト ボックスに入っている「ferret」という文字列をクリップボードにコピーします。

Stimulusの3つの「概念」

スライド2.png

Stimulusの基本的な考え方は以上です。まとめると、Stimulusには「controller」「action」「target」の3つの概念があり、これらを組み合わせることで、 JavaScript のDOM操作を簡単にしてくれます。

しかも、重要なのは、 HTML の構造を崩さずに(というよりも、既存の HTML に属性をくっつけるだけで)操作可能になる、という点です。つまり、デザイナーの方は単純にWeb ページ のデザインをまず作成したあとに、そのまま「振る舞い」を付け加えればいいことになります。

Stimulusと現行の主流な JavaScript フレームワーク との違い

logo.jpg

Stimulusは、このように何らかの HTML 要素を操作するために作られた フレームワーク です。

現在主流の フレームワーク の多くは、JSONをテンプレートエンジンを経由してDOM要素に変えていきます。 フレームワーク で空のページを生成し、そこにレンダリングして要素を表示するやり方を取っています。一方、Stimulusは「すでにそこにあるオブジェクト」に対して動作を与えていきます。

また、多くの フレームワーク は JavaScript に書かれたオブジェクトの「state」(状態)を管理して、stateに基づいて HTML をレンダリングします。一方、Stimulusでは、stateは HTML の中にあるので、controllerは ページ 遷移の間に破棄することができますが、キャッシュされた HTML が表示されればcontrollerは再起動されます。

少し難しい話が続きましたが、要するにStimulusは現在人気でよく使われている フレームワーク が持っている複雑な手続きを、よりシンプルな形にしているということです。敷居が下がって誰でも操作しやすい反面、少し物足りないと感じる人がいるかもしれませんが、そのような方は別の フレームワーク と組み合わせて使ってみるといいでしょう。

まとめ:他 フレームワーク と組み合わせて使ってみよう

Stimulusは用途が限定されている分、初心者・中級者でもカジュアルに使うことができますが、他の フレームワーク と組み合わせて使って応用的に使う方法もあります。

最近のモダンな フレームワーク としてReactとReduxをセットにすることが多いですが、Stimulusの場合はTurbolinksと呼ばれる、Ruby利用者の間で人気の フレームワーク と抱き合わせで使うことも多いようです。

使い方次第で、色々な応用例に利用できそうです。ぜひ、自分なりの使い方を見つけてみましょう。

関連記事

  • Flexboxでグリッドデザインを実装できるCSSフレームワーク15選
  • 知って便利に!CSSグリッドを使ってフォームデザインを簡単にする方法
  • シンプルで美しい!Google発のUIフレームワーク「Material Components for the Web」とは?
  • CSSも軽量化の時代!コーダーが押さえるべきCSSコーディング5つのポイント
  • メルマガをレスポンシブ対応!メール用HTMLテンプレートを作成するフレームワーク「MJML」の使い方

関連記事

  • Flexboxでグリッドデザインを実装できるCSSフレームワーク15選
  • 知って便利に!CSSグリッドを使ってフォームデザインを簡単にする方法
  • シンプルで美しい!Google発のUIフレームワーク「Material Components for the Web」とは?
  • CSSも軽量化の時代!コーダーが押さえるべきCSSコーディング5つのポイント

この記事を読んだ方にお勧め、ferretの無料「Webマーケティング講座」

ferretでは、ニュース記事を毎日読むだけでは身につきにくいWebマーケティングの『体系的な知識』を学ぶことができる「Webマーケティング講座」コンテンツも用意しています。

解説を読むだけでなく、記入式のワークを埋めていくことで自社サービスを客観的に理解し、今行うべき施策を考える準備ができるように構成されたコンテンツです。Webマーケティングは何から始めたら良いか分からないという方、無料ですのでぜひのぞいてみてください。

関連キーワード

  • HTML (61)
  • JavaScript (35)

この記事を書いた人

酒井 涼

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。
  
>> 執筆記事一覧はこちら

Webマーケティングのノウハウ集をプレゼント!

【ferret】5つのマーケティングメソッド(無料)

創業より10年以上、Webマーケティングの最前線で弊社が得てきた効果をあげるためのノウハウを1つの資料にまとめました。(全79ページ)

限定版の資料をダウンロードする(全79ページ)抜粋版のサンプルを読む(全3ページ)

  • 昨日
  • 週間
  • 月間

世界でシェアを誇る有名CMSを比較!それぞれのメリット・デメリット

Twitterで売上予測、プロモーションはYouTube。タカラトミーのEC&Web戦略に迫る

【CMS】WordPressとは?特徴・機能・導入方法・プラグインをまとめて解説

登録しておくとビジネスに役立つかも!?チェックしたいメルマガ13選

【機能・料金比較】SFAの失敗しない選び方

検索流入に影響あり?Google検索の新機能「アクティビティカード」とは

急成長するInstagramの動画と動画広告

営業ナシでも選ばれるのはなぜ?ヌーラボのビジネスモデルを徹底取材

経営判断を加速化!ERPの基本とメリット・デメリット

RPA(ロボティック・プロセス・オートメーション)とは? 基礎知識やメリット・デメリットを解説

無料ホームページ作成ツールはどれを選ぶべき?おすすめサービス15選

「センスと根性で売る営業はもう終わり」ベルフェイスの目指すこれからの営業

作りたいサイトによって選び方が違う!CMSの種類と特徴

Googleの「しごと検索」が日本でもリリース!求人検索に大きな影響が

新しくなったSearch Console(サーチコンソール)の導入と使い方について

現会員424,996人

ログインはこちら

おすすめ記事

Flexboxでグリッドデザインを実装できるCSSフレームワーク15選

知って便利に!CSSグリッドを使ってフォームデザインを簡単にする方法

シンプルで美しい!Google発のUIフレームワーク「Material Components for the Web」とは?

CSSも軽量化の時代!コーダーが押さえるべきCSSコーディング5つのポイント

メルマガをレスポンシブ対応!メール用HTMLテンプレートを作成するフレームワーク「MJML」の使い方

エントリー

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード

トレンドを知る

  • ノウハウ&トレンド ニュース
  • リリース ニュース
    - ferret×PR TIMES -
  • マーケター特集
    - マーケティングジャーニー -
  • おすすめツールソリューション情報
    - by マケスト -

体系的に学ぶ

  • 基礎〜応用を学ぶ
    - Webマーケティング講座 -
  • コンテンツマーケティングを学ぶ
  • Googleアナリティクスガイド
  • 事例
  • 資料ダウンロード
  • マーケティング用語辞典
  • 運営会社
  • 著者一覧
  • お問い合わせ
  • 広告掲載について
  • 広告掲載に関する規約
  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示
Webマーケティングに
強くなるメディア
© basic Incorporated.

過去10年間で弊社が得てきたWebマーケティングのノウハウを

1冊の資料にまとめました。(全83ページ)

feedlyへの登録はこちら
その他のrssはこちら