[{"data":1,"prerenderedAt":308},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$f3qjmwv41py4v3":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":199,"title":200,"date":201,"excerpt":202,"image":203,"categories":266,"modified":201,"html":268,"tags":269,"related":285,"prev":302,"next":305},[267],{"slug":22,"name":23},"\u003Cp>　今回は「マイセット登録」と護石データの「エクスポート／インポート」機能の追加をしていく。折り良く（悪く？）「FF7リメイク・インターグレード」や「FORTNITEシーズン7」が出たこともあって、そっちをプレイしてたらこちらの開発がちょいと遅くなってしまった……。この辺はちゃっちゃと作ってしまって、早くゲームに戻りたいもんだ……w\u003Cbr \u002F>\n　\u003C\u002Fp>\n\u003Ch2>マイセット登録用テーブルの準備\u003C\u002Fh2>\n\u003Cp>　まず、ユーザーごとのマイセットの登録については、護石データと同じように基本的にはブラウザのCache Storageとデータベースの両方に保存をするハイブリッド方式で行うことにする。つまりは、データベースへの登録リクエストの内容＋レスポンスとして受け取った発番されたIDをマージしたデータをCache Storageに格納する形だ。そして、登録したマイセットを管理するためのマイセット管理画面を準備して、そこではゲーム本編と同じようにマイセットに名前を付けたり、再編集や削除ができるようにする。\u003Cbr \u002F>\n　そんなわけで、マイセット管理用のloadoutsテーブルをデータベースに追加することにする。スキーマは下記の通りだ。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>カラム（物理名）\u003C\u002Fth>\n\u003Cth>カラム（論理名）\u003C\u002Fth>\n\u003Cth align=\"center\">タイプ\u003C\u002Fth>\n\u003Cth align=\"center\">属性\u003C\u002Fth>\n\u003Cth>補足\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>id\u003C\u002Ftd>\n\u003Ctd>マイセットID\u003C\u002Ftd>\n\u003Ctd align=\"center\">int\u003C\u002Ftd>\n\u003Ctd align=\"center\">unsigned, auto_increment\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>name\u003C\u002Ftd>\n\u003Ctd>マイセット名\u003C\u002Ftd>\n\u003Ctd align=\"center\">varchar\u003C\u002Ftd>\n\u003Ctd align=\"center\">default null\u003C\u002Ftd>\n\u003Ctd>各ユーザにて任意に設定可能\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>weapon_id\u003C\u002Ftd>\n\u003Ctd>装備武器ID\u003C\u002Ftd>\n\u003Ctd align=\"center\">int\u003C\u002Ftd>\n\u003Ctd align=\"center\">unsigned, not null\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>weapon_slots\u003C\u002Ftd>\n\u003Ctd>装備武器スロット内容\u003C\u002Ftd>\n\u003Ctd align=\"center\">json\u003C\u002Ftd>\n\u003Ctd align=\"center\">default null\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>{slot1: decoration_id, slot2: decoration_id, slot3: decoration_id}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>head_id\u003C\u002Ftd>\n\u003Ctd>装備頭部防具ID\u003C\u002Ftd>\n\u003Ctd align=\"center\">int\u003C\u002Ftd>\n\u003Ctd align=\"center\">unsigned, not null\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>head_lv\u003C\u002Ftd>\n\u003Ctd>装備頭部防具レベル\u003C\u002Ftd>\n\u003Ctd align=\"center\">tinyint\u003C\u002Ftd>\n\u003Ctd align=\"center\">unsigned, not null, default 1\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>head_slots\u003C\u002Ftd>\n\u003Ctd>装備頭部防具スロット内容\u003C\u002Ftd>\n\u003Ctd align=\"center\">json\u003C\u002Ftd>\n\u003Ctd align=\"center\">default null\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>{slot1: decoration_id, slot2: decoration_id, slot3: decoration_id}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>chest_id\u003C\u002Ftd>\n\u003Ctd>装備胸部防具ID\u003C\u002Ftd>\n\u003Ctd align=\"center\">int\u003C\u002Ftd>\n\u003Ctd align=\"center\">unsigned, not null\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>chest_lv\u003C\u002Ftd>\n\u003Ctd>装備胸部防具レベル\u003C\u002Ftd>\n\u003Ctd align=\"center\">tinyint\u003C\u002Ftd>\n\u003Ctd align=\"center\">unsigned, not null, default 1\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>chest_slots\u003C\u002Ftd>\n\u003Ctd>装備胸部防具スロット内容\u003C\u002Ftd>\n\u003Ctd align=\"center\">json\u003C\u002Ftd>\n\u003Ctd align=\"center\">default null\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>{slot1: decoration_id, slot2: decoration_id, slot3: decoration_id}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>arms_id\u003C\u002Ftd>\n\u003Ctd>装備腕部防具ID\u003C\u002Ftd>\n\u003Ctd align=\"center\">int\u003C\u002Ftd>\n\u003Ctd align=\"center\">unsigned, not null\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>arms_lv\u003C\u002Ftd>\n\u003Ctd>装備腕部防具レベル\u003C\u002Ftd>\n\u003Ctd align=\"center\">tinyint\u003C\u002Ftd>\n\u003Ctd align=\"center\">unsigned, not null, default 1\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>arms_slots\u003C\u002Ftd>\n\u003Ctd>装備腕部防具スロット内容\u003C\u002Ftd>\n\u003Ctd align=\"center\">json\u003C\u002Ftd>\n\u003Ctd align=\"center\">default null\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>{slot1: decoration_id, slot2: decoration_id, slot3: decoration_id}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>waist_id\u003C\u002Ftd>\n\u003Ctd>装備腰部防具ID\u003C\u002Ftd>\n\u003Ctd align=\"center\">int\u003C\u002Ftd>\n\u003Ctd align=\"center\">unsigned, not null\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>waist_lv\u003C\u002Ftd>\n\u003Ctd>装備腰部防具レベル\u003C\u002Ftd>\n\u003Ctd align=\"center\">tinyint\u003C\u002Ftd>\n\u003Ctd align=\"center\">unsigned, not null, default 1\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>waist_slots\u003C\u002Ftd>\n\u003Ctd>装備腰部防具スロット内容\u003C\u002Ftd>\n\u003Ctd align=\"center\">json\u003C\u002Ftd>\n\u003Ctd align=\"center\">default null\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>{slot1: decoration_id, slot2: decoration_id, slot3: decoration_id}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>legs_id\u003C\u002Ftd>\n\u003Ctd>装備脚部防具ID\u003C\u002Ftd>\n\u003Ctd align=\"center\">int\u003C\u002Ftd>\n\u003Ctd align=\"center\">unsigned, not null\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>legs_lv\u003C\u002Ftd>\n\u003Ctd>装備脚部防具レベル\u003C\u002Ftd>\n\u003Ctd align=\"center\">tinyint\u003C\u002Ftd>\n\u003Ctd align=\"center\">unsigned, not null, default 1\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>legs_slots\u003C\u002Ftd>\n\u003Ctd>装備脚部防具スロット内容\u003C\u002Ftd>\n\u003Ctd align=\"center\">json\u003C\u002Ftd>\n\u003Ctd align=\"center\">default null\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>{slot1: decoration_id, slot2: decoration_id, slot3: decoration_id}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>talisman_id\u003C\u002Ftd>\n\u003Ctd>装備護石ID\u003C\u002Ftd>\n\u003Ctd align=\"center\">int\u003C\u002Ftd>\n\u003Ctd align=\"center\">unsigned, not null\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>talisman_slots\u003C\u002Ftd>\n\u003Ctd>装備護石スロット内容\u003C\u002Ftd>\n\u003Ctd align=\"center\">json\u003C\u002Ftd>\n\u003Ctd align=\"center\">default null\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>{slot1: decoration_id, slot2: decoration_id, slot3: decoration_id}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>skills\u003C\u002Ftd>\n\u003Ctd>発動スキル\u003C\u002Ftd>\n\u003Ctd align=\"center\">json\u003C\u002Ftd>\n\u003Ctd align=\"center\">default null\u003C\u002Ftd>\n\u003Ctd>{ skillName: level, … }\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>disabled\u003C\u002Ftd>\n\u003Ctd>無効フラグ\u003C\u002Ftd>\n\u003Ctd align=\"center\">bit(1)\u003C\u002Ftd>\n\u003Ctd align=\"center\">default b’0′\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u002F^(TRUE|true|True|FALSE|false|False|0|1)?$\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>user_info\u003C\u002Ftd>\n\u003Ctd>ユーザ識別情報\u003C\u002Ftd>\n\u003Ctd align=\"center\">json\u003C\u002Ftd>\n\u003Ctd align=\"center\">default null\u003C\u002Ftd>\n\u003Ctd>当面は使用予定なし\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>created_at\u003C\u002Ftd>\n\u003Ctd>登録日時\u003C\u002Ftd>\n\u003Ctd align=\"center\">timestamp\u003C\u002Ftd>\n\u003Ctd align=\"center\">default current_timestamp\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>updated_at\u003C\u002Ftd>\n\u003Ctd>更新日時\u003C\u002Ftd>\n\u003Ctd align=\"center\">timestamp\u003C\u002Ftd>\n\u003Ctd align=\"center\">default current_timestamp on update current_timestamp\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>　実際のCREATE TABLE文は\u003Ca href=\"https:\u002F\u002Fgist.github.com\u002Fka215\u002F478ef44ba94d0ffe7ea7cafcbf48a3c0#gistcomment-3780430\">こちらのGist\u003C\u002Fa>を参照して欲しい。\u003C\u002Fp>\n\u003Ch2>マイセット登録処理の実装\u003C\u002Fh2>\n\u003Cp>　DBにマイセットを格納できるテーブルが出来たので、このテーブルにデータを格納するための処理をバックエンドに実装して行く。マイセットのデータについてバックエンド側から制御しなければならない機能は「新規登録（INSERT）」と「更新（UPDATE）」、「削除（DELETE）」、そして「参照（SELECT）」となるが、護石データ同様に「削除」については物理削除を行わずに論理削除の仕様とする。なので、実際にはDELETEクエリは使わずに削除時もUPDATEクエリで行うことになる。\u003Cbr \u002F>\n　現時点では、各CRUDに対応するDBクエリ用のヘルパーも実装済みなので、新たに作らなければならないのはエンドポイント周りのコントローラ拡張かな……と思ったが、ソース読み返したらコアクラス側は特に何もしなくても動くことが判明した。いやぁ、なかなか汎用性に富む素晴らしい実装をしてたんだと自画自賛したくなったw\u003Cbr \u002F>\n　ちゅーわけで、バックエンドのPHP部分には手を入れる必要がなかったので、フロントエンド側のVueアプリ部分を実装に入る。\u003C\u002Fp>\n\u003Ch3>マイセットの新規登録機能\u003C\u002Fh3>\n\u003Cp>　まず必要なのがマイセットを新たに登録する機能だ。具体的にはメイン画面で「マイセット登録」ボタンを押した時の処理である。この機能を作る前に、Vuexストアに保存したマイセットデータをキャッシュする項目\u003Ccode>$store.state.loadouts\u003C\u002Fcode>と、現在装備中のマイセットIDを引き当てるための項目\u003Ccode>$store.state.now_loadouts\u003C\u002Fcode>を追加する。前者のストア項目にはデータベースに登録成功したマイセットのデータ本体を格納し、後者の項目に値がない場合は新規登録、値がある場合は更新の処理を行うという建付けだ。そして、メイン画面のコンポーネントを拡張してマイセット登録・更新用のUIを追加する。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2021\u002F06\u002Fmhrss_017_loadouts_register.png\" alt=\"マイセットの登録・更新\" \u002F>\u003C\u002Fp>\n\u003Cp>　登録・更新は確認ダイアログを出力して処理をするようにした。マイセット名を変更できるように専用ダイアログの\u003Ccode>LoadoutsEditor.vue\u003C\u002Fcode>コンポーネントを追加している。コミット時の処理内容はほぼ前回開発した護石登録と同じ感じで実装している。\u003C\u002Fp>\n\u003Ch3>マイセットの管理機能\u003C\u002Fh3>\n\u003Cp>　次に、登録したマイセットを管理する機能だ。ここでは、マイセットの削除や装備を行えるようにする。ここはルーターに管理画面用のルート\u003Ccode>\u002Floadouts\u003C\u002Fcode>を新たに追加している。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2021\u002F06\u002Fmhrss_017_loadouts_manager.png\" alt=\"マイセット管理\" \u002F>\u003C\u002Fp>\n\u003Cp>　さらに、マイセットのプレビュー機能を追加して、装備する前にマイセットの内容が確認できるようにした。なお、削除関連の処理は護石管理のを転用することで実装は容易だった。新たに追加した処理としてはマイセットを装備させる機能であるが、これも今まで実装したVuexのゲッターやアクションを組み合わせるだけで苦も無く実装できた。\u003Cbr \u002F>\n　いやはや、あらためてVue.jsは生産性が高いうえに処理作るのも楽しい、素晴らしいフレームワークだねぇ……w\u003C\u002Fp>\n\u003Ch3>Cache Storage制御の拡張\u003C\u002Fh3>\n\u003Cp>　今回、マイセットデータを新たにCache Storageに格納することになったことで、Cache Storageからのデータの取得を選別する仕組みが必要になった。今まではCache Storageには護石データだけが格納されていたので、キャッシュされた全データを一括で取得してVuexの護石ストアに格納しても問題なかったが、これからは護石データとマイセットデータをそれぞれ分別して取得してそれぞれのストアに格納する必要が出て来たのだ。\u003Cbr \u002F>\n　Cache APIにはキャッシュ検索系のメソッドとして\u003Ccode>match()\u003C\u002Fcode>が用意されているが、これオンリーではキャッシュ・キーが一致するものしか引き当てられないので、正規表現による部分一致キーの検索に対応させるには新たに処理を追加しなければならない。そんなわけで、Cache APIのラッパーであるuserCacheプラグイン（\u003Ccode>\u002Fsrc\u002Fplugins\u002FuserCache.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\">const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> userCache\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">  =\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  install\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">Vue\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">options\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    Vue\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">prototype\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.$userCache \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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:#E1E4E8\">      get: \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\">request\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">callback\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\">        return\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">open\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">()\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\">cache\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> cache.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">match\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(request))\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\"> response.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">json\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">())\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\">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\">          if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (callback \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">&&\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> typeof\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> callback \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'function'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">            callback\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(data)\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\">            return\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> Promise\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">reject\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\">          return\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> Promise\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">resolve\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\">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\"> console.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">''\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, error))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">      find\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\">pattern\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">callback\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\"> re\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> RegExp\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(pattern, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'i'\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\"> matchRequest\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">keys\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">()\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\">allKeys\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\"> matchRequest \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> []\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          allKeys.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">forEach\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">key\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\"> (re.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">test\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(key)) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">              matchRequest.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">push\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(key)\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\">          return\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> matchRequest\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        })\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        let\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> cacheData \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\"> (matchRequest.\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">length\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:#E1E4E8\">          matchRequest.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">forEach\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">async\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\"> request\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">            await\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(request, (\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">data\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:#E1E4E8\">              cacheData.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">push\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\">\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\"> (callback \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">&&\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> typeof\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> callback \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'function'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">          callback\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(cacheData)\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:#B392F0\">      keys\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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        return\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">open\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">()\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\">cache\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> cache.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">keys\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">())\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\">keys\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\"> cacheNames \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> []\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          keys.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">forEach\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">request\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            cacheNames.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">push\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(request.url.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">replace\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(window.location.origin, \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:#F97583\">          return\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> cacheNames\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\"> console.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(error))\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\">...\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:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> userCache\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　指定されたキーに一致するキャッシュを取得する\u003Ccode>match()\u003C\u002Fcode>のラッパーとして\u003Ccode>$userCache.get()\u003C\u002Fcode>と、キャッシュの全てのキーを取得する\u003Ccode>keys()\u003C\u002Fcode>のラッパーとして\u003Ccode>$userCache.keys()\u003C\u002Fcode>、そして正規表現パターンでキーを指定して該当するキャッシュのみを一括で取得する\u003Ccode>$userCache.find()\u003C\u002Fcode>のインスタンスメソッドを追加してある。\u003Cbr \u002F>\n　なお、\u003Ccode>$userCache.find()\u003C\u002Fcode>ではPromiseをforEachで回しているところがあるので、後続のcallback処理が完全同期しないというアルゴリズム的なバグがあるんだが、現在のシステムに影響がないので放置してある……将来的に必要性が出たら修正する予定だ。\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:#B392F0\">loadUserData\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:#79B8FF\">  this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.$userCache.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">find\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'talismans'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">cacheData\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\">.$store.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">dispatch\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'initData'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, {property: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'talismans'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, data: cacheData})\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:#E1E4E8\">.$userCache.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">find\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'loadouts'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">cacheData\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\">.$store.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">dispatch\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'initData'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, {property: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'loadouts'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, data: cacheData})\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\u003Ch2>エクスポート／インポートの実装\u003C\u002Fh2>\n\u003Cp>　さて、仕上げは護石データとマイセットデータのエクスポート／インポートの機能を実装していく。具体的な仕様としては、Vuexストアに格納されている護石／マイセットのデータをそのままJSONファイルとしてローカルにダウンロードするエクスポートの処理と、そのダウンロードしたJSONファイルをアップロードしてCache StorageおよびVuexストアに格納するインポートの処理になる。\u003Cbr \u002F>\n　どちらの機能もデータベースは絡まないので、フロントエンド側のVue.jsに処理を追加する。取り扱うデータが護石だろうがマイセットだろうが基本的な処理は一緒になるので、共通処理としてミックスインにインスタンス・メソッドとして実装してしまうのが良いだろう。\u003C\u002Fp>\n\u003Ch3>JSONファイルのエクスポート\u003C\u002Fh3>\n\u003Cp>　JSONファイルのエクスポートは簡単で、ミックスインに下記のメソッドを追加するだけである。\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:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">dataType\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\"> data\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> JSON\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">stringify\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.$store.state[dataType]),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        blob\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> Blob\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">([data], {type: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'text\u002Fplain'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">}),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        evnt\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> document.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">createEvent\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'MouseEvents'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        a\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> document.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">createElement\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'a'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  a.download \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> `mhrss-${\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">dataType\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">}.json`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  a.href \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> window.\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">URL\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">createObjectURL\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(blob)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  a.dataset.downloadurl \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'application\u002Fjson'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, a.download, a.href].\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">join\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">':'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  evnt.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">initEvent\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'click'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, window, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \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\">  a.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">dispatchEvent\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(evnt)\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>this.export('talismans')\u003C\u002Fcode>のようにダウンロードしたいVuexストアの項目名を引数で与えてやればOKだ。\u003C\u002Fp>\n\u003Ch3>JSONファイルのインポート\u003C\u002Fh3>\n\u003Cp>　JSONファイルのインポートの方は、エクスポートよりひと手間かかる。ファイルアップローダのUIが必要になるからだ。ファイルアップロード用のフォームコンポーネントを用意して、そのフォームからの入力ファイルをキャッチする必要があるのだ。まぁ、キャッチさえしてしまえば、あとはVuexのアクションやCache APIを使ってJSONデータをJavaScriptのオブジェクトデータとして登録するだけである。\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\">v-file-input\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  v-model\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"inputFile\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  accept\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\".json, .jsonp, text\u002Fplain, application\u002Fjson\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  show-size\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  label\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"アップロードファイル\"\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\">  dense\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">v-file-input\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">v-btn\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  text\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  :disabled\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"!inputFile\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  @click\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"doSubmit()\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">>インポートする<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#85E89D\">v-btn\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　例えば、ファイルアップローダのVuetifyコンポーネントを上記のように準備する。これでJSON形式のファイルのみを受け付けるアップローダになる。次に、「インポートする」をコミットした時のインスタンス・メソッドを実装する。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">methods\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  doSubmit\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\">    const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> reader\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> FileReader\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\"> data \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> null\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    reader.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">readAsText\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.inputFile)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    reader.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">onload\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\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:#E1E4E8\">      data \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> JSON\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">parse\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(reader.result)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">      this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.dialog \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> false\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">      this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">import\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.dataType, data)\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>　アップロードされたファイルはVuetifyの方でFileオブジェクトとしてv-modelにバインドしてくれるので、初段のコミット処理にてFileReaderでテキスト文字列として拾い、それをJSONにパースすることで、後続処理にオブジェクト変数として受け渡せるようになるのだ。\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:#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:#E1E4E8\">    (\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">...\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">中略)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    sanitizeData: \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">dataType\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">data\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\"> requiredColumns\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">        'talismans'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          'name'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,   \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'rarity'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'slot1'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'slot2'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'slot3'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          'skills'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'worth'\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\">'slots'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'skills_text'\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:#9ECBFF\">        'loadouts'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          'id'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'name'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          'weapon_id'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,               \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'weapon_slots'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          'head_id'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,     \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'head_lv'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,  \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'head_slots'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          'chest_id'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,    \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'chest_lv'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'chest_slots'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          'arms_id'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,     \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'arms_lv'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,  \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'arms_slots'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          'waist_id'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,    \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'waist_lv'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'waist_slots'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          'legs_id'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,     \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'legs_lv'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,  \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'legs_slots'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          'talisman_id'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,             \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'talisman_slots'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">          '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\">\u003Cspan style=\"color:#E1E4E8\">      }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">      let\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> checked \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> Object.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">keys\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(data).\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">filter\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">key\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> requiredColumns[dataType].\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">includes\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(key))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">      if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (checked.\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">length\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> ==\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> requiredColumns[dataType].\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">length\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">        \u002F\u002F Sanitizes valid data\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        return\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> checked.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">reduce\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">((\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">acc\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">cur\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:#E1E4E8\">          acc[cur] \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> data[cur]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">          return\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> acc\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 Invalid data\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\">\u003Cspan style=\"color:#B392F0\">    import\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\">dataType\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">data\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\"> notices \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\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\">            messages: [],\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\"> (Array.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">isArray\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(data) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">&&\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> data.\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">length\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\">        let\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> throughputs \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">            throughput  \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\">        data.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">forEach\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">oneData\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\"> _data \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\">sanitizeData\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(dataType, oneData)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">          if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (Object.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">keys\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(_data).\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">length\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:#E1E4E8\">            throughputs.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">push\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">              request: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">`index.php?tbl=${\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">dataType\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">}&filters[id]=${\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">_data\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">id\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">}`\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">              response: { status: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">200\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, statusText: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'OK'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, headers: { \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'content-length'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">JSON\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">stringify\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(_data).\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">length\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\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:#E1E4E8\">              data: _data\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\">        await\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> Promise\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">all\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(throughputs.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">map\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">async\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\"> item\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.$userCache.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">save\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(item.request, item.response, item.data).\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\">.$store.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">dispatch\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'upsertData'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, { property: dataType, data: item.data })\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          throughput\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">++\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\"> (data.\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">length\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> ==\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> throughput) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">          \u002F\u002F Fully complete\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          notices.messages.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">push\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\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>\u003Cspan style=\"color:#F97583\">else\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (throughput \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:#6A737D\">          \u002F\u002F Limited completion\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          notices.messages.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">push\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'インポートが完了しました。'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \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>\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 All failed\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          notices.title \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'エラー'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">          notices.messages.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">push\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'インポートに失敗しました。'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'JSONデータの内容を確認してやり直してください。'\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:#E1E4E8\">        notices.title \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> 'エラー'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        notices.messages.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">push\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\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:#79B8FF\">      this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.$root.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">$emit\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'open:notification'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, notices)\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\">...\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>　JSONパースしたオブジェクトのバリデーション（\u003Ccode>sanitizeData()\u003C\u002Fcode>）を行い、有効なデータのみをCache Storageに格納していく。Cache APIではリクエストとレスポンスのペアをキャッシュするので、Cache Storageへの保存時にはダミーのレスポンスを発行している。また、Cache APIの戻り値はPromiseになるので、複数データを更新するためには一度データ登録用の配列を作り、それを\u003Ccode>Array.map()\u003C\u002Fcode>のコールバックで処理するようにし、全体を\u003Ccode>await Promise.all()\u003C\u002Fcode>でラップすることで、すべての登録処理が完了するまで次の処理を待機するようにできる。\u003Cbr \u002F>\n　最後に、特定のVuexストアの中身をIDがあれば更新し、なければ追加するためのミューテーションとアクションを追加（下記参照）し、これをCache Storageの更新処理の直後に連繋させることで、Cache StorageとVuexストアの更新を同期させられる。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> mutations\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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:#E1E4E8\">  upsertItemById: (\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">state\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">payload\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\">    if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">Object\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">prototype\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.hasOwnProperty.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">call\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(payload.data, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'id'\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\"> targetIndex \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> state[payload.property].\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">findIndex\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:#E1E4E8\"> payload.data.id)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">      if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (targetIndex \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:#E1E4E8\">        state[payload.property].\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">splice\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(targetIndex, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, payload.data)\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\">        state[payload.property].\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">push\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(payload.data)\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\">const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> actions\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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:#E1E4E8\">  upsertData: ({ \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">commit\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> }, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">payload\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:#B392F0\">    commit\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'upsertItemById'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, payload)\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>　詳しいソースコードは\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fka215\u002Fmhr-skill-simulator\u002Ftree\u002Fv0.1.7\">こちらのGitHub\u003C\u002Fa>を参照して欲しい。\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Cp>　これで、今回予定していた機能が全て実装された。アプリの初期公開バージョンとして、ほぼ完成形に達したといえるので、近くバージョン1としてリリースしようと思う。さぁ、気合い入れて、武器と防具のデータを登録しなきゃなぁ……w\u003Cbr \u002F>\n　とりあえずデータ不足だが、今回のモックは下記のようになっている。\u003C\u002Fp>\n\u003Cp>\u003Ciframe loading=\"lazy\" src=\"https:\u002F\u002Fka2.org\u002Fmhr\u002Fv0.1.7\u002F\" width=\"auto\" height=\"860\" frameBorder=\"0\" marginHeight=\"0\" marginWidth=\"0\" data-cite=\"MHRSS v0.1.7\" class=\"embed-expand-size\">\u003C\u002Fiframe>\u003C\u002Fp>\n\u003Cp>　インライン表示じゃない\u003Ca href=\"\u002Fmhr\u002Fv0.1.7\u002F\">直接リンクはこちら\u003C\u002Fa>だ。\u003C\u002Fp>\n\u003Cp>　次回は、ボウガンのステータスをシミュレートする機能を実装しようか、武器の派生表を作ろうか、はてまた多国語化の対応をしようか……ちょいと悩み中。Vueアプリの多国語化はまだやったことないので、これをやってみたいところだなぁ。\u003Cbr \u002F>\n　おっと、その前にバージョン1の公開をしないとね……w\u003C\u002Fp>\n",[270,273,276,279,282],{"slug":271,"name":272},"mhrise","MHRise",{"slug":274,"name":275},"%e3%82%b7%e3%83%9f%e3%83%a5%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc","シミュレーター",{"slug":277,"name":278},"%e3%82%b9%e3%82%ad%e3%83%ab","スキル",{"slug":280,"name":281},"%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":283,"name":284},"%e3%83%a2%e3%83%b3%e3%83%8f%e3%83%b3%e3%83%a9%e3%82%a4%e3%82%ba","モンハンライズ",[286,289,292,295],{"slug":207,"title":208,"date":209,"excerpt":210,"image":203,"categories":287},[288],{"slug":22,"name":23},{"slug":214,"title":215,"date":216,"excerpt":217,"image":203,"categories":290},[291],{"slug":22,"name":23},{"slug":221,"title":222,"date":223,"excerpt":224,"image":203,"categories":293},[294],{"slug":22,"name":23},{"slug":296,"title":297,"date":298,"excerpt":299,"image":203,"categories":300},"mhrise-skill-simulator-creation-chapter-8","モンスターハンターライズのスキルシミュレータを作ってみる！ 第8回","2021-05-15T23:40:48","今回はフロントエンドのVue.jsにAxios導入して、バックエンドのPHPを経由してデータベースからデータを取得する部分を作って行くのだが、その前に、現在のデータベースのテーブル定義に欠陥があったので、そちらを修正す…",[301],{"slug":22,"name":23},{"slug":207,"title":208,"date":209,"excerpt":210,"image":203,"categories":303},[304],{"slug":22,"name":23},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":306},[307],{"slug":25,"name":26},1793391394161]