Zenn
🌄

【脱jQuery】「ちょっとだけJS」が叶う軽量フレームワークAlpine.js入門

に公開
Laravel
framework
frontend
Alpine.js
tech

はじめに

この記事は初めてAlpine.jsに触れる方に向けて、その特徴や基本的な使い方を（なるべく頑張って）分かりやすく解説します。

特に、フロントエンドに不慣れなデザイナーやバックエンドエンジニアの方々にも役立つ内容となっています。

【導入】Alpine.jsってどう？

VueやReactといった大規模なフレームワークほど高機能ではないものの、でもJSでちょっとだけやりたいことがある時に便利。
後述するLaravelのBladeテンプレートとの相性も良く、フロントエンド開発にあまり時間をかけられないバックエンドエンジニアにもおすすめです。
TailwindCss使っている人なら多分好きな感覚なんじゃないかなとも思う。

https://alpinejs.dev/

セットアップ方法

【前置き】
私はLaravel環境で試しているのでパスの記述はLaravel構造に準拠しています。
公式は英語ですが、詳しく書いているので先にそちらをご確認ください。

公式のインストール手順はこちら👇
https://alpinejs.dev/essentials/installation

私のセットアップした手順
①npmでインストール ※CDNの場合は不要

npm install alpinejs

②メインとなるjsファイルに以下を追記

app.js
import Alpine from 'alpinejs';

window.Alpine = Alpine
Alpine.start()

これだけ！

【特徴】Alpine.jsってどんな？

  • 軽量でCDNでもすぐ使える
  • htmlに直接かけるの大きい（コンポーネント指向に縛られず柔軟に開発できる）
  • リアクティブ性もOKな点

使ってみて感じた推しポイント

①Laravelとの相性がよくBladeテンプレートに自然に馴染む

私が実感したのはこの時。
特に実感したのは、LaravelのBladeテンプレートとの親和性の高さです。
Bladeコンポーネントの書き方とAlpine.jsの記述がすごく似ていたので、学習コストを抑えつつスムーズにUIを構築できました。
この点はバックエンドの人でもちょっとフロントのUI変える、みたいなことがしやすいのかなと思った。

参照

ちょうどこの記事を書いているときに同タイミングでAlpine.jsを使っていました。
https://zenn.dev/penguin800dash/articles/e1e1a66cc0dddd

②Vueほど構成が重くない

フロントエンドの記述方法で言うならVue.jsに似ていますが、Vue.jsよりも複雑さは格段に低いのが特徴。
例えば、jQueryのような手軽さでVue.jsのリアクティブな機能を使えるような感覚。
このリアクティブ性のおかげで、JSの深い知識がなくてもUIパーツを作成しやすいため、デザインが主な業務のデザイナーの方にもおすすめです。

③アニメーションがつけやすい

x-showやx-transitionといったディレクティブを使うことで、シンプルなアニメーションを簡単に追加できます。ボタンのクリック時の変化などちょっとした演出にはめっちゃ便利。
ただし、多用しすぎるとコードが複雑になる可能性があるためバランスが重要になってくる。

④TailwindCssっぽい考え方

htmlに直接記述して完結する点がTailwindCSSの考え方に近いのでミニマルに感じた。
JSのソースファイルを別途開く必要がないのは開発効率の面で大きなメリットだと思います。

ちょっと気になったこと

ロジックの複雑化には注意

めっちゃ便利！とはいえどロジックが複雑になると見通しが悪くなる部分は気になった。
本当に単純な「ボタンを押してモーダルを開く」とかであれば良いのだが、一例として「ボタンを押してモーダルを開いて、その中でスライドして、モーダル開いてる時は背景を固定して...」などどんどん複雑になるとAlpine.jsだけでは制御できない場面も出てきそう。
そうなったら別なライブラリ使ったほうがいいんじゃないか、とも思ったりする。

アニメーションを多用すると記述が重くなりがち

推しポイントにも書いていたのですが、気をつけないといけないのはアニメーションの時。
こりに凝りまくると記述が増えるのでソースが分かりにくくなりがちかも...と思ってしまった場面がありました。

【比較】他のフレームワークとどう違う？

特徴 Alpine.js Vue.js React
学習コスト 低 中〜高 高
セットアップ 簡単 中 中〜高
軽量性 高 中〜低 中〜低
Laravelとの相性 ◎ ◎ △
コンポーネント設計 ほぼ不要 必要 必要

補足
「軽量性」の項目でVue.jsやReactを「中〜低」としているのは、実装内容によっては高速に動作するためと感じているからです。
また、私みたいに慣れていない開発者が実装した場合にパフォーマンスが低下するケースが見られる傾向にあるため、このような評価としています。

【事例】こういう風に使えるよ

ハンバーガーメニュー

下からニュッと出るタイプ。

モーダル

トグルメニュー

まとめ

①なんでもフレームワークで固めずゆるっと使いたい時の味方。

特に既存のプロジェクトに手軽にJSの動的な機能を追加したい場合に最適な選択肢にもなる。
大規模なフレームワークに縛られず、軽量かつスピーディーに開発を進めたい場面なんかでも大活躍すると思う。

②Laravel+Alpine+TailwindCssの最軽量トリオでサクッと作れるのは大きい。

ミニマルな構成で素早くUIを構築できる強力。

③Vue.jsやReactほど構えなくて良いっていうところおすすめ。

Vue.jsやReactのように大規模な学習コストをかけることなく、必要な機能だけをサッと実装できる点はフロントエンド初心者でも開発しやすいので良いなと思いました。

Discussion