弁護士ドットコム株式会社 Creators’ blog

弁護士ドットコムがエンジニア・デザイナーのサービス開発事例やデザイン活動を発信する公式ブログです。

デザイナーが Alpine.js を触って感じた Good なこと

弁護士ドットコム アドベントカレンダー

この記事は弁護士ドットコム Advent Calendar 2023の 16 日目の記事です。

前日は @hikarun_sre さんの「情勢の変化とリモート、福岡を選んだ私の働き方」でした。

弁護士ドットコム事業本部でデザイナーをしている門倉（@kuroinu123）です。

最近 Alpine.js というとてもシンプルな JavaScript フレームを知ったのですが、覚えることも少なく、それでいて動きのあるデモをすばやく作成できるので使い所がありそう…と感じたので、Alpine.js の簡単な紹介とデザイナーとして嬉しかったことを書いてみようと思います！

はじめに

弁護士ドットコムでは、デザイナーが Figma を使って UI をデザインしています。大抵は Figma のプロトタイピング作成機能の活用で済むのですが、細かなインタラクションをどのような構造でコードに落とし込んだら良いかを考えたいときがあります。JavaScript による DOM 操作で実装することもできますが、少し大変……。そんな時に Alpine.js を使うと、手間をかけずにインタラクションのあるデモを再現できるのが個人的な推しポイントです。

特に、

  • コードに興味があるデザイナー
  • Figma のプロトタイプ機能を深く掘り下げたいデザイナー
  • サクッとデモを作成して共有したい！

な方々は、ぜひ一度触ってみてほしいです！

Alpine.js ってこんなフレームワーク

Alpine.jsはシンプルな JavaScript のフレームワークです。 私がこのフレームワークを知ったのは、Laravel の学習をしていたときでした。Web Developer のCaleb Porzio さんが作成したフレームワークで、他にも、主に Laravel 開発者にとって効率的に UI を構築するためのLivewireを作っているようです。

<!-- トグルメニュー例 -->
<div x-data="{open: false}">
  <button
    @click="open = !open"
    x-bind:aria-label="open ? 'プロフィールメニューを閉じる' : 'プロフィールメニューを開く'"
  >
    <!-- メニューアイコン -->
    <span class="material-symbols-rounded"> menu </span>
  </button>
  <!-- 開閉する -->
  <div x-show="open">
    <span>プロフィールメニュー</span>
  </div>
</div>

※デモにつき、コードは簡略化しています。

以上のコードはプロフィールメニューの開閉をイメージしたものですが、JavaScript の基本構文をいくつか理解していれば、比較的少ない学習曲線で、リッチな動きのあるデモを作成できます。

x-dataでメニューの開閉状態であるopenを定義し、@clickでopenの値をtrue/falseと切り替えることができます。もし、openがtrueであれば、プロフィールメニューを表示します。

その他にも、

  • x-if
  • x-text
  • x-model
  • x-for

などのDirectivesを覚えることで、ユーザーの入力を伴う処理など、より多様な表現が可能です。

触ってみて感じた Good ポイント

ブラウザ上でのリアルな挙動確認

まず、Alpine.js の使い勝手の良さを感じた最初の点は、script 要素を 1 つ追加するだけですぐにコーディングを開始できることでした。

<html lang="ja">
  <head>
    <script
      src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
      defer
    ></script>
  </head>
  <body>
    ...
  </body>
</html>

この手軽さが、デモを作る際に非常に役立ちました。

手元の VSCode で HTML ファイルを作成した後、そのコードをCodePenのようなオンラインコードエディターにペーストします。これにより、ブラウザ上で動作する UI とそのコードを、他のチームメンバーや関係者と簡単に共有できます。インタラクションのデザインを視覚化し、共有するのにこの方法は特に便利だと思います。

シンプルな構文

JavaScript の基本構文に慣れれば、Alpine.js を直感的に扱えるのも良い点でした。

先ほどのトグル（開閉）の例とは別に、ユーザーの入力を含めたデモも作ってみました。

メモ機能のデモ画像

<div x-data="{ name: '', items: [] }">
  <div>
    <h2>メモ📝</h2>
    <p>テントサウナに持っていくもの</p>
    <form @submit.prevent="items.push({id: items.length + 1, name}); name = ''">
      <input x-model="name" type="text" id="name" />
      <button type="submit">追加</button>
    </form>
    <template x-if="items.length > 0">
      <ul>
        <template x-for="item in items" :key="item.id">
          <li x-text="item.name"></li>
        </template>
      </ul>
    </template>
  </div>
</div>

※デモにつき、コードは簡略化しています。

items配列に対して、フォームに入力したアイテムの名前を追加していくシンプルなデモです。x-model属性を付与することで、フォームに入力されたテキスト情報を取得できます。

アイテムが動的に増える挙動などは Figma での再現が難しかったりしますが、JavaScript で配列の扱い方を覚えれば、比較的に簡単に実装できました。

またその他にも、以下のような「いいね機能」のデモも、いくつかの Directives を使い分けることで実装できました。

Alpine.jsを使用したいいね機能と詳細開閉の操作動画

🔗CodePen デモ

Figma の プロトタイピング作成機能 の理解に役立つ

はじめに紹介した「プロフィールメニューの開閉」デモですが、 Figma で再現しようとすると、開閉状態の画面をそれぞれ用意したり、Variables を使用する必要があります。

（1）Figma の Variables に状態を登録する

FigmaのVariablesに初期状態であるopenをfalseに設定

（2）プロトタイピング機能で「クリックしたときに、開閉状態であるopen を true に変更する」ロジックを設定する

Figmaで作成したボタンにプロトタイピング機能で条件を指定する

以上をコードで再現すると以下のようになります。

<!-- Alpine.jsを使用した例 -->
<div x-data="{open: false}">
  <button @click="open = true">メニューを開く</button>
  <div x-show="open === true">...</div>
</div>

プロトタイピング作成機能もコードと同様にリッチな動きを再現できますが、条件分岐といったプログラミングの基本的な概念や発想が身につくと、より深く理解して自由に扱えるようになると思います。

最後に

Alpine.js を使ってみて感じた魅力について書いてみました。

Alpine.js のようなミニマルなフレームワークを使うことで、Figma でのデザインがコードにどう変換されるかを体験できます。これは Figma のプロトタイピング機能を上手に活用するヒントになり、コードをもっと身近に感じて扱えるようになるんじゃないかなと思います。

興味を持った人はぜひ試してみてください！

弁護士ドットコム Advent Calendar 2023 の明日の担当は @poemn さんの「育児かキャリアか情報設計か」です。

© Bengo4.com, Inc. 2005