for文内にfetch書きたい時どうするか。

覚書です。

間違えたやつ

これが間違えたコードです。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    var articleDate, articlePath;

    for(var i = 0; i < r.length; i++) {
        articleDate = r[i].date;
        articlePath = r[i].path;
    
        fetch(articlePath)
        .then(response => response.text())
        .then(htmlString => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(htmlString, "text/html");

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

これrって変数に入ってるJSONデータをfetch内で使いたかったんですけど、
fetch内でのarticleDateとarticlePathの中身が全部最後の要素になってしまってました。

これの原因がFetch文の仕様にあって、fetch文はいわゆる「非同期処理」というもので

非同期処理とは、あるタスクを実行をしている際に、他のタスクが別の処理を実行できる方式のことをいいます。 データベースから値を取得する際、通信状況によって取得まで時間がかかる処理とされています。 この時間のかかる処理を、シングルスレッドで実行すると、実行中は他のタスクを行うことができなくなります

Wantedly より

っていう感じになってます。
つまりFetchが実行している最中は何か処理することができないのです。
だからfor文のループがfetchを無視してしまい、fetch文を実行したときにはfor文のループが終わってしまっているっていうことです。

解決策

解決策です。
forループでletを使って変数を定義しましょう。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    for(var i = 0; i < r.length; i++) {
        let articleDate = r[i].date;
        let articlePath = r[i].path;
    
        fetch(articlePath)
        .then(response => response.text())
        .then(htmlString => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(htmlString, "text/html");

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

これでOK。

「innerHTML指定してるのにHTMLが変わらねぇ！？」←これの対処法。

覚書です。

何をしたかったか

Javascriptにてブログを作っててすべての記事のデータを取得して、それをHTML上に表示するプログラムを作っていました。
プログラムの流れとして

1. document.getElementByClassNameを使って記事を表示させるところのHTMLの要素を取得
2. 記事のデータを取得（ここは問題ない）
3. 取得した記事のデータを①に反映

って感じに作ってました。
そして実際の問題があった部分のコードがこちらです。

const MainContents = document.getElementsByClassName("main_contents");
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ここが②のコード（割愛）
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
for(var i = 0; i < articleData.length; i++) {                          //articleDataってのがブログの記事のデータです
    MainContents.innerHTML += "<div class='article_title'>"+articleData[i].title+"</div>";
}

では、このコードのどこが間違っていたかを解説していこうと思います。

原因

まず何が原因だったかというと、getElementByClassNameの仕様がわかっていなかったためです。

getElementsByClassNameは引数として

• 指定したHTMLの要素
• 指定した要素のHTMLCollection

という2つのものを返します。

はい。勘のいい方ならここでお気づきになったと思います。
getElementByClassNameは引数が配列なのです。

なのでinnerHTMLを指定する前に配列の要素を操作するために必要な[index]をつけなければいけないのです。

まとめ

まとめです。

• getElementsByClassNameの引数は配列であるため、操作を行う際はインデックスを指定する必要がある

vimにて「E576: Error while reading ShaDa file: last entry specified that it occupies 42 bytes, but file ended earlier」というエラーが出た時の対処法。

覚書です。

対処法

まず、結論から行くとshadaファイルを消しましょう。
これですべて治ります。

shadaファイルってのがvimの終了時に状態を記録するviminfoっていうファイルのエイリアスらしくて、
そのファイルが何等かの原因で破損とかしてるからエラーが出るそうです。
なので消してあげましょう。

neovimのshadaファイルはC:\Users\ユーザー名\AppData\Local\nvim-data\shadaにあります

【osu】モード別pp表示の方法。

こんにちは、おじさんです。

皆さん、Osu楽しんでいますか？
私はOsuよりもtaikoを主にプレイしていたのですが、画面右下のプロフィールのPPが一向に増えなくて少し困ってました。

なので今日は最近気づいたOsuでのtaikoなどのモード別ppの表示方法について解説ってほどではありませんがしゃべっていこうと思います。

ppとは

「そもそもppって何？」って方へ。

Performance point（pp）とは、プレイヤーがRanked, Approvedの各譜面をクリアした際に自動的に計算される値。
それぞれの譜面で得たppから各プレイヤーの合計ppが計算され、それに基づいて世界ランクが決定される。

osu! wikiより

簡単に言えばこれの値が大きければ大きいほど上手なプレイヤーだということです。
PPを貯めてくのもモチベアップにつながると思います。

表示方法（ゲーム内）

続いて表示方法です。





このOsuのマークがあるところをクリックしてPPを表示したいモードを選ぶだけです。
なぜ気づけなかったんだ...

表示方法（プロフィール）

続いてはオンラインのプロフィールでの表示方法です。





プロフィールを開いたら右上の方に各モードのアイコンが表示されていると思います。
そこの表示したいアイコンをクリックすることでPPや世界ランクなどが出てきます。

 補足：メインのゲームモードの変更


先ほどプロフィールの右上の各モードのアイコンの画像を見せましたが、
osuモードのアイコンに星マークがついていたと思います。

これは「Osuモードがあなたのメインのゲームモードです」という意味です。
このメインモードを変えることでゲーム内でのデフォルトでのPP表示するゲームモードを変えることができます。

まとめ

まとめです。

• osuでゲームモード別にPPを表示させるにはゲーム内の左下のアイコンから選択

「ブログを始めてはいいものの...」ブログ始めてからやるべきこと。

こんにちは、おじさんです。
今回ははてなブログのGoogle Search Consoleの設定方法について解説していきます。

Google Search Consoleとは

そもそもGoogle Search Consoleって何なの？っていう方もいるでしょう。
Google Search Consoleというものは、

Google Search Console は、Google 検索結果でのサイトの掲載順位を監視、管理、改善するのに役立つ Google の無料サービスです。
Google Helpから

だそうです。
なんやら難しいこと書いてますが、Googleで検索すると自分のサイトが出てくるようになるだけです。

Google Search Consoleの設定

次に設定していきます。
まずGoogle Search Consoleを開いてください。





開けたら画像のように左側から「プロパティを追加」を選択してください。





そしたら左側のドメインていう方じゃない「URLプレフィックス」っていう方に自分のサイトのURLを張り付けてください。





そしたら「その他の確認方法」から「HTMLタグ」ってのを開いて、contentの後のダブルクォーテーションで囲われてる文字列をコピーしてください。





コピー出来たらはてなブログに移って、「設定」から「詳細設定」の順に開きます。
開けたらスクロールしてって「Google Search Console（旧 Google ウェブマスターツール）」ってところにさっきコピーしたものを張り付けます。
そしたら保存するを押してください。

そしたらGoogle Search Consoleに戻って確認を押したら初期設定は完了です。

サイトマップの設定

初期設定はこれで完了したのですが、これだけだと検索で自身のサイトを出すために毎回手動で設定する必要があります。
なので自動でサイトを出すためにサイトマップを設定していきます。





Google Search Consoleを開いたら左側から「サイトマップ」という欄を開いて「サイトマップのURLを入力」ってところに

• sitemap.xml
• sitemap_index.xml

を入力してください。
これで設定は完了です。