魔改造コード解説【寄り道】

2日前(2024.2.28時点)までコードのコの字も理解していなかったものの記録。
随時書き足す予定地。

特によくわからなかったところ

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTM Lの文字化け対策のおまじない。metaはUTF-8の枕詞。

*{ box-sizing: border-box; }
textarea { width: 100%; }
画面目一杯に表示するよ！あとで全体のサイズ調整もここで出来るよ(*=全ての要素に適応させる)

async function yapifuri(query) {
yapifuriって名前が可愛い。コード書いた人がつけた関数name。「yahooAPIrubifuri」多分。
Y!のAPIテキスト解析がCORS対応したから、それを導入するための文。
await fetch(url,{method,mode,body})
↑すぐ後に入っている「fetch」これが「ドンドンドン！開けてください！CORS対応ありがとうございますAPIリクエストです！」と「Y!APIにリクエストかけに行くワード」。
fetchにはmodeが必要。「mode: 'cors'」がよく分からないけど重要らしい。
「CORSってなーんだ？」に答えてくださっていた方がいた▼

CORSまとめ - Qiita

const
定義。この説明があるものは他に変動しないです。っていう宣言。
今回のコードの中では
const text = document.querySelector("#input-text").value;
ドキュメントである「インプットテキスト(ルビを振りたい文章)」を参照することを「テキスト」と定義するよ。ってことだと思う。
その後の
const j = await yapifuri(text);
yapifuri(yahooAPI)を行った「テキスト」をこれから「ｊ」と定義するよ。

　querySelector()
()の中身をHTMLから参照

付け焼き刃をつけた後、変えたいところを突き止めた

if (!j || !j['result']['word']) return;
          document.querySelector("#output-text").value =
              j['result']['word'].map(
                  x => x['surface'] + (x['furigana'] ? '(' + x['furigana'] + ')' : '')
              ).join("");

″もし、「ｊ」じゃない、または「ｊ」の『result(y!API流「ふりがなをつけた結果』の意味)」か『word(y!API流「単語のリスト」)』でもなかったら、以下の行動を行なってね。″
「アウトプットテキスト(ルビ付き文章を出力する場所)に、yapifuriで「ふりがなをつけた結果」とを「単語のリスト」を参照してね。そこから、漢字(surface)+ふりがな(furigana)はかっこで囲んで、それ以外を繋げる(join)するように。」
map()メソッドはコピーメソッドで、オブジェクト(今回は文章の順番)を変えることはなく関数(今回は漢字・ひらがな・カタカナなどの表示を変える)を変えて出力できるらしい。順番は変えず配列を替える。(?)

⚠️ここを変えたい⚠️
このままでは「ルビを振る」→「ルビ(るび)を振る(ふる)」になってしまう.…これ！送り仮名にはルビはいらない。あとできればカタカナにもルビを振りたくない。

こう書いておきながらかなり良く分かっていない。
if (!j || !j['result']['word']) return; document.querySelector("#output-text").value =
▲おおよそ「ｊかｊのresultとwordでなければ=の後の条件に従ってアウトプットテキストに出力せよ！」という文だと思うからまずは放置。

大きな問題はこっち
j['result']['word'].map( x => x['surface'] + (x['furigana'] ? '(' + x['furigana'] + ')' : '') ).join("");

map()はｊの文字の順番を変えないけど()の条件に従って出力を変更するよって話だったはずだが、

x => x[]+(x?+x:″)

このx?とx:と″がわからない。
なんで「″」がこんなところについているんだ…

条件 (三項) 演算子というらしい。
なんて…?
…もしかして、そもそも考え方が間違ってる！？
【条件】?【当てはまる】:【当てはまらない】
つまりif文の親戚…!というか別の顔！

(x   ?   +x   :   ″ )

x は、【ルビ】
+x は、 【(ルビ)】
″ は、「″」ではなく「′」と「′」で、【】
x => x[]+(x?+x:'')
つまり『(=>左の)ｘは「ルビ」ですか？(はい▶️)「+(ルビ)」にして。(いいえ▶️)なにもテキストを書かないで。』という話だ。

やりたいのは【漢字+(ルビ)+送り仮名】
『X(送りがな付き漢字)は「ルビではないですか」？(はい▶️)''
　(いいえ▶️)「漢字」ではないですか？(はい▶️)「送り仮名」
　(いいえ▶️)「漢字」+(ルビ)』
なんか違うな…要検討

現在【送りがな付き漢字＋(漢字ルビ＋送りがな)】
j['result']['word'].map
( x => x['surface'] +
(x['furigana']
? '(' + x['furigana'] + ')'
: '') ).join("");

▼
x[′′]

その他メモ

現状、onclick(ボタン)の先がkaiseki()で、kaiseki()の中で定義したjがyapifuriを引用してgrade1のみの返事をするようになっている。
つまりボタンを押すこととプルダウンが繋がってない。