リアルタイム検索機能を作ってみた

articles.js

const parsed = JSON.parse(json);

const hasTags = function(tags, pattern) {
    return tags.some(x => pattern.test(x));
};

new Vue({
    el:'#articles',
    data: {
        genres:parsed,
        keyword:''
    },
    watch: {
        keyword: function() {
            const pattern = new RegExp(this.keyword, 'i');
            for(let article of this.genres) {
                article.articles.forEach(x => {
                    let condition = pattern.test(x.title) || hasTags(x.tags, pattern);
                    x.visible = condition;
                });
            }
        }
    },
});

body.html

        <div id="articles">
            <p class="note">
                検索できるのは「記事タイトル」と「タグ」です。<br />
                主要なタグ：C#、JavaScript、勉強、非同期、デザインパターン、ツクール、実験
            </p>
            <form>
                <input type="text" id="search-box" v-model="keyword" placeholder="検索したい記事・タグ" />
            </form>
        
            <div v-for="g in genres">
                <article v-if="g.articles.some(x => x.visible)">
                    <h2 class="entry_subtitle">{{g.name}}</h2>
                    <p v-html="g.desc"></p>
                    <div class="entry_list">
                        <article v-for="(ar, i) in g.articles" v-if="ar.visible">
                            <span>{{i+1}}.<a v-bind:href="ar.url">{{ar.title}}</a></span>
                        </article>
                    </div>
                </article>
            </div>
        </div>

dataCreator.js

class Genre {
    constructor(name, desc) {
        this.name = name;
        this.desc = desc;
        this.articles = [];
    }
}

class Article {
    constructor(title, url, tags) {
        this.title   = title;
        this.url     = url;
        this.tags    = tags;
        this.visible = true;
    }
}

const notSures = new Genre('よくわからんものシリーズ', '実験とか勉強で作ったものとか。');
const pluginCourse = new Genre('プラグイン制作講座', '2日で作ったプラグイン制作講座です。<br/>かなり駆け足で作ったので、内容に穴が多々あるかも。');
const pluginCourse2 = new Genre('プラグイン制作講座その2', '2日で作ったプラグイン制作講座の第二弾です。<br/>前回と同じく、かなり駆け足で作ったので内容に穴が多々あるかも。<br/>ちなみにですが、前回のものよりこちらの方が実践的（難しい）です。<br/>');
const note = new Genre('雑記', '小ネタとか。大したことのないアレです。');
const unity = new Genre('Unity関連の記事', 'Unity関連の小ネタとかの記事です。');
const unirx = new Genre('ニートが学ぶUniRx', '講座とかではなく、単なる学習状況および備忘録です。');
const async = new Genre('ニートが学ぶ非同期処理', 'これもただの備忘録。');
const csharp = new Genre('C#関連の小ネタ', 'C#関連で勉強したことの備忘録的な。');
const ai = new Genre('AI関連の話', 'AI関連の雑記など。');
const collection = new Genre('C#におけるCollectionsの基本のキを理解する', 'どちらかと言えば「僕が理解したい」という動機から始めた講座です。<br/>まあ講座というほど大したことは書いていませんが、「C#のコレクションよくわっがんね」という方の参考になれば幸いです。<br/>そして例のごとく2日間で一気に仕上げたので、誤字脱字や内容の間違いがあればご連絡ください。');

//ジャンルの作成
const genres = [];
genres.push(notSures);
genres.push(pluginCourse);
genres.push(pluginCourse2);
genres.push(note);
genres.push(unity);
genres.push(unirx);
genres.push(async);
genres.push(csharp);
genres.push(ai);
genres.push(collection);

//よくわからんものシリーズの作成
notSures.articles.push(new Article('Unity用のストップウォッチ', 'http://ntgame.wpblog.jp/2018/04/15/post-1584/', ['Unity']));
notSures.articles.push(new Article('【Unity】フレンドに見せられるお部屋機能を作ってみる【Firebase】', 'http://ntgame.wpblog.jp/2018/04/18/post-1591/', ['Unity', 'Firebase']));
notSures.articles.push(new Article('ツクールMVでオンラインランキングを実装する', 'http://ntgame.wpblog.jp/2018/08/10/post-1961/', ['ツクール', 'PHP', 'SQL']));

