[{"data":1,"prerenderedAt":313},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$f2bxwsiqggn860":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-8","モンスターハンターライズのスキルシミュレータを作ってみる！ 第8回","2021-05-15T23:40:48","今回はフロントエンドのVue.jsにAxios導入して、バックエンドのPHPを経由してデータベースからデータを取得する部分を作って行くのだが、その前に、現在のデータベースのテーブル定義に欠陥があったので、そちらを修正す…",[271],{"slug":22,"name":23},"2021-05-23T00:09:54","\u003Cp>　今回はフロントエンドのVue.jsにAxios導入して、バックエンドのPHPを経由してデータベースからデータを取得する部分を作って行くのだが、その前に、現在のデータベースのテーブル定義に欠陥があったので、そちらを修正することにした。\u003C\u002Fp>\n\u003Ch2>武器テーブルの修正\u003C\u002Fh2>\n\u003Cp>　いやはや、現状の武器データを格納するテーブルが、近接武器の一部にしか対応していなかった次第……。\u003Cbr \u002F>\n　テーブル設計してた時に使っていたメイン武器が「ハンマー」と「大剣」だったこともあって、当時は気にならなかったんだが、その後、「狩猟笛」「ライトボウガン」「ヘビィボウガン」「ガンランス」「チャージアックス」「弓」と使用する武器の幅を広げたところで、ようやく気が付いた。まぁ、ボウガン系の弾とかは別テーブル管理でもイイかと元から考えていたのだが、ボウガンには「ブレ」や「リロード」といった個別のステータスがあるし、「ガンランス」には砲術タイプ、「チャージアックス」や「弓」にはビン効果など、それぞれの武器種ごとに個別ステータスがあったのをすっかり忘れていた。\u003Cbr \u002F>\n　これは早いうちにテーブル定義に取り込んでおいた方が後々面倒にならないので、早速修正していこうかと。\u003Cbr \u002F>\n　具体的には、武器個別のステータスはメタデータ系の副次テーブルを作成して切り出してしまうのが、既存の武器マスターテーブルに影響が少なくて良いだろう。あと、ボウガンの弾情報を管理するテーブルも副次テーブル化する予定だが、こちらも箱だけは準備しておく。\u003Cbr \u002F>\n　ちゅーわけで、武器管理系のテーブルを再設計した後のデータベースのERDは下記の通りだ。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2021\u002F05\u002FMHRSS_ERD_v101.png\" alt=\"ER図 Ver.1.0.1\" \u002F>\u003C\u002Fp>\n\u003Cp>　全武器で共有するステータスのみを武器マスターテーブル（weapons）に集約して、武器個別のステータスやシミュレータとってあまり重要でないデータはメタテーブル（weapon_meta）へリレーション、さらにボウガン系の弾丸管理用のテーブル（ammo）を準備してリレーションできるようにしておいた。\u003Cbr \u002F>\n　これに合わせてバルク処理も調整したが、追加したリレーション系副次テーブルへのバルクインポートは今のところ対応していない。というのも、武器マスターへデータを投入して自動発番された武器IDの値を元にしてリレーションデータを紐づけながらのインサートが必要になるからだ。まぁ、こちらは必要に応じて追々対応すれば良いかな。当面のスキルシミュレータでは、武器マスターのみあれば事足りるからだ。\u003Cbr \u002F>\n　ついでに、防具マスターテーブル（armors）など他のテーブルも、ちょいちょい修正してある。例えば、防具名がプレイヤーの性別によって異なっていたり、五十音並び替え用にフリガナ名を格納できるようにしたのだ。\u003Cbr \u002F>\n　とりあえず、メインテーブル群のバルク処理は既にあるので、この段階であれば、weaponsやarmorsテーブルを一度\u003Ccode>DROP TABLE\u003C\u002Fcode>で破棄してから再度\u003Ccode>CREATE TABLE\u003C\u002Fcode>で作成してしまうのがベストである。修正後のバルクインポートのテストもできるし、一石二鳥である。\u003Ccode>ALTER TABLE\u003C\u002Fcode>でカラム単位にちまちま修正することも可能だが、効率が悪いだけでメリットがない。\u003Cbr \u002F>\n　ちなみに、上記のERDは\u003Ca href=\"https:\u002F\u002Fwww.lucidchart.com\">Lucidchart\u003C\u002Fa>で作成している。Lucidchartはおよそビジネスに関わるようなドキュメントのほとんどをWEB上で作成できるクラウドツールだ。無料枠でもかなり自由に様々なドキュメントが書けるうえ、作った文書はPDFや画像等にエクスポートできる優れもののツールである。私は英語UIで使っているが、日本語にも対応しているので、英語が苦手な人にも安心である。\u003C\u002Fp>\n\u003Cp>　そんなこんなで、データベースのテーブル修正はサクッと完了した次第。\u003Cbr \u002F>\n　修正後の全テーブルの\u003Ccode>CREATE TABLE\u003C\u002Fcode>文はこちらの\u003Ca href=\"https:\u002F\u002Fgist.github.com\u002Fka215\u002F478ef44ba94d0ffe7ea7cafcbf48a3c0\">Gist\u003C\u002Fa>で参照できる。\u003C\u002Fp>\n\u003Ch2>Axiosを導入する\u003C\u002Fh2>\n\u003Cp>　さて、本筋に戻ろう。Vue.jsのアプリ側からURLベースでサーバサイド（バックエンド）側とデータをやり取りする方法はいくつかあるが、\u003Ca href=\"https:\u002F\u002Faxios-http.com\u002F\">Axios\u003C\u002Fa>モジュールを使うのが一番手っ取り早くて簡単である。そんなわけで、プロジェクトにAxiosを追加する。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">cd\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> {プロジェクトのディレクトリ}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> add\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> axios\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> vue-axios\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　これでAxiosがインストールされたので、あとはVue.jsのエントリーファイル\u003Ccode>src\u002Fmain.js\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:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> Vue       \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'vue'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> App       \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '.\u002FApp.vue'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> router    \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '.\u002Frouter'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> axios     \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'axios'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> VueAxios  \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'vue-axios'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> vuetify   \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '.\u002Fplugins\u002Fvuetify'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> functions \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '.\u002Fplugins\u002Ffunctions'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '.\u002Fstyles\u002Fmhrss.scss'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '.\u002Fstyles\u002Fmhrssi.scss'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">Vue.config.productionTip \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> false\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">Vue.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">use\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(VueAxios, axios)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">Vue.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">mixin\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(functions)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">new\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> Vue\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  router,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  vuetify,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  render\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">h\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> h\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(App)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}).\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">$mount\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'#app'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　注意点としては、前回追加したミックスインの前で\u003Ccode>Vue.use()\u003C\u002Fcode>することだ。今回はAxios系の共通処理をミックスインに含めてしまうので、ミックスインを定義する前にAxiosが読み込まれている必要があるのだ。\u003Cbr \u002F>\n    では早速ミックスイン\u003Ccode>src\u002Fplugins\u002Ffunctions.js\u003C\u002Fcode>にAxiosの共通処理を追加してみる。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  methods: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    \u002F\u002F Determine the host and switch debug mode\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">    isLocalhost\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">      return\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">^\u003C\u002Fspan>\u003Cspan style=\"color:#DBEDFF\">(localhost\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">|\u003C\u002Fspan>\u003Cspan style=\"color:#DBEDFF\">127\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D;font-weight:bold\">\\.\u003C\u002Fspan>\u003Cspan style=\"color:#DBEDFF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D;font-weight:bold\">\\.\u003C\u002Fspan>\u003Cspan style=\"color:#DBEDFF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D;font-weight:bold\">\\.\u003C\u002Fspan>\u003Cspan style=\"color:#DBEDFF\">1)\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">$\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">test\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(window.location.hostname)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    \u002F\u002F Sleep at the milliseconds specified\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    \u002F\u002F Usage: this.sleep(300).then(() => { Do something... })\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">    sleep\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">async\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">sec\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">1000\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">      return\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> Promise\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">resolve\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> setTimeout\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(resolve, sec))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    \u002F\u002F Create axios instance\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">    createAxios\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">overrideURL\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">null\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">      const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> DEFAULT_BASE_URL\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">isLocalhost\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">?\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'localhost:8080\u002F'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> `${\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">window\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">location\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">hostname\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">}\u002F`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">      let\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> connectURL \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> overrideURL \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">||\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '\u002F\u002F'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> +\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> DEFAULT_BASE_URL\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">      return\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.axios.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">create\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        baseURL: connectURL,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        headers: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          'Content-Type'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'application\u002Fjson;charset=utf-8'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          'Accept'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'application\u002Fjson'\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\">        params: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          token: \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\">        },\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\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　追加したのは、Axiosを使った処理を行う際のインスタンス初期化の処理だ。前回で追加した現在の環境がローカルホストかどうかを判定するメソッドを利用して、Axiosオブジェクトの接続先URLを振り分けながらインスタンス化するメソッドである。また、接続先URL自体は呼出し元で上書きできるようにしてある。\u003Cbr \u002F>\n　あと、しれっとスリープ用のメソッドも追加してある。こういうどこでも使いそうな共用メソッドを追加して行くためのミックスインなのだ。\u003C\u002Fp>\n\u003Ch2>Axiosでの接続テスト\u003C\u002Fh2>\n\u003Cp>　次に、コンポーネント側からAxios経由でのデータ取得をテストしてみる。前回モックアップ用のデータとして準備したJSONファイルをAxiosで読み込ませてみよう。サンプルとして、メイン画面の左カラム「装備・装飾品」欄の個別装備表示用コンポーネントである「EquipmentItem.vue」を下記のように修正する。\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-card\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\">    class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"d-flex flex-wrap mb-2 pa-2\"\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-if\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"loading\"\u003C\u002Fspan>\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>\u003Cspan style=\"color:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"pa-2 text-center\"\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> style\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"width:100%\"\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-progress-circular\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FDAEB7;font-style:italic\">          :size=\"32\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FDAEB7;font-style:italic\">          :width=\"3\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          indeterminate\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\">\"grey darken-2\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        ><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">v-progress-circular\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:#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:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> v-else-if\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"item\"\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\"><\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 Talisman from '@\u002Fcomponents\u002FTalisman'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">\u002F\u002Fimport mockData from '@\u002F..\u002Fpublic\u002Fmock_data.json' <- 削除\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:#F97583\">  ...\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(中略)\u003C\u002Fspan>\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:#F97583\">    ...\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(中略)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    loading: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\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\">\u003Cspan style=\"color:#F97583\">  ...\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(中略)\u003C\u002Fspan>\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.getData(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'mock_data.json'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">)\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F <- 追加\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    \u002F* 以下は削除\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    let items = mockData[`${this.$props.type}s`].filter(item => item.id == Number(this.$props.id))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    if (items) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">      this.item = items.shift()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">      this.hasSlot = (this.item.slot1 + this.item.slot2 + this.item.slot3) > 0\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    } else {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">      this.item = {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">        name: '-', rarity: 0, \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">      }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    *\u002F\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\">  methods: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    ...\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(中略)\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\">    getData: \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">path\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">      const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> instance\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">createAxios\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      instance.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(path)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      .\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">then\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">response\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        let\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> items \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> response.data[\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">`${\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">this\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">$props\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">type\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">}s`\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">].\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">filter\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">item\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> item.id \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">==\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> Number\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.$props.id))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (items) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">          this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.item \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> items.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">shift\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\">.hasSlot \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.item.slot1 \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">+\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.item.slot2 \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">+\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.item.slot3) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> 0\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        } \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">else\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\">.item \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            name: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'-'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, rarity: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\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\">      .\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">catch\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">error\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        console.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">error\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">`Failure to retrieve equipment data. (${\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">error\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>\u003Cspan style=\"color:#B392F0\">finally\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(() \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\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">sleep\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">500\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">).\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">then\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(() \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\">.loading \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> false\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\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">script\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　今までのJSONファイルインポートを廃止して、データ読み込み中のインジケータ表示と、それ用の状態管理用変数を追加。ライフサイクルの\u003Ccode>created()\u003C\u002Fcode>では新たにAxios経由のデータ読み込みメソッド\u003Ccode>getData()\u003C\u002Fcode>を呼び出すようにする。\u003Ccode>getData()\u003C\u002Fcode>では、前項にて定義したミックスインのメソッドを使ってAxiosオブジェクトを初期化し、JSONデータをURLから読み込んでいる。ローカル環境の場合、http:\u002F\u002Flocalhost:8080\u002Fmock_data.json のURLからデータが読み込まれることになる。前回、\u003Ccode>mock_data.json\u003C\u002Fcode>を\u003Ccode>src\u002Fassets\u003C\u002Fcode>等ではなく、Vueアプリの公開用ディレクトリ\u003Ccode>public\u003C\u002Fcode>に格納していたのはこのための伏線だったのだ。一方で、\u003Ccode>window.location.hostname\u003C\u002Fcode>でホスト名が引ける仮想環境や本番環境などではドキュメントルート直下に\u003Ccode>mock_data.json\u003C\u002Fcode>が配置されていれば、データが読み込まれる。\u003Cbr \u002F>\n　なお、先ほどミックスインに追加したスリープを使ってロード中フラグを切り替えているのは、ローカル環境だとAxiosでのファイル読み込みが一瞬で終了してしまい、データ読み込み中のインジケータ表示の動作確認がしづらいための対策である。\u003C\u002Fp>\n\u003Cp>　これで、フロントエンド側のデータ読み込み準備が整った。次は、バックエンド側の対応をしていく。\u003C\u002Fp>\n\u003Ch2>エンドユーザー用のエンドポイントを追加する\u003C\u002Fh2>\n\u003Cp>　このアプリを利用するユーザー向けのバックエンドのエンドポイントは\u003Ccode>index.php\u003C\u002Fcode>となる。このエンドポイントではユーザーのリクエストに適宜対応して、データベースからデータを取得してアプリ側にその結果を応答として返す必要がある。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2021\u002F05\u002Fmhr_scheme_3.png\" alt=\"対象のエンドポイント\" \u002F>\u003C\u002Fp>\n\u003Cp>　ただし、今までモックアップとして開発してきたメイン画面のリクエストは複雑になるので、一旦そこは置いておいて、手始めにスキルデータをデータベースから取得して一覧表示する機能を実装していこうかと。ぶっちゃけ、ある程度のデータ量を登録してあるのが、まだスキルテーブルしかないというのが本当の理由だったりするのだが……w\u003Cbr \u002F>\n　早速、プロジェクトディレクトリにエンドポイントのファイルを作成する。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">cd\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> {プロジェクトディレクトリ}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">touch\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> index.php\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:#F97583\"><?\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">php\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">require_once\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">__DIR__\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> .\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '\u002Fvendor\u002Fautoload.php'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">use\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> MHRise\\SkillSimulator\\CustomerCore\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">$class \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'MHRise\\SkillSimulator\\CustomerCore'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">class_exists\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $class ) ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    CustomerCore\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">::\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">get_object\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">} \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">else\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    trigger_error\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"Unable to load class: \u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">$class\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">E_USER_WARNING\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    exit\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>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　このエンドポイントでは、コアクラス\u003Ccode>CustomerCore\u003C\u002Fcode>をインスタンス化するだけだ。実際の様々な処理はコアクラス側に実装されるので、かなりシンプルになっている。\u003Cbr \u002F>\n　次に、コアクラスを作成する。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">cd\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> apps\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">touch\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> CustomerCore.php\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:#F97583\"><?\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">php\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">namespace\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> MHRise\\SkillSimulator\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">class_exists\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'CustomerCore'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ) ) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">final\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> CustomerCore\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> extends\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> abstractClass\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    use\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> DBHelper\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    public\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> init\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        die\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Called CustomerCore::init method!'\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\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">endif\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　XAMPP等の仮想環境上で、このエンドポイントのURL（例えば\u003Ccode>http:\u002F\u002F{vhost name}\u002Findex.php\u003C\u002Fcode>のようなURL）にブラウザでアクセスしてみる。画面に「Called CustomerCore::init method!」と表示されていれば、エンドポイントの追加は完了だ。\u003C\u002Fp>\n\u003Ch2>エンドポイントへのアクセス・スキームの定義\u003C\u002Fh2>\n\u003Cp>　さて、ここでエンドポイントにVue.jsアプリ側からどのようにアクセスさせ、それぞれのアクセスをPHPのクラス側でどのように捌くかを決める必要がある。簡単に云うと、Axiosに受け渡すURLのパスと、そのURLパスから受け取れるデータの対応リストを決めていくのだ。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth align=\"left\">リクエストURL（BASE_URL以降のパス）\u003C\u002Fth>\n\u003Cth align=\"center\">メソッド\u003C\u002Fth>\n\u003Cth align=\"left\">取得JSONデータの内容\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd align=\"left\">\u003Ccode>\u002F?tbl=weapons\u003C\u002Fcode> もしくは \u003Ccode>\u002Fweapons\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">GET\u003C\u002Ftd>\n\u003Ctd align=\"left\">全武器のデータ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"left\">\u003Ccode>\u002F?tbl=weapons&id=:id\u003C\u002Fcode> もしくは \u003Ccode>\u002Fweapon\u002F:id\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">GET\u003C\u002Ftd>\n\u003Ctd align=\"left\">指定された武器IDのデータ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"left\">\u003Ccode>\u002F?tbl=armors\u003C\u002Fcode> もしくは \u003Ccode>\u002Farmors\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">GET\u003C\u002Ftd>\n\u003Ctd align=\"left\">全防具のデータ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"left\">\u003Ccode>\u002F?tbl=armors&id=:id\u003C\u002Fcode> もしくは \u003Ccode>\u002Farmor\u002F:id\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">GET\u003C\u002Ftd>\n\u003Ctd align=\"left\">指定された防具IDのデータ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"left\">\u003Ccode>\u002F?tbl=talismans\u003C\u002Fcode> もしくは \u003Ccode>\u002Ftalismans\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">GET\u003C\u002Ftd>\n\u003Ctd align=\"left\">全護石のデータ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"left\">\u003Ccode>\u002F?tbl=talismans&id=:id\u003C\u002Fcode> もしくは \u003Ccode>\u002Ftalisman\u002F:id\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">GET\u003C\u002Ftd>\n\u003Ctd align=\"left\">指定された護石IDのデータ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"left\">\u003Ccode>\u002F?tbl=decorations\u003C\u002Fcode> もしくは \u003Ccode>\u002Fdecorations\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">GET\u003C\u002Ftd>\n\u003Ctd align=\"left\">全装飾品のデータ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"left\">\u003Ccode>\u002F?tbl=decorations&id=:id\u003C\u002Fcode> もしくは \u003Ccode>\u002Fdecoration\u002F:id\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">GET\u003C\u002Ftd>\n\u003Ctd align=\"left\">指定された装飾品IDのデータ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"left\">\u003Ccode>\u002F?tbl=skills\u003C\u002Fcode> もしくは \u003Ccode>\u002Fskills\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">GET\u003C\u002Ftd>\n\u003Ctd align=\"left\">全スキルのデータ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"left\">\u003Ccode>\u002F?tbl=skills&id=:id\u003C\u002Fcode> もしくは \u003Ccode>\u002Fskill\u002F:id\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">GET\u003C\u002Ftd>\n\u003Ctd align=\"left\">指定されたスキルIDのデータ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>　リクエストURLが2パターンあるのは、取得リソースを選別するための条件を古典的なパラメータ付与型にするか、RESTfulなURI（リソース指向アーキテクチャ（\u003Cstrong>R\u003C\u002Fstrong>esource \u003Cstrong>O\u003C\u002Fstrong>riented \u003Cstrong>A\u003C\u002Fstrong>rchitecture:ROA）の「アドレス可能性」と「ステートレス性」に準拠した形式）にするかを選別できるように提示している。根本的にRESTfulなURIの方が今時っぽくて格好良くみえるのだが、実際の動きとしてはWEBサーバ側で古典的なパラメータ付与型のURIに変換しているだけなので、どちらでも特に問題はない。むしろ、その変換設定をサーバ側に行うひと手間を考えると、前者のURIの方が実装が簡単だ。\u003Cbr \u002F>\n　まぁ、リクエストURLは基本的にアプリ内部からしか使わない想定なので、そこに格好良さを求めても意味がないし、今回はパラメータ付与型のURLで行くことにする。\u003C\u002Fp>\n\u003Ch2>コアクラスでリクエストを捌く\u003C\u002Fh2>\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:#F97583\">private\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $request_method;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">protected\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $the_request;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">public\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> init\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">catch_request\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">handle_request\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:#F97583\">protected\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> catch_request\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">()\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> void\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">request_method \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_SERVER[\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'REQUEST_METHOD'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    $options \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">        \u002F\u002F tbl=:table_name\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">        'tbl'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> FILTER_SANITIZE_STRING\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">        \u002F\u002F id=:id\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">        'id'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">  =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">            'filter'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> FILTER_VALIDATE_INT\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">            'options'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [ \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'min_range'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> 1\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:#6A737D\">        \u002F\u002F filters[key]=value\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">        'filters'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">            'filter'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">  =>\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> FILTER_SANITIZE_STRING\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">            'flags'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">   =>\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> FILTER_REQUIRE_ARRAY\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:#79B8FF\">    $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">the_request \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> match\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">$this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">request_method ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">        'GET'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">    =>\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> filter_input_array\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">INPUT_GET\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,    $options ),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">        'POST'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">   =>\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> filter_input_array\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">INPUT_POST\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,   $options ),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">        'COOKIE'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> filter_input_array\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">INPUT_COOKIE\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, $options ),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">the_request ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">the_request \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> json_decode\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">file_get_contents\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'php:\u002F\u002Finput'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ), \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\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">the_request ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        die\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Request not found.'\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:#F97583\">protected\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> handle_request\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    $use_named_parameters \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\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\">    $response \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> null\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    switch\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">$this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">request_method ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        case\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'POST'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            break\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        case\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'GET'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">array_key_exists\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'tbl'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">$this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">the_request ) ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">                if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">table_exists\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">$this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">the_request[\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'tbl'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">] ) ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">                    die\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'That table does not exist.'\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>\u003Cspan style=\"color:#F97583\">else\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">                die\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Table not specified.'\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\">            $conditions \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">array_key_exists\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'id'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">$this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">the_request ) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">&&\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">the_request[\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'id'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">] ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                $conditions[] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [ \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'id'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'='\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">$this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">the_request[\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'id'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">] ];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            } \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">elseif\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">array_key_exists\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'filters'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">$this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">the_request ) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">&&\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">the_request[\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'filters'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">] ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">                foreach\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">$this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">the_request[\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'filters'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">as\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_key \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\">                    $conditions[] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [ $_key, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'='\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>\u003Cspan style=\"color:#F97583\">else\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\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\">\u003Cspan style=\"color:#E1E4E8\">            $response \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">retrieve_data\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">$this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">the_request[\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'tbl'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">], $conditions, $use_named_parameters );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            break\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        case\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'COOKIE'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        default\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            break\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:#F97583\">    if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( $response ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">return_response\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $response );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    } \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">else\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">return_response\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:#F97583\">protected\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> return_response\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">array\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $data )\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> void\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">isset\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $_SERVER[\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'HTTP_ORIGIN'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">] ) ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $allow_origin_regex \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '@^https?:\u002F\u002F(localhost:8080|127\\.0\\.0\\.1)@'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $origin \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> preg_match\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $allow_origin_regex, $_SERVER[\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'HTTP_ORIGIN'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">] ) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">?\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_SERVER[\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'HTTP_ORIGIN'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '*'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $allow_methods \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'GET, POST, OPTIONS'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $allow_credentials \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'true'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    } \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">else\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $origin \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '*'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $allow_methods \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'GET'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $allow_credentials \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '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:#79B8FF\">    header\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Access-Control-Allow-Origin: '\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $origin );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    header\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Access-Control-Allow-Methods: '\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $allow_methods );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    header\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Access-Control-Allow-Credentials: '\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $allow_credentials );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    header\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Access-Control-Allow-Headers: Origin, Content-Type, Accept'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    header\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Access-Control-Expose-Headers: X-Custom-header'\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:#79B8FF\">    header\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Content-Type: application\u002Fjson; charset=utf-8'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    die\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">json_encode\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $data ) );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　そして、データベースを検索してデータを取得するメソッドをデータベースヘルパーである\u003Ccode>DBHelper.php\u003C\u002Fcode>トレイトに追加する。ここに追加するメソッドは、汎用的なSELECTクエリ発行用メソッドとして使えるような仕様にしてある（まだ完成形ではない）。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">protected\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> retrieve_data\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">string\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $table_name, \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">array\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $conditions, \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">bool\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $use_named_parameters \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> true\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> )\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> array\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    $where \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    $parameters \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> empty\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $conditions ) ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        foreach\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( $conditions \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">as\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_cond ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( $use_named_parameters ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                $where[\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">':'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> .\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_cond[\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">]] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '`'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_cond[\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'` '\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_cond[\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">' :'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_cond[\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                $parameters[\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">':'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> .\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_cond[\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">]] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_cond[\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">2\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            } \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">else\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                $where[$_cond[\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">]] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '`'\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_cond[\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'` '\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_cond[\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">' ?'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                $parameters[$_cond[\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">]] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_cond[\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">2\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\">    $base_sql \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> \"\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">SELECT\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> *\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> FROM\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $table_name\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> empty\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $where ) ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $base_sql \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> ' WHERE %s'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $base_sql \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> sprintf\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $base_sql, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">implode\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">' \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">AND\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, $where ) );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    \u002F\u002F Ready for binding values\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    $bind_values \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    $bind_index  \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    foreach\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( $parameters \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">as\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_key \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_val ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        switch\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">gettype\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $_val ) ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            case\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'integer'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                $value \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> intval\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $_val );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                $data_type \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> \\PDO\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">::\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">PARAM_INT\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">                break\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            case\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'array'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            case\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'object'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                $value \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> json_encode\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $_val );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                $data_type \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> \\PDO\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">::\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">PARAM_STR\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">                break\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            case\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'boolean'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                $value \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> boolval\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $_val );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                $data_type \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> \\PDO\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">::\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">PARAM_BOOL\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">                break\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            case\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'NULL'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                $value \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\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\">                $data_type \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> \\PDO\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">::\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">PARAM_NULL\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">                break\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            case\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'double'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            case\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'string'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            default\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                $value \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> strval\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $_val );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">                $data_type \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> \\PDO\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">::\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">PARAM_STR\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">                break\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\">        $bind_index\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">++\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $bind_key \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $use_named_parameters \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">?\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_key \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $bind_index;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $bind_values[$bind_key] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [ $value, $data_type ];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    \u002F\u002F Execute data selection\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    try\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $sth \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">dbh\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">prepare\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $base_sql );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        foreach\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( $bind_values \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">as\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $_key \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\">            $sth\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">bindValue\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $_key, $_value[\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">], $_value[\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">1\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\">        $sth\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">execute\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        return\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $sth\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">fetchAll\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">\\PDO\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">::\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">FETCH_ASSOC\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    } \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">catch\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">\\PDOException\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $e ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        throw\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $e;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        return\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>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　バックエンドの準備はこれでOKだ。次にフロントエンドを拡張する。\u003C\u002Fp>\n\u003Ch2>スキル一覧画面の作成\u003C\u002Fh2>\n\u003Cp>　まず、Vue.js側にスキル一覧用のルートを作成する必要があるので、\u003Ccode>src\u002Frouter\u002Findex.js\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:#F97583\">...\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">（省略）\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> Skills \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '..\u002Fviews\u002FSkills.vue'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> routes\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  ...\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\">    path: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'\u002Fskills'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    name: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'Skills'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    component: Skills,\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:#F97583\">...\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>src\u002Fviews\u003C\u002Fcode>ディレクトリに\u003Ccode>Skills.vue\u003C\u002Fcode>ファイルを追加して、スキル一覧用の画面を作成する。コンポーネントの詳細はここでは省略するので、気になる人は\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fka215\u002Fmhr-skill-simulator\u002Ftree\u002Fv0.1.3\">GitHubのリポジトリ\u003C\u002Fa>を参照して欲しい。\u003Cbr \u002F>\n　なお、インターネットでアクセスできるPHP＋MySQLの実働環境があれば、ローカル環境からでもURL経由でバックエンド側と連動できるので、その場合はVue.jsのミックスインに追加した\u003Ccode>createAxios()\u003C\u002Fcode>メソッド内のBASE_URIの定数を実働環境のホスト名に変更すると良いだろう。\u003Cbr \u002F>\n　スキル一覧画面のコンポーネント\u003Ccode>SkillList.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\">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\">    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\">    labels: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      title: \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\">    skills: \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\">    loading: \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\">  }),\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.getData(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'index.php?tbl=skills'\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\">  methods: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">    getData\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">path\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">      const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> instance\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">createAxios\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">()\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D\">\u002F\u002F <- PHP+MySQLの稼働している環境のURLがメソッドの初期値と異なる場合はここに指定する\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      instance.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(path)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      .\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">then\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">response\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\">.skills \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> response.data\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.skills.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">sort\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">((\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">a\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">b\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            return\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> a.name.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">localeCompare\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(b.name, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'ja'\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>\u003Cspan style=\"color:#B392F0\">catch\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">error\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        console.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">error\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">`Failure to retrieve skill data. (${\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">error\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>\u003Cspan style=\"color:#B392F0\">finally\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(() \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\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">sleep\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">300\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">).\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">then\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(() \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\">.loading \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> false\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\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">script\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　実際に動かすと下記のようになる。サイドメニューから「スキル」を選択するとルーティングが切り替わって「スキル一覧画面」が表示されるようになっている。\u003C\u002Fp>\n\u003Cp>\u003Ciframe loading=\"lazy\" src=\"https:\u002F\u002Fka2.org\u002Fmhr\u002Fv0.1.3\u002F\" width=\"auto\" height=\"860\" frameBorder=\"0\" marginHeight=\"0\" marginWidth=\"0\" data-cite=\"MHRSS v0.1.3\" class=\"embed-expand-size\">\u003C\u002Fiframe>\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Cp>　基礎的なデータベース連携はこれで完成だ。だが、このままだと、ルーティング切り替え（≒ページ遷移）のたびに毎回データベースへのアクセスが走って効率が悪い。今回のアプリでは、ほとんどのデータが一度取得したらそのまま引き回せるタイプのものなので、アプリ側にキャッシュしてしまいたい。そのためには、Vuexを導入して、取得したデータはストアに格納してしまうのが良いだろう。\u003C\u002Fp>\n\u003Cp>　というわけで、　\u003Ca href=\"\u002Fmhrise-skill-simulator-creation-chapter-9\">次回\u003C\u002Fa>はVuexによるデータ・キャッシュを実装する。\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-7","モンスターハンターライズのスキルシミュレータを作ってみる！ 第7回","2021-05-08T00:46:59","通常、Vue.jsにてアプリケ―ション内のコンテンツ切り替えを行うとWEB上のURLは変化しない。いわゆる、単一のWEBページでアプリケーションが完結するSPA（Single Page Application）として機…",[309],{"slug":22,"name":23},{"slug":221,"title":222,"date":223,"excerpt":224,"image":203,"categories":311},[312],{"slug":22,"name":23},1793391394162]