みなこんばんちわ！ ”にょろぼん”です。
『コンテスト作品』その第一歩の踏み出し方が分かんなくて困るんよね！ というお話しです。
前回は、踏み出す、最初の🐾 第０歩～０.５歩の日々を描きました！
伝えたかったのは📣何もないとこから始めたわけじゃないってこと！
『おもいつき💡を、過去に習ったありもの知識の、組み合わせで実現しようとした』のが最初なんだよ！
でもって、お次の今回こそが。問題の第一歩目！ 実は、最も読んで欲しい内容かも。
DAY②『コード描き描きの。ホントはじめの一歩！』
作品を作るためには！何か描き始めないと始まらない！(あたりまえ♫体操～♪チャンチャン)
ですよね。。”にょろぼん” が最初に手を付けたのは、htmlファイルへの部品配置でした。
★コンビニチケットアプリを作るために最低限必要な部品数を洗い出す★
入力情報：引換開始日、引換終了日、引換コンビニ名、引換商品名 ＋決定ボタン！
⇒すなわち、インプット入口部品5つ！
(それぞれ変数名：validDate, expireDate, cvs, goodsName と、Submit)
出力情報：入力情報をもとに加工した加工済データ
⇒すなわち、アウトプット出口部品１つ！(変数名：result)
最低限、機能実現の為に、htmlに６つの部品(タグです＜タグ＞)を置かないとぽいです！
でも、ただ部品置くだけじゃ動かにゃい。そう！部品を掴んで動かすためには、id付きタグにしなきゃです！
id付きタグをつくるには⇒ #validDateと書いて、Enterキーを押すのでした！
ひたすら、上の変数名に#を付けて。ワシワシ作業していきます。
と、いうわけで。。とりま描いたのが！超原始版cvsTicket.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="validDAte">引換開始日</div>
<div id="expireDAte">引換終了日</div>
<div id="cvs">CVSﾁｴｰﾝ</div>
<div id="goodsName">商品名</div>
<div id="submit">決定する</div>
<div id="result">!引換可能なチケットリストは以下の通りです!</div>
</body>
</html>
ああ。かんたんすぎてハズいけど😅これが現実。
Day③『はじめの１．５歩目！ 部品置いたらidで部品掴んでJSファイルに持ってこよ～』
htmlに置いた部品(id付きのタグ)をグイっと掴んでJSファイルに持ってきたいワケです！！
そうです！document.getElementByIdをファイル最初に書いとけばJSファイルで操作できるようになるんでした！
機械的に、let *** = document.getElementById(***); の***をひたすら埋めてく
(↑変数名とid名を同じにしちゃってます💦だって...同じ名前の方が分かり易いんだもん）
(↑あくまで”にょろぼん”の好み。。変数名とid名をちゃんと変える意味もよくわかるし。。)
だけの簡単なお仕事をカタカタと。。とりま描いたのが！超原始版cvsTicket.js
let validDate = document.getElementById(validDate);
let expireDate = document.getElementById(expireDate);
let cvsName = document.getElementById(cvs);
let goodsName = document.getElementById(goodsName);
let submit = document.getElementById(submit);
let resultArea = document.getElementById(result);
//以下、あとで使う部品
// date = new Date();
// if(validData <= date && date <= expireData) {
あはは。。。これだけ！！超単純作業だよね～！
でもね。ここまでくると。webページに部品を配置出来て。その部品を掴んできて
プログラムで動かす為の準備が整うワケなんですよ！
なんだよ！つまんね～な（プンプン！）という苦情の声が聞こえてきそうですが。。。
正真正銘、これがアプリ製作の第一歩なんでした。。
むしろ、ここまで来たら。あとは、使えそうな部品やロジックを、N予備の過去の授業からもってきたり、ググって探して当てはめて行けばイイ！
もう、半分出来たようなもん！だと、 ”にょろぼん” は本気で思っているよ。
作品作り第一歩がな～とお悩みのみなさん！ だまされたと思って、Day③のステップまで単純作業してみませんか
もし、Day③のgetElementById並べるところまで済ませたら。
『なんだか、行ける気がする～』と思って貰えるんじゃないかな！！たぶんですけど。
”にょろぼん”がすごく大事だと思う事！もう書きました！！冬のコンテストとかでトライしてもらえるとうれCY
次回はもっと小手先テク。。部品探しとか、その時参考にしたページとかを描くつもり！次回も読んでくれると嬉しいです ٩( 'ω' )و