//プラグイン制作講座
pluginCourse.articles.push(new Article('まっさらなシーンを作る', 'http://ntgame.wpblog.jp/2017/05/24/post-442/', ['ツクール']));
pluginCourse.articles.push(new Article('シーンに画像を表示する', 'http://ntgame.wpblog.jp/2017/05/25/post-463/', ['ツクール']));
pluginCourse.articles.push(new Article('図形を描いてみる', 'http://ntgame.wpblog.jp/2017/05/25/post-471', ['ツクール']));
pluginCourse.articles.push(new Article('ウィンドウを表示させる', 'http://ntgame.wpblog.jp/2017/05/25/post-478/', ['ツクール']));
pluginCourse.articles.push(new Article('選択肢のあるウィンドウを作る', 'http://ntgame.wpblog.jp/2017/05/25/post-485/', ['ツクール']));

//プラグイン制作講座2
pluginCourse2.articles.push(new Article('既存のシーンを改造したい', 'http://ntgame.wpblog.jp/2017/08/11/post-721/', ['ツクール']));
pluginCourse2.articles.push(new Article('タイトル画面を改造する', 'http://ntgame.wpblog.jp/2017/05/25/post-463/', ['ツクール']));
pluginCourse2.articles.push(new Article('TilingSpriteを使えるようにする', 'http://ntgame.wpblog.jp/2017/05/25/post-471', ['ツクール']));
pluginCourse2.articles.push(new Article('画像をスクロールさせてみる', 'http://ntgame.wpblog.jp/2017/05/25/post-478/', ['ツクール']));
pluginCourse2.articles.push(new Article('コードをまとめる', 'http://ntgame.wpblog.jp/2017/05/25/post-485/', ['ツクール']));
pluginCourse2.articles.push(new Article('プラグインパラメーターを導入する', 'http://ntgame.wpblog.jp/2017/05/25/post-485/', ['ツクール']));
pluginCourse2.articles.push(new Article('プラグインパラメーターでデザインを可能にする　その1', 'http://ntgame.wpblog.jp/2017/05/25/post-485/', ['ツクール']));
pluginCourse2.articles.push(new Article('プラグインパラメーターでデザインを可能にする　その2', 'http://ntgame.wpblog.jp/2017/05/25/post-485/', ['ツクール']));
pluginCourse2.articles.push(new Article('パーティクルを実装してみる', 'http://ntgame.wpblog.jp/2017/05/25/post-485/', ['ツクール']));

