はじめに
みなさま、Alpine.jsをご存知でしょうか？
まあ、ものすごく簡単に言うと かんたんなVue.js です。
ただでさえJSフレームワークの中では比較的簡単目なVue.jsですが、さらにかんたんです。
どんぐらいかんたんかというと jQueryと同じかそれ以上 ってレベルです。
しゅごい！
今回はこれを紹介していこうと思います。
JSフレームワークとは
SPAとかJSでなんかすごいことやりたいときに入れるやつ 、くらいの雑な認識で大丈夫です。
いわゆる3大フレームワークと言われているのがお互い影響し合いつつ、競い合っている感じです。
概ねデータバインディング（JS内の変数の値をそのまま出したり、formから書き込んだり）がしたいときに使われることが多いかと思います。
- Angular
- おそらく一番初めに出たJSフレームワーク
- Google製で、Google内で燃えに燃えている案件を鎮火させる過程で生まれたリアル銀の弾丸
- ver1の頃は「AngularJS」だったが、2以降ほぼ別物になったので「JS」が名前から外れた
- React
- Facebook製
- プログラマライクな作りなおかげか、おそらく最も人気がある
- ふだんJSを書かない人には死ぬほど敷居が高い
- Vue.js
- GoogleでAngularを使っていたエヴェン・ヨーによって開発された
- 感覚的にはAngularとReactのいいとこ取りって感じ
- .vueファイルにhtmlもjsもcssもまとめて書いちゃう
Vue.jsと違うところ、同じところ
v2の日本語版ドキュメントでも白状されていますが、
このツールのシンタックスは、ほぼ完全に Vue（それと、Angular による拡張）から借用しています。
ということで、結構シンタックスが似ています。
普段Vue.jsを使っている、あるいは挫折してしまったという人には朗報な気がします。
違うところ
マスタッシュ記法 {{ }} でデータバインディングをしない
Vue.jsでは
<template>
<div>
<p>{{ hoge }}</p>
</div>
</template>
<script>
export default {
data() {
return {hoge: 'ほげ'};
}
}
</script>
みたいに書くと
ほげ
って表示されます。 script の data のところで返している hoge を template の {{ hoge }} のところに当てはめています。
これがいわゆるマスタッシュ記法なんですが、これがAlpine.jsだとできません。
ちなみにAlpine.jsで同じことやると
<div x-data="{hoge: 'ほげ'}">
<p x-text="hoge"></p>
</div>
だけでいいのです。すごくないですか？
ディレクティブのprefixが違う
上の例でもチラチラ出てますが、 x-data とか x-text ってところですね。
Vue.jsに v-data はないのですが、 v-text はありますよね。
そう、Vue.jsで v- にしていたところが x- になっています。
Vue.js脳の人はそのままxにしていただければいいってことですね。
なんでXなのかは知りません。エェーックス！！
.vueファイルを作らなくていい
Vue.jsでも.vueファイル作ることが必須ではないのですが、作らずにコンポーネントを作ろうとすると大きな困難に立ち向かうことになるので、だいたい作ると思います。
Alpine.jsはhtmlソースに直接ガンガン書けるので大体のケースでは外部ファイルでわざわざJS書く必要すらありません。
同じところ
シンタックスシュガーがほぼそのまま使える
まあ、とくに on と bind のところですね。
こいつらは @ と : でいけます。おかげさまでVue.js書いてる感が出て楽しいです。
タブインターフェースを作ってみよう！
Alpine.jsをつかってよくあるタブインターフェースを作ってみましょう!
Alpine.jsは今流行りの tailwindcss とセットで語られることが多いので、それも使ってみましょう。
土台のHTMLをつくる
tailwindcssのドキュメントに HTML starter template とかちょうど良さそうなのがあるので、これを引っ張って、そこにtailwindcssとAlpine.jsをCDNから引っ張ってくるコードを足してみました。
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script defer src="https://unpkg.com/alpinejs@3.3.4/dist/cdn.min.js"></script>
<title>Alpine tab sample</title>
</head>
<body>
</body>
</html>
次に tailwindcomponents というサイトに良さげなタブの作例があるのでこちらを参考にさせてもらいます。今回はこちらを使用させていただきました。
https://tailwindcomponents.com/component/simple-tab
これらを使って桃太郎と浦島太郎を切り替えるタブを作ってみました。
htmlだけだとこんな感じです。
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="https://unpkg.com/alpinejs@3.3.4/dist/cdn.min.js"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<title>Alpine tab sample</title>
</head>
<body>
<div class="p-8">
<div style='border-bottom: 2px solid #eaeaea'>
<ul class='flex cursor-pointer'>
<li class='py-2 px-6 bg-white rounded-t-lg'>桃太郎</li>
<li class='py-2 px-6 bg-white rounded-t-lg text-gray-500 bg-gray-200'>うらしまたろう</li>
</ul>
</div>
<div>
むかし、むかし、あるところに、おじいさんとおばあさんがありました。まいにち、おじいさんは山へしば刈かりに、おばあさんは川へ洗濯せんたくに行きました。
ある日、おばあさんが、川のそばで、せっせと洗濯せんたくをしていますと、川上かわかみから、大きな桃ももが一つ、
「ドンブラコッコ、スッコッコ。
ドンブラコッコ、スッコッコ。」
と流ながれて来きました。
</div>
<div>
むかし、むかし、あるところに浦島太郎という心やさしい漁師が住んでいました。
ある日のこと、浜辺を歩いていると一匹の亀が子供達にいじめられているのを見ました。
「これこれ、かめをいじめたらかわいそうだよ。はなしておやり」
そう言って浦島太郎は子供たちから亀を助けてやりました。
</div>
</div>
</body>
</html>
現状話が混ざってしまってますね。ここにAlpine.jsのロジックを入れていきましょう。
Alpine.jsの仕掛けをいれる
まずは x-data ディレクティブを入れます。
これは一番てっぺんのdivに入れてあげます。
x-data は とっておきたいデータを入れておく場所 です。
この辺に入れます
<body>
<div class="p-8" x-data="{open: 1}">
x-data の値のところはまんまjsのobjectですね。
次にイベントハンドラを入れていきましょう。
タブのところですね。
<div style='border-bottom: 2px solid #eaeaea'>
<ul class='flex cursor-pointer'>
<li class='py-2 px-6 bg-white rounded-t-lg' @click="open = 1">桃太郎</li>
<li class='py-2 px-6 bg-white rounded-t-lg' @click="open = 2">うらしまたろう</li>
</ul>
</div>
@click ってところがイベントハンドラです。clickって言っているくらいなので ここをクリックしたら ってところです。
値のところはどんな動作をさせるか、なんですが、ここでは x-data に入れている open の値を変えているよーっていう動作を入れています。
これでタブをクリックすれば内容が切り替わるようになったのですが、タブの色が切り替わらないので、切り替わるロジックを入れてやります。
<div style='border-bottom: 2px solid #eaeaea'>
<ul class='flex cursor-pointer'>
<li class='py-2 px-6 bg-white rounded-t-lg' @click="open = 1"
:class="{'text-gray-500 bg-gray-200': open !== 1}">桃太郎</li>
<li class='py-2 px-6 bg-white rounded-t-lg' @click="open = 2"
:class="{'text-gray-500 bg-gray-200': open !== 2}">うらしまたろう</li>
</ul>
</div>
:class ってところが ロジックで適用するクラスを切り替えているところ になります。
値のobjectのvalueは判定式になっていて、そこが true のときにkeyに書いてあるクラスが適用されます。
できあがり
最終的なソースはこんな感じになります。
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="https://unpkg.com/alpinejs@3.3.4/dist/cdn.min.js"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<title>Alpine tab sample</title>
</head>
<body>
<div class="p-8" x-data="{open: 1}">
<div style='border-bottom: 2px solid #eaeaea'>
<ul class='flex cursor-pointer'>
<li class='py-2 px-6 bg-white rounded-t-lg' @click="open = 1"
:class="{'text-gray-500 bg-gray-200': open !== 1}">桃太郎</li>
<li class='py-2 px-6 bg-white rounded-t-lg' @click="open = 2"
:class="{'text-gray-500 bg-gray-200': open !== 2}">うらしまたろう</li>
</ul>
</div>
<div x-show="open === 1">
むかし、むかし、あるところに、おじいさんとおばあさんがありました。まいにち、おじいさんは山へしば刈かりに、おばあさんは川へ洗濯せんたくに行きました。
ある日、おばあさんが、川のそばで、せっせと洗濯せんたくをしていますと、川上かわかみから、大きな桃ももが一つ、
「ドンブラコッコ、スッコッコ。
ドンブラコッコ、スッコッコ。」
と流ながれて来きました。
</div>
<div x-show="open === 2">
むかし、むかし、あるところに浦島太郎という心やさしい漁師が住んでいました。
ある日のこと、浜辺を歩いていると一匹の亀が子供達にいじめられているのを見ました。
「これこれ、かめをいじめたらかわいそうだよ。はなしておやり」
そう言って浦島太郎は子供たちから亀を助けてやりました。
</div>
</div>
</body>
</html>
桃太郎時
うらしまたろう時
まとめ
以上、Alpine.jsのしょうかいでした！
こんな恐ろしく簡単に、サクッととんでもないことできちゃうの、熱くないですか?