ブリーフは純白

ブリーフをかぶった変態の独り言。インデザインや組版、デザインとか色とか、そういう界隈のこと。

【Javascript勉強中】複数の配列を比較する

DTPの仕事をしていると、「もっと簡単に連続処理したい」とか「自動化したい」という欲望がわきます。そんなときは、ネットの神々のスクリプトをお借りしているのですが、読めもしないんです。自分でくみ上げられなくても、内容を多少理解せねばならぬと思い、正月にJavascriptの参考書を買いました。

基本的な部分をざっと読んで、最近になって実際に打ち込みながら理解していこうと思ったのですが、全然理解できない。

正直身につかなかったら惨めだから、勉強しているとか言いたくないんですが、本当に、本当に、全然理解できないので、ブログにアウトプットしていこうと思います。

本当に身につかないかもしれないので、表に出したくはないのですが、あえて自分を追い詰めていこうと思います。

f:id:bliblibli-fu:20210913094719p:plain

functionにifを使った関数を定義する

今やっているのは「関数を使ってみよう」というところです。

その前までに、配列とfor文をやってました。

全く理解できない。

例として「4文字以上の単語を頭文字3文字に省略するのにはifを使いますが、functionに定義して関数を呼び出して汎用的に使いましょう」というようなものです。

let sweets1 = "シフォンケーキ"
let sweets2 = "ガトーショコラ"
let sweets3 = "タルト"
let sweets4 = "ミルフィー"
function sweetsCheck(sweets){
    if(sweets.length >= 4){return sweets.substring(0,3)}
    else{return sweets}}
let sweetsCheck1 = sweetsCheck(sweets1)
let sweetsCheck2 = sweetsCheck(sweets2)
let sweetsCheck3 = sweetsCheck(sweets3)
let sweetsCheck4 = sweetsCheck(sweets4)
let sweetsCheck5 = sweetsCheck("レアチーズケーキ")
console.log(sweetsCheck1)
console.log(sweetsCheck2)
console.log(sweetsCheck3)
console.log(sweetsCheck4)
console.log(sweetsCheck5)

f:id:bliblibli-fu:20210913095350p:plain

これは分かった。参考書もとても分かりやすく書いてくれていて大変助かります。ありがとうありがとう。

これでいうとsweetsCheckという関数にsweets1、sweets2・・・といった変数や「レアチーズケーキ」といった単語を処理させることができるということか・・・。

f:id:bliblibli-fu:20210913100549p:plain

きっとreturnで返り値を設定できるってことを示すためにここで出してくれてるんだろうなと思うんですが、素人的には↓じゃダメなんだろうか・・・って感じになってしまいます。

function sweetsCheck_2(sweets){
    if(sweets.length >= 4){console.log(sweets.substring(0,3))}
    else{console.log(sweets)}}
sweetsCheck_2(sweets1)
sweetsCheck_2(sweets2)
sweetsCheck_2(sweets3)
sweetsCheck_2(sweets4)
sweetsCheck_2("レアチーズケーキ")

全然理解できない。自分の頭の悪さに悲しくなる。

returnがないと「let sweetsCheck1 = sweetsCheck(sweets1)」で変数を定義したときに「undefined」になってしまったので、返り値というのはこいういところに入ってくる値なんだとういうフワッとした理解しかできません。

ここで、ふと、配列にも使ってみようと思いました。

教えてもらったことを別のことにも使ってみよう、今すぐに。ってやっていたら全然参考書が進みませんが、性分なので仕方ありません。

早速配列で使ってみよう

let sweets_seibun1 = ["シフォンケーキ","たまご","ふわふわ"]
let sweets_seibun2 = ["ガトーショコラ","チョコ","しっとり"]
let sweets_seibun3 = ["タルト","フルーツ","さくさく"]
let sweets_seibun4 = ["ミルフィー","クリーム","パリパリ"]

こういう配列を用意してみました。

参考書は天気や果物を例にしてるんですが、私はケーキが好きなので全部ケーキに変換しています。

この配列から、例えば、「さくさく」を含む配列なら「このケーキをおすすめします」という風にしてみようと思いました。

let sweets_konomi = "さくさく"

に対して、

function sweeets_seibunCheck(sweets_seibun){
    const Check = sweets_seibun.some(function(sweets){
return sweets === sweets_konomi})
   if(Check){console.log(sweets_seibun[1]+
"たっぷりの"+sweets_seibun[2]+sweets_seibun[0]+
"をおすすめします")}
else{console.log(sweets_seibun[0]+"はおすすめしません")}
}
sweeets_seibunCheck(sweets_seibun2)

sweets_seibun2」は「しっとりガトーショコラ」なので、「ガトーショコラはおすすめしません」となりました。

f:id:bliblibli-fu:20210913102256p:plain

なるほどなるほど。こんな感じこんな感じ。

const Check = sweets_seibun.some(function(sweets){return sweets === sweets_konomi})

のところで「Check」という変数を作って「true」と「false」で別の操作をさせることができるみたいだ・・・。

sweeets_seibunCheck(sweets_seibun3)

↑だと「true」がはいるので「おすすめします」になると・・・。

f:id:bliblibli-fu:20210913103018p:plain

なるほど、なるほど。

ということは、「let sweets_konomi = "さくさく"」をHTMLのフォーム入力から取得してHTML上に表示することもできるのでは?

フォーム入力から配列を表示する。

まず、「sweeets_seibunCheck(sweets_seibun3)」ていう指定の仕方だと、一つの配列しか見てません。なら4つの配列をまとめて、

let sweets_matome = [sweets_seibun1,sweets_seibun2,sweets_seibun3,sweets_seibun4]
console.log(sweets_matome)

f:id:bliblibli-fu:20210913102008p:plain

としてみようかな。

まず、コンソールに出力してみよう・・・。

for (let k = 0 ; sweets_matome.length > k; k++){
    let Check_matome = sweets_matome[k].some(function(sweets){
return sweets === sweets_konomi})
    if(Check_matome){let Osusume = sweets_matome[k]; 
console.log(Osusume[1]+"たっぷりの"+Osusume[2]+Osusume[0]+
"をおすすめします")}
    else{let Osusumeshinai = sweets_matome[k]; 
console.log(Osusumeshinai[0]+"はおすすめしません")}
}

f:id:bliblibli-fu:20210913110113p:plain

え~と、これをHTMLに出力するには、「input」にidを指定して・・・、

<label>あなたの好きなものは?
  <input type="textid="sukinasweetsonchange="getsweets()">
            
<p id="Osusumesimasu2"></p>

f:id:bliblibli-fu:20210913110327p:plain

として、「change」になってときの処理をJavascriptで設定するから・・・、入力したら「getsweetse」に「sukinasweets」が入るようにして・・・、

const getsweets = () => {
    const sweets_konomi2 = document.getElementById("sukinasweets")

今まで「let sweets_konomi = "さくさく"」を使っていたところをさっきフォーム入力から取得してきた「sweets_konomi2.value」に変更して・・・、

for (let k = 0 ; sweets_matome.length > k; k++){
        let Check_matome = sweets_matome[k].some(function(sweets){
      return sweets === sweets_konomi2.value})
        console.log(Check_matome)
        if(Check_matome){let Osusume2 = sweets_matome[k]; 
      Osusumesimasu2.innerText = Osusume2[1]+"たっぷりの"+
      Osusume2[2]+Osusume2[0]+"をおすすめします!"}
        else{let Osusumeshinai = sweets_matome[k]; 
      Osusumesimasu2.innerText = Osusumeshinai[0]+"はおすすめしません!"}
    }
}

こんな感じ?

f:id:bliblibli-fu:20210913110921p:plain

できた!

f:id:bliblibli-fu:20210913111038p:plain

このフォームのところは選択式にしてもいいけど、まったくあさってな単語入れると

f:id:bliblibli-fu:20210913111148p:plain

ってでるな…。

そうか!最後のやつしか出力されてないんだな!?

let sweets_seibun1 = ["シフォンケーキ","たまご","ふわふわ"]
let sweets_seibun2 = ["ガトーショコラ","チョコ","しっとり"]
let sweets_seibun3 = ["タルト","フルーツ","さくさく"]
let sweets_seibun4 = ["ミルフィー","クリーム","パリパリ"]

を例えば「sweets_seibun3」の「フルーツ」を「クリーム」に書き換えたら、

let sweets_seibun3 = ["タルト","クリーム","さくさく"]

f:id:bliblibli-fu:20210913111432p:plain

ってなるのか…。やっぱり最後のやつしか出力されないんだな…。

else{Osusumesimasu2.innerText = "あなたにおすすめするケーキはありません"}

あさってな単語が入ったときはこうすれば不自然じゃないな…。

f:id:bliblibli-fu:20210913111620p:plain

じゃあ、どうしようかな…。

const getsweets = () => {
    const sweets_konomi2 = document.getElementById("sukinasweets")
    let anataniha = "あなたには"
    let Osusume1 =""
    for (let k = 0 ; sweets_matome.length > k; k++){
        let Check_matome = sweets_matome[k].some(
      function(sweets){return sweets === sweets_konomi2.value})
        anataniha += Osusume1
        if(Check_matome){let = Osusume2 = sweets_matome[k]
        Osusume1 = Osusume2[1]+"たっぷりの"+Osusume2[2]+Osusume2[0]+""}
    }
    let AnataniOsusume = anataniha += Osusume1.slice(0,Osusume1.length-1)+
     "をおすすめします"
    Osusumesimasu2.innerText = AnataniOsusume
}

f:id:bliblibli-fu:20210913130941p:plain

「と」を消すための「.slice(0,Osusume1.length-1)」の工作が痛い…。

しかもこれだと、あさってな単語が入ると、

f:id:bliblibli-fu:20210913131011p:plain

ってなっちゃう…。「else」使って単純に

if(Check_matome){let = Osusume2 = sweets_matome[k]
        Osusume1 = Osusume2[1]+"たっぷりの"+Osusume2[2]+Osusume2[0]+""}
else{Osusume1 = "はおすすめしません"}

ってするわけにもいかないし…。全然理解できない。

f:id:bliblibli-fu:20210913131710p:plain

の繰り返しだな…。ネットの神々、マジ尊敬するな…。

仕方ないから「for」を追加して、

    for (let k = 0 ; sweets_matome.length > k; k++){
        let Check_matome1 = sweets_matome[k].some(
       function(sweets){return sweets === sweets_konomi2.value})
        Osusumeganai
        if(!Check_matome1){Osusumeganai = 0}

にして、最後に

if(Osusumeganai="0"){
   Osusumesimasu2.innerText = "あなたにおすすめするケーキはありません。"}

を追加して

f:id:bliblibli-fu:20210913134146p:plain

としてみる…。

なんか不格好なことは分かる。

ここまでやるのに6時間くらいかかってるので、本当に身につく気がしません。

参考書にはこの単元が120分とか書いてあるけど、ここまでで3分の2くらいしか進んでない…。どんだけ頭いい人を想定しているのjか…。

f:id:bliblibli-fu:20210913135115p:plain

でも、「ブログに書くから確かめよう」と思うと、考えがまとまる気がするし、やってみたことがちゃんとできたか、できなかったかをすぐに振り返ることができた気がします。

f:id:bliblibli-fu:20210913135315p:plain