|
| 1 | +AJAX とスニペット |
| 2 | +*********** |
| 3 | + |
| 4 | +<div class=perex> |
| 5 | + |
| 6 | +最新のWebアプリケーションの時代では、機能がサーバーとブラウザの間で分割されることが多いため、AJAXは不可欠な接続要素です。Nette Frameworkはこの分野でどのような可能性を提供しているでしょうか？ |
| 7 | +- テンプレートの一部、いわゆるスニペットの送信 |
| 8 | +- PHPとJavaScript間の変数渡し |
| 9 | +- AJAXリクエストのデバッグツール |
| 10 | + |
| 11 | +</div> |
| 12 | + |
| 13 | + |
| 14 | +AJAXリクエスト |
| 15 | +========= |
| 16 | + |
| 17 | +AJAXリクエストは、基本的に通常のHTTPリクエストと変わりません。特定のパラメータでPresenterが呼び出されます。そして、Presenterがリクエストにどのように応答するかは、Presenter次第です。JSON形式のデータを返す、HTMLコードの一部を送信する、XMLドキュメントを送信するなど、さまざまな方法があります。 |
| 18 | + |
| 19 | +ブラウザ側では、`fetch()` 関数を使用してAJAXリクエストを初期化します。 |
| 20 | + |
| 21 | +```js |
| 22 | +fetch(url, { |
| 23 | + headers: {'X-Requested-With': 'XMLHttpRequest'}, |
| 24 | +}) |
| 25 | +.then(response => response.json()) |
| 26 | +.then(payload => { |
| 27 | + // レスポンスの処理 |
| 28 | +}); |
| 29 | +``` |
| 30 | + |
| 31 | +サーバー側では、[HTTPリクエストをカプセル化するサービス |http:request] の `$httpRequest->isAjax()` メソッドでAJAXリクエストを認識します。検出には `X-Requested-With` HTTPヘッダーを使用するため、これを送信することが重要です。Presenter内では `$this->isAjax()` メソッドを使用できます。 |
| 32 | + |
| 33 | +JSON形式でデータを送信したい場合は、[`sendJson()` |presenters#応答の送信] メソッドを使用します。このメソッドはPresenterの動作も終了させます。 |
| 34 | + |
| 35 | +```php |
| 36 | +public function actionExport(): void |
| 37 | +{ |
| 38 | + $this->sendJson($this->model->getData); |
| 39 | +} |
| 40 | +``` |
| 41 | + |
| 42 | +AJAX用に特別なテンプレートで応答する予定がある場合は、次のように行うことができます。 |
| 43 | + |
| 44 | +```php |
| 45 | +public function handleClick($param): void |
| 46 | +{ |
| 47 | + if ($this->isAjax()) { |
| 48 | + $this->template->setFile('path/to/ajax.latte'); |
| 49 | + } |
| 50 | + // ... |
| 51 | +} |
| 52 | +``` |
| 53 | + |
| 54 | + |
| 55 | +スニペット |
| 56 | +===== |
| 57 | + |
| 58 | +Netteがサーバーとクライアントを接続するために提供する最も強力な手段は、スニペットです。これらのおかげで、最小限の労力と数行のコードで、通常のアプリケーションをAJAXアプリケーションに変えることができます。これがどのように機能するかは、Fifteenの例で示されています。そのコードは[GitHub |https://github.com/nette-examples/fifteen]にあります。 |
| 59 | + |
| 60 | +スニペット、つまり切り抜きは、ページ全体を再読み込みする代わりに、ページの一部だけを更新することを可能にします。これはより速く、より効率的であるだけでなく、より快適なユーザーエクスペリエンスも提供します。スニペットは、Ruby on RailsのHotwireやSymfony UX Turboを思い出させるかもしれません。興味深いことに、Netteはスニペットを14年も前に導入しました。 |
| 61 | + |
| 62 | +スニペットはどのように機能しますか？ページの最初の読み込み（非AJAXリクエスト）では、すべてのスニペットを含むページ全体が読み込まれます。ユーザーがページと対話する（例えば、ボタンをクリックする、フォームを送信するなど）と、ページ全体を読み込む代わりにAJAXリクエストが発行されます。Presenterのコードはアクションを実行し、どのスニペットを更新する必要があるかを決定します。Netteはこれらのスニペットをレンダリングし、JSON形式の配列として送信します。ブラウザの処理コードは、受信したスニペットをページに挿入します。したがって、変更されたスニペットのコードのみが転送され、帯域幅を節約し、ページ全体のコンテンツを転送するよりも読み込みを高速化します。 |
| 63 | + |
| 64 | + |
| 65 | +Naja |
| 66 | +---- |
| 67 | + |
| 68 | +ブラウザ側でスニペットを処理するために、[Najaライブラリ |https://naja.js.org]が使用されます。これをnode.jsパッケージとして[インストール |https://naja.js.org/#/guide/01-install-setup-naja]します（Webpack、Rollup、Vite、Parcelなどのアプリケーションで使用するため）。 |
| 69 | + |
| 70 | +```shell |
| 71 | +npm install naja |
| 72 | +``` |
| 73 | + |
| 74 | +…または、ページテンプレートに直接挿入します。 |
| 75 | + |
| 76 | +```html |
| 77 | +<script src="https://unpkg.com/naja@2/dist/Naja.min.js"></script> |
| 78 | +``` |
| 79 | + |
| 80 | +まず、ライブラリを[初期化 |https://naja.js.org/#/guide/01-install-setup-naja?id=initialization]する必要があります。 |
| 81 | + |
| 82 | +```js |
| 83 | +naja.initialize(); |
| 84 | +``` |
| 85 | + |
| 86 | +通常のリンク（シグナル）やフォーム送信からAJAXリクエストを作成するには、関連するリンク、フォーム、またはボタンに `ajax` クラスを付けるだけです。 |
| 87 | + |
| 88 | +```html |
| 89 | +<a n:href="go!" class="ajax">Go</a> |
| 90 | + |
| 91 | +<form n:name="form" class="ajax"> |
| 92 | + <input n:name="submit"> |
| 93 | +</form> |
| 94 | + |
| 95 | +または |
| 96 | + |
| 97 | +<form n:name="form"> |
| 98 | + <input n:name="submit" class="ajax"> |
| 99 | +</form> |
| 100 | +``` |
| 101 | + |
| 102 | + |
| 103 | +スニペットの再描画 |
| 104 | +--------- |
| 105 | + |
| 106 | +[Control |components]クラスの各オブジェクト（Presenter自体を含む）は、再描画が必要な変更が発生したかどうかを記録します。これには `redrawControl()` メソッドが使用されます。 |
| 107 | + |
| 108 | +```php |
| 109 | +public function handleLogin(string $user): void |
| 110 | +{ |
| 111 | + // ログイン後、関連部分を再描画する必要がある |
| 112 | + $this->redrawControl(); |
| 113 | + // ... |
| 114 | +} |
| 115 | +``` |
| 116 | + |
| 117 | +Netteは、再描画する内容をさらに細かく制御できます。このメソッドは、引数としてスニペット名を受け取ることができます。したがって、テンプレートの一部のレベルで無効化（つまり、再描画を強制）できます。コンポーネント全体が無効化されると、そのすべてのスニペットも再描画されます。 |
| 118 | + |
| 119 | +```php |
| 120 | +// 'header' スニペットを無効化 |
| 121 | +$this->redrawControl('header'); |
| 122 | +``` |
| 123 | + |
| 124 | + |
| 125 | +Latteのスニペット |
| 126 | +----------- |
| 127 | + |
| 128 | +Latteでスニペットを使用するのは非常に簡単です。テンプレートの一部をスニペットとして定義するには、単に `{snippet}` と `{/snippet}` タグで囲みます。 |
| 129 | + |
| 130 | +```latte |
| 131 | +{snippet header} |
| 132 | + <h1>Hello ... </h1> |
| 133 | +{/snippet} |
| 134 | +``` |
| 135 | + |
| 136 | +スニペットは、特別な生成された `id` を持つ `<div>` 要素をHTMLページに作成します。スニペットが再描画されると、この要素のコンテンツが更新されます。したがって、ページの初期レンダリング時に、たとえ最初は空であっても、すべてのスニペットもレンダリングする必要があります。 |
| 137 | + |
| 138 | +`<div>` 以外の要素でスニペットを作成することもできます。`n:attribute` を使用します。 |
| 139 | + |
| 140 | +```latte |
| 141 | +<article n:snippet="header" class="foo bar"> |
| 142 | + <h1>Hello ... </h1> |
| 143 | +</article> |
| 144 | +``` |
| 145 | + |
| 146 | + |
| 147 | +スニペット領域 |
| 148 | +------- |
| 149 | + |
| 150 | +スニペット名は式にすることもできます。 |
| 151 | + |
| 152 | +```latte |
| 153 | +{foreach $items as $id => $item} |
| 154 | + <li n:snippet="item-{$id}">{$item}</li> |
| 155 | +{/foreach} |
| 156 | +``` |
| 157 | + |
| 158 | +これにより、`item-0`、`item-1`などの複数のスニペットが作成されます。動的スニペット（例えば `item-1`）を直接無効化した場合、何も再描画されません。理由は、スニペットは本当に切り抜きとして機能し、それ自体だけが直接レンダリングされるためです。しかし、テンプレートには実際には `item-1` という名前のスニペットはありません。それは、スニペットの周りのコード、つまりforeachループを実行することによってのみ作成されます。したがって、実行されるべきテンプレートの部分を `{snippetArea}` タグでマークします。 |
| 159 | + |
| 160 | +```latte |
| 161 | +<ul n:snippetArea="itemsContainer"> |
| 162 | + {foreach $items as $id => $item} |
| 163 | + <li n:snippet="item-{$id}">{$item}</li> |
| 164 | + {/foreach} |
| 165 | +</ul> |
| 166 | +``` |
| 167 | + |
| 168 | +そして、スニペット自体と親領域全体の両方を再描画させます。 |
| 169 | + |
| 170 | +```php |
| 171 | +$this->redrawControl('itemsContainer'); |
| 172 | +$this->redrawControl('item-1'); |
| 173 | +``` |
| 174 | + |
| 175 | +同時に、`$items` 配列には再描画されるべき項目のみが含まれるようにすることが望ましいです。 |
| 176 | + |
| 177 | +`{include}` タグを使用して、スニペットを含む別のテンプレートをテンプレートに挿入する場合、テンプレートの挿入を再度 `snippetArea` に含め、それをスニペットと一緒に無効化する必要があります。 |
| 178 | + |
| 179 | +```latte |
| 180 | +{snippetArea include} |
| 181 | + {include 'included.latte'} |
| 182 | +{/snippetArea} |
| 183 | +``` |
| 184 | + |
| 185 | +```latte |
| 186 | +{* included.latte *} |
| 187 | +{snippet item} |
| 188 | + ... |
| 189 | +{/snippet} |
| 190 | +``` |
| 191 | + |
| 192 | +```php |
| 193 | +$this->redrawControl('include'); |
| 194 | +$this->redrawControl('item'); |
| 195 | +``` |
| 196 | + |
| 197 | + |
| 198 | +コンポーネントのスニペット |
| 199 | +------------- |
| 200 | + |
| 201 | +[コンポーネント|components] 内にスニペットを作成することもでき、Netteはそれらを自動的に再描画します。ただし、制限があります。スニペットを再描画するために、パラメータなしで `render()` メソッドを呼び出します。したがって、テンプレートでパラメータを渡すことは機能しません。 |
| 202 | + |
| 203 | +```latte |
| 204 | +OK |
| 205 | +{control productGrid} |
| 206 | + |
| 207 | +動作しません: |
| 208 | +{control productGrid $arg, $arg} |
| 209 | +{control productGrid:paginator} |
| 210 | +``` |
| 211 | + |
| 212 | + |
| 213 | +ユーザーデータの送信 |
| 214 | +---------- |
| 215 | + |
| 216 | +スニペットと一緒に、任意の追加データをクライアントに送信できます。それらを `payload` オブジェクトに書き込むだけです。 |
| 217 | + |
| 218 | +```php |
| 219 | +public function actionDelete(int $id): void |
| 220 | +{ |
| 221 | + // ... |
| 222 | + if ($this->isAjax()) { |
| 223 | + $this->payload->message = 'Success'; |
| 224 | + } |
| 225 | +} |
| 226 | +``` |
| 227 | + |
| 228 | + |
| 229 | +パラメータの受け渡し |
| 230 | +========== |
| 231 | + |
| 232 | +AJAXリクエストを使用してコンポーネントにパラメータを送信する場合、それがシグナルパラメータであろうと永続パラメータであろうと、リクエストでコンポーネント名を含むグローバル名を指定する必要があります。パラメータの完全な名前は `getParameterId()` メソッドによって返されます。 |
| 233 | + |
| 234 | +```js |
| 235 | +let url = new URL({link //foo!}); |
| 236 | +url.searchParams.set({$control->getParameterId('bar')}, bar); |
| 237 | + |
| 238 | +fetch(url, { |
| 239 | + headers: {'X-Requested-With': 'XMLHttpRequest'}, |
| 240 | +}) |
| 241 | +``` |
| 242 | + |
| 243 | +そして、コンポーネント内の対応するパラメータを持つハンドルメソッド： |
| 244 | + |
| 245 | +```php |
| 246 | +public function handleFoo(int $bar): void |
| 247 | +{ |
| 248 | +} |
| 249 | +``` |
0 commit comments