//雑記
note.articles.push(new Article('スクリプトコマンドからプラグインコマンドを呼び出す方法（MV)', 'http://ntgame.wpblog.jp/2017/08/29/post-825/', ['ツクール', 'プラグイン']));
note.articles.push(new Article('現在のシーンを取得する', 'http://ntgame.wpblog.jp/2017/09/04/post-844/', ['ツクール']));
note.articles.push(new Article('ツクールMVでLINQってみる', 'http://ntgame.wpblog.jp/2017/09/06/post-860/', ['ツクール', '実験']));
note.articles.push(new Article('用語の整理でもしてみる', 'http://ntgame.wpblog.jp/2017/09/18/post-890/', ['JavaScript', '勉強']));
note.articles.push(new Article('プロトタイプについて整理でもしてみる', 'http://ntgame.wpblog.jp/2017/09/19/post-897/', ['JavaScript', '勉強']));
note.articles.push(new Article('イベントを実装してみる', 'http://ntgame.wpblog.jp/2017/09/21/post-905/', ['JavaScript', 'ツクール', '勉強']));
note.articles.push(new Article('値型と参照型の違いについて考えてみる', 'http://ntgame.wpblog.jp/2017/09/22/post-915/', ['JavaScript', '実験']));
note.articles.push(new Article('コアスクリプトを改造してみる', 'http://ntgame.wpblog.jp/2017/09/22/post-918/', ['ツクール', '実験']));
note.articles.push(new Article('値型と参照型の補足', 'http://ntgame.wpblog.jp/2017/09/22/post-924/', ['JavaScript', '勉強']));
note.articles.push(new Article('【MV講座】イベントとジェネレーター', 'http://ntgame.wpblog.jp/2017/09/23/post-930/', ['ツクール']));
note.articles.push(new Article('【MV講座】エラー情報の見方', 'http://ntgame.wpblog.jp/2017/09/25/post-962/', ['ツクール']));
note.articles.push(new Article('プラグインに関するトラブルの指針', 'http://ntgame.wpblog.jp/2017/10/16/post-1077/', ['ツクール']));
note.articles.push(new Article('ツクールMVで作ったゲームが重くなったときの指針', 'http://ntgame.wpblog.jp/2017/10/23/post-1127/', ['ツクール']));
note.articles.push(new Article('Cannnot read property ‘setTransparent’ of undefinedはなぜ起こる？', 'http://ntgame.wpblog.jp/2017/09/30/post-1015/', ['ツクール', 'JavaScript']));
note.articles.push(new Article('ブラウン管みたいな走査線フィルタ', 'http://ntgame.wpblog.jp/2017/12/01/post-1264/', ['ツクール', '実験']));
note.articles.push(new Article('GitPitchで複数のPresentationをフォルダわけする方法', 'http://ntgame.wpblog.jp/2017/12/31/post-1341/', ['GitHub', '実験']));
note.articles.push(new Article('JavaScriptのclass構文について考える', 'http://ntgame.wpblog.jp/2018/01/03/post-1360/', ['JavaScript', '勉強']));
note.articles.push(new Article('ツクールMVでキーの高速入力に対応する', 'http://ntgame.wpblog.jp/2018/01/06/post-1380/', ['JavaScript', 'ツクール', '勉強']));
note.articles.push(new Article('【JavaScript】配列の各要素にアクセスする方法', 'http://ntgame.wpblog.jp/2018/01/13/post-1397/', ['JavaScript', '勉強']));
note.articles.push(new Article('【実践編】配列の各要素にアクセスする方法', 'http://ntgame.wpblog.jp/2018/01/14/post-1414/', ['JavaScript', '勉強']));
note.articles.push(new Article('ボックス化について', 'http://ntgame.wpblog.jp/2018/01/15/post-1431/', ['JavaScript', 'C#', '勉強']));
note.articles.push(new Article('メソッドチェーンについて勉強してみる', 'http://ntgame.wpblog.jp/2018/01/24/post-1459/', ['JavaScript', 'C#', '勉強']));
note.articles.push(new Article('MPチェーンシステムを作ってみる', 'http://ntgame.wpblog.jp/2018/02/02/post-1487/', ['ツクール']));
note.articles.push(new Article('ツクールMVのチート（セーブデータの改造）について調べてみる', 'http://ntgame.wpblog.jp/2018/05/14/post-1648/', ['ツクール']));
note.articles.push(new Article('メモリ改竄対策で撃沈', 'http://ntgame.wpblog.jp/2018/05/15/post-1655/', ['ツクール']));
note.articles.push(new Article('ツクールMVでメニューに独自項目を追加する方法', 'http://ntgame.wpblog.jp/2018/07/06/post-1752/', ['ツクール']));
note.articles.push(new Article('ツクールMVでカービィ形式のダッシュを実装する【RxJS】', 'http://ntgame.wpblog.jp/2018/07/17/post-1836/', ['JavaScript', '勉強', 'ツクール', 'Rx']));
note.articles.push(new Article('ウィンドウの下に画像を表示する方法【ツクールMV】', 'http://ntgame.wpblog.jp/2018/08/06/post-1927/', ['ツクール']));
note.articles.push(new Article('シーンにZ座標を実装する', 'http://ntgame.wpblog.jp/2018/08/07/post-1945/', ['ツクール']));
note.articles.push(new Article('ツクールMVで動画のプライオリティをキャラ下にする', 'http://ntgame.wpblog.jp/2018/08/14/post-1968/', ['ツクール']));

