<div class="code-block-container"><pre class="language-text"><code class="language-text code-line" data-line="0">本記事は、Ionic 8.4のリリースブログを翻訳したものです。元記事は [こちら](https://ionic.io/blog/announcing-ionic-8-4) をご確認ください。
</code></pre></div><p data-line="4" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--Cn3b4wkM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/fe537cfdb122ad72427597d3.png%3Fsha%3Db3c44033b71b491456dd6ee1ec377c1cd58616ae" loading="lazy" class="md-img"></p>
<h1 id="ionic-8.4-%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%83%8E%E3%83%BC%E3%83%88" data-line="6" class="code-line">
<a class="header-anchor-link" href="#ionic-8.4-%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%83%8E%E3%83%BC%E3%83%88" aria-hidden="true"></a> Ionic 8.4 リリースノート</h1>
<p data-line="8" class="code-line">Ionic 8.4 をリリースできることを嬉しく思います！このリリースでは、Alert、Select、Segment などのコアコンポーネントへのエキサイティングなアップデート、アクセシビリティの強化、開発者エクスペリエンスの改善が含まれています。2つの新しいコンポーネントと機能強化により、使いやすさが向上し、全体的なエクスペリエンスがよりスムーズになります。</p>
<p data-line="10" class="code-line">以下、新機能の概要です 👇</p>
<h2 id="select%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9" data-line="12" class="code-line">
<a class="header-anchor-link" href="#select%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9" aria-hidden="true"></a> Selectモーダルインターフェース</h2>
<p data-line="14" class="code-line">Ionic 8.4 では、Select コンポーネントにモーダルインターフェースがサポートされるようになりました。これにより、ユーザーが Select メニューと対話する方法に柔軟性が加わります。</p>
<p data-line="16" class="code-line">以前は、Select は Alert、Action Sheet、または Popover インターフェースのみを使用できました。このアップデートにより、モーダルインターフェースは Select を表示するための新しいオプションを提供します。</p>
<p data-line="18" class="code-line">デフォルトでは、モーダルはモバイルデバイスではフルスクリーンで表示され、タブレットとデスクトップビューではインセットビューとして表示されます。開発者は <code>interfaceOptions</code> プロパティを使用してモーダルの外観をカスタマイズし、カードモーダルまたはシートモーダルとして表示できます。</p>
<p data-line="20" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/9b3291998c413fc84a731a56.gif?sha=4b5184022f847a3ad32cbdedbaead02b0051f426" loading="lazy" class="md-img"></p>
<p data-line="22" class="code-line">詳細は <a href="https://ionicframework.com/docs/api/select#modal" target="_blank" rel="nofollow noopener noreferrer">Select ドキュメント</a> を参照してください。</p>
<h2 id="%E3%82%B9%E3%83%AF%E3%82%A4%E3%83%97%E5%8F%AF%E8%83%BD%E3%81%AA%E3%82%BB%E3%82%B0%E3%83%A1%E3%83%B3%E3%83%88%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84" data-line="24" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B9%E3%83%AF%E3%82%A4%E3%83%97%E5%8F%AF%E8%83%BD%E3%81%AA%E3%82%BB%E3%82%B0%E3%83%A1%E3%83%B3%E3%83%88%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84" aria-hidden="true"></a> スワイプ可能なセグメントコンテンツ</h2>
<p data-line="26" class="code-line">このリリースでは、Segment コンポーネントとシームレスに統合してスワイプ可能なコンテンツを有効にする、2 つの新しいコンポーネントである Segment View と Segment Content も導入されました。</p>
<p data-line="28" class="code-line">これらの追加により、流動的でレスポンシブなトランジションを備えたタブのようなエクスペリエンスをこれまで以上に簡単に構築できます。セグメント間を移動するには、コンテンツ領域内で左右にスワイプするか、個々のセグメントボタンをクリックして関連コンテンツを表示します。</p>
<p data-line="30" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/af34328fb3a58cc1be1feedf.gif?sha=d5260a09c4466c1d71e867c494c4826a3ce95080" loading="lazy" class="md-img"></p>
<p data-line="32" class="code-line">詳細は <a href="https://ionicframework.com/docs/api/segment#swipeable-segments" target="_blank" rel="nofollow noopener noreferrer">Segment ドキュメント</a> を参照してください。</p>
<h2 id="%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%87%E3%83%BC%E3%82%BF" data-line="34" class="code-line">
<a class="header-anchor-link" href="#%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%87%E3%83%BC%E3%82%BF" aria-hidden="true"></a> メニューイベントデータ</h2>
<p data-line="36" class="code-line"><code>ionWillClose</code> イベントと <code>ionDidClose</code> イベントで追加の <code>role</code> データが発行されるようになったため、メニューイベントの処理がより堅牢になりました。この <code>role</code> プロパティは、メニューがどのように閉じられたかを識別するのに役立ちます。</p>
<ul data-line="38" class="code-line">
<li data-line="38" class="code-line">バックドロップをクリックするか、Esc キーを押して閉じられた場合、<code>role</code> は <code>'backdrop'</code> となります。</li>
<li data-line="39" class="code-line">ドラッグジェスチャーで閉じられた場合、<code>role</code> は <code>'gesture'</code> となります。</li>
<li data-line="40" class="code-line">メニュー内のボタンまたはその他の方法を使用して閉じられた場合、<code>role</code> は <code>undefined</code> となります。</li>
</ul>
<p data-line="42" class="code-line">この追加のコンテキストにより、メニュー操作を処理する際の柔軟性が向上します。</p>
<h2 id="%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3" data-line="44" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3" aria-hidden="true"></a> アラートのアクセシビリティ</h2>
<p data-line="46" class="code-line">アクセシビリティは Ionic で引き続き最優先事項です。バージョン 8.4 では、スクリーンリーダーの互換性を向上させるために、Alert コンポーネント内の見出し構造を更新しました。</p>
<ul data-line="48" class="code-line">
<li data-line="48" class="code-line">
<code>header</code> は引き続き <code>&lt;h2&gt;</code> 要素としてレンダリングされます。</li>
<li data-line="49" class="code-line">
<code>header</code> が未定義の場合、<code>subHeader</code> が <code>&lt;h2&gt;</code> としてレンダリングされます。</li>
<li data-line="50" class="code-line">
<code>header</code> と <code>subHeader</code> の両方が定義されている場合、<code>header</code> は <code>&lt;h2&gt;</code> としてレンダリングされ、<code>subHeader</code> は <code>&lt;h3&gt;</code> としてレンダリングされます。</li>
</ul>
<p data-line="52" class="code-line">これらの調整により、補助技術に依存するユーザーにとって、見出し階層が論理的でアクセシブルな状態が保たれます。</p>
<h2 id="%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E6%94%B9%E5%96%84%E7%82%B9" data-line="54" class="code-line">
<a class="header-anchor-link" href="#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E6%94%B9%E5%96%84%E7%82%B9" aria-hidden="true"></a> その他の改善点</h2>
<p data-line="56" class="code-line">Ionic 8.4 には、アクセシビリティ、開発者エクスペリエンス、機能性を向上させる以前のバージョンからの追加のアップデートが含まれています。</p>
<ul data-line="58" class="code-line">
<li data-line="58" class="code-line">
<strong>アクセシビリティの改善:</strong> 入力とオーバーレイは、入力のヘルパーテキストとエラーテキストの発表、オーバーレイで使用されるバックドロップの <code>aria-hidden</code> に関する問題の解決など、スクリーンリーダーのサポートが向上しました。</li>
<li data-line="59" class="code-line">
<strong>バグ修正:</strong> <code>router.go</code> を使用する場合に間違ったビューがレンダリングされる Vue のナビゲーションの問題が解決されました。 bentleyo と xxllxhdj に感謝します！</li>
<li data-line="60" class="code-line">
<strong>タブのアップデート:</strong> タブとタブバーコンポーネントは、Vue と React ではスタンドアロンコンポーネントとして機能するようになり、より簡単な統合のためにルーターへの依存関係がなくなりました。</li>
</ul>
<p data-line="63" class="code-line">お客様のニーズに合わせて進化する、高速でアクセシブルで開発者フレンドリーなフレームワークを提供するという使命を継続しています。これらの新機能をアプリで使用する方法を見るのが楽しみです！</p>


翻訳：Ionic 8.4リリース！セグメント間移動のスワイプが標準搭載に！

Selectモーダルインターフェース

スワイプ可能なセグメントコンテンツ

Discussion