Pines - Alpine.js + Tailwind CSS で超簡単UI -

## はじめに

もう JavaScript や CSS なんて書きたくない！

でも、綺麗で動きもある画面を作りたい！

そんな人にオススメなのが Pines です

https://devdojo.com/pines

コピー＆ペーストだけで以下のような UI を超簡単に作れてしまいます！

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="NWEZzmW" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/NWEZzmW">
  Pines Accordion</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="bGQXPzp" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/bGQXPzp">
  Untitled</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="LYXwowO" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/LYXwowO">
  Untitled</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ZEmdgER" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/ZEmdgER">
  Pines Copy to Clipboard</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="abPoRBb" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/abPoRBb">
  Pines Date Picker</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

公式サイトの謳い文句

> Pines is a library of animations, sliders, tooltips, accordions, modals, and more! It's a set of UI elements that can be copy and pasted into any Alpine and Tailwind projects.

和訳 (DeepL)

> Pinesは、アニメーション、スライダー、ツールチップ、アコーディオン、モーダルなどのライブラリです！AlpineとTailwindのプロジェクトにコピー＆ペーストできるUI要素のセットです。

というわけで、 Alpine.js と Tailwind CSS の合わせ技で JS も CSS も書かずに UI コンポーネントを実装しましょう

https://alpinejs.dev/

https://tailwindcss.com/

本記事では CodePen を使っていますが、公式サイトにプレイグラウンドもあるので、まずはここで試してみるのもありです

https://devdojo.com/pines

:::note info
2023/8/17 更新

CodePen で Tailwind CSS と Alpine.js の最新版を使うように修正しました
:::

## CodePen でやってみよう

CodePen はブラウザ上で HTML 、 CSS 、 JavaScript を書いて Web ページを実装できるサービスです

https://codepen.io/

無料で使えるので、 Web UI のお手軽プレイグラウンドとして使えます

この記事の冒頭で Pines の例を実装したのも CodePen です

### CodePen の使い方

アカウントを作ってログインすると、以下のような画面が表示されます

左メニューの "Pen" をクリックしてください

![スクリーンショット 2023-08-13 9.03.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/9f0b2c62-da02-e367-641f-41f738e5f97a.png)

以下のようなエディター画面が表示されます

![スクリーンショット 2023-08-13 9.08.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/d227aa72-8eff-aafa-9aa2-26537f256a04.png)

このエディター画面の HTML 、 CSS 、 JS の枠内にそれぞれコードを記述することで、下に Web ページが表示されるようになっています

ここで Pines のコンポーネントを使ってみましょう

### Pines を使うための準備

Pines は Alpine.js という JavaScript ライブラリーと、 Tailwind CSS という CSS ライブラリーを組み合わせて使います

そのため、まずはこれらのライブラリーを読み込む必要があります

CodePen の場合、設定画面で読み込むライブラリーの URL を指定できます

エディター画面の右上 "Settings" から設定画面を開きます

![スクリーンショット 2023-08-13 9.08.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/79880acb-a0e6-392f-3ca8-fb7b32a7fa74.png)

設定画面左メニューの "JS" をクリックし、画面右側を下にスクロールして "Add External Scripts/Pens" のフォームに移動します

![スクリーンショット 2023-08-17 12.43.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/eaaf754e-6425-99cb-dcd9-63a4d604ff13.png)

下画像の枠が青くなっているところに Tailwind CSS の URL "https://cdn.tailwindcss.com" を入力します

![スクリーンショット 2023-08-17 12.44.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/f7ad6726-9f7e-1533-6cab-55e70a44cd5c.png)

同様に Alpine.js の URL "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" を追加します

![スクリーンショット 2023-08-17 12.47.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/c33cf87b-efaf-0c00-6336-6be9c596c2a2.png)

追加できたら右下の "Save & Close" で設定画面を閉じます

これで Pines を使うための準備ができました