note.articles.push(new Article('グローバル関数からインタプリタのインスタンスを操作する方法', 'http://ntgame.wpblog.jp/2018/08/23/post-2001/', ['ツクール', 'JavaScript']));
note.articles.push(new Article('ツクールMVで学ぶ非同期処理【Bitmapのロード】', 'http://ntgame.wpblog.jp/2018/09/17/post-2026/', ['ツクール', 'JavaScript']));
note.articles.push(new Article('Kindleを8ヶ月間使ってみた感想', 'http://ntgame.wpblog.jp/2018/10/07/post-2056/', ['雑記']));
note.articles.push(new Article('Prototypeパターンとプロトタイプについて調べてみる', 'http://ntgame.wpblog.jp/2018/10/18/post-2072/', ['デザインパターン', 'C#', 'JavaScript']));
note.articles.push(new Article('サブクラスサンドボックスパターンについて学んでみる', 'http://ntgame.wpblog.jp/2018/10/21/post-2079/', ['デザインパターン', 'C#']));
note.articles.push(new Article('switch文を消すとは', 'http://ntgame.wpblog.jp/2018/11/21/post-2097/', ['ツクール', 'デザインパターン', 'JavaScript']));
note.articles.push(new Article('Pythonのこと1ミリも知らないけどpyxel使ってみた', 'http://ntgame.wpblog.jp/2018/11/26/post-2108/', ['Python', 'pyxel']));
note.articles.push(new Article('ツクールMVのopacityの注意点もといAlphaFilterを使いたかった話', 'http://ntgame.wpblog.jp/2018/11/27/post-2117/', ['ツクール', 'PixiJS']));

