Ionic JavaScrip4�Quickstart: JavaScript Basics

�doctype html> Ionic JavaScrip4�Quickstart: JavaScript Basics

!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return ne7�URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{cons4�a=ne7�URLSearchParams(window.location.search).entries();for(var[t,e]of a)if(t.startsWith("docusaurus-data-")){var n=t.replace("docusaurus-data+"+"+"+"+"data+"+"+");document.documentElement.setAttribute(n,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())�_script><di6�id="__docusaurus"><div role="region" aria-label="メインコンテンツまでスキップ"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">メインコンテンツまでスキップ</a></div><di6�class="announcementbar_mb4j" role="banner"><di6�class="content_kng5 5 5 announcementBarContent_xLdY"><a href="https:�]www.outsystems.com/?utm_source=ionic&utm_medium=referral&utm_campaign=ionic-referral&utm_term=none&utm_content=other&utm_campaignteam=digital-mktg&utm_partner=none" target="_blank" rel="noopener"><span>An <strong>OutSystems</strong> Company →�_span></a></div></div><di6�id="__docusaurus_skiptocontent_fallback" class="main-wrapper mainWrapper_CIJY"><di6�class="docswrapper_hbab"><button aria-label="先頭へ戻る" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button">�_button><di6�class="docroot_ubd9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><di6�class="sidebarviewport_arkj"><a target="_self" href= Ydocs/j�t"><img src="/doctzja/logos/ionic-text-docs-dark.svg" alt="Site Logo" class="themedComponent_mlkZ themedComponent--light_NVdE" height="28" width="139"><img src="/doctzja/logos/ionic-text-docs-light.svg" alt="Site Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU" height="28" width="139">�_a><div class="sidebar_njMd sidebarWithHideableNavbar_wUlq"><a tabindex="-1" class="sidebarLogo_isFc" target="_self" href="/doctzja."."><img src= Ydocs/j�tlogotzionic-text-docs-dark.svg" alt="Site Logo" class="themedComponent_mlkZ themedComponent--light_NVdE" height=(� N)�8" width="�0�09"><img src= Ydocs/j�tlogotzionic-text-docs-light.svg" alt="Site Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU" height=(� N)�8" width="�0�09"></a><na6�aria-label="ドキュメントのサイドバー" class="men5�thin-scrollbar menu_SIkG menuWithAnnouncementBar_G�0�0�0s"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/j�t">Getting Started</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja.".">概要</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tintr�wenvironment">環境設定</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tintr�wcli">CLIインストール�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/intro/cdn">パッケージ &amp<�s�p�a�n� �c�l�a�s�s�=�"�n�a�k�e�d�_�s�i�g�n�"�>�; <�/�s�p�a�n�>�<�s�p�a�n� �c�l�a�s�s�=�"�n�a�k�e�d�_�a�u�r�a�l�"�>�(��l�)�<�/�s�p�a�n�>�CDN</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tintr�wvscode-extension">VS Code拡張機能</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tintr�wnext">次のステップ�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/j�tupdating/8-0">Upgrade Guides�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tupdating/8-0">v8へのアップデート�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/updatin�u7-.".".">Updating to v7</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tupdating/6-0">Updating to v6�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/updatin�u5-.".".">Updating to v5</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tupdating/4-0">Updating to v4�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/j�tdeveloping/starting">Developing</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/developin�ustarting">はじめ方�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/developin�upreviewing">プレビュー</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tdeveloping/scaffolding">基本�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/developin�uios">iOSでの開発�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/developin�uandroid">Androidでの開発�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/developin�utips">開発者向けのヒント</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tdeveloping/hardware-back-button">ハードウェアの戻るボタン</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tdeveloping/keyboard">Keyboard</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tdeveloping/config">Config</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tdeveloping/managing-focus">Managing Focus</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzja/layou�zstructure">Layout</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/layou�zstructure">構造</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tdocs/api/grid">Responsive Grid�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/layou�zglobal-stylesheets">グローバルスタイルシート�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/layou�zcss-utilities">CSSユーティリティ</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tlayout/dynamic-font-scaling">ダイナミックフォントスケーリング</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzja/theming/basics">Theming�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tthemin�ubasics">基本的な考え方</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tthemin�uplatform-styles">プラットフォームの外観�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/theming/css-variables">CSS変数</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tthemin�ucss-shadow-parts">CSS Shadow Parts�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/theming/colors">配色</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tthemin�uthemes">テーマのカスタマイズ�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/theming/dark-mode">ダークモード�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/theming/high-contrast-mode">High Contrast Mode</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tthemin�uadvanced">高度なカスタマイズ</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tthemin�ucolor-generator">カラージェネレーター</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzja/angular/overview">Angular�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tangula�yoverview">概要�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/angular/quickstart">Quickstart</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level(�(g)� menu__list-item menu__list-item--collapsed"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="."."." href= Ydocs/j�tangula�yyour-first-app">Build Your First App�_a>�_div>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/angular/add-ta-existing">Add to Existing</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tangula�ybuild-options">Build Options�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/angular/lifecycle">ライフサイクル</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tangula�ynavigation">ナビゲーショ��ルーティング�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/angular/injection-tokens">Injection Tokens</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tangula�yvirtual-scroll">仮想スクロール</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tangula�yslides">Migrating from ion-slides to Swiper.js�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/angular/platform">Platform</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tangula�ytesting">テスト�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/angular/storage">ストレージ</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tangula�yperformance">パフォーマンス�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/angular/pwa">Progressive Web Apps�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/doctzja/javascrip�zoverview">JavaScript�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tjavascript/overview">Overview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/doctzja/javascrip�zquickstart">Quickstart�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/j�treac�zoverview">React</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/react/overview">Overview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�treac�zquickstart">Quickstart�_a>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/doctzja/react/your-first-app">Build Your Firs4�App</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�treac�zadd-to-existing">Add to Existing�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/react/lifecycle">ライフサイクル</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�treac�znavigation">ナビゲーショ��ルーティング�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/react/virtual-scroll">仮想スクロール�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/react/slides">Migrating From IonSlides to Swiper.js�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/react/platform">Platform</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�treac�zpwa">Progressive Web Apps</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�treac�zoverlays">Overlays�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/react/storage">Storage</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level(�(g)� menu__list-item menu__list-item--collapsed"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="."."." href= Ydocs/j�treac�ztestin�uintroduction">Testing</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�treac�zperformance">Performance�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/j�tvu0uoverview">Vue</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/vue/overview">概要</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tvu0uquickstart">クイックスタート�_a>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/doctzja/vue/your-first-app">Build Your Firs4�App</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tvu0uadd-to-existing">Add to Existing�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/vue/build-options">Build Options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tvu0ulifecycle">ライフサイクル�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/vue/navigation">ナビゲーション/ルーティング</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tvu0uvirtual-scroll">仮想スクロール</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tvu0uslides">Migrating From ion-slides to Swiper.js�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/vue/utility-functions">ユ�ーティリティ関数�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/vue/platform">Platform</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tvu0upwa">Progressive Web Apps</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tvu0ustorage">ストレージ�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/vue/troubleshooting">トラブルシューティング</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tvu0uperformance">Performance�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/j�tutilitietzanimations">Utilities</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/utilities/animations">Animations</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tutilitietzgestures">Gestures�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/j�tdeployment/app-store">Deployment�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tdeployment/app-store">iOS Ap0�Store</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tdeployment/play-store">Android Pla9�Store</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tdeployment/progressive-web-app">Progressive Web Ap0�(PWA)</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzja/techniquetzsecurity">Techniques�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�ttechniques/security">Security</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzja/troubleshooting/debugging">Troubleshooting</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/troubleshooting/debugging">Debugging</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�ttroubleshootin�ubuild">Build Errors</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�ttroubleshootin�uruntime">ランタイムの問題</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�ttroubleshootin�unative">ネイティブエラー�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/troubleshooting/cors">CORS Errors�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/j�tcore-concepttzfundamentals">Core Concepts</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/core-concepts/fundamentals">基本的な考え方�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/core-concepts/cross-platform">Cross Platform</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tcore-concepttzwebview">Web View</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/j�tcore-concepttzwhat-are-progressive-web-apps">PWAとは?</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzja/contributin�uhow-to-contribute">Contributing</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/contributin�uhow-to-contribute">How to Contribute�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/contributin�ucoc">Code of Conduct�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/j�treferenc0uglossary">Reference</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/reference/glossary">用語集�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/reference/versioning">バージョニング�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/reference/release-notes">リリースノート</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a href="httpsa_/github.co�wionic-team/ionic/bloumaster/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="menu__link menuExternalLink_NmtK" tabindex=".".".">GitHub Changelog<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0(��N)�2 2 2 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M 13v10h-v-19�2v2h-10v15�7v-8zm3-(�*h)�h-10.988l4.035 4-6.977 7.05 5 5 2.(��R)�8 2.(��R)�8 6.977-7.07 4.125 4.1(�]y)�v-�z"></path>�_svg>�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/reference/support">サポートポリシー�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzja/reference/browser-support">ブラウザサポート�_a>�_li></ul>�_li></ul>�_nav>�_div>�_div>�_aside><div><na6�aria-label="ナビゲーション" class="navbar navbar--fixed-top navbarHideable_�mJ"><div class="navbar__inner"><di6�class="navbar__items"><button aria-label="ナビゲーションバーを開く" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width=�0�0�0."."." height=�0�0�0."."." viewBox="0 0 30�0�0�0�0�0."."." aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 72M2 2 2 152M2 2 2 �0�0�0�0�02"></path>�_svg>�_button><a class="navbar__brand" target="_self" href= Ydocs/j�t"><div class="navbar__logo"><img src="/doctzja/logos/ionic-text-docs-dark.svg" alt="Site Logo" class="themedComponent_mlkZ themedComponent--light_NVdE" height="28" width="139"><img src="/doctzja/logos/ionic-text-docs-light.svg" alt="Site Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU" height="28" width="139">�_div>�_a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/doctzja.".">Guide�_a><a class="navbar__item navbar__link" href= Ydocs/j�tcomponents">Components�_a><a class="navbar__item navbar__link" href= Ydocs/j�tcli">CLI�_a><a class="navbar__item navbar__link" href= Ydocs/j�tnative">Native�_a><a aria-current="page" class="navbar__item navbar__link cta navbar__link--active" href="/doctzja/updatin�u8-.".".">Ionic v8.0.0 Upgrade Guide</a></div><di6�class="navbar__items navbar__items--right"><di6�class="navbar__item dropdown dropdown--hoverable dropdown--right"><a class="navbar__link" aria-haspopup="true" aria-expanded="false" role="button" href= Ydocs/j�tjavascript/quickstart">v8</a><ul class="dropdown__menu"><li><a aria-current="page" class="dropdown__link dropdown__link--active" href= Ydocs/j�tjavascript/quickstart">v8</a></li><li><a class="dropdown__link" href="/doctzja/v_">v7�_a>�_li><li><a href="https:�]ionic-docs-fo03f34h5-ionic1.vercel.app/doctzv6" target="_self" rel="noopener noreferrer" class="dropdown__link">v6�_a>�_li><li><a href="https:�]ionic-docs-5utg8ms4c-ionic1.vercel.app/doctzv5" target="_self" rel="noopener noreferrer" class="dropdown__link">v5�_a>�_li><li><a href="https:�]ionicframework.com/doctzv4/components" target="_blank" rel="noopener noreferrer" class="dropdown__link">v4�_a>�_li><li><a href="https:�]ionicframework.com/doctzp�c�."." target="_blank" rel="noopener noreferrer" class="dropdown__link">p�c��_a>�_li></ul>�_div><div class="navbarSearchContainer_Bcs"><button type="button" class="DocSearch DocSearch-Button" aria-label="検索 (Command+K)"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0(��N)�0 20" aria-hidden="true"><path d="4.385 5 14�0�0�0�0�086l4.0875 5 5 4.0877-4.0877-4.0877c-2.9418(��N)�.99-7.15(��N)�.99-10.6�0�0�02 2 0-2.9419(�(g)�.98-2.9419-7.7�5 0-10.6�0�0�02 2 2.9418(�(g)�.99 7.15(�(g)�.99 10.6�0�0�02 2 0 2.9419(��N)�.98 2.9419 7.7�5 0 10.6�0�0�03z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path>�_svg><span class="DocSearch-Button-Placeholder">検索</span>�_span><span class="DocSearch-Button-Keys"></span>�_button></div><di6�class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link navbar__link--community">Community</a><ul class="dropdown__menu"><li><a href="httpsa_/ionicframework.co�wcommunity" target="_blank" class="dropdown__link">Communit9�Hub<svg width="12" height="12" aria-hidden="true" viewBox="0 0(��N)�2 2 2 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M 13v10h-v-19�2v2h-10v15�7v-8zm3-(�*h)�h-10.988l4.035 4-6.977 7.05 5 5 2.(��R)�8 2.(��R)�8 6.977-7.07 4.125 4.1(�]y)�v-�z"></path>�_svg>�_a>�_li><li><a href="https:�]forum.ionicframework.com."." target="_blank" class="dropdown__link">Forum<svg width="12" height="12" aria-hidden="true" viewBox="0 0(��N)�2 2 2 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M 13v10h-v-19�2v2h-10v15�7v-8zm3-(�*h)�h-10.988l4.035 4-6.977 7.05 5 5 2.(��R)�8 2.(��R)�8 6.977-7.07 4.125 4.1(�]y)�v-�z"></path>�_svg>�_a>�_li><li><a href="https:�]www.meetup.com/topictzionic-framewor�v" target="_blank" class="dropdown__link">Meetups<svg width="(�*h)�" height="(�*h)�" aria-hidden="true" viewBox="0 0 24(��N)�4" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 �0�0'0h(�(g)�1v-19h(�*h)��h-10'5h17v-8h2z2�1��p-12h-10.988l4.�0�05 4-6.975 5 5 7.07(��N)�.828(��N)�.828 6.977-7.05 5 5 4.(�*h)�5 4.172v-11z">�_path></svg></a></li><li><a href="httpsa_/blog.ionicframework.com."." target="_blank" class="dropdown__link">Blog<svg width="(�*h)�" height="(�*h)�" aria-hidden="true" viewBox="0 0 24(��N)�4" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 �0�0'0h(�(g)�1v-19h(�*h)��h-10'5h17v-8h2z2�1��p-12h-10.988l4.�0�05 4-6.975 5 5 7.07(��N)�.828(��N)�.828 6.977-7.05 5 5 4.(�*h)�5 4.172v-11z">�_path></svg></a></li><li><a href="httpsa_/twitter.com/ionicframework" target="_blank" class="dropdown__link">Twitter<svg width="12" height="12" aria-hidden="true" viewBox="0 0(��N)�2 2 2 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M 13v10h-v-19�2v2h-10v15�7v-8zm3-(�*h)�h-10.988l4.035 4-6.977 7.05 5 5 2.(��R)�8 2.(��R)�8 6.977-7.07 4.125 4.1(�]y)�v-�z"></path>�_svg>�_a>�_li></ul>�_div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link navbar__link--support">Support�_a><ul class="dropdown__menu"><li><a href="https:�]ionicframework.com/support" target="_blank" class="dropdown__link">Hel0�Center<svg width="(�*h)�" height="(�*h)�" aria-hidden="true" viewBox="0 0 24(��N)�4" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 �0�0'0h(�(g)�1v-19h(�*h)��h-10'5h17v-8h2z2�1��p-12h-10.988l4.�0�05 4-6.975 5 5 7.07(��N)�.828(��N)�.828 6.977-7.05 5 5 4.(�*h)�5 4.172v-11z">�_path></svg></a></li><li><a href="httpsa_/ionic.zendesk.com."." target="_blank" class="dropdown__link">Customer Support<svg width="(�*h)�" height="(�*h)�" aria-hidden="true" viewBox="0 0 24(��N)�4" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 �0�0'0h(�(g)�1v-19h(�*h)��h-10'5h17v-8h2z2�1��p-12h-10.988l4.�0�05 4-6.975 5 5 7.07(��N)�.828(��N)�.828 6.977-7.05 5 5 4.(�*h)�5 4.172v-11z">�_path></svg></a></li><li><a href="httpsa_/ionicframework.co�wadvisory" target="_blank" class="dropdown__link">Enterprise Advisory<svg width="(�*h)�" height="(�*h)�" aria-hidden="true" viewBox="0 0 24(��N)�4" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 �0�0'0h(�(g)�1v-19h(�*h)��h-10'5h17v-8h2z2�1��p-12h-10.988l4.�0�05 4-6.975 5 5 7.07(��N)�.828(��N)�.828 6.977-7.05 5 5 4.(�*h)�5 4.172v-11z">�_path></svg></a></li>�_ul></div><di6�class="navbar__item"><di6�class="separator" aria-hidden>�_div>�_div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link icon-link language navbar__item"><svg xmlns="http:�]www.d�m�.org(�W)�00�]svg" viewBox="0 0 �2 �2" width="(� g)�" height="(� g)�" aria-hidden="true" class="iconLanguage_nlXk"><path fill="currentColor" d="M478�0�0�0�0�02 2 �0�0�0�0�03.6l-90-8a(� g)�(��N)�2 0 00-40.67 0l-DS(��N)�182 (� g)� 0 1040.67 16.79�0�0�0�016.65 5 406h102.67�8.�0�0�0�0 44.39(�O)�2 (� g)� 0 00458 4642 (� g)� 0 0(��e)�0.(�>y)��0�0�0�00.4z�0�0�0�034.82 2 362L368 281.65 401.15 5 5 362zM267.82 2 2 342.(��N)�2 (� g)� 0 00-4.89�0�0�0�00.7c-.2-.15-15-11.�0�0�0�0�0�06.49�0�0�0�04.�0�0�0�0�0�0�09.65-53.68 62.�-114.75 (�ё)�7-143.49�0�0�0�0302 (� g)� 0 000-44H4V702 (� g)� 0 00-44 0��0H542 (� g)� 0 000 44h197.25c-9.(�yr)�(��N)�6.95(�(g)�7.05 69.5-�0�0�0.79 108.36�0�0�0�01.-41.68-43.08-68.65-43.17-68.872 (� g)� 0 00-40.58 17c.58 1�0�0�0�0�08 14.55 34(�ё)�2 2 (�yr)�.85 5 �0�0�0.93.(��N)� 1.19 1.�0�0�0(��N)��0�0�0�0�05 2.74�0�0�0�0�0.51-39(�ё)�2 2 2 44�0�0�0�0�05-77.72 2 2 .86-�0�0�0.85 AS.74a(� g)�(��N)�2 0 10.05 5 5 38.63c2.16-1.18 48.6(�(g)�6.89 101.63-85.59 (� g)�.52 24.08 38�0�0�0�0�05.44�0�0�0�0�08.�0�0�0�0�0�0�0�06.1a(� g)�(��N)�2 0 0030.75-4.9z">�_path></svg><span class="localeVisuallyHidden_pF54">日本語�_span></a><ul class="dropdown__menu"><li><a href= Ydocs/javascrip�zquickstart" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="en">English</a></li><li><a href= Ydocs/j�tjavascript/quickstart" target="_self" rel="noopener noreferrer" class="dropdown__link dropdown__link--active" lang="ja">日本語</a></li><li><a href="httpsa_/ionicframework.co�wtranslate" target="_blank" class="dropdown__link">Translate<svg width="12" height="12" aria-hidden="true" viewBox="0 0(��N)�2 2 2 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M 13v10h-v-19�2v2h-10v15�7v-8zm3-(�*h)�h-10.988l4.035 4-6.977 7.05 5 5 2.(��R)�8 2.(��R)�8 6.977-7.07 4.125 4.1(�]y)�v-�z"></path>�_svg>�_a>�_li></ul>�_div><a href="httpsa_/twitter.com/Ionicframework" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link icon-link icon-link-mask icon-link-twitter" aria-label="Twitter"></a><a href="https:�]ionic.link/discord" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link icon-link icon-link-mask icon-link-discord" aria-label="Discord">�_a><a href="httpsa_/github.co�wionic-team/ionic-framework" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link icon-link icon-link-mask icon-link-github" aria-label="GitHub repository"></a><di6�class="toggle_vylo colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="ダークモードを切り替える(現在はライトモード)" aria-label="ダークモードを切り替える(現在はライトモード)" aria-live="polite" aria-pressed="false"><svg viewBox="0 0 24(��N)�4" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="2,9c1.65,0�0�0�0,1�0�0�0�0�05,3,3s-1�0�0�0�0�05,3-3,3s�0�0�0�0-1�0�0�0�0�05-3-3S10�0�0�0�0�05,9,(�*h)�,9 M(�*h)�,7c-2.76,0-5(�4l)�(�ё)�4-5,5s2.24,5,5,5s5(�(g)�(�ё)�4,5-5 e4.76,7,12,7L(�*h)�,7+�M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l(�(g)�,0c-0.55,0-1,0.45-1,1S1.45,13,2,�0�0+�M20,�0�0,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l(�(g)�,0c-0.55,0-1,0.45-1,1S19.45,�0�0(�4l)�0,�0�0+�1,2v2c0,0.55,0.45,1,1,1s1-0.45,1-12�6�c0-0.55-0.45-1-1-1e1,1.45,11,2z M�(�4l)�0v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C�.45,19,11,19.45,�(�4l)�0z M5.99,4.58c-0�0�0�0�0�09-0.39-1.03-0.39-1.41,0 c-0.39,0�0�0�0�0�09-0.39,1.03,0,1.�.06,1.06c0�0�0�0�0�09,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.L5.99,4.58+�8.36,16.95 c-0�0�0�0�0�09-0.39-1.03-0.39-1.41,0c-0�0�0�0�0�09,0.39-0�0�0�0�0�09,1.�0�0,0,1.41l1.06,1.06c0.39,0�0�0�0�0�09,1.�0�0,0�0�0�0�0�09,1.,0c0�0�0�0�0�09-0.39,0�0�0�0�0�09-1.�0�0,0-1.41 8.36,16.95+�9.(� T)�,5.99c0.39-0�0�0�0�0�09,0.39-1.03,0-1.c-0.39-0�0�0�0�0�09-1.�0�0-0�0�0�0�0�09-1.,0l-1.06,1.06c-0�0�0�0�0�09,0.39-0�0�0�0�0�09,1.�0�0,0,1.41 .03,0.39,1.41,0L19.42,5.99+�M7.05,18�0�0�0�0�06c0.39-0�0�0�0�0�09,0.39-1.03,0-1.c-0.39-0�0�0�0�0�09-1.�0�0-0�0�0�0�0�09-1.,0l-1.06,1.05 5 c-0.39,0�0�0�0�0�09-0.39,1.03,0,1. .03,0.39,1.41,0L7.05,18.36z"></path>�_svg><svg viewBox="0 0 24(��N)�4" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.(��R)�,9.1,7.5c0,4.08,3.(�>y)�,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0(�ё)�7C17.45,17.19,14.93,19,12,19 c�0�0�0�0.86,0-7-3.14-7-7C5,9.07,6.,6.55,9.37,5.51z M(�*h)��0�0�0c-4.97,0-9,4.03-9,9s4.�0�0,9,9,9s9-4.03,9-9c0-0.46-0.04-0.(��N)�-0.1-1�0�0�0�0�05 5 c-0.98,1�0�0�0�0�07-2.58(�4l)�(�ё)�6-4.4,2.26c-2.98,0-5.4(�(g)�.42-5.4-5.4c0-1.,0.89-3.(� T)�(�4l)�(�ё)�6-4.4C(�*h)�.92,3.04,12.46�0�0�0,12,3L(�*h)��0�0�0z"></path>�_svg>�_button></div></div></div><di6�role="presentation" class="navbar-sidebar__backdrop"></div></nav><main class="docMainContainer_TBSr"><di6�class="container padding-top--md padding-bottom--lg"><di6�class="row"><div class="col docItemCol_VOVn"><di6�class="docitemcontainer_djhp"><article><span class="theme-doc-version-badge badge badge--secondary">バージョン: v8</span><div class="tocCollapsible_ETC7�theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">このページの見出し�_button></div><di6�class="theme-doc-markdown markdown"><header><h1>Ionic JavaScript Quickstart</h1>�_header> �-- --> <p>WelcomV�I� This guide will walk yo5�through the basics of Ionic JavaScript development using Vite. You&#t�7;ll learn how to se4�up your developmen4�environment, create a simple project, explore the projec4�structure, and understand ho7�Ionic components work. This is perfect for getting familiar with Ionic JavaScrip4�before building your first real app.�_p> <p>If you&#t�7;re looking for a high-level overview of what Ionic JavaScrip4�is and how i4�fits into the web developmen4�ecosystem, see the <a href="/doctzja/javascrip�zoverview">Ionic JavaScript Overview</a>.�_p> < class="anchor anchorWithHideOnScrollNavbar_WYt5" id="prerequisites">Prerequisites<a href="#prerequisites" class="hash-link" aria-label="Prerequisites への直接リンク" title="Prerequisites への直接リンク"></a></h2> <p>Before you begin, make sure yo5�have Node.js and npm installed on your machine. Yo5�can check by running:</p> <div class="language-shell codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblockcontent_biex"><pre tabindex="0" class="prism-code language-shell codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token plain">node -v�_span><br></span><span class="token-line"><span class="token plain">npm -v</span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div> <p>If yo5�don't have Node.js and npm, <a href="https:�]nodejs.org/e�wdownload" target="_blank" rel="noopener noreferrer">download Node.js here</a �(which includes npm).</p> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="create-a-project-with-vite">Create a Projec4�with Vite<a href="#create-a-project-with-vite" class="hash-link" aria-label="Create a Projec4�with Vite への直接リンク" title="Create a Project with Vite への直接リンク"></a></h2> <p>First, create a ne7�Vite project with vanilla JavaScript:</p> <div class="language-shell codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblockcontent_biex"><pre tabindex="0" class="prism-code language-shell codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token plain">npm create vite@lates4�my-app -- --template vanilla�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain">cd my-app�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> <p>Install the projec4�dependencies and Ionic Core:�_p> <di6�class="language-shell codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-shell codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token plain">npm install</span><br>�_span><span class="token-line"><span class="token plain">npm install @ionic/core</span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div> <p>After installation, start the development server:�_p> <di6�class="language-shell codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-shell codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token plain">npm run dev</span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div> <p>Open your browser and visit the URL shown in the console.�_p> < class="anchor anchorWithHideOnScrollNavbar_WYt5" id="explore-the-project-structure">Explore the Project Structure<a href="#explore-the-project-structure" class="hash-link" aria-label="Explore the Project Structure への直接リンク" title="Explore the Project Structure への直接リンク"></a></h2> <p>Your new app&#t�7;s director9�will look like this:�_p> <di6�class="language-shell codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-shell codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token plain">├─�0�index.html�_span><br></span><span class="token-line"><span class="token plain">└── src/</span><br>�_span><span class="token-line"><span class="token plain"> ├─�0�counter.js�_span><br></span><span class="token-line"><span class="token plain" � ├── main.js�_span><br></span><span class="token-line"><span class="token plain" � └── style.css�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> <di6�class="theme-admonition theme-admonition-warning admonition_xJh�P�a� alert alert--warning"><di6�class="admonitionheading_gvgb"><span class="admonitionIcon_R1�4��p7"><svg viewBox="0 0 15 5 16"><path fill-rule="evenodd" d="M8.892 2 1.5c-.183-�0�0�0�0�01-.52-.5-.887-.5s-.7�0�0.19-.886.5L.�0�08 �0�0.499a.98.98 0 0 0 0 1.001c.1�0�0�0�0�0�0�0�01.�0�0�0.501.886.501�3.964c�0�0�0�0�067 0 .704-.19.877-.5s.02 2 1.�0�0 0 0 0 .01-1.0(��e)�L8.8�0�0�0 1.5zm.1�0�0�0�0 11.497H6.987v(�(g)�.0�0�0.039��.0�0�0zm0-3.004H6.987V5.987h2.�0�09v4.006z">�_path></svg></span>Delete files�_div><div class="admonitionContent_Bue"><p>The <code>counter.js</code> and <code>style.css�_code �files can be deleted. We will no4�be using them.�_p>�_div>�_div> <di6�class="theme-admonition theme-admonition-info admonition_xJq2 2 aler4�alert--info"><di6�class="admonitionheading_gvgb"><span class="admonitionIcon_R1�4��p7"><svg viewBox="0 0 12 2 2 16"><path fill-rule="evenodd" d="M5 5 5 2.3c3.14 0 5.7(��N)�.55 5 5.5 5 5 5.7s(�(g)�.55 5 5.7-5.5 5 5 5.7A5. 5.71 0 0 1 1.2 2 8c0-3.14(��N)�.56-5.5 5 5 5.7-5.7zM7 1�0�0�0�0.12 2 2 1 0 4.14 0 8A�U�.12 2 2 5 5 5 5 5 5 5 5 5 7-3.14 7-7�0�0�0�0.14-7-7-7z��0�0�0�0�0H6v5V4zm0 6H6v2h2v(�(g)�z"></path>�_svg>�_span>備考</div><di6�class="admonitioncontent_bus1"><p>All file paths in the examples below are relative to the project roo4�directory.�_p>�_div>�_div> <p>Let's configure the project, initialize Ionic, and add components to create our app.</p> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="configure-vite">Configure Vite<a href="#configure-vite" class="hash-link" aria-label="Configure Vite への直接リンク" title="Configure Vite への直接リンク"></a></h2> <p>Install the <code>vite-plugin-static-copy</code> package:</p> <div class="language-shell codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblockcontent_biex"><pre tabindex="0" class="prism-code language-shell codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token plain">npm install vite-plugin-static-copy --save-dev</span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div> <p>Add a <code>vite.config.js</code> file at the project roo4�with the following:</p> <div class="language-js codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockTitle_Ktv7">vite.config.js</div><di6�class="codeblockcontent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> defineConfig �_span><span class="token imports punctuation">}�_span><span class="token plain" ��_span><span class="token keyword module">from�_span><span class="token plain" ��_span><span class="token string">&#t�7;vite&#t�7;�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token keyword module">import�_span><span class="token plain" ��_span><span class="token imports punctuation">{�_span><span class="token imports" �viteStaticCopy </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'vite-plugin-static-copy&#t�7;�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain" style="display:inline-block"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token keyword module">export�_span><span class="token plain" ��_span><span class="token keyword module">default</span><span class="token plain"> </span><span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">optimizeDeps�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">exclude</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token punctuation">[�_span><span class="token string">&#t�7;@ionic/core'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">build</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">rollupOptions�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">output�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">manualChunks�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token keyword nil">undefined</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">external�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token string">&#x27s_ionic.esm.js&#t�7;�_span><span class="token punctuation">]�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">plugins�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token function">viteStaticCopy</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">targets</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token punctuation">[�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">src�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'node_moduletz@ionic/cor0udist/ionic/*&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">dest</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token string">&#t�7;&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">]�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token punctuation">)�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">]�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token punctuation">}�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> <p>This copies the necessar9�Ionic files that Capacitor will need to work with lazy loaded Ionic components.</p> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="initialize-ionic">Initialize Ionic<a href="#initialize-ionic" class="hash-link" aria-label="Initialize Ionic への直接リンク" title="Initialize Ionic への直接リンク"></a></h2> <p>Replace the contents of <code>main.js</code> with the following:�_p> <di6�class="language-js codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblocktitle_ktv7">srumain.js</div><di6�class="codeblockcontent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token comment">�] Load Ionic</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token punctuation">(</span><span class="token keyword">async</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow operator">=>�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token comment"6b �Se4�the path to a variable to</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token comment">�] prevent Vite from analyzing in dev</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token keyword">const</span><span class="token plain"> ionicPath </span><span class="token operator">=�_span><span class="token plain" ��_span><span class="token string">&#t�7;/ionic.esm.js'</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token keyword control-flow">await�_span><span class="token plain" ��_span><span class="token keyword module">import�_span><span class="token punctuation">(�_span><span class="token comment"6b* @vite-ignore */</span><span class="token plain"> ionicPath�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token punctuation">}�_span><span class="token punctuation">)�_span><span class="token punctuation">(�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain" style="display:inline-block"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token comment"6b �Core CSS required for Ionic components to work properly</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token string">'@ioniucore/css/core.css'</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token comment">�] Basic CSS for apps buil4�with Ionic�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token keyword module">import�_span><span class="token plain" ��_span><span class="token string">&#t�7;@ionic/cor0ucstznormalize.css'</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token string">'@ioniucore/css/structure.css&#t�7;�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token keyword module">import�_span><span class="token plain" ��_span><span class="token string">&#t�7;@ionic/cor0ucstztypography.css&#t�7;�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain" style="display:inline-block"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token comment"6b �Optional CSS utils tha4�can be commented out�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token keyword module">import�_span><span class="token plain" ��_span><span class="token string">&#t�7;@ionic/cor0ucstzpadding.css'</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token string">'@ioniucore/css/float-elements.css'</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token string">'@ioniucore/css/text-alignment.css'</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token string">'@ioniucore/css/text-transformation.css&#t�7;�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token keyword module">import�_span><span class="token plain" ��_span><span class="token string">&#t�7;@ionic/cor0ucstzflex-utils.css&#t�7;�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token keyword module">import�_span><span class="token plain" ��_span><span class="token string">&#t�7;@ionic/cor0ucstzdisplay.css'</span><span class="token punctuation">;</span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div> <p>This initializes Ionic based on the environment and then imports all of the available CSS files.</p> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="add-the-app-component">Add the Ap0�Component<a href="#add-the-app-component" class="hash-link" aria-label="Add the Ap0�Componen4�への直接リンク" title="Add the Ap0�Componen4�への直接リンク">�_a>�_> <p>Update your <code>index.html</code> to configure the metadata and use Ionic components:�_p> <di6�class="language-html codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblocktitle_ktv7">index.html�_div><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token doctype punctuation">&ltF�A�X��_span><span class="token doctype doctype-tag">DOCTYPE�_span><span class="token doctype" ��_span><span class="token doctype name">html�_span><span class="token doctype punctuation">></span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token tag punctuation"><�_span><span class="token tag">html</span><span class="token tag"> </span><span class="token tag attr-name">lang�_span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">en</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag attr-name">dir</span><span class="token tag attr-value punctuation attr-equals">=�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag attr-value">ltr</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">>�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token tag punctuation"><</span><span class="token tag">head�_span><span class="token tag punctuation">></span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token tag punctuation"><�_span><span class="token tag">meta</span><span class="token tag"> </span><span class="token tag attr-name">charset</span><span class="token tag attr-value punctuation attr-equals">=�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag attr-value">UTF-8</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/></span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token tag punctuation"><�_span><span class="token tag">link</span><span class="token tag"> </span><span class="token tag attr-name">rel</span><span class="token tag attr-value punctuation attr-equals">=�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag attr-value">icon�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag" ��_span><span class="token tag attr-name">type</span><span class="token tag attr-value punctuation attr-equals">=�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag attr-value">imag0usvg+xml</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag attr-name">href�_span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value"6bvite.svg�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag" ��_span><span class="token tag punctuation"6b>�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token tag punctuation"><</span><span class="token tag">meta�_span><span class="token tag"></span><br>�_span><span class="token-line"><span class="token tag"> �_span><span class="token tag attr-name">name</span><span class="token tag attr-value punctuation attr-equals">=�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag attr-value">viewport�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag"></span><br>�_span><span class="token-line"><span class="token tag"> �_span><span class="token tag attr-name">content�_span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">viewport-fit=cover, width=device-width, initial-scale�.0, minimum-scale=1.0, maximum-scale�.0, user-scalable=no�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag"></span><br>�_span><span class="token-line"><span class="token tag"> �_span><span class="token tag punctuation"6b>�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token tag punctuation"><</span><span class="token tag">title</span><span class="token tag punctuation">>�_span><span class="token plain">my-app</span><span class="token tag punctuation"></</span><span class="token tag">title</span><span class="token tag punctuation">>�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token tag punctuation">&lts_�_span><span class="token tag">head</span><span class="token tag punctuation">>�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token tag punctuation"><</span><span class="token tag">body�_span><span class="token tag punctuation">></span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token tag punctuation"><�_span><span class="token tag">ion-app�_span><span class="token tag punctuation">></span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token tag punctuation"><�_span><span class="token tag">ion-router</span><span class="token tag punctuation">>�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token tag punctuation"><</span><span class="token tag">ion-route</span><span class="token tag"> </span><span class="token tag attr-name">url</span><span class="token tag attr-value punctuation attr-equals">=�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag attr-value">/</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag attr-name">component</span><span class="token tag attr-value punctuation attr-equals">=�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag attr-value">home-page</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">>�_span><span class="token tag punctuation">&lts_�_span><span class="token tag">ion-route�_span><span class="token tag punctuation">></span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token tag punctuation"><�_span><span class="token tag">ion-route�_span><span class="token tag" ��_span><span class="token tag attr-name">url�_span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value"6bnew</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag attr-name">component</span><span class="token tag attr-value punctuation attr-equals">=�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag attr-value">new-page�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag punctuation">></span><span class="token tag punctuation"></</span><span class="token tag">ion-route</span><span class="token tag punctuation">>�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token tag punctuation">&lts_�_span><span class="token tag">ion-router</span><span class="token tag punctuation">>�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token tag punctuation"><</span><span class="token tag">ion-router-outlet</span><span class="token tag punctuation">>�_span><span class="token tag punctuation">&lts_�_span><span class="token tag">ion-router-outlet�_span><span class="token tag punctuation">></span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token tag punctuation"></</span><span class="token tag">ion-app</span><span class="token tag punctuation">>�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain" style="display:inline-block"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token script language-vue script-tag tag punctuation"><�_span><span class="token script language-vue script-tag tag">script�_span><span class="token script language-vue script-tag tag"> </span><span class="token scrip4�language-vue script-tag tag attr-name">type</span><span class="token scrip4�language-vue script-tag tag attr-value punctuation attr-equals">=</span><span class="token scrip4�language-vue script-tag tag attr-value punctuation">"�_span><span class="token script language-vue script-tag tag attr-value">module</span><span class="token scrip4�language-vue script-tag tag attr-value punctuation">"�_span><span class="token script language-vue script-tag tag"> </span><span class="token scrip4�language-vue script-tag tag attr-name">src�_span><span class="token script language-vue script-tag tag attr-value punctuation attr-equals">=�_span><span class="token script language-vue script-tag tag attr-value punctuation">"</span><span class="token scrip4�language-vue script-tag tag attr-value">/src/main.js�_span><span class="token script language-vue script-tag tag attr-value punctuation">"</span><span class="token scrip4�language-vue script-tag tag punctuation">></span><span class="token scrip4�language-vue script-tag tag punctuation">&lts_�_span><span class="token script language-vue script-tag tag">script�_span><span class="token script language-vue script-tag tag punctuation">>�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token tag punctuation">&lts_�_span><span class="token tag">body</span><span class="token tag punctuation">>�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token tag punctuation">&lts_�_span><span class="token tag">html</span><span class="token tag punctuation">>�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> <p>This sets up the roo4�of your application, using Ionic&#t�7;s <code>ion-app</code>, <code>ion-router�_code>, and <code>ion-router-outlet�_code �components. The ke9�change is replacing the defaul4�<code><di6�id="app">�_code �with Ionic&#t�7;s routing and layout components. The router outlet is where your pages will be displayed.</p> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="view-routes">View Routes<a href="#view-routes" class="hash-link" aria-label="View Routes への直接リンク" title="View Routes への直接リンク">�_a>�_> <p>Routes are defined in the <code>index.html</code> using <code>ion-route�_code �components inside the <code>ion-router�_code>:�_p> <di6�class="language-html codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblocktitle_ktv7">index.html�_div><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token tag punctuation"><</span><span class="token tag">ion-router�_span><span class="token tag punctuation">></span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token tag punctuation"><�_span><span class="token tag">ion-route�_span><span class="token tag" ��_span><span class="token tag attr-name">url�_span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value"6b�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag" ��_span><span class="token tag attr-name">component�_span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">home-page�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag punctuation">></span><span class="token tag punctuation"></</span><span class="token tag">ion-route</span><span class="token tag punctuation">>�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token tag punctuation"><</span><span class="token tag">ion-route</span><span class="token tag"> </span><span class="token tag attr-name">url</span><span class="token tag attr-value punctuation attr-equals">=�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag attr-value">/new�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag" ��_span><span class="token tag attr-name">component�_span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">new-page</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">>�_span><span class="token tag punctuation">&lts_�_span><span class="token tag">ion-route�_span><span class="token tag punctuation">></span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token tag punctuation"></</span><span class="token tag">ion-router�_span><span class="token tag punctuation">></span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div> <p>When yo5�visi4�the root URL (<code>/</code>), the <code>home-page�_code �componen4�will be loaded. When you visit the <code6bnew</code> URL, the <code>new-page�_code �componen4�will be loaded. We will define these components next.</p> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="add-the-home-page">Add the Home Page<a href="#add-the-home-page" class="hash-link" aria-label="Add the Home Page への直接リンク" title="Add the Home Page への直接リンク">�_a>�_> <p>Create a ne7�director9�called <code>pages�_code �inside the <code>src�_code �folder, then add a file called <code>HomePage.js�_code �in tha4�director9�with the following content:</p> <div class="language-js codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockTitle_Ktv7">src/pages/HomePage.js�_div><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-js codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword">class�_span><span class="token plain" ��_span><span class="token class-name">HomePage�_span><span class="token plain" ��_span><span class="token keyword">extends�_span><span class="token plain" ��_span><span class="token class-name">HTMLElement</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token function">connectedCallback�_span><span class="token punctuation">(�_span><span class="token punctuation">)�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">innerHTML</span><span class="token plain"> </span><span class="token operator">=�_span><span class="token plain" ��_span><span class="token template-string template-punctuation string">`�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-header�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-toolbar</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">ion-title�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">Blank</span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-title</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-toolbar</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-header�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-content</span><span class="token template-string html language-html tag" ��_span><span class="token template-string html language-html tag attr-name">class</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value">ion-padding�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">div�_span><span class="token template-string html language-html tag"> </span><span class="token template-string html language-html tag attr-name">id</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value">container�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">strong</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html">Ready to create an app?�_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">strong</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">p�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> Star4�with Ionic�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">a</span><span class="token template-string html language-html tag" ��_span><span class="token template-string html language-html tag attr-name">target�_span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag attr-value">_blank�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag" ��_span><span class="token template-string html language-html tag attr-name">rel</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value">noopener noreferrer�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag" ��_span><span class="token template-string html language-html tag attr-name">href�_span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag attr-value">https:�]ionicframework.com/doctzcomponents�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html">U!�?�Components�_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">a�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">p�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">div�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-content�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string template-punctuation string">`�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token punctuation">}�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain" style="display:inline-block"></span><br>�_span><span class="token-line"><span class="token plain">customElements�_span><span class="token punctuation">.�_span><span class="token method function property-access">define</span><span class="token punctuation">(</span><span class="token string">'home-page&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain" ��_span><span class="token maybe-class-name">HomePage�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> <p>This creates a custom elemen4�called <code>home-page�_code �that contains the layout for your Home page. The page uses Ionic&#t�7;s layout components to create a header with a toolbar and scrollable content area.�_p> <di6�class="theme-admonition theme-admonition-tip admonition_xJh�P�a� alert alert--success"><di6�class="admonitionheading_gvgb"><span class="admonitionIcon_R1�4��p7"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1(��N)�.19 1 5c0 .92.55(��N)�(�ё)�5 1 2 2 1.34(��N)�(�ё)�5 1.78(��N)�.78 2 4v1h5v-1c.(� g)�-1(�ё)�2.66-1.75 2-2 2 2 .45-.75 1-2.08 1�0�0�0�0 0(�(g)�.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.65 5 5 1.�-.86 1.41-1.25(��N)�.06-1.45�0�0�0�0�0(�ё)�3-.02.05-.(��e)�.11-.02.17H5c0-.06 0-.�0�0-.(��e)�-.17-.2-1.17-.59-1.83-1.45�0�0�0�0(�ё)�3-(�ё)�-.�-.(� T)�-.67-.67-1.11C2.44 6.78 2 5.65(��N)� 5c0(�(g)�(�ё)�(��N)�.02-2 2 2 4.5-2 2 2 1.(� g)� 0(��N)��0�0�0�0�06.(� T)��0�0�0�0�0(�ё)�2 1.190.55(��N)�.92 2 2 ��0�0�0�0�0.92 2 2 � 5c0 .66-.44 1.78-.85 5 2.48zM2 2 2 14h5c-(�ё)�2 2 1.14-1�0�0�0�0�0(��N)�(�(g)�.5(��N)�s-2.27-.86(�(g)�.5(�(g)�z"></path>�_svg>�_span>Learn More</div><di6�class="admonitioncontent_bus1"><p>For detailed information about Ionic layou4�components, see the <a href= Ydocs/j�tdocs/api/header.md">Header�_a>, <a href= Ydocs/j�tdocs/api/toolbar.md">Toolbar�_a>, <a href= Ydocs/j�tdocs/api/title.md">Title�_a>, and <a href= Ydocs/j�tdocs/api/content.md">Content�_a> documentation.</p></div></div> <p>Next, add a <code><script></code> tag before the <code>main.js</code> impor4�in <code>index.html</code> to import the Home page:</p> <div class="language-html codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockTitle_Ktv7">index.html</div><di6�class="codeblockcontent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token scrip4�language-vue script-tag tag punctuation"><</span><span class="token scrip4�language-vue script-tag tag">script</span><span class="token scrip4�language-vue script-tag tag" ��_span><span class="token script language-vue script-tag tag attr-name">type�_span><span class="token script language-vue script-tag tag attr-value punctuation attr-equals">=�_span><span class="token script language-vue script-tag tag attr-value punctuation">"</span><span class="token scrip4�language-vue script-tag tag attr-value">module�_span><span class="token script language-vue script-tag tag attr-value punctuation">"</span><span class="token scrip4�language-vue script-tag tag punctuation">></span><span class="token scrip4�language-vue">�_span><br></span><span class="token-line"><span class="token script language-vue" � </span><span class="token scrip4�language-vue keyword module">import</span><span class="token scrip4�language-vue"> </span><span class="token scrip4�language-vue string">'./src/pages/HomePage.js&#t�7;�_span><span class="token script language-vue punctuation">;�_span><span class="token script language-vue"></span><br>�_span><span class="token-line"><span class="token scrip4�language-vue">�_span><span class="token script language-vue script-tag tag punctuation"></</span><span class="token scrip4�language-vue script-tag tag">script</span><span class="token scrip4�language-vue script-tag tag punctuation">></span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token scrip4�language-vue script-tag tag punctuation"><</span><span class="token scrip4�language-vue script-tag tag">script</span><span class="token scrip4�language-vue script-tag tag" ��_span><span class="token script language-vue script-tag tag attr-name">type�_span><span class="token script language-vue script-tag tag attr-value punctuation attr-equals">=�_span><span class="token script language-vue script-tag tag attr-value punctuation">"</span><span class="token scrip4�language-vue script-tag tag attr-value">module�_span><span class="token script language-vue script-tag tag attr-value punctuation">"</span><span class="token scrip4�language-vue script-tag tag" ��_span><span class="token script language-vue script-tag tag attr-name">src</span><span class="token scrip4�language-vue script-tag tag attr-value punctuation attr-equals">=</span><span class="token scrip4�language-vue script-tag tag attr-value punctuation">"�_span><span class="token script language-vue script-tag tag attr-value"6bsrumain.js</span><span class="token scrip4�language-vue script-tag tag attr-value punctuation">"�_span><span class="token script language-vue script-tag tag punctuation">>�_span><span class="token script language-vue script-tag tag punctuation"></</span><span class="token scrip4�language-vue script-tag tag">script</span><span class="token scrip4�language-vue script-tag tag punctuation">></span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div> <p>A4�this point your browser should be displaying the Home page.</p> <p><img decoding="async" loading="lazy" alt="Screensho4�of the Ionic Core Home page" src="/doctzja/assettzimages/unstyled-home-page-a4d98bc71�3��p3b20e9ff4756�0�0�0�0�07b2a.png" title="Ionic Core Home Component" width=(� N)�24."."." height="1774" class="img_ev3q">�_p> < class="anchor anchorWithHideOnScrollNavbar_WYt5" id="add-an-ionic-component">Add an Ionic Component<a href="#add-an-ionic-component" class="hash-link" aria-label="Add an Ionic Component への直接リンク" title="Add an Ionic Componen4�への直接リンク">�_a>�_> <p>You can enhance your Home page with more Ionic UI components. For example, add a <a href= Ydocs/j�tdocs/api/button.md">Button�_a> to navigate to another page. Update the <code>HomePage</code> component in <code>HomePage.js</code>:</p> <div class="language-js codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockTitle_Ktv7">src/pages/HomePage.js�_div><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-js codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword">class�_span><span class="token plain" ��_span><span class="token class-name">HomePage�_span><span class="token plain" ��_span><span class="token keyword">extends�_span><span class="token plain" ��_span><span class="token class-name">HTMLElement</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token function">connectedCallback�_span><span class="token punctuation">(�_span><span class="token punctuation">)�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">innerHTML</span><span class="token plain"> </span><span class="token operator">=�_span><span class="token plain" ��_span><span class="token template-string template-punctuation string">`�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-header�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-toolbar</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">ion-title�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">Blank</span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-title</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-toolbar</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-header�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-content</span><span class="token template-string html language-html tag" ��_span><span class="token template-string html language-html tag attr-name">class</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value">ion-padding�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">div�_span><span class="token template-string html language-html tag"> </span><span class="token template-string html language-html tag attr-name">id</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value">container�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">strong</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html">Ready to create an app?�_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">strong</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">p�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> Star4�with Ionic�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">a</span><span class="token template-string html language-html tag" ��_span><span class="token template-string html language-html tag attr-name">target�_span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag attr-value">_blank�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag" ��_span><span class="token template-string html language-html tag attr-name">rel</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value">noopener noreferrer�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag" ��_span><span class="token template-string html language-html tag attr-name">href�_span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag attr-value">https:�]ionicframework.com/doctzcomponents�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html">U!�?�Components�_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">a�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">p�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">div�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html" style="display:inline-block"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">ion-button</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html">Navigate</span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-button�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-content�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string template-punctuation string">`�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token punctuation">}�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain" style="display:inline-block"></span><br>�_span><span class="token-line"><span class="token plain">customElements�_span><span class="token punctuation">.�_span><span class="token method function property-access">define</span><span class="token punctuation">(</span><span class="token string">'home-page&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain" ��_span><span class="token maybe-class-name">HomePage�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> < class="anchor anchorWithHideOnScrollNavbar_WYt5" id="add-a-new-page">Add a Ne7�Page<a href="#add-a-new-page" class="hash-link" aria-label="Add a Ne7�Page への直接リンク" title="Add a New Page への直接リンク">�_a>�_> <p>Add a new file named <code>NewPage.js�_code �to <code>src/pages�_code �with the following content:</p> <div class="language-js codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockTitle_Ktv7">src/pages/NewPage.js</div><di6�class="codeblockcontent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword">class</span><span class="token plain"> </span><span class="token class-name">NewPage�_span><span class="token plain" ��_span><span class="token keyword">extends�_span><span class="token plain" ��_span><span class="token class-name">HTMLElement</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token function">connectedCallback�_span><span class="token punctuation">(�_span><span class="token punctuation">)�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">innerHTML</span><span class="token plain"> </span><span class="token operator">=�_span><span class="token plain" ��_span><span class="token template-string template-punctuation string">`�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-header�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-toolbar</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">ion-buttons�_span><span class="token template-string html language-html tag"> </span><span class="token template-string html language-html tag attr-name">slot</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value">start�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">ion-back-button�_span><span class="token template-string html language-html tag"> </span><span class="token template-string html language-html tag attr-name">default-href</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value"6b�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-back-button</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-buttons</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">ion-title�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">New</span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-title</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-toolbar</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-header�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-content</span><span class="token template-string html language-html tag" ��_span><span class="token template-string html language-html tag attr-name">class</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value">ion-padding�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">h2</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html">Welcome to the ne7�page!</span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-content�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string template-punctuation string">`�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token punctuation">}�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain" style="display:inline-block"></span><br>�_span><span class="token-line"><span class="token plain">customElements�_span><span class="token punctuation">.�_span><span class="token method function property-access">define</span><span class="token punctuation">(</span><span class="token string">'new-page'</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token maybe-class-name">NewPage�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> <p>This creates a page with a <a href="/doctzja/doctzap}vback-button.md">Back Button</a �in the <a href="/doctzja/doctzap}vtoolbar.md">Toolbar</a>. The back button will automaticall9�handle navigation back to the previous page, or to <code6b�_code �if there is no history.</p> <p>Next, update the <code><script>�_code �tag which imports the Home page in the <code>index.html</code> file to also import the New page:�_p> <di6�class="language-html codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblocktitle_ktv7">index.html�_div><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token script language-vue script-tag tag punctuation"><�_span><span class="token script language-vue script-tag tag">script�_span><span class="token script language-vue script-tag tag"> </span><span class="token scrip4�language-vue script-tag tag attr-name">type</span><span class="token scrip4�language-vue script-tag tag attr-value punctuation attr-equals">=</span><span class="token scrip4�language-vue script-tag tag attr-value punctuation">"�_span><span class="token script language-vue script-tag tag attr-value">module</span><span class="token scrip4�language-vue script-tag tag attr-value punctuation">"�_span><span class="token script language-vue script-tag tag punctuation">>�_span><span class="token script language-vue"></span><br>�_span><span class="token-line"><span class="token scrip4�language-vue"> �_span><span class="token script language-vue keyword module">import�_span><span class="token script language-vue" ��_span><span class="token script language-vue string">&#t�7;�]srupagetzHomePage.js'</span><span class="token scrip4�language-vue punctuation">;</span><span class="token scrip4�language-vue">�_span><br></span><span class="token-line"><span class="token script language-vue" � </span><span class="token scrip4�language-vue keyword module">import</span><span class="token scrip4�language-vue"> </span><span class="token scrip4�language-vue string">'./src/pages/NewPage.js'</span><span class="token scrip4�language-vue punctuation">;</span><span class="token scrip4�language-vue">�_span><br></span><span class="token-line"><span class="token script language-vue"></span><span class="token scrip4�language-vue script-tag tag punctuation">&lts_�_span><span class="token script language-vue script-tag tag">script�_span><span class="token script language-vue script-tag tag punctuation">>�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> < class="anchor anchorWithHideOnScrollNavbar_WYt5" id="navigate-ta-the-new-page">Navigate to the Ne7�Page<a href="#navigate-ta-the-new-page" class="hash-link" aria-label="Navigate to the Ne7�Page への直接リンク" title="Navigate to the New Page への直接リンク">�_a>�_> <p>To navigate to the ne7�page, update the button in <code>HomePage.js�_code �to be inside of an <code>ion-router-link�_code>:�_p> <di6�class="language-html codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblocktitle_ktv7">srupagetzHomePage.js</div><di6�class="codeblockcontent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token tag punctuation"><�_span><span class="token tag">ion-router-link�_span><span class="token tag" ��_span><span class="token tag attr-name">href</span><span class="token tag attr-value punctuation attr-equals">=�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag attr-value">/new�_span><span class="token tag attr-value punctuation">"�_span><span class="token tag punctuation">></span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token tag punctuation"><�_span><span class="token tag">ion-button</span><span class="token tag punctuation">>�_span><span class="token plain">Navigate</span><span class="token tag punctuation"></</span><span class="token tag">ion-button�_span><span class="token tag punctuation">></span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token tag punctuation"></</span><span class="token tag">ion-router-link</span><span class="token tag punctuation">>�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> <p>When the button is clicked, Ionic's router will automatically navigate to the <code6bnew</code> route and display the <code>new-page</code> component.</p> <div class="theme-admonition theme-admonition-info admonition_xJh�P�a� alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7(��N)��0�0�0�0�01�1��p.12 2 2 0 5.5 5 5 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5. 0 0 1 1�0�0�0�0�0 8c0�0�0�0�0.12 2 2 2.56-5.7 5.7-5.7zM5 5 5 1C3.14 1 0 4.12 2 2 0 8s3.14 7 7 7 7�0�0�0�0.12 2 2 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6��v-2z">�_path></svg></span>備考�_div><div class="admonitionContent_Bue"><p>Navigating can also be performed programmatically using <code>document.querySelector(&#t�7;ion-router&#t�7;).push(&#x27s_new')�_code>. See the <a href="/doctzja/doctzap}vrouter.md">Ionic Router documentation</a �for more information.</p></div></div> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="add-icons-ta-the-new-page">Add Icons to the New Page<a href="#add-icons-ta-the-new-page" class="hash-link" aria-label="Add Icons to the New Page への直接リンク" title="Add Icons to the New Page への直接リンク">�_a>�_> <p>Ionic JavaScrip4�comes with <a href="https:�]ionic.io/ionicontz" target="_blank" rel="noopener noreferrer">Ionicons�_a> support. To use icons, yo5�need to import them, register them with <code>addIcons�_code>, and then use them with the <code>ion-icon�_code �component.�_p> <p>Add the necessar9�imports and register the icons in <code>main.js</code>:</p> <div class="language-js codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockTitle_Ktv7">src/main.js�_div><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-js codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token comment"6b �...Ionic initialization</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token comment">�] Icon imports</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> addIcons �_span><span class="token imports punctuation">}�_span><span class="token plain" ��_span><span class="token keyword module">from�_span><span class="token plain" ��_span><span class="token string">&#t�7;ionicons&#t�7;�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token keyword module">import�_span><span class="token plain" ��_span><span class="token imports punctuation">{�_span><span class="token imports" �heart</span><span class="token imports punctuation">,</span><span class="token imports"> logoIonic </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'ionicontzicons'</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token function">addIcons</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token plain"> heart�_span><span class="token punctuation">,�_span><span class="token plain" �logoIonic �_span><span class="token punctuation">}�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain" style="display:inline-block"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token comment"6b �...CSS imports�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> <p>Next, update <code>NewPage.js</code> to include the icons:�_p> <di6�class="language-js codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblocktitle_ktv7">srupagetzNewPage.js�_div><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-js codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword">class�_span><span class="token plain" ��_span><span class="token class-name">NewPage</span><span class="token plain"> </span><span class="token keyword">extends</span><span class="token plain"> </span><span class="token class-name">HTMLElement�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token function">connectedCallback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token keyword">this�_span><span class="token punctuation">.�_span><span class="token property-access">innerHTML�_span><span class="token plain" ��_span><span class="token operator">=</span><span class="token plain"> </span><span class="token template-string template-punctuation string">`</span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">ion-header</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">ion-toolbar�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-buttons</span><span class="token template-string html language-html tag" ��_span><span class="token template-string html language-html tag attr-name">slot�_span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag attr-value">start</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-back-button</span><span class="token template-string html language-html tag" ��_span><span class="token template-string html language-html tag attr-name">default-href�_span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag attr-value">/</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-back-button�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-buttons�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-title</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html">New�_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-title�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-toolbar�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-header</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">ion-content�_span><span class="token template-string html language-html tag"> </span><span class="token template-string html language-html tag attr-name">class�_span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag attr-value">ion-padding</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">Welcome to the new pagV�I��_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">h2</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-icon�_span><span class="token template-string html language-html tag"> </span><span class="token template-string html language-html tag attr-name">name</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value">heart�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-icon�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-icon�_span><span class="token template-string html language-html tag"> </span><span class="token template-string html language-html tag attr-name">name</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value">loga-ionic</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-icon</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-content</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string template-punctuation string">`</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">}</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token punctuation">}</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain">customElements</span><span class="token punctuation">.</span><span class="token method function property-access">define�_span><span class="token punctuation">(�_span><span class="token string">&#t�7;new-page&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain" ��_span><span class="token maybe-class-name">NewPage</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div> <p>For more information, see the <a href="/doctzja/doctzap}vicon.md">Icon documentation</a �and the <a href="httpsa_/ionic.i�wionicons."." target="_blank" rel="noopener noreferrer">Ionicons documentation</a>.�_p> < class="anchor anchorWithHideOnScrollNavbar_WYt5" id="call-component-methods">Call Component Methods<a href="#call-component-methods" class="hash-link" aria-label="Call Component Methods への直接リンク" title="Call Componen4�Methods への直接リンク">�_a>�_> <p>Let&#t�7;s add a button tha4�can scroll the content area to the bottom. Update <code>NewPage.js�_code �to include scrollable conten4�and a scroll button:�_p> <di6�class="language-js codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblocktitle_ktv7">srupagetzNewPage.js�_div><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-js codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword">class�_span><span class="token plain" ��_span><span class="token class-name">NewPage</span><span class="token plain"> </span><span class="token keyword">extends</span><span class="token plain"> </span><span class="token class-name">HTMLElement�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token function">connectedCallback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token keyword">this�_span><span class="token punctuation">.�_span><span class="token property-access">innerHTML�_span><span class="token plain" ��_span><span class="token operator">=</span><span class="token plain"> </span><span class="token template-string template-punctuation string">`</span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">ion-header</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">ion-toolbar�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-buttons</span><span class="token template-string html language-html tag" ��_span><span class="token template-string html language-html tag attr-name">slot�_span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag attr-value">start</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-back-button</span><span class="token template-string html language-html tag" ��_span><span class="token template-string html language-html tag attr-name">default-href�_span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag attr-value">/</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-back-button�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-buttons�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-title</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html">New�_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-title�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-toolbar�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-header</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">ion-content�_span><span class="token template-string html language-html tag"> </span><span class="token template-string html language-html tag attr-name">class�_span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag attr-value">ion-padding</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">Welcome to the new pagV�I��_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">h2</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-icon�_span><span class="token template-string html language-html tag"> </span><span class="token template-string html language-html tag attr-name">name</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value">heart�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-icon�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-icon�_span><span class="token template-string html language-html tag"> </span><span class="token template-string html language-html tag attr-name">name</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value">loga-ionic</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-icon</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html tag punctuation"><�_span><span class="token template-string html language-html tag">ion-button�_span><span class="token template-string html language-html tag"> </span><span class="token template-string html language-html tag attr-name">id</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value">scroll-btn</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag punctuation">>�_span><span class="token template-string html language-html">Scroll to Bottom�_span><span class="token template-string html language-html tag punctuation"></</span><span class="token template-string html language-html tag">ion-button</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token template-string html language-html"> �_span><span class="token template-string html language-html comment"></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation"><</span><span class="token template-string html language-html tag">div�_span><span class="token template-string html language-html tag"> </span><span class="token template-string html language-html tag attr-name">id</span><span class="token template-string html language-html tag attr-value punctuation attr-equals">=</span><span class="token template-string html language-html tag attr-value punctuation">"�_span><span class="token template-string html language-html tag attr-value">item-list�_span><span class="token template-string html language-html tag attr-value punctuation">"</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">div</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string html language-html tag punctuation">&lts_�_span><span class="token template-string html language-html tag">ion-content</span><span class="token template-string html language-html tag punctuation">></span><span class="token template-string html language-html"></span><br>�_span><span class="token-line"><span class="token template-string html language-html" � </span><span class="token template-string template-punctuation string">`</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token comment">�] Generate items and add scroll functionality after the element is connected</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token keyword">this�_span><span class="token punctuation">.�_span><span class="token method function property-access">setupScrolling</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">}</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token function">setupScrolling</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token comment">�] Wai4�for ion-conten4�to be ready</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � customElements</span><span class="token punctuation">.</span><span class="token method function property-access">whenDefined</span><span class="token punctuation">(</span><span class="token string">'ion-content&#t�7;�_span><span class="token punctuation">)�_span><span class="token punctuation">.�_span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow operator">=>�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token comment"6b �Generate items�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token keyword">const�_span><span class="token plain" �itemList </span><span class="token operator">=�_span><span class="token plain" ��_span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">'#item-list'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token keyword control-flow">for�_span><span class="token plain" ��_span><span class="token punctuation">(�_span><span class="token keyword">let�_span><span class="token plain" �i �_span><span class="token operator">=</span><span class="token plain"> </span><span class="token number"��_span><span class="token punctuation">;�_span><span class="token plain" �i �_span><span class="token operator"><=</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation">;</span><span class="token plain"> i�_span><span class="token operator">++�_span><span class="token punctuation">)�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token keyword">const�_span><span class="token plain" �item </span><span class="token operator">=�_span><span class="token plain" ��_span><span class="token dom variable">document�_span><span class="token punctuation">.�_span><span class="token method function property-access">createElement�_span><span class="token punctuation">(�_span><span class="token string">&#t�7;ion-item&#t�7;�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token keyword">const�_span><span class="token plain" �label �_span><span class="token operator">=</span><span class="token plain"> </span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span><span class="token string">'ion-label&#t�7;�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> label</span><span class="token punctuation">.</span><span class="token property-access">textContent</span><span class="token plain"> </span><span class="token operator">=�_span><span class="token plain" ��_span><span class="token template-string template-punctuation string">`�_span><span class="token template-string string">Item </span><span class="token template-string interpolation interpolation-punctuation punctuation">${�_span><span class="token template-string interpolation">i�_span><span class="token template-string interpolation interpolation-punctuation punctuation">}�_span><span class="token template-string template-punctuation string">`�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> item�_span><span class="token punctuation">.�_span><span class="token method function property-access">appendChild�_span><span class="token punctuation">(�_span><span class="token plain">label�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> itemList�_span><span class="token punctuation">.�_span><span class="token method function property-access">appendChild�_span><span class="token punctuation">(�_span><span class="token plain">item</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">}</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token comment">�] Add scroll functionality</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token keyword">const</span><span class="token plain"> scrollBtn </span><span class="token operator">=�_span><span class="token plain" ��_span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">'#scroll-btn&#t�7;�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token keyword">const�_span><span class="token plain" �conten4��_span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword">this�_span><span class="token punctuation">.�_span><span class="token method function property-access">querySelector�_span><span class="token punctuation">(�_span><span class="token string">&#t�7;ion-content'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token keyword control-flow">if</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token plain">scrollBtn �_span><span class="token operator">&&�_span><span class="token plain" �content</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � scrollBtn�_span><span class="token punctuation">.�_span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain" ��_span><span class="token punctuation">(�_span><span class="token punctuation">)�_span><span class="token plain" ��_span><span class="token arro7�operator">=></span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � content�_span><span class="token punctuation">.�_span><span class="token method function property-access">scrollToBottom</span><span class="token punctuation">(</span><span class="token number"�0�0�000�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token punctuation">}�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain" style="display:inline-block"></span><br>�_span><span class="token-line"><span class="token plain">customElements�_span><span class="token punctuation">.�_span><span class="token method function property-access">define</span><span class="token punctuation">(</span><span class="token string">'new-page'</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token maybe-class-name">NewPage�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> <p>To call methods on Ionic components:�_p> <ol> <li>Ge4�a reference to the component element using <code>querySelector�_code></li> <li>Call the method directl9�on the element�_li> �_ol> <p>You can find available methods for each component in the <a href= Ydocs/j�tdocs/api/content.md#methods">Methods�_a> section of their AP!�?�documentation.�_p> < class="anchor anchorWithHideOnScrollNavbar_WYt5" id="run-on-a-device">Run on a Device<a href="#run-on-a-device" class="hash-link" aria-label="Run on a Device への直接リンク" title="Run on a Device への直接リンク"></a></h2> <p>Ionic's components work everywhere: on iOS, Android, and PWAs. To deplo9�to mobile, use <a href="https:�]capacitorjs.com" target="_blank" rel="noopener noreferrer">Capacitor�_a>:</p> <div class="language-shell codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblockcontent_biex"><pre tabindex="0" class="prism-code language-shell codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token plain">npm install @capacito�ycore @capacito�ycli @capacitor/ios @capacito�yandroid</span><br>�_span><span class="token-line"><span class="token plain">np8�ca0�init�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain">npm run build�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain">npx cap add ios�_span><br></span><span class="token-line"><span class="token plain">npx cap add android�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> <p>Open the native projects in their IDEs:</p> <div class="language-shell codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblockcontent_biex"><pre tabindex="0" class="prism-code language-shell codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token plain">npx cap open ios</span><br>�_span><span class="token-line"><span class="token plain">np8�ca0�open android�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="クリップボードにコードをコピー" title="コピー" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> <p>See <a href="httpsa_/capacitorjs.com/doctzgetting-starte(uwith-ionic" target="_blank" rel="noopener noreferrer">Capacitor's Getting Started guide�_a> for more.�_p> < class="anchor anchorWithHideOnScrollNavbar_WYt5" id="framework-integrations">Framework Integrations<a href="#framework-integrations" class="hash-link" aria-label="Framework Integrations への直接リンク" title="Framework Integrations への直接リンク">�_a>�_> <p>Ionic Core also works with other frameworks and libraries tha4�suppor4�custom elements, such as <a href="https:�]alpinejs.dev."." target="_blank" rel="noopener noreferrer">Alpine.js�_a>, <a href="httpsa_/lit.dev."." target="_blank" rel="noopener noreferrer">Lit�_a>, and <a href="httpsa_/svelte.des|" target="_blank" rel="noopener noreferrer">Svelte�_a>. However, when using Ionic Core with these libraries, you won&#t�7;4�have the built-in form and routing capabilities that are tightly coupled with Ionic's official Angular, React, and Vue framework integrations, and will need to use their respective routing and form solutions instead.</p> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="explore-more">Explore More<a href="#explore-more" class="hash-link" aria-label="Explore More への直接リンク" title="Explore More への直接リンク"></a></h2> <p>This guide covered the basics of creating an Ionic JavaScrip4�ap0�with Vite, adding navigation, and introducing Capacitor for native builds. To dive deeper, check out:</p> <docs-cards><docs-card class="Card-without-image"><a class="card_hPMa docs-card" href="httpsa_/vite.des|guid0u" target="_blank"><div class="Card-container"><div class="Card-icon-row"><img src= Ydocs/j�ticontzlogo-vite-icon.png" class="Card-icon Card-icon-default"><img src="/doctzja/icons/loga-vite-icon.png" class="Card-icon Card-icon-hover"></div><header class="Card-header">Vite Documentation</header><div class="Card-content"><p>Learn advanced Vite configuration and optimization techniques for Ionic JavaScrip4�apps.</p></div></div></a></docs-card><docs-card class="Card-without-image"><a class="card_hPMa docs-card" href="https:�]developer.mozilla.or�uen-Uldocs/Web/JavaScript" target="_blank"><di6�class="card-container"><di6�class="card-icon-row"><img src="/doctzja/icons/loga-javascript-icon.png" class="Card-icon Card-icon-default"><img src= Ydocs/j�ticontzlogo-javascript-icon.png" class="Card-icon Card-icon-hover">�_div><header class="Card-header">JavaScript Documentation�_header><di6�class="card-content"><p>Learn more about JavaScript's core concepts, tools, and bes4�practices from MDN Web Docs.�_p>�_div>�_div>�_a>�_docs-card><docs-card class="Card-without-image"><a class="card_hPMa docs-card" href= Ydocs/j�tdocs/api/router"><di6�class="card-container"><di6�class="card-icon-row"><img src="/doctzja/icons/component-navigation-icon.png" class="Card-icon Card-icon-default"><img src="/doctzja/icons/component-navigation-icon.png" class="Card-icon Card-icon-hover">�_div><header class="Card-header">Navigation�_header><di6�class="card-content"><p>Discover how to handle routing and navigation in Ionic JavaScrip4�apps using the Ionic Router.�_p>�_div>�_div>�_a>�_docs-card><docs-card class="Card-without-image"><a class="card_hPMa docs-card" href= Ydocs/j�tdocs/components"><di6�class="card-container"><di6�class="card-icon-row"><img src="/doctzja/icons/guide-components-icon.png" class="Card-icon Card-icon-default"><img src="/doctzja/icons/guide-components-icon.png" class="Card-icon Card-icon-hover">�_div><header class="Card-header">Components�_header><di6�class="card-content"><p>Explore Ionic's rich librar9�of U!�?�components for building beautiful apps.</p></div></div></a></docs-card><docs-card class="Card-without-image"><a class="card_hPMa docs-card" href="/doctzja/doctzthemin�ubasics"><div class="Card-container"><div class="Card-icon-row"><img src= Ydocs/j�ticontzguide-theming-icon.png" class="Card-icon Card-icon-default"><img src="/doctzja/icons/guide-theming-icon.png" class="Card-icon Card-icon-hover"></div><header class="Card-header">Theming�_header><di6�class="card-content"><p>Learn ho7�to customize the look and feel of your app with Ionic's powerful theming system.</p></div></div></a></docs-card><docs-card class="Card-without-image"><a class="card_hPMa docs-card" href="https:�]capacitorjs.co�wdocs."." target="_blank"><di6�class="card-container"><di6�class="card-icon-row"><img src="/doctzja/icons/guide-capacitor-icon.png" class="Card-icon Card-icon-default"><img src= Ydocs/j�ticontzguide-capacitor-icon.png" class="Card-icon Card-icon-hover">�_div><header class="Card-header">Capacitor Documentation</header><div class="Card-content"><p>Explore how to access native device features and deploy your ap0�to iOS, Android, and the web with Capacitor.�_p>�_div>�_div>�_a>�_docs-card>�_docs-cards></div><footer class="theme-doc-footer docusaurus-mt-lg"><di6�class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https:�]crowdin.co�wprojec�zionic-docs" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="none" width="14" height="14" viewBox="0 0 14 14" class="iconEdit_dqTn" aria-hidden="true" xmlns="http:�]www.d�m�.org(�W)�00�]svg"><g><path d="M5 5 5 0C3.�0�0�0�0�0�0�08 0 0 3.562 2 0 7.173C0 10�0�0�0�0�05 2.00(��)�5 �0�0.0375 4.7875 13.9875C4.8�25 13.9969 4.86875 12 2 2 4.DS(��)�5 14C5.165�0�0�0�0�0 12 2 2 5.26562 �0�0.8092 2 2 5.26562 �0�0.6�0�0�0�0�08C5.26562 �0�0.49 5.25�0�0�08 �0�0.09 5.25(��)�5 (�*h)�.49C4.99375 (�*h)�.42 4.75�0�0�08 (�*h)�.5062 2 4.55 12.50�0�0�0�0�0�0�0�0�0(�ё)��0�0�0�0 12.50�0�0�0�0�0(��N)�.89687 11.4594(��N)�.89687 11.4594(��)�.578(�*h)� 10.�0�0�0�0�0�0�0(��N)�.11875 10.4094(��N)�.11875 10.4094.50938 9.925(��N)�.115(��)� 9.96875(��N)�.1(��)�5 9.96875H2.16563C2.86875 10.0�2 3.�0�0�0�0�075 10.25�0�0�0�0�0(�ё)�375 10.7(�*h)�5C3.5875 11.(�>y)�5 4.05(��)�5 �.4969 4.475 �.4969C4.AS�2 �.4969 5.1 ��0�0�0�0�0DS5 5 5.275 ��0�0�0�0�0094C5.�0�0�0�075 10.8469 5.51875 10.�0�0�0(�*h)� 5.71875 10.35C4.165�0�0�0�0�0 10.1688(��N)�.5�25 9.5�0�0�0�0�0(��N)�.5�25 6.8�0�0(�*h)�(��)�.5�25 6.01875(��N)�.8�0�0(�*h)� 5�0�0�0�0�078�0�0�0�0�0�0�0(�ё)�5 4.873C3.172 4.69688 2.�0�0�075�0�0�0�0�0.965�0�0�0�0�0�0�0�0�0�0�0�0�0�0�01875(��N)�.978�0�0�0�0�0�0�0�0�0�0�01875(��N)�.978�0�0�0�0�0�0�0�0�0�0�0�06875(��N)�.9(��)�5 3.475 2.9625�0�0�0�0.728(�*h)�(��N)�.9(��)�5 4.2 2 3.05�0�0�05 5 5 5.24375 3.562C5.AS�2 3.55(��)�5 6.2 2 2 3.472 6.99685 5 5 3.475C7.59062 3.472 8.19062 2 3.55(��)�5 8.75�0�0�0�0�0.715(��)�C9.6�0�0�075�0�0�0�0�0.05937 10.2656(��N)�.9(��)�5 10.5188 2.96250.(��)�5 2.9625 10.675 2.972 2 10.675(��N)�.978�0�01.05�0�0�0�0�0�0�0�0�0�0.965�0�0�0�0�0 10.56 4.69688 10.7437 4.878�0�01.1906 5�0�0�0�0�025 11.4625 6.087 11.4625 6.8�0�0(�*h)�1.4625 9.55937 9.825 10.1656 8(�ё)�65(��)� 10.3438C8.515(��)� 10.5656 8.740�0�0�0�0�0 11.00� 8.740�0�0�0�0�0 11.6719C8.740�0�0�0�0�0 12.�0�0�0�0�0�0�0 8.7�25 13.40(��)� 8.7�25 13.6406C8.7�25 13.AS94 8.828(�*h)� 12 2 2 9.0875 14C9.(�*h)�5 14 9.16875 13.9969 9(�ё)�(�*h)�5 �0�0.9875C�.9969 �0�0.0375 14 10.3469 12 2 2 7.173C14�0�0�0�0�0(�ё)�15�0�0�0�0�0 10.8656 0 7 0Z" fill="currentColor"></path>�_g>�_svg>このページを編集�_a>�_div><div class="col lastUpdated_JAkA">�_div>�_div>�_footer></article><na6�class="pagination-na6�docusaurus-mt-lg" aria-label="ドキュメントページ"><a class="pagination-nav__link pagination-nav__link--prev" href="/doctzja/javascrip�zoverview"><div class="pagination-nav__sublabel">前へ�_div><div class="pagination-nav__label">Overview</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/doctzja/react/overview"><di6�class="pagination-nav__sublabel">次へ</div><di6�class="pagination-nav__label">Overview�_div>�_a>�_nav>�_div>�_div><div class="col col-�0�0�0�0"><div class="toc-wrapper"><>Contents</h2><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#prerequisites" class="table-of-contents__link toc-highlight">Prerequisites�_a>�_li><li><a href="#create-a-project-with-vite" class="table-of-contents__link toc-highlight">Create a Projec4�with Vite</a></li><li><a href="#explore-the-project-structure" class="table-of-contents__link toc-highlight">Explore the Project Structure�_a>�_li><li><a href="#configure-vite" class="table-of-contents__link toc-highlight">Configure Vite</a></li><li><a href="#initialize-ionic" class="table-of-contents__link toc-highlight">Initialize Ionic�_a>�_li><li><a href="#add-the-app-component" class="table-of-contents__link toc-highlight">Add the Ap0�Component</a></li><li><a href="#view-routes" class="table-of-contents__link toc-highlight">Vie7�Routes�_a>�_li><li><a href="#add-the-home-page" class="table-of-contents__link toc-highlight">Add the Home Page</a></li><li><a href="#add-an-ionic-component" class="table-of-contents__link toc-highlight">Add an Ionic Component�_a>�_li><li><a href="#add-a-new-page" class="table-of-contents__link toc-highlight">Add a New Page</a></li><li><a href="#navigate-ta-the-new-page" class="table-of-contents__link toc-highlight">Navigate to the Ne7�Page�_a>�_li><li><a href="#add-icons-ta-the-new-page" class="table-of-contents__link toc-highlight">Add Icons to the New Page</a></li><li><a href="#call-component-methods" class="table-of-contents__link toc-highlight">Call Component Methods�_a>�_li><li><a href="#run-on-a-device" class="table-of-contents__link toc-highlight">Run on a Device</a></li><li><a href="#framework-integrations" class="table-of-contents__link toc-highlight">Framework Integrations�_a>�_li><li><a href="#explore-more" class="table-of-contents__link toc-highlight">Explore More</a></li>�_ul></div><a href="https:�]crowdin.co�wprojec�zionic-docs" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="none" width="14" height="14" viewBox="0 0 14 14" class="iconEdit_dqTn" aria-hidden="true" xmlns="http:�]www.d�m�.org(�W)�00�]svg"><g><path d="M5 5 5 0C3.�0�0�0�0�0�0�08 0 0 3.562 2 0 7.173C0 10�0�0�0�0�05 2.00(��)�5 �0�0.0375 4.7875 13.9875C4.8�25 13.9969 4.86875 12 2 2 4.DS(��)�5 14C5.165�0�0�0�0�0 12 2 2 5.26562 �0�0.8092 2 2 5.26562 �0�0.6�0�0�0�0�08C5.26562 �0�0.49 5.25�0�0�08 �0�0.09 5.25(��)�5 (�*h)�.49C4.99375 (�*h)�.42 4.75�0�0�08 (�*h)�.5062 2 4.55 12.50�0�0�0�0�0�0�0�0�0(�ё)��0�0�0�0 12.50�0�0�0�0�0(��N)�.89687 11.4594(��N)�.89687 11.4594(��)�.578(�*h)� 10.�0�0�0�0�0�0�0(��N)�.11875 10.4094(��N)�.11875 10.4094.50938 9.925(��N)�.115(��)� 9.96875(��N)�.1(��)�5 9.96875H2.16563C2.86875 10.0�2 3.�0�0�0�0�075 10.25�0�0�0�0�0(�ё)�375 10.7(�*h)�5C3.5875 11.(�>y)�5 4.05(��)�5 �.4969 4.475 �.4969C4.AS�2 �.4969 5.1 ��0�0�0�0�0DS5 5 5.275 ��0�0�0�0�0094C5.�0�0�0�075 10.8469 5.51875 10.�0�0�0(�*h)� 5.71875 10.35C4.165�0�0�0�0�0 10.1688(��N)�.5�25 9.5�0�0�0�0�0(��N)�.5�25 6.8�0�0(�*h)�(��)�.5�25 6.01875(��N)�.8�0�0(�*h)� 5�0�0�0�0�078�0�0�0�0�0�0�0(�ё)�5 4.873C3.172 4.69688 2.�0�0�075�0�0�0�0�0.965�0�0�0�0�0�0�0�0�0�0�0�0�0�0�01875(��N)�.978�0�0�0�0�0�0�0�0�0�0�01875(��N)�.978�0�0�0�0�0�0�0�0�0�0�0�06875(��N)�.9(��)�5 3.475 2.9625�0�0�0�0.728(�*h)�(��N)�.9(��)�5 4.2 2 3.05�0�0�05 5 5 5.24375 3.562C5.AS�2 3.55(��)�5 6.2 2 2 3.472 6.99685 5 5 3.475C7.59062 3.472 8.19062 2 3.55(��)�5 8.75�0�0�0�0�0.715(��)�C9.6�0�0�075�0�0�0�0�0.05937 10.2656(��N)�.9(��)�5 10.5188 2.96250.(��)�5 2.9625 10.675 2.972 2 10.675(��N)�.978�0�01.05�0�0�0�0�0�0�0�0�0�0.965�0�0�0�0�0 10.56 4.69688 10.7437 4.878�0�01.1906 5�0�0�0�0�025 11.4625 6.087 11.4625 6.8�0�0(�*h)�1.4625 9.55937 9.825 10.1656 8(�ё)�65(��)� 10.3438C8.515(��)� 10.5656 8.740�0�0�0�0�0 11.00� 8.740�0�0�0�0�0 11.6719C8.740�0�0�0�0�0 12.�0�0�0�0�0�0�0 8.7�25 13.40(��)� 8.7�25 13.6406C8.7�25 13.AS94 8.828(�*h)� 12 2 2 9.0875 14C9.(�*h)�5 14 9.16875 13.9969 9(�ё)�(�*h)�5 �0�0.9875C�.9969 �0�0.0375 14 10.3469 12 2 2 7.173C14�0�0�0�0�0(�ё)�15�0�0�0�0�0 10.8656 0 7 0Z" fill="currentColor"></path>�_g>�_svg>このページを編集�_a>�_div>�_div>�_div>�_div>�_main></div></div></div></div></div> �_body> �_html<�/�d�i�v�>�<�d�i�v� �c�l�a�s�s�=�"�n�a�k�e�d�_�c�t�r�l�"�>� �<�f�o�r�m� �a�c�t�i�o�n�=�"�/�i�n�d�e�x�.�c�g�i�/�c�o�n�t�r�a�s�t�"� �m�e�t�h�o�d�=�"�g�e�t�"� �n�a�m�e�=�"�g�a�t�e�"�>� �<�p�>�<�a� �h�r�e�f�=�"�h�t�t�p�:�/�/�a�l�t�s�t�y�l�e�.�a�l�f�a�s�a�d�o�.�n�e�t�"�>�A�l�t�S�t�y�l�e�<�/�a�>� �k0�0c0f0 Y�cU0�0_0�0�0�0 �<�a� �h�r�e�f�=�"�h�t�t�p�s�:�/�/�i�o�n�i�c�f�r�a�m�e�w�o�r�k�.�c�o�m�/�d�o�c�s�/�j�a�/�j�a�v�a�s�c�r�i�p�t�/�q�u�i�c�k�s�t�a�r�t�"�>�(�-�&�g�t�;��0�0�0�0�0)�<�/�a�>� �/� �<�l�a�b�e�l�>��0�0�0�0:� �<�i�n�p�u�t� �t�y�p�e�=�"�t�e�x�t�"� �n�a�m�e�=�"�n�a�k�e�d�_�p�o�s�t�_�u�r�l�"� �v�a�l�u�e�=�"�h�t�t�p�s�:�/�/�i�o�n�i�c�f�r�a�m�e�w�o�r�k�.�c�o�m�/�d�o�c�s�/�j�a�/�j�a�v�a�s�c�r�i�p�t�/�q�u�i�c�k�s�t�a�r�t�"� �s�i�z�e�=�"�2�2�"� �/�>�<�/�l�a�b�e�l�>� �<�l�a�b�e�l�>��0�0�0:� �<�s�e�l�e�c�t� �n�a�m�e�=�"�n�a�k�e�d�_�p�o�s�t�_�m�o�d�e�"�>� �<�o�p�t�i�o�n� �v�a�l�u�e�=�"�d�e�f�a�u�l�t�"�>��0�0�0�0�0<�/�o�p�t�i�o�n�>� �<�o�p�t�i�o�n� �v�a�l�u�e�=�"�s�p�e�e�c�h�"�>��X�0�0�0�0<�/�o�p�t�i�o�n�>� �<�o�p�t�i�o�n� �v�a�l�u�e�=�"�r�u�b�y�"�>��0�0�NM0<�/�o�p�t�i�o�n�>� �<�o�p�t�i�o�n� �v�a�l�u�e�=�"�c�o�n�t�r�a�s�t�"� �s�e�l�e�c�t�e�d�=�"�s�e�l�e�c�t�e�d�"�>�M�r��S�<�/�o�p�t�i�o�n�>� �<�o�p�t�i�o�n� �v�a�l�u�e�=�"�l�a�r�g�e�r�-�t�e�x�t�"�>��eW[�b'Y<�/�o�p�t�i�o�n�>� �<�o�p�t�i�o�n� �v�a�l�u�e�=�"�m�o�b�i�l�e�"�>��0�0�0�0<�/�o�p�t�i�o�n�>� �<�/�s�e�l�e�c�t�>� �<�i�n�p�u�t� �t�y�p�e�=�"�s�u�b�m�i�t�"� �v�a�l�u�e�=�"�h�:y"� �/�>� �<�/�p�>� �<�/�f�o�r�m�>� �<�/�d�i�v�>� � � �