Alpine.jsを触ってみた

新規でオンライン関連のプロジェクトに参画する可能性があった。

その際にAlpine.jsを使っているプロジェクトだったので、事前準備で学習を進める

更新履歴：

2024/07/09　投稿

2024/07/13　追記

2024/07/14　追記

Alpine.jsって何

公式サイト

勉強中のリポジトリ

今現在わかっているのは、すごく軽量なJSのフレームワークであるという理解

公式でも記載されているが、ものすごく最小限に抑えられている

アルパインは、15の属性、6つのプロパティ、および2つのメソッドのコレクションです

https://alpinejs.dev

これだけなので、恐らく1日時間作れるなら見切れるんだと思う

覚えたこと

• x-data
  コンポーネントの状態を定義するために使用する
  定義したdataのスコープは設定されているタグ、子コンポーネントに限定する
• x-text
  データフローの自動管理をし、対応したプロパティの値を出力する
• x-on
  イベントリスナーを設定するために使用する
• x-model
  双方向バインド（setterとgetter）
• x-for
  繰り返し処理
• x-bind
  data属性の動的なバインドの際に使用する
  ※バインドとは、1つ以上の要素やデータを結びつけること
• 再利用可能なデータ定義（Alpine.data）
  document.addEventListener('DOMContentLoaded', function () {
  Alpine.data('dropdown', () => ({
  open: false,
  trigger: {
  ['@click']() { this.open = !this.open },
  },
  }))
  Alpine.start();
  });
• グローバルステート（Alpine.store）
  Alpine.store('darkMode', false);
  colorSet: {
  ['@click']() {
  this.$store.darkMode = !this.$store.darkMode;
  },
  }

今後の進め方

自分宛のメモ

一旦使いたいようには使えるようになった、今後はalpineを使って簡素なフロント周りも実装できるようになっていく想定