//Unity関連の記事
unity.articles.push(new Article('Mathf.Repeatを使ってみる', 'http://ntgame.wpblog.jp/2017/11/12/post-1182/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('uGUIでスクロール可能なテキストボックスを作る', 'http://ntgame.wpblog.jp/2017/11/27/post-1214/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('uGUIでスクロール可能なテキストボックスを作る　その2', 'http://ntgame.wpblog.jp/2017/11/28/post-1249/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('Unityでキーボードの高速入力に対応する方法', 'http://ntgame.wpblog.jp/2017/12/25/post-1310/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('Unityでえもふりを試してみる', 'http://ntgame.wpblog.jp/2018/05/17/post-1663/', ['C#', 'Unity','勉強', 'えもふり']));
unity.articles.push(new Article('Unityでリップシンク機能を実装してみる', 'http://ntgame.wpblog.jp/2018/05/18/post-1667/', ['C#', 'Unity','勉強', 'えもふり']));
unity.articles.push(new Article('Unityで静的なリップシンクをおこなう', 'http://ntgame.wpblog.jp/2018/05/19/post-1670/', ['C#', 'Unity','勉強', 'えもふり']));
unity.articles.push(new Article('Unity 2018.1でTest Runnerの使い方が変わっていた話', 'http://ntgame.wpblog.jp/2018/05/22/post-1679/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('Zenjectについて学んでみる', 'http://ntgame.wpblog.jp/2018/06/23/post-1726/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('UnityHubを使ってみる', 'http://ntgame.wpblog.jp/2018/06/29/post-1737/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('Visual Studio Tools for Unityのインストール方法（VS2017)', 'http://ntgame.wpblog.jp/2018/07/04/post-1743/', ['Unity','雑記']));
unity.articles.push(new Article('怒りのISerializationCallbackReceiver', 'http://ntgame.wpblog.jp/2018/07/11/post-1758/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('MessagePack for C#を使ってみる ', 'http://ntgame.wpblog.jp/2018/07/16/post-1819/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('MessagePack for C#でPrivateメンバーをシリアライズする', 'http://ntgame.wpblog.jp/2018/07/22/post-1855/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('UIEffectを使ってuGUIにエフェクトをかけてみる', 'http://ntgame.wpblog.jp/2018/07/24/post-1861/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('外部のサーバーから時刻を取得する', 'http://ntgame.wpblog.jp/2018/07/29/post-1875/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('外部のサーバーからテクスチャをダウンロードする', 'http://ntgame.wpblog.jp/2018/07/30/post-1878/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('サーバーに用意したファイルを使ってデータを更新する', 'http://ntgame.wpblog.jp/2018/07/30/post-1884/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('Unity+PHP+JavaScriptで遊んでみる', 'http://ntgame.wpblog.jp/2018/08/08/post-1949/', ['C#', 'Unity','勉強', 'JavaScript']));
unity.articles.push(new Article('Time.timeScaleを0にしたときawaitを使うと進行が止まるバグ', 'http://ntgame.wpblog.jp/2018/09/06/post-2005/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('FungusでImageのSpriteを変更するコマンドを追加する方法', 'http://ntgame.wpblog.jp/2018/10/19/post-2075/', ['C#', 'Unity','勉強']));
unity.articles.push(new Article('FungusのConversationコマンドを改造してみる', 'http://ntgame.wpblog.jp/2018/10/27/post-2084/', ['C#', 'Unity','勉強']));

//ニートが学ぶUniRx
unirx.articles.push(new Article('ニートが学ぶUniRx　入門編その1', 'http://ntgame.wpblog.jp/2018/07/13/post-1766/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　入門編その2', 'http://ntgame.wpblog.jp/2018/07/13/post-1769/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　入門編その3', 'http://ntgame.wpblog.jp/2018/07/13/post-1772/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　入門編その4', 'http://ntgame.wpblog.jp/2018/07/13/post-1775/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　入門編その5', 'http://ntgame.wpblog.jp/2018/07/13/post-1778/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　入門編その6', 'http://ntgame.wpblog.jp/2018/07/14/post-1781/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　入門編その7', 'http://ntgame.wpblog.jp/2018/07/14/post-1786/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　入門編その8', 'http://ntgame.wpblog.jp/2018/07/14/post-1790/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　MV(R)Pパターン', 'http://ntgame.wpblog.jp/2018/07/14/post-1793/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　Observerパターン', 'http://ntgame.wpblog.jp/2018/07/14/post-1796/', ['C#', 'UniRx','勉強', 'デザインパターン']));
unirx.articles.push(new Article('ニートが学ぶUniRx　uGUIとの連携', 'http://ntgame.wpblog.jp/2018/07/15/post-1801/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　UniRxの成り立ち', 'http://ntgame.wpblog.jp/2018/07/15/post-1805/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　ツクールMVでRx', 'http://ntgame.wpblog.jp/2018/07/15/post-1808/', ['Rx','勉強', 'ツクール']));
unirx.articles.push(new Article('ニートが学ぶUniRx　uGUI再び', 'http://ntgame.wpblog.jp/2018/07/16/post-1811/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　UniRxの仕組み', 'http://ntgame.wpblog.jp/2018/07/16/post-1815/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　Everything is a stream', 'http://ntgame.wpblog.jp/2018/07/17/post-1825/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　さらなる改造 ', 'http://ntgame.wpblog.jp/2018/07/17/post-1833/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　コルーチンとの連携', 'http://ntgame.wpblog.jp/2018/07/18/post-1848/', ['C#', 'UniRx','勉強']));
unirx.articles.push(new Article('ニートが学ぶUniRx　C#7.0とUniTask', 'http://ntgame.wpblog.jp/2018/07/19/post-1851/', ['C#', 'UniRx','勉強']));

//ニートが学ぶ非同期処理
async.articles.push(new Article('ニートが学ぶ非同期処理　その1', 'http://ntgame.wpblog.jp/2018/07/31/post-1888/', ['C#', '非同期','勉強']));
async.articles.push(new Article('ニートが学ぶ非同期処理　その2', 'http://ntgame.wpblog.jp/2018/07/31/post-1891/', ['C#', '非同期','勉強']));
async.articles.push(new Article('ニートが学ぶ非同期処理　その3', 'http://ntgame.wpblog.jp/2018/07/31/post-1894/', ['C#', '非同期','勉強']));
async.articles.push(new Article('ニートが学ぶ非同期処理　その4', 'http://ntgame.wpblog.jp/2018/07/31/post-1901/', ['C#', '非同期','勉強']));
async.articles.push(new Article('ニートが学ぶ非同期処理　ロックとデッドロック', 'http://ntgame.wpblog.jp/2018/08/01/post-1904/', ['C#', '非同期','勉強']));
async.articles.push(new Article('ニートが学ぶ非同期処理　Monitorクラス', 'http://ntgame.wpblog.jp/2018/08/01/post-1911/', ['C#', '非同期','勉強']));
async.articles.push(new Article('ニートが学ぶ非同期処理　NativeContainerとC#JobSystem', 'http://ntgame.wpblog.jp/2018/08/02/post-1914/', ['C#', '非同期','勉強']));
async.articles.push(new Article('ニートが学ぶ非同期処理　スレッド処理のキャンセル', 'http://ntgame.wpblog.jp/2018/08/05/post-1921/', ['C#', '非同期','勉強']));
async.articles.push(new Article('ニートが学ぶ非同期処理　Awaitableなオブジェクトを作る', 'http://ntgame.wpblog.jp/2018/08/06/post-1924/', ['C#', '非同期','勉強']));

//C#関連の小ネタ
csharp.articles.push(new Article('C#のイベント機能を勉強してみる', 'http://ntgame.wpblog.jp/2017/12/28/post-1323/', ['C#','勉強']));
csharp.articles.push(new Article('デリゲートについて勉強してみる', 'http://ntgame.wpblog.jp/2017/12/29/post-1328/', ['C#','勉強']));
csharp.articles.push(new Article('C#の拡張メソッドについて勉強してみる', 'http://ntgame.wpblog.jp/2017/12/30/post-1334/', ['C#','勉強']));
csharp.articles.push(new Article('LINQについて勉強してみる', 'http://ntgame.wpblog.jp/2018/01/02/post-1355/', ['C#','勉強']));
csharp.articles.push(new Article('C#で簡単なログインシステムを作ってみる', 'http://ntgame.wpblog.jp/2018/01/04/post-1370/', ['C#','勉強']));
csharp.articles.push(new Article('ニートでもわかった！　ジェネリックの基礎', 'http://ntgame.wpblog.jp/2018/01/16/post-1440/', ['C#','勉強']));
csharp.articles.push(new Article('Json.NETでインターフェイス型のオブジェクトをデシリアライズする', 'http://ntgame.wpblog.jp/2018/04/28/post-1612/', ['C#','勉強']));
csharp.articles.push(new Article('インターフェイスを勉強したい', 'http://ntgame.wpblog.jp/2018/05/02/post-1620/', ['C#','勉強']));
csharp.articles.push(new Article('抽象クラスを勉強したい', 'http://ntgame.wpblog.jp/2018/05/04/post-1626/', ['C#','勉強']));
csharp.articles.push(new Article('Null Objectパターンについて勉強したい', 'http://ntgame.wpblog.jp/2018/05/09/post-1636/', ['C#','勉強', 'デザインパターン']));
csharp.articles.push(new Article('依存性反転の原則について勉強してみる ', 'http://ntgame.wpblog.jp/2018/05/24/post-1683/', ['C#','勉強', 'デザインパターン']));
csharp.articles.push(new Article('抽象化は詳細に依存すべきではないとは', 'http://ntgame.wpblog.jp/2018/05/25/post-1690/', ['C#','勉強', 'デザインパターン']));
csharp.articles.push(new Article('拡張メソッドあれこれ', 'http://ntgame.wpblog.jp/2018/09/26/post-2030/', ['C#','勉強']));
csharp.articles.push(new Article('タプルを使ってみる　おまけで匿名型も', 'http://ntgame.wpblog.jp/2018/10/03/post-2049/', ['C#','勉強']));
csharp.articles.push(new Article('C#で動的型付けを使ってみる（dynamic）', 'http://ntgame.wpblog.jp/2018/10/10/post-2063/', ['C#','勉強']));

//AI関連
ai.articles.push(new Article('AIを作ってみたい', 'http://ntgame.wpblog.jp/2018/02/17/post-1508/', ['C#', 'AI','勉強']));
ai.articles.push(new Article('AIを作ってみたいその2 妥協祭り', 'http://ntgame.wpblog.jp/2018/02/19/post-1518/', ['C#', 'AI','勉強']));

//C#におけるCollectionsの基本のキを理解する
collection.articles.push(new Article('コレクションおよび講座の概要', 'http://ntgame.wpblog.jp/2017/07/10/post-617/', ['C#', '勉強']));
collection.articles.push(new Article('List<T>型について', 'http://ntgame.wpblog.jp/2017/07/11/post-631/', ['C#', '勉強']));
collection.articles.push(new Article('スタックとキューについて', 'http://ntgame.wpblog.jp/2017/07/11/post-638/', ['C#', '勉強']));
collection.articles.push(new Article('Stack<T>クラスを利用する', 'http://ntgame.wpblog.jp/2017/07/11/post-642/', ['C#', '勉強']));
collection.articles.push(new Article('Queue<T>クラスを利用する', 'http://ntgame.wpblog.jp/2017/07/11/post-647/', ['C#', '勉強']));
collection.articles.push(new Article('Dictionary<TKey,​TValue>クラスを利用する', 'http://ntgame.wpblog.jp/2017/07/12/post-653/', ['C#', '勉強']));

//jsonデータにする
const json   = JSON.stringify(genres);