JavaScriptメモ 鬼滅をキルミーにするやつ

  

 JavaScript勉強中なんでどうやってるのか調べたんですが、よくわかりませんでした。

 コードシンプルだし恐らく割と初歩的なんだと思います。

  JS、なにもわからん。

  以下コード

javascript:(function(){document.body.innerHTML=document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');})()

Dropbox - kimetsu2kmb.txt - Simplify your lifeより

 

コードバラして1個ずつ把握していきましょう。

 なお、あってるかどうかは保証しない。 

  以下、コードの中で青字・太文字で書かれてる部分がこれから言及するコード、

   赤字で書かれるコードは言及済みのコードとなる。

 

javascript:

(function(){

document.body.innerHTML=document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');

})()

 javascript:~

そもそもこれは、

①ブラウザでのブックマークで上記のコードをURL部分にコピペ

 ②任意のウェブページを見てる歳にコードを貼ったブックマークをクリック

  ③見ているページにJavaScriptのコードが作動する、という仕組み。

ブックマークレットというらしい。

ブックマークレットの仕組みと使い方 | ライフハッカー[日本版]

javascript:

(function(){

document.body.innerHTML=document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');

})() 

②function(){中略}

function 関数A (引数){処理}はJSの初歩的な関数。

 関数Aは{}内の処理をする関数となる。

  関数A();で処理が実行される。

今回の場合、関数名を置いてない無名関数となる。

 

javascript:

(function(){

document.body.innerHTML=document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');

})() 

③(function(){中略})()

上記のfunction(){中略}が(と)()に囲まれていることで、

 即時関数と言って定義と同時に処理を行うっぽい

JavaScriptで即時関数を使う理由 - Qiita

 function定数(){}と定数A();を同時に行うってイメージでいいのかな?

【JavaScript】無名関数とは/即時関数とは - Qiita

1回きりしか使わない関数なので、名前をつける必要がない(=無名)ということ。

 無名関数は、実は即時関数の一種。
即時関数はプログラムを即時実行できる点がメリット。

今回のように、1行だけのシンプルなプログラミングを処理するときは

 無名関数と即時関数が使われるんですね。

 

あとは{}内の中略、つまり実際に行われる処理なんだけど、

 document.body.innerHTML=

 document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');

  と、なんだか同じ表記が繰り返されててよくわからない。

これもバラして確認してみる。

 

javascript:

(function(){

document.body.innerHTML=

document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');

})() 

 ④.replace(変更前,変更後);

replace関数

( 文字列 ).replace ("文字列の一部" , "置換後の文字列")で、文字列の中の一部を置換できる。

JavaScript replaceメソッドを使ったHTMLの置換

 

今回のコードでは、「document.body.innerHTML」の中の「鬼滅」が「キルミー」に、

 「の刃」が「ベイベーとなる。

/鬼滅/g

変換する「鬼滅」を/と/gで囲む。

 gはglobalを意味する。

  これがないと、最初の「鬼滅」の文字列を変換したら処理が終了するが、

   gがあれば文字列のすべての鬼滅をキルミーに置換する。

 

javascript:

(function(){

document.body.innerHTML=

document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');

})()  

 ⑤document.body.innerHTML

ここでreplaceによって変換の対象となる文字列は document.bodyの部分。

document

 →ブラウザに読み込まれたウェブページ全体

document.body

 →その中のbodyタグに含まれているもの(表示されている物すべて)

Document - Web API | MDN

.innerHTML

 要素内の HTML (ここではbodyタグに含まれている者すべて)を取得・設定する。

element.innerHTML - Web API | MDN

documentの中のbodyがinnerHTMLによってHTMLが習得され、その中の鬼滅がreplace関数でキルミーに変換される。

 

 javascript:

(function(){

document.body.innerHTML=

document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');

})()  

 ⑥document.body.innerHTML=

要素.innerHTML =~で、elementのHTMLを=以降の~に変換できる。

ここでの要素はdocument.bodyなので、

 元のdocument.bodyを、

   document.bodyの一部文字列をreplaceしたものに置き換える。

これによってウェブページの「鬼滅の刃」が「キルミーベイベー」になる。

 

めでたしめでたし。

 最初のdocument.body.innerHTML=って必要なの?

調べる上で引っかかったところ。

 =以後の「document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');」で

  文字が置換されているのだから、

  「元々のページを」「文字列置換以後に変換する」の

   「元々のページを」って部分必要なの?という疑問。

javascript:(function(){document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');})()

 だけではだけではダメなのかという。

「.replace」が文字列の変換をしただけでブラウザ上の表示には関与せず、実際表示されているdocument.body.innerHTMLにdocument.body.innerHTML.replaceを代入するという認識でいいのだろうか。

 「変数 = 辺数 +1」を「変数+1」と書いても作動しないように。

まぁ今はそういうもんだととりあえず覚えておく。