はじめに
こんにちは！
フロントエンジニアになって４ヶ月。
そろそろ職場にも慣れてきたので、本格的にJavaScriptの勉強を始めたいと思っています。
今まで、プログラミング学習アプリや本などで基本的な文法は学習していたのですが
実際コードを書いて何かを作ったことはありませんでした。
（業務でも過去のコードを流用したり修正したりすることはあっても
自分で1から書くことはなかった...）
簡単なものからチャレンジしつつ、
一人前のフロントエンジニアになれるようにスキル向上を目指します。
その学習の記録をQiitaに残していこうと思います。
私と同じように、「JavaScriptの基本文法は学習したけど、次何したら良いのかわからない」
と感じている人の参考になれば嬉しいです。
何を作るのか
とはいえ、いきなり自分でスラスラかけるわけもなく。
まずはYoutubeでJavaScriptの解説をしている方の動画を参考にしながらコーディングしていこうと思います。
今回はセイト先生という方が解説している「クイズアプリ」を作ってみることにしました！
参考：セイト先生のWeb・ITエンジニア転職ラボ【JavaScript超入門講座】基礎文法だけでクイズゲームのアプリを開発！
ただ、せっかくクイズアプリを作るなら、フロント関連の内容にしたいと思い、
クイズ内容はオリジナルにしています。
前編では動画を参考にベースを作り、
後編で解答の解説を入れるなど
アレンジできたらなーと思っています。
見た目
あくまでJavaScriptの学習なので見た目はこだわっておらずアレですが、
最終的にはいい感じに仕上げたいです。
（動画ではスタイルを当てるのにBootstrapを使用していますが、
後々、色々アレンジを加えることを考えて今回は使用していません。）
質問文の前に「問題１.」とかも入れたいですね。
今回のコード
コードの解説は参考の動画を見ていただければ、わかりやすく解説してくださっているので、ここでは省略します。
See the Pen Untitled by nao (@n-ogata) on CodePen.
今回の学習ポイント
コーディングを始める前に設計をする！
画面設計図
見た目の設計図。
私の場合、デザイナーさんからFigmaなどを使ってデータをもらいます。
機能や動きなどの詳細が書き込まれています。
フローチャート
プログラムのロジックと処理の流れを書く。
プログラミングを書くうえでとっても大事な工程だと思います。
動画では書き方までは解説されていないので、
私はざっくりわかる！プログラミングのためのフローチャートの書き方を参考にしてみました。
今回使ったアレコレ
メソッド？プロパティ？
-
document.getElementsByTagName('タグの名前')
タグの名前を取得する -
document.getElementById('id名')
指定したid属性がついている要素を取得する -
.textContent
そのHTMLが持っているテキスト情報を取得する -
.addEventListener('イベント名', イベントが起こった時に実行する処理）
クリックされたら〜する、など -
window.alert('アラートに表示させるテキスト');
アラートウィンドウを表示する -
.length
文字列：文字数の長さを取得する
数値：基本的には使えない。文字列と連結すると長さを取得できるようになる
配列：配列の要素数を取得する
参考：【JavaScript入門】lengthで文字列や配列の長さを取得する方法 -
e.target
e：イベントのオブジェクト
イベントはいろんな情報を持っており、それをオブジェクトとして持っている。
target：イベントのオブジェクトの中にある情報のうち、そのイベントが起こった要素
コーディングのコツ
- 同じコードが出てくる時は変数・定数にする
- HTMLのオブジェクトを変数に入れるときは、変数名に＄をつける
- 何回も出てくる処理は一つにまとめる（リファクタリング）
ループ処理（while文）などを使ってコードをまとめ、関数として定義する。
コメントでどんな処理をしているのか説明をつけておくとわかりやすくなる。 - どんなケースでも対応できるように柔軟性を持たせる
- 配列の中にはオブジェクトも配列も入れることができる