### Copy to Clipboad ボタンの実装

API キー等を発行したときによく使う "Copy to Clipboad" （クリップボードでへコピー）ボタンを Pines で実装してみましょう

Pines の公式ドキュメントにコンポーネントの一覧があります

以下の URL が "Copy to Clipboad" コンポーネントのページです

https://devdojo.com/pines/docs/copy-to-clipboard

このページの "Code" ボタンをクリックすると、コンポーネントの実装コードが表示されます

右上のコピーボタンをクリックすると、コードがクリップボードにコピーされます

![スクリーンショット 2023-08-14 10.08.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/a18593f0-3c6a-cc57-ddf7-7500003cc71f.png)

あとはコピーしたコードを CodePen の "HTML" エリアに貼り付けるだけです

`copyText` の文字列を変えればコピーする文言を変更できます

```diff_javascript
<div x-data="{
-       copyText: '',
+       copyText: 'Hello, Pines!',
        copyNotification: false,
```

画面下部のエリアに "Copy to Clipboad" コンポーネントが表示されます

![スクリーンショット 2023-08-14 10.06.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/0013f388-1396-0aa9-a832-5f36aae3b580.png)

改めて、出来上がったものがコチラです

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ZEmdgER" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/ZEmdgER">
  Pines Copy to Clipboard</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

"Copy to Clipboad" をクリックすると、指定した文字（"Hello, Pines!"）がクリップボードにコピーされ、ボタンの文字が "Copied to Clipboad" で緑色になります

また、一定時間経過後に元に戻ります

注目すべきは、 "CSS" エリアや "JS" エリアに何も書いていないことです

"HTML" エリアだけで全てが完結しています

Alpine.js は JavaScript を書かないための JavaScript ライブラリであり、 Tailwind CSS は CSS を書かないための CSS ライブラリだと言えます

その組み合わせである Pines では、 JS も CSS も書かずにコンポーネントが作れるわけです

### Accordion の実装

右上アイコンをクリックすると表示されるドロップダウンメニューから "New Pen" をクリックします

![スクリーンショット 2023-08-14 10.17.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/97e3ad78-62f5-e22a-9d89-c5d4aff53655.png)

すると新しいペン用のエディター画面に遷移します

"Copy to Clipboad" のときと同じように設定画面を開き、 JS に Tailwind CSS と Alpine.js を追加します

Accordion ではアニメーションを使うため、 Collapse Plugin を追加します

https://alpinejs.dev/plugins/collapse

JS のライブラリーに "https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js" を追加します

URL の左 "≡" アイコンを掴んで順序を入れ替えることができます

順序が正しくないとアニメーションにならないため、必ず Collapse Plugin が上、 Alpine.js が下になるようにしてください

![スクリーンショット 2023-08-17 12.52.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/5f25e677-902b-a7b3-70b6-37f2da930e0e.png)

設定を保存したら Pines の公式ドキュメントから Accordion のコードをコピーし、 "HTML" エリアに貼り付けます

https://devdojo.com/pines/docs/accordion

出来上がったものがコチラです

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="NWEZzmW" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/NWEZzmW">
  Pines Accordion</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

クリックしたところだけが開くアコーディオンメニューが実装できました

## 実際の Web サイトへの導入

CodePen でやったように Alpine.js と Tailwind CSS を CDN からロードする方法でも使えますが、実際には package.json 等に追加して使うことになります

あとは公式ドキュメントからコピー＆ペースとして HTML 内に埋め込むだけです

Phoenix への具体的な導入例を以下の記事に書いたので参考にしてください

https://qiita.com/RyoWakabayashi/private/133b8880665ab28d0610

## まとめ

Pines を使えば JS や CSS を書く事なく Web コンポーネントを実装できました

もちろん、 Alpine.js や Tailwind CSS の知識があればカスタマイズも自由自在なので、うまく使って脱JSの実装を目指しましょう