DTPの仕事をしていると、「もっと簡単に連続処理したい」とか「自動化したい」という欲望がわきます。そんなときは、ネットの神々のスクリプトをお借りしているのですが、読めもしないんです。自分でくみ上げられなくても、内容を多少理解せねばならぬと思い、正月にJavascriptの参考書を買いました。
基本的な部分をざっと読んで、最近になって実際に打ち込みながら理解していこうと思ったのですが、全然理解できない。
正直身につかなかったら惨めだから、勉強しているとか言いたくないんですが、本当に、本当に、全然理解できないので、ブログにアウトプットしていこうと思います。
本当に身につかないかもしれないので、表に出したくはないのですが、あえて自分を追い詰めていこうと思います。
functionにifを使った関数を定義する
今やっているのは「関数を使ってみよう」というところです。
その前までに、配列とfor文をやってました。
全く理解できない。
例として「4文字以上の単語を頭文字3文字に省略するのにはifを使いますが、functionに定義して関数を呼び出して汎用的に使いましょう」というようなものです。
let sweets1 = "シフォンケーキ"
let sweets2 = "ガトーショコラ"
let sweets3 = "タルト"
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)
これは分かった。参考書もとても分かりやすく書いてくれていて大変助かります。ありがとうありがとう。
これでいうとsweetsCheckという関数にsweets1、sweets2・・・といった変数や「レアチーズケーキ」といった単語を処理させることができるということか・・・。
きっとreturnで返り値を設定できるってことを示すためにここで出してくれてるんだろうなと思うんですが、素人的には↓じゃダメなんだろうか・・・って感じになってしまいます。
function sweetsCheck_2(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 = ["タルト","フルーツ","さくさく"]
こういう配列を用意してみました。
参考書は天気や果物を例にしてるんですが、私はケーキが好きなので全部ケーキに変換しています。
この配列から、例えば、「さくさく」を含む配列なら「このケーキをおすすめします」という風にしてみようと思いました。
に対して、
function sweeets_seibunCheck(sweets_seibun){
if(Check){console.log(sweets_seibun[1]+
"をおすすめします")}
else{console.log(sweets_seibun[0]+"はおすすめしません")}
}
sweeets_seibunCheck(sweets_seibun2)
「sweets_seibun2」は「しっとりガトーショコラ」なので、「ガトーショコラはおすすめしません」となりました。
なるほどなるほど。こんな感じこんな感じ。
のところで「Check」という変数を作って「true」と「false」で別の操作をさせることができるみたいだ・・・。
sweeets_seibunCheck(sweets_seibun3)
↑だと「true」がはいるので「おすすめします」になると・・・。
なるほど、なるほど。
ということは、「let sweets_konomi = "さくさく"」をHTMLのフォーム入力から取得してHTML上に表示することもできるのでは?
フォーム入力から配列を表示する。
まず、「sweeets_seibunCheck(sweets_seibun3)」ていう指定の仕方だと、一つの配列しか見てません。なら4つの配列をまとめて、
としてみようかな。
まず、コンソールに出力してみよう・・・。
for (let k = 0 ; sweets_matome.length > k; k++){
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]+"はおすすめしません")}
}
え~と、これをHTMLに出力するには、「input」にidを指定して・・・、
<label>あなたの好きなものは?
<input type="text" id="sukinasweets" onchange="getsweets()">
<p id="Osusumesimasu2"></p>
として、「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++){
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]+"はおすすめしません!"}
}
}
こんな感じ?
できた!
このフォームのところは選択式にしてもいいけど、まったくあさってな単語入れると
ってでるな…。
そうか!最後のやつしか出力されてないんだな!?
let sweets_seibun1 = ["シフォンケーキ","たまご","ふわふわ"]
let sweets_seibun2 = ["ガトーショコラ","チョコ","しっとり"]
let sweets_seibun3 = ["タルト","フルーツ","さくさく"]
を例えば「sweets_seibun3」の「フルーツ」を「クリーム」に書き換えたら、
let sweets_seibun3 = ["タルト","クリーム","さくさく"]
ってなるのか…。やっぱり最後のやつしか出力されないんだな…。
else{Osusumesimasu2.innerText = "あなたにおすすめするケーキはありません"}
あさってな単語が入ったときはこうすれば不自然じゃないな…。
じゃあ、どうしようかな…。
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(
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
}
「と」を消すための「.slice(0,Osusume1.length-1)」の工作が痛い…。
しかもこれだと、あさってな単語が入ると、
ってなっちゃう…。「else」使って単純に
if(Check_matome){let = Osusume2 = sweets_matome[k]
Osusume1 = Osusume2[1]+"たっぷりの"+Osusume2[2]+Osusume2[0]+"と"}
else{Osusume1 = "はおすすめしません"}
ってするわけにもいかないし…。全然理解できない。
の繰り返しだな…。ネットの神々、マジ尊敬するな…。
仕方ないから「for」を追加して、
for (let k = 0 ; sweets_matome.length > k; k++){
let Check_matome1 = sweets_matome[k].some(
Osusumeganai
if(!Check_matome1){Osusumeganai = 0}
にして、最後に
if(Osusumeganai="0"){
Osusumesimasu2.innerText = "あなたにおすすめするケーキはありません。"}
を追加して
としてみる…。
なんか不格好なことは分かる。
ここまでやるのに6時間くらいかかってるので、本当に身につく気がしません。
参考書にはこの単元が120分とか書いてあるけど、ここまでで3分の2くらいしか進んでない…。どんだけ頭いい人を想定しているのjか…。
でも、「ブログに書くから確かめよう」と思うと、考えがまとまる気がするし、やってみたことがちゃんとできたか、できなかったかをすぐに振り返ることができた気がします。