初心者なりにjavascriptでWEBアプリ作成してみた

こういうのをWEBアプリかっつーとよく分からないですけど…。

時候の挨拶生成器

これです。
数値をHTMLページから取得して計算、出力程度の簡単なアプリをやってみたかったので。
概ね自分がつまずいたところのメモです。

##作ったきっかけ
ビジネスでよく書類送るときに入れる挨拶みたいなのありますよね？送り状とかいう、開封してすぐ捨てるやつ。正直紙の無駄。

拝啓　〇〇の候　貴社におかれましては～
下記についてご送付いたします。よろしくご査収下さいますようお願い申し上げます。

の、○○の候って、あると上品な感じが出るんだけど、
いちいち調べるの面倒くさいんで、ランダムで生成するアプリがほしいなと思って作りました。
時間もないしわざわざ調べるの面倒だな～って就活生にも使えるかもしれません。笑

##この時点での知識

• 昔からHTMLは弄っていた。CSSは勘で弄っていて、色を変えたりボーダー変えたり程度のレベルだった。HTML5&CSS3を改めて勉強して、flexboxに感動した。
• Codecademyのpythonコースを終えている
• progateやcodeprepのHTML5&CSS3コースを適当に周回した
• Codecademyのjavascriptコースを終えている

プログラミング初心者の人はすぐに使わなくてもpythonから勉強することをおすすめしたいんだけれど
（構文が非常に簡単なので、オブジェクト指向の考え方の吸収に集中できる。記述ルールも結構厳密なので迷うポイントが少ない）、
Codecademy以外に基礎をばーっと教えてくれる無料サイトが日本語ではほとんど見当たらないのが痛いですね…。
codeprepにはいくつかコースがあるけれど、少し分かりづらいサイトの印象。
有料ならProgateあたりでしょうか？Progateは本当に教え方がうまい。

##HTML側の構成
idを指定し（cssで盛るにももちろんですが、javascript側で値を取得するのに必要です）、
ドロップダウンの選択肢で値を作っておきます。

<select id='monthA'>
  		<option value= 1 >1月</option>
  		<option value= 2 >2月</option>
  		<option value= 3 >3月</option>
			<option value= 4 >4月</option>
			<option value= 5 >5月</option>
			<option value= 6 >6月</option>
			<option value= 7 >7月</option>
			<option value= 8 >8月</option>
			<option value= 9 >9月</option>
			<option value= 10 >10月</option>
			<option value= 11 >11月</option>
			<option value= 12 >12月</option>
		</select>

選んだ後ボタンで実行させたかった（連打するとランダム生成しまくれる）ので、
javascript実行のためのボタンも作成します。

<button onclick="printJikou()">生成！</button>

onclick=" "でクリック時の挙動を設定。
printJikou()はjavascript側のfunctionを指定してます。

そして結果を出力するためのテキストボックス。

<textarea id= "copyTarget" readonly>生成ボタンを押すたびにランダムで変わります。</textarea>

自由に入力が効く状態にしておくとjavascriptが動かなくなるので、readonlyと記述して読み込み専用の状態にしておきます。

んで、適当にCSSで盛ります。
出来上がりがこれです。

##javascript側の構成
これぐりぐり弄ってて思ったんですけど、javascriptってクッソ楽しいですね。
書いたら速攻でサイトに結果が出るのが最高。

#####まず挨拶オブジェクトを作ります。

const allSeason = {
  haikei: '拝啓　',
  atena: '貴社',
  aisatsu: ['ますますご発展のこととお慶び申し上げます。', 'いよいよご隆盛のことと存じます。', 'ますますご繁栄のこととお慶び申し上げます。', 'ますますご清栄のこととお慶び申し上げます。']
};

const january = {
  jikouOne: ['初春の候　', '新春の候　'],
  jikouTwo: ['寒風の候　', '厳寒の候　']
};

allSeasonオブジェクトには全ての季節に共通する挨拶をしまい、
januaryオブジェクトには１月の挨拶を上旬と下旬で分けています。

後から勉強して、new Date()とかで日付取得して二十四節気に基づく厳密な小寒とかからの挨拶も作れたなと思ったんですけど、この時点では知らなかった＆手間がヤバい（というか１年毎に微妙にズレる…）ので、上旬と下旬でざっくり分けられるような比較的無難なやつを選んだつもりです。

ブツを作ったらあとは
①出力箇所を決めて
②仕分けルールを作り
③出力させます。

#####出力箇所の決定

const targetText = document.getElementById("copyTarget");

以上です。
targetTextはHTML上でcopyTargetというidを持つ要素であるという宣言です。
HTML上からid要素を探し出してきてくれるのがgetElementById(" ")です。
つまり以後このjavascriptプログラム中でtargetTextと言及したら、このidを持つtextareaが指定されます。

#####仕分けルール

function printJikou(){

  let selectedM = document.getElementById('monthA').value;
  let selectedD = document.getElementById('daysA').value;

  if (selectedM === '1' && selectedD === '1'){
    let masumasu = allSeason.aisatsu[Math.floor(Math.random() * 4)];
    let migiri = january.jikouOne[Math.floor(Math.random() * 2)];
    targetText.innerHTML = allSeason.haikei + migiri + allSeason.atena + masumasu;

  } else if (selectedM === '1' && selectedD === '2'){
    let masumasu = allSeason.aisatsu[Math.floor(Math.random() * 4)];
    let migiri = january.jikouTwo[Math.floor(Math.random() * 2)];
    targetText.innerHTML = allSeason.haikei + migiri + allSeason.atena + masumasu;

  } else ..... 12月下旬まで.....{
  }
};

printJikouというfunctionを作ります。

先ほどと同じように、
selectedMをMonthAidを持つHTML上のselect部分に指定。
selectedDも同様。上旬は1、下旬は2という数値になってます。

これで、月/時期の数値が出揃ったので、あとはif文で分岐させてます。

let masumasu = allSeason.aisatsu[Math.floor(Math.random() * 4)];については、
allSeasonオブジェクトのaisatsu項目から[ランダムに0~3までの整数を選びます]
となってます。つまりaisatsuにストックされてる4つの挨拶の中から1つランダムで選ばれます。
で、それにmasumasuというラベルがついてるわけです。

Math.floor(Math.random() * 100)とかにすると、0~99のランダムな整数が生成されます。

#####出力します

先のプログラムの
targetText.innerHTML = allSeason.haikei + migiri + allSeason.atena + masumasu;
部分です。

targetText（つまりHTML上のtextareaです）に数値を出力するのが.innerHTMLです。
イコール以下が出力されます。結果として

拝啓　秋涼の候　貴社ますますご清栄のこととお慶び申し上げます。

みたいなのが出現します。

コピーボタンはこちらを参考にしています。