[{"data":1,"prerenderedAt":317},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$f1oubegi2sbi5y":263},{"featured":4,"latest":129,"categories":227},[5,14,27,37,48,56,66,76,86,96,106,114,122],{"slug":6,"title":7,"date":8,"excerpt":9,"image":10,"categories":11},"custom-database-tables","Custom DataBase Tables","2015-11-24T02:29:34","You can create the new own table freely in the your WordPress database via this plugin. Then, you can make the management of table or (as view or entry or edit) data in a simple user interface.\\nAlso,","\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fcdbt-overview.png",[12],{"slug":13,"name":7},"cdbt",{"slug":15,"title":16,"date":17,"excerpt":18,"image":19,"categories":20},"10_php_tips_for_developers","PHP開発者が心得ておくべき10の鉄則","2016-01-11T18:38:09","PHPだけに限った話ではないが、プログラミングを行うに当たって、心得て、準備しておくと失敗が劇的に減る事柄をまとめてある良い記事を見つけたので、私なりの解釈で意訳しつつ、経験則を踏まえてあらためてまとめてみた。 オリジナ…","\u002Fassets\u002Fuploads\u002F2016\u002F01\u002Feyecatch-php-10-tips.jpg",[21,24],{"slug":22,"name":23},"column","コラム",{"slug":25,"name":26},"development","開発関連",{"slug":28,"title":29,"date":30,"excerpt":31,"image":32,"categories":33},"jquery-timeline-v1","2種類の横型タイムラインを簡単に作成できる「jQuery.Timeline」をリリース","2017-05-29T14:55:46","現在開発しているサービスで利用するべく、横型タイムラインを生成できるjQueryプラグインを自作したので、そこだけ単独でリリースしてみた。 ソースコード等はGitHubの方にリリースしてあるので、興味のある方は、そち…","\u002Fassets\u002Fuploads\u002F2017\u002F05\u002Fjquery_timeline_image.png",[34],{"slug":35,"name":36},"jqtl","jQuery.Timeline",{"slug":38,"title":39,"date":40,"excerpt":41,"image":42,"categories":43},"optimize-browser-cache-of-static-resources","更新されたJS、CSS、画像のみブラウザキャッシュを破棄して読み込ませる","2018-01-31T15:47:47","WEBサービスの保守や開発をやっていると、JavaScriptやスタイルシート、画像などの静的リソースを更新した際、しばしば「確認したけど、更新されてないよ」とか云われて、「ブラウザのキャッシュを消してからもう一度見て…",null,[44,47],{"slug":45,"name":46},"codes","コード集",{"slug":25,"name":26},{"slug":49,"title":50,"date":51,"excerpt":52,"image":53,"categories":54},"jquery-timeline","jQuery.Timeline version2 – full documentation","2019-03-04T20:40:48","Plugin Overview The jQuery.Timeline plugin provides you two types of the horizontal timeline. You can create a…","\u002Fassets\u002Fuploads\u002F2019\u002F03\u002Fjquery.timeline_v2.jpg",[55],{"slug":35,"name":36},{"slug":57,"title":58,"date":59,"excerpt":60,"image":61,"categories":62},"released-the-sloth","Released the Sloth of mobile-first CSS micro framework!","2019-04-16T18:04:25","I released the “Sloth” that is mobile-first CSS micro framework. I have long used frontend framewo…","\u002Fassets\u002Fuploads\u002F2019\u002F04\u002Fsloth_doc_head.png",[63],{"slug":64,"name":65},"sloth","Sloth",{"slug":67,"title":68,"date":69,"excerpt":70,"image":71,"categories":72},"challenge-to-conceal-the-wordpress-site","WordPressサイトを徹底的に秘匿化する","2020-02-02T23:59:58","私は自分の個人サイトをはじめ、仕事でもWordPressサイトを運用している。WordPressは気軽にサイトを立ち上げられてカスタマイズも簡単な、素晴らしいオープンソースなのだが、世界中で使われまくっているその知名度…","\u002Fassets\u002Fuploads\u002F2020\u002F02\u002Fshutterstock_1878005929.jpg",[73],{"slug":74,"name":75},"wordpress","WordPress関連",{"slug":77,"title":78,"date":79,"excerpt":80,"image":81,"categories":82},"what-is-forkor","Made a shortened URL app called Forkor","2020-07-07T22:27:01","What’s Forkor? Forkor is a service that provides a shortened URL feature that allows you to redirect any…","\u002Fassets\u002Fuploads\u002F2020\u002F07\u002Fforkor.png",[83],{"slug":84,"name":85},"forkor","Forkor",{"slug":87,"title":88,"date":89,"excerpt":90,"image":91,"categories":92},"manual-about-svg-japan","インタラクティブな日本地図を生成するJSプラグイン「SVG Japan」","2020-11-16T21:19:58","各都道府県をそれぞれ選択・クリック可能なインタラクティブな日本地図を生成するネイティブJavaScript建てのプラグイン「SVG Japan」を作ったので、その紹介と使い方をまとめておく。ちなみにソースコードはgit…","\u002Fassets\u002Fuploads\u002F2020\u002F11\u002Fsvg-japan.png",[93],{"slug":94,"name":95},"svg-japan","SVG Japan",{"slug":97,"title":98,"date":99,"excerpt":100,"image":101,"categories":102},"wp-ignitor-plugin-to-conceal-wordpress-site","WordPressサイトを秘匿化するプラグイン「WP Ignitor」","2021-01-19T15:28:21","以前「WordPressサイトを徹底的に秘匿化する」という記事で、WordPress建てのサイトを秘匿化する方法を取り上げたのだが、あれをサイト構築時に毎度実施するとなるととても労力が必要であった。そこで、もっとお手軽…","\u002Fassets\u002Fuploads\u002F2021\u002F01\u002Fbanner-1554x500-1.png",[103],{"slug":104,"name":105},"wp-ignitor","WPイグナイタ",{"slug":107,"title":108,"date":109,"excerpt":110,"image":111,"categories":112},"tastewp","無料でWordPressサイトを複数作成できるWEBサービス「TasteWP」","2021-03-25T20:21:59","私が日本語翻訳に協力しているWEBサービス「TasteWP」について紹介しようと思う。 https:\u002F\u002Ftastewp.com このサービス、サインアップすることなく無料で自分用のWordPressサイトを作れるとい…","\u002Fassets\u002Fuploads\u002F2021\u002F03\u002FTasteWP_screenshot.png",[113],{"slug":74,"name":75},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":120},"monster-hunter-rise-skill-simulator","モンハンライズのスキルシミュレータを作ってみた！","2021-06-28T20:24:52","コラムで連載していたNintendo Switch版『モンスターハンターライズ』のスキルシミュレータ開発がやっと一段落して一通り完了した。いやぁ、記事書きながら同時並行で開発すると思っていた以上に時間がかかるもんだなぁ…","\u002Fassets\u002Fuploads\u002F2021\u002F06\u002Fmhrss_v100.png",[121],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":127},"comparison-of-javascript-date-libraries","JavaScriptの日時ライブラリを比較してみた","2021-07-28T22:39:19","ネイティブJavaScriptで日時を取り扱う場合、ビルトインされているDateオブジェクトを使うことになるのだが、このDateオブジェクトは取り扱いにクセが多く、直感的に日時を操作できない点でも有名である。そこで、専…",[128],{"slug":25,"name":26},[130,141,153,165,175,184,192,195,198,206,213,220],{"slug":131,"title":132,"date":133,"excerpt":134,"image":135,"categories":136},"pulllog_launched","ガチャ履歴を記録・分析できるWebサービス「PullLog」","2025-08-22T13:05:30","このたび、新しい個人開発サービスとして 「PullLog（プルログ）」 をリリースした。 URLはこちら https:\u002F\u002Fpulllog.net PullLogとは？ PullLogは、ソーシャルゲームのガチャ履歴を記録…","\u002Fassets\u002Fuploads\u002F2025\u002F08\u002Fpulllog_stats_jp.png",[137,140],{"slug":138,"name":139},"industries","プロダクト",{"slug":25,"name":26},{"slug":142,"title":143,"date":144,"excerpt":145,"image":146,"categories":147},"mockapi-php-openapi-schema-generation","モックAPIのレスポンスから OpenAPI 3.0 スキーマを自動生成するPHPツール","2025-04-17T09:31:52","私自身がそうなのですが、OpenAPI仕様書を毎回手作業で書いていて「面倒だな」と思ったことはありませんか？ そんな（私と）あなたにぴったりのツールがあります。 レスポンスの例さえ用意すれば、OpenAPI 3.0 スキ…","\u002Fassets\u002Fuploads\u002F2025\u002F04\u002Fswaggerui-preview.png",[148,151,152],{"slug":149,"name":150},"mockapi-php","MockAPI-PHP",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":154,"title":155,"date":156,"excerpt":157,"image":158,"categories":159},"ambient_playlist_customize","Ambientでメメントモリのラメントプレイヤーを作る","2023-11-30T17:32:39","「Ambient」の最新バージョン 1.2.0で実装した「疑似フェーダー」機能を使って、ソーシャルゲーム「メメントモリ」のYouTube公式チャンネルで公開されているMVを集約したラメント専用プレイヤーを作ってみた。 ラ…","\u002Fassets\u002Fuploads\u002F2023\u002F11\u002Fambient_mememori_1.png",[160,163,164],{"slug":161,"name":162},"ambient","Ambient",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":166,"title":167,"date":168,"excerpt":169,"image":170,"categories":171},"released_ambient_demo_version","Ambientメディアプレイヤーのクラウド版デモを公開","2023-11-22T13:47:36","つい先日「Ambient」の最新バージョン 1.1.0をリリースして、それに合わせてクラウド版デモサイトも公開してみた。 なお、クラウド版デモでローカルのホストコンピュータのメディアを再生するには、そのメディアファイルも…","\u002Fassets\u002Fuploads\u002F2023\u002F10\u002FAmbientMediaPlayer-typologo.png",[172,173,174],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":176,"title":177,"date":178,"excerpt":179,"image":170,"categories":180},"ambient-media-player","YouTubeと自分のPC内メディアを同時に再生できるメディアプレイヤーを作ってみた","2023-10-20T00:00:25","私はよくPCで何か作業をするときには音楽を垂れ流していることが多い。 そういう時にかける曲は、手持ちのアルバムCD等からPCに取り込んだ音源だったり、さらにはYouTubeの動画だったりとメディアや再生環境がバラバラだ。…",[181,182,183],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":185,"title":186,"date":187,"excerpt":188,"image":189,"categories":190},"what-is-the-sunorhc","Sunorhc is a date-time library for JavaScript","2021-08-25T22:55:55","Sunorhc is a lightweight library for handling dates and times for JavaScript. The library wraps a native JavaS…","\u002Fassets\u002Fuploads\u002F2021\u002F08\u002Fshutterstock_1091212919_resized.jpg",[191],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":193},[194],{"slug":25,"name":26},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":196},[197],{"slug":25,"name":26},{"slug":199,"title":200,"date":201,"excerpt":202,"image":203,"categories":204},"mhrise-skill-simulator-creation-chapter-12","モンスターハンターライズのスキルシミュレータを作ってみる！ 第12回","2021-06-21T13:11:46","今回は「マイセット登録」と護石データの「エクスポート／インポート」機能の追加をしていく。折り良く（悪く？）「FF7リメイク・インターグレード」や「FORTNITEシーズン7」が出たこともあって、そっちをプレイしてたらこ…","\u002Fassets\u002Fuploads\u002F2021\u002F04\u002Fb6ca09e9a7f6faf27641f62dabe64c6ff97b4f326aa478379e3c112aa28eb9ab.jpg",[205],{"slug":22,"name":23},{"slug":207,"title":208,"date":209,"excerpt":210,"image":203,"categories":211},"mhrise-skill-simulator-creation-chapter-11","モンスターハンターライズのスキルシミュレータを作ってみる！ 第11回","2021-06-07T14:52:31","さて、今回はユーザー個別データの管理部分を開発していく予定だが、まずその前にやっておくことがある。 新スキル「風雷合一」に対応する Ver.3.0の大型無料アップデートで追加された新スキルに「風雷合一」というのがある…",[212],{"slug":22,"name":23},{"slug":214,"title":215,"date":216,"excerpt":217,"image":203,"categories":218},"mhrise-skill-simulator-creation-chapter-10","モンスターハンターライズのスキルシミュレータを作ってみる！ 第10回","2021-06-02T00:29:10","今回は、護石管理画面の作成だ。この護石管理では、ユーザーごとに護石の登録を行う機能と、登録した護石を削除する機能を持つ仕様になる。この画面から登録した護石データはデータベースに格納するので、フロントエンド側からのリクエス…",[219],{"slug":22,"name":23},{"slug":221,"title":222,"date":223,"excerpt":224,"image":203,"categories":225},"mhrise-skill-simulator-creation-chapter-9","モンスターハンターライズのスキルシミュレータを作ってみる！ 第9回","2021-05-22T23:56:27","さて、今回はVuexによるデータ・キャッシュの実装だ。一度データベースから読み込んだデータをフロントエンド側で再利用可能なストアに格納することで、データベースへの接続回数を減らしてシステム負荷を下げるとともに、UX的な…",[226],{"slug":22,"name":23},[228,230,232,236,238,239,240,241,242,244,247,248,250,252,254,258,261],{"slug":161,"name":162,"count":229},3,{"slug":13,"name":7,"count":231},7,{"slug":233,"name":234,"count":235},"csnp","Custom Sticky Notes",2,{"slug":84,"name":85,"count":237},1,{"slug":35,"name":36,"count":229},{"slug":149,"name":150,"count":237},{"slug":64,"name":65,"count":237},{"slug":94,"name":95,"count":237},{"slug":74,"name":75,"count":243},37,{"slug":245,"name":246,"count":237},"wpqt","WP Qiita",{"slug":104,"name":105,"count":237},{"slug":22,"name":23,"count":249},29,{"slug":45,"name":46,"count":251},16,{"slug":138,"name":139,"count":253},5,{"slug":255,"name":256,"count":257},"lifelog","ライフログ",64,{"slug":259,"name":260,"count":235},"uncategorized","未分類",{"slug":25,"name":26,"count":262},45,{"type":264,"post":265},"post",{"slug":266,"title":267,"date":268,"excerpt":269,"image":203,"categories":270,"modified":272,"html":273,"tags":274,"related":290,"prev":303,"next":310},"mhrise-skill-simulator-creation-chapter-6","モンスターハンターライズのスキルシミュレータを作ってみる！ 第6回","2021-04-26T14:07:55","今回からはフロントエンド側のUIをモックアップとして作成して行く。今回のアプリケーションのフロントはVue.js＋Vuetifyで作ることになり、仕様的にはデータベースへの問い合わせを行う部分以外はほぼJavaScri…",[271],{"slug":22,"name":23},"2021-05-12T15:20:51","\u003Cp>　今回からはフロントエンド側のUIをモックアップとして作成して行く。今回のアプリケーションのフロントはVue.js＋Vuetifyで作ることになり、仕様的にはデータベースへの問い合わせを行う部分以外はほぼJavaScriptで開発することになる。\u003Cbr \u002F>\n　今時の応答性の高いWEBアプリはReactやVue、（ちょいと落ち目な）Angular、（これから大旋風を巻き起こしそうな）GatsbyなどのJSフレームワークで作られることがマストな感じになって来ているので、WEB系エンジニアであれば、どれか一つは使えるようにしておかないと、業界内で市場価値が得られないかもしれない。\u003Cbr \u002F>\n　世界的にはまだReact一強時代が続いているようだが、個人的にReact使ってみて肌に合わなかったので、今は専らVueばっかり使っている。まぁ、コンセプト的にどちらも似たようなストラクチャーなので、どちらかでも使えるようにしておけば、当分WEB業界で食いっぱぐれることはなさそうだw\u003Cbr \u002F>\n　──と、話が逸れたが、では早速Vue.jsでフロントエンドを制作して行こう。\u003C\u002Fp>\n\u003Ch2>Vuetifyのインストール\u003C\u002Fh2>\n\u003Cp>　第4回の時にVue.jsで今回のアプリケーションのプロジェクトを作成したが、これだけだとリッチなUIコンポーネントを自作しなければならない。そこで、Vue.js用のUIフレームワークであるVuetifyを使うことにする。Vuetifyにあらかじめ用意された豊富なコンポーネント群を組み合わせていくことで、コンポーネント自体の製造にかかる時間的・労力的なコストを削減して生産性の向上を図るのである。\u003Cbr \u002F>\n　フロントエンドのUI\u002FUXの開発においては開発手法の選択が最も重要だ。奇抜なデザイン性に重きを置くようなアプリケーションならば、デザイナーや開発者が自由にコンポーネントを作成できる方が良いだろう。その場合は、\u003Ca href=\"https:\u002F\u002Ftailwindcss.com\u002F\">Tailwind CSS\u003C\u002Fa>などのように最小限度の機能性を持ったユーティリティ・ファーストなフレームワークを採択すべきだろう。一方で、今回のような特異なデザイン性は不要なアプリケーションでは、極力「使い易さ」を重視したユニバーサルデザイン的な方向性が望ましい。そういう点で、WEBページで使い慣れている＆使い易いUIを簡単に実装できるCSSフレームワーク（今回採用したVuetifyや、古くはBootstrap等）が有効なのだ。\u003Cbr \u002F>\n　前置きはここまでにして、では早速Vuetifyをインストールしていこう。\u003C\u002Fp>\n\u003Cp>　まず、今までのプロジェクトディレクトリの開発内容をGitHubに登録する。コマンドラインから、第4回で作成したプロジェクトディレクトリー直下に移動して、\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">git\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> remote\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> add\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> origin\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> https:\u002F\u002Fgithub.com\u002Fka215\u002Fmhr-skill-simulator.git\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">git\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> branch\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> -M\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> main\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">git\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> push\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> -u\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> origin\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> main\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　なお、事前にGitHub側にリポジトリだけは作っておく必要がある。これで、イニシャル・コミットは完了だが、前回までの開発内容が反映されていないので、改めてコミットを作成する。\u003Cbr \u002F>\n──と、その前に、データベースのDSN情報を格納している\u003Ccode>database.json\u003C\u002Fcode>をコミットから外すべく、\u003Ccode>.gitignore\u003C\u002Fcode>へ下記のように追記しておく。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">database.json\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　そして、コミットしてプッシュする。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">git\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> add\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> .\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">git\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> commit\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> -m\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> \"first commit\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">git\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> push\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> origin\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> main\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　これでOKだ。\u003Cbr \u002F>\n　この時点の、私の\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fka215\u002Fmhr-skill-simulator\u002Ftree\u002Ffirst-commit\">GitHubリポジトリのコミット内容はこちら\u003C\u002Fa>で確認できる。\u003C\u002Fp>\n\u003Cp>　では、いよいよVuetifyをインストールする。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">vue\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> add\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> vuetify\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">?\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> Choose a preset: Default (\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">recommended\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　インストール中に、プリセットの種別を訊かれるので、「Default (recommended)」を選択しておくこと（「V3」に後ろ髪を引かれるが……）。これで、Vuetifyのインストールは完了だ。動作確認のため、ウォッチ・ビルドしてみよう。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> serve\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　コンパイルが完了したら、ブラウザで\u003Ccode>localhost:8080\u003C\u002Fcode>にアクセスして、Vuetifyのページが表示されればOKだ。\u003C\u002Fp>\n\u003Ch2>ルートコンポーネントの作成\u003C\u002Fh2>\n\u003Cp>　Vue.jsによってビルドされるHTMLページの大枠のテンプレートは、開発用ビルド（\u003Ccode>yarn serve\u003C\u002Fcode>の実行）時は\u003Ccode>public\u002Findex.html\u003C\u002Fcode>で、公開用ビルド（\u003Ccode>yarn build\u003C\u002Fcode>の実行）後は\u003Ccode>dist\u002Findex.html\u003C\u002Fcode>となる。それぞれのindex.html内の\u003Ccode><div id=\"app\"><\u002Fdiv>\u003C\u002Fcode>に実際のコンポーネントが挿入される建付けだ（セレクタは任意に変更可能）。\u003Cbr \u002F>\n　そして、挿入されるコンポーネント群の親となるのがルートコンポーネントであり、そのファイルは\u003Ccode>src\u002FApp.vue\u003C\u002Fcode>である。ここには、アプリケーションの骨格となる基礎的なレイアウト要素を追加するのが一般的だ。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-app\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-navigation-drawer\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      v-model\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"drawer\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      absolute\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      temporary\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">        nav\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">        dense\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">        class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"mt-16\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-group\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          v-model\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"group\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FDAEB7;font-style:italic\">          :active-class=\"`${darkTheme\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\"> ?\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'cyan--text text--darken-1'\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\">:\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'cyan--text text--accent-4'\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\">}`\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-title\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>Menu Item 1<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-title\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-title\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>Menu Item 2<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-title\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-title\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>Menu Item 3<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-title\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-group\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-navigation-drawer\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-app-bar\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      app\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-app-bar-nav-icon\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\"> @click.stop=\"drawer\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\"> !drawer\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-toolbar-title\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>{{ labels.title }}<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-toolbar-title\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-spacer\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"d-flex my-a\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-switch\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          v-model\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"darkTheme\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          color\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"amber accent-4\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"align-center\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          dense\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          hide-details\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> v-slot\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">label\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-icon\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FDAEB7;font-style:italic\">              :color=\"`${darkTheme\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\"> ?\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'amber'\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\">:\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'red'\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\">}\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\"> accent-2`\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            >mdi-theme-light-dark<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-icon\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-switch\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-app-bar\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-main\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-container\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">        fluid\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-card\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FDAEB7;font-style:italic\">          :loading=\"loading\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          outlined\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          tile\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          min-height\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"calc(100vh - 64px - 150px)\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"d-flex justify-center align-stretch\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">div\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">            class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"align-self-center\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          >Main Content Area<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-card\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-container\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-main\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-footer\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      app\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      padless\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"transparent\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-card\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">        flat\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">        tile\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">        width\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"100%\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">        class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"transparent text-center\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-card-text\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-btn\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">            v-for\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"item in icons\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FDAEB7;font-style:italic\">            :key=\"item.icon\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">            class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"mx-4 font-weight-light\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FDAEB7;font-style:italic\">            :href=\"item.href\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">            text\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">            small\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-icon\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">              size\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"20px\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">              class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"mr-1 grey--text\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            >mdi-{{ item.icon }}<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-icon\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            <\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">span\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FDAEB7;font-style:italic\">              :class=\"['grey--text',\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'text--lighten-2'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: darkTheme}\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\">,\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'text--darken-2'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">darkTheme}\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\">]\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            >{{ item.label }}<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">span\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-btn\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-card-text\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-divider\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-card-text\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"grey--text text--darken-1\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          {{ labels.version }} \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">—\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {{ new \u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">Date\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">().\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">getFullYear\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() }} \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">©\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> <\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">strong\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>{{ labels.copyright }}<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">strong\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">> {{ labels.poweredby }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-card-text\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-card\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-footer\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-app\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">export default {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  name: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'App'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  components: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    \u002F\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  data: () \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    drawer: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    group: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">null\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    darkTheme: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    labels: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      title: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'MHRise: Skill Simulator'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      version: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Ver.0.1.0'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      copyright: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Monaural Sound ka2.org,'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      poweredby: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Powered by MAGIC METHODS'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    icons: [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      { icon: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'home'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, href: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">''\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Home'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      { icon: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'email'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, href: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">''\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Contact'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      { icon: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'alert-circle-outline'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, href: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">''\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Issues'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    loading: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  watch: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">    group\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> () {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">      this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.drawer \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> false\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">      this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.loading \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> true\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">    darkTheme\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">value\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">      this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.$vuetify.theme.isDark \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> value\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  created\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    this.darkTheme \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.$vuetify.theme.isDark\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　アプリケーションのワイヤーフレームとして、\u003Ccode>App.vue\u003C\u002Fcode>を上記のようにコーディングしてみる。各Vueコンポーネントの説明は省くので、詳しく知りたい場合は\u003Ca href=\"https:\u002F\u002Fv2.vuetifyjs.com\u002F\">公式サイト\u003C\u002Fa>を参照して欲しい。\u003Cbr \u002F>\n　この\u003Ccode>App.vue\u003C\u002Fcode>をビルドすると、下記のように表示される。\u003C\u002Fp>\n\u003Cp>\u003Ciframe loading=\"lazy\" src=\"https:\u002F\u002Fka2.org\u002Fmhr\u002Fv0.1.0\u002F\" width=\"auto\" height=\"320px\" frameBorder=\"0\" marginHeight=\"0\" marginWidth=\"0\" data-cite=\"MHRSS v0.1.0\" class=\"embed-expand-size\">\u003C\u002Fiframe>\u003C\u002Fp>\n\u003Cp>　Vuetifyを使うと、結構リッチなUIを持つアプリケーションが簡単に作れるようになるのだ。\u003C\u002Fp>\n\u003Ch2>コンポーネントを分割する\u003C\u002Fh2>\n\u003Cp>　前項で作った\u003Ccode>App.vue\u003C\u002Fcode>はちょっとワイヤーフレームとしてはリッチ過ぎるので、いくつかのコンポーネントは別ファイルに切り出しておくことで、各コンポーネントの保守性が高まる。\u003Cbr \u002F>\n　例えば、引き出されるサイドメニューや、フッターなどを個別のコンポーネントファイルにしておくことで、今後メニューが追加されたり、フッターにリンクを追加する際に、基本的に対象となる個別のコンポーネントファイルだけを修正することで事足りるようになる。リソース全体としての機能の見通しが良くなるのだ。\u003Cbr \u002F>\n　コンポーネントごとの再利用性を考えると、ボタンやリストといった極小コンポーネント別に切り出しておくのも有効だが、やり過ぎるとファイルが増えすぎて逆に保守性が失われるので、ある程度グループ化されたコンポーネントごとに個別ファイル化していくのが良いだろう。\u003C\u002Fp>\n\u003Cp>　さて、今回は\u003Ccode>App.vue\u003C\u002Fcode>からサイドメニューとメインコンテンツ、フッターの3つを別ファイルとして切り出してみる。\u003Cbr \u002F>\n　まずはサイドメニュー用のコンポーネントファイル\u003Ccode>SideMenu.vue\u003C\u002Fcode>を\u003Ccode>components\u003C\u002Fcode>フォルダの中に作り、下記のようにマークアップする。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">    nav\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">    dense\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">    class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"mt-16\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-subheader\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>{{ labels.subheader }}<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-subheader\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-group\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      v-model\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"group\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      active-class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"cyan--text text--accent-4\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">        v-for\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"(item, i) in items\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FDAEB7;font-style:italic\">        :key=\"i\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-icon\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-icon\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">            v-text\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"`mdi-${item.icon}`\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">            dense\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          ><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-icon\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-icon\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-content\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-title\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> v-text\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"item.label\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-content\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list-item-group\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-list\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">export default {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  name: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'SideMenu'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  data: () \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    group: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">null\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    labels: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      subheader: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'機能メニュー'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    items: [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      { slug: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'main'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,        icon: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'alpha-m-circle-outline'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'メイン'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      { slug: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'weapons'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,     icon: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'alpha-w-circle-outline'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'武器'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      { slug: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'armors'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,      icon: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'alpha-a-circle-outline'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'防具'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      { slug: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'decorations'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, icon: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'alpha-d-circle-outline'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'装飾品'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      { slug: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'talismans'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,   icon: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'alpha-t-circle-outline'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'護石'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      { slug: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'skills'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,      icon: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'alpha-s-circle-outline'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'スキル'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  watch: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">    group\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> () {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">      this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.$root.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">$emit\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'update:drawer'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　メニュー内に表示されるナビゲーションリンクを配列化することで、追加や削除が容易にできるようにした。\u003Cbr \u002F>\n　また、リンクをクリックした際に、サイドメニュー自体を閉じるイベントは、コンポーネントを切り出したことで、子コンポーネント\u003Ccode>SideMenu.vue\u003C\u002Fcode>の\u003Ccode><v-list>\u003C\u002Fcode>要素から、親コンポーネント\u003Ccode>App.vue\u003C\u002Fcode>の\u003Ccode><v-navigation-drawer>\u003C\u002Fcode>要素にイベントを受け渡してあげる必要が発生している。こういう子から親へのイベント伝播については、\u003Ccode>$emit()\u003C\u002Fcode>メソッドを使えば良い。まず、子コンポーネント側でメニューの選択状態を管理している\u003Ccode>group\u003C\u002Fcode>という変数を\u003Ccode>watch\u003C\u002Fcode>で監視して、値が変更される都度、\u003Ccode>$emit()\u003C\u002Fcode>で\u003Ccode>update:drawer\u003C\u002Fcode>で定義されたイベントハンドラを呼び出す建付けだ。\u003C\u002Fp>\n\u003Cp>　同じようにメインコンテンツとフッターも子コンポーネントとして切り出し、最後に\u003Ccode>App.vue\u003C\u002Fcode>側でそれぞれのコンポーネントをインポートするようにすれば完了だ。最終的な\u003Ccode>App.vue\u003C\u002Fcode>は次のようになっている。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-app\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-navigation-drawer\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      v-model\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"drawer\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      absolute\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      temporary\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">SideMenu\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-navigation-drawer\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-app-bar\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      app\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-app-bar-nav-icon\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\"> @click.stop=\"drawer\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\"> !drawer\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-toolbar-title\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>{{ labels.title }}<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-toolbar-title\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-spacer\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"d-flex my-a\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-switch\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          v-model\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"darkTheme\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          color\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"amber accent-4\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"align-center\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          dense\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          hide-details\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> v-slot\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">label\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-icon\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FDAEB7;font-style:italic\">              :color=\"`${darkTheme\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\"> ?\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'amber'\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\">:\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'red'\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\">}\u003C\u002Fspan>\u003Cspan style=\"color:#FDAEB7;font-style:italic\"> accent-2`\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            >mdi-theme-light-dark<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-icon\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-switch\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-app-bar\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-main\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-container\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">        fluid\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">MainView\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-container\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-main\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-footer\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      app\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      padless\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"transparent\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">Footer\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-footer\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-app\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">import SideMenu from '.\u002Fcomponents\u002FSideMenu'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">import MainView from '.\u002Fcomponents\u002FMainView'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">import Footer   from '.\u002Fcomponents\u002FFooter'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">export default {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  name: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'App'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  components: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    SideMenu,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    MainView,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    Footer,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  data: () \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    drawer: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    darkTheme: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    labels: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      title: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'MHRise: Skill Simulator'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  watch: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">    darkTheme\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">value\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">      this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.$vuetify.theme.isDark \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> value\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  created\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    this.darkTheme \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.$vuetify.theme.isDark\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  mounted\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    this.$root.$on(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'update:drawer'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">value\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">      this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.drawer \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> value\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    })\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　最初に較べると、だいぶスッキリしているのがわかる。\u003Cbr \u002F>\n　ちなみに、ここまでのアプリケーションをビルドすると、次のようになる。\u003C\u002Fp>\n\u003Cp>\u003Ciframe loading=\"lazy\" src=\"https:\u002F\u002Fka2.org\u002Fmhr\u002Fv0.1.1\u002F\" width=\"auto\" height=\"480px\" frameBorder=\"0\" marginHeight=\"0\" marginWidth=\"0\" data-cite=\"MHRSS v0.1.1\" class=\"embed-expand-size\">\u003C\u002Fiframe>\u003C\u002Fp>\n\u003Cp>　だいぶ、モックアップっぽくなってきた。\u003C\u002Fp>\n\u003Ch2>開発時はウォッチビルド\u003C\u002Fh2>\n\u003Cp>　Vue.jsでの開発中は\u003Ccode>yarn serve\u003C\u002Fcode>で「ウォッチビルド」を継続しておく。この状態だと、常に変更リソースの監視が行われ、ファイルに変更が発生するとリアルタイムでビルドが行われるので、変更をすぐにブラウザで確認できるのだ。また、ビルド自体も内部キャッシュを使った差分のみのビルドになるため、レスポンスが抜群に良い。\u003Cbr \u002F>\n　ただ、ローカルPC上の\u003Ccode>localhost:8080\u003C\u002Fcode>での動作確認になるため、サーバ側と通信が必要な処理は正常に動作しない。それについては、ダミー処理を作るなりの対策が必要になって来るので、詳しくは後の回にて説明しようと思っている。\u003C\u002Fp>\n\u003Ch2>本番用ビルドを使いモックアップをレビュー\u003C\u002Fh2>\n\u003Cp>　\u003Ccode>yarn build\u003C\u002Fcode>で本番用ビルドを行うと、\u003Ccode>dist\u003C\u002Fcode>フォルダに公開用ファイルがビルドされることは前述した。この公開用ファイルはHTMLとJavaScript、CSS等の静的なファイルセットなので、フォルダごと配布することで、ブラウザのある環境であればどこでも動作させられる。サーバサイドとのやり取りがある処理等はそのままではエラーになるが、ダミーデータやダミー処理を実装してやることで、都度アプリケーションのモックアップレビューを行うこともできるようになるのだ。\u003Cbr \u002F>\n　これについても、詳しくは後の回で説明したいと思う。\u003C\u002Fp>\n\u003Cp>\n　\u003Cbr \u002F>\n　まぁ、Vue.jsとVuetifyによるフロントエンド開発はここまでの流れが基本となる。あとは必要なコンポーネントを都度追加しつつ、サーバサイドとの連携部分を作って行くことになる。\u003C\u002Fp>\n\u003Cp>　ちゅーわけで、今回はここまで。\u003Cbr \u002F>\n　なお、この章の最終リソースはGitHubの\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fka215\u002Fmhr-skill-simulator\u002Ftree\u002Fv0.1.1\">こちらのリポジトリ\u003C\u002Fa>で確認できる。いやぁ、GitHubのタグを使うと、開発中リソースの変遷がとても紹介しやすくてイイな……w\u003Cbr \u002F>\n　\u003Ca href=\"\u002Fmhrise-skill-simulator-creation-chapter-7\">次回\u003C\u002Fa>は、VueRouterを導入してメインコンテンツ部分のページ遷移（表示切替）を実装していく。\u003Cbr \u002F>\n　\u003C\u002Fp>\n",[275,278,281,284,287],{"slug":276,"name":277},"mhrise","MHRise",{"slug":279,"name":280},"%e3%82%b7%e3%83%9f%e3%83%a5%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc","シミュレーター",{"slug":282,"name":283},"%e3%82%b9%e3%82%ad%e3%83%ab","スキル",{"slug":285,"name":286},"%e3%83%a2%e3%83%b3%e3%82%b9%e3%82%bf%e3%83%bc%e3%83%8f%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%a9%e3%82%a4%e3%82%ba","モンスターハンターライズ",{"slug":288,"name":289},"%e3%83%a2%e3%83%b3%e3%83%8f%e3%83%b3%e3%83%a9%e3%82%a4%e3%82%ba","モンハンライズ",[291,294,297,300],{"slug":199,"title":200,"date":201,"excerpt":202,"image":203,"categories":292},[293],{"slug":22,"name":23},{"slug":207,"title":208,"date":209,"excerpt":210,"image":203,"categories":295},[296],{"slug":22,"name":23},{"slug":214,"title":215,"date":216,"excerpt":217,"image":203,"categories":298},[299],{"slug":22,"name":23},{"slug":221,"title":222,"date":223,"excerpt":224,"image":203,"categories":301},[302],{"slug":22,"name":23},{"slug":304,"title":305,"date":306,"excerpt":307,"image":203,"categories":308},"mhrise-skill-simulator-creation-chapter-5","モンスターハンターライズのスキルシミュレータを作ってみる！ 第5回","2021-04-17T17:07:24","前回サンプル的に作成した一括データ投入用のエンドポイントbulk.phpでは、インスタンス化するクラスに直接データベースの接続情報を受け渡してDBに接続していたが、これはセキュリティ的に良くない。ソースコード内に機密情…",[309],{"slug":22,"name":23},{"slug":311,"title":312,"date":313,"excerpt":314,"image":203,"categories":315},"mhrise-skill-simulator-creation-chapter-7","モンスターハンターライズのスキルシミュレータを作ってみる！ 第7回","2021-05-08T00:46:59","通常、Vue.jsにてアプリケ―ション内のコンテンツ切り替えを行うとWEB上のURLは変化しない。いわゆる、単一のWEBページでアプリケーションが完結するSPA（Single Page Application）として機…",[316],{"slug":22,"name":23},1793391397016]