フロントエンドエンジニアを目指している、まゆ（@Ymayu_it）です。
フロントエンドエンジニアのもりけん（@terrace_tech）先生のツイートより、現場でよく作る機能が以下のものが多いようです。
現場でよく作る機能
・ログインログアウト
・登録、パスワード忘れ、メルアド変更
・検索
・ページネーション
・エラートースト、確認モーダル
・各種保存時バリデーション
・お知らせ
・お気に入り
・ファイルアップロード、ダウンロード
・バーチャライゼーション
・DnDでの並び替え、カスタマイズ— フロントエンドエンジニア (@terrace_tech) August 21, 2020
目標物として意識してJavaScriptを学んでいこうと思います。
今日はしまぶーさん（@shimabu_it）、おさないさん（@YorozuyaOsanai）、キノコードさん（@kino_code）のJavaScriptの動画学習をしました。
上記の動画を参考にJavaScriptの入門についてまとめていきます。
目次
JavaScript入門の動画
まず大前提としておさないさん（@YorozuyaOsanai）の動画でおっしゃっていたPCの仕事は3つあるということを抑えていきます！
- 入力
- 計算
- 出力
たったこれだけ。
たったこれだけを応用して用いられていることがポイント！
そしてしまぶーさん（@shimabu_it）の動画から
この流れでwebページがみることができているけど、JavaScriptがなくてもwebページは見ることが出来る。
ただJavaScriptを使った方が便利！
では、JavaScriptについてまとめていきます。
JavaScriptでできること
まずはJavaScriptでできることについて。
- イベント処理
- 日付や時間を操作できる
- DOMを操作できる
- フォームを操作できる
- ウィンドウを操作できる
- Cookieが使える
- キーボードを操作できる
- Ajaxが使える
- todoリスト
- 地図アプリ
- ヘッダー・フッターメニューは再レンダリングせずに表示される
などがあるようです。
よく理解できていない語句についてメモしていきます。
- DOM：webページの構成要素のこと。
- Cookie：閲覧したWebサイトから保存される情報のことで訪れた日時や訪問回数などが記録されている。
- Ajax：ページの状態を変えること無くユーザーの目に触れる部分や使用する部分（UI）を構築する方法。
JavaScriptはクライアントサイドスクリプト言語
JavaScriptはhtmlを受け取った後に実行できる唯一の言語。
webブラウザ上でプログラムを実行するが特徴的。
メモ
- クライアントサイド：ブラウザ、ユーザー、IoT、アプリ、音声認識など
- サーバーサイド：デベロッパー（エンジニアやデザイナー）、データベースなど
- ブラウザ：Google Chromeやsafariなどのこと
JavaScriptは動的なサイト
プログラムによって内容が書き換わるサイトを「動的なサイト」といい、いつ何度見ても動かないサイトを「静的なサイト」という。
例えばWordPressなどのようにログインすると、それぞれが自分自身の管理画面が画面上に表示されるといったことも動的なサイト。
流れとして、
- ユーザーからの入力を受け取る（ログインの情報）
- サーバーに関してhtmlを受け取る（ログインの情報をサーバーが受け取る）
- htmlを表示する（各自の管理画面を表示させる）
ことからJavaScriptは動的なサイト。
JavaScriptの仕事は2つ
JavaScriptの仕事は
- データのやり取り
- DOM操作
これがメイン。
データというのは情報で
- 基本データ
- 複合データ
の2つある。
DOMは「Document Object Model」の略でwebページとプログラミング言語をつなぐ役割がある。
オブジェクトはプロパティとメソッドをまとめたもの
オブジェクトというのはデータと機能をまとめたもので、
- データがプロパティ
- 機能がメソッド
になる。
変数について
変数は箱や容器と記述がありますが、理解できませんでした。
しまぶーさんの動画で変数を料理に例えるということで理解できました。
料理で塩を例にすると、塩が入っている容器。
この容器が変数ということだそうです。
変数名について
変数名は別名「識別子」ともいう。
この変数はルールがあって、
- $
- _
- 英文字
- 数字
これらがルール。
そして赤字のものが識別子の先頭にくることがルールとなっている。
識別子で2文字続いているときの書き方
識別子で2文字が続いているときがあり方法として、
- 2文字目を大文字に：例calAvg
- 1文字目と2文字目の間に_でつなぐ：例cal_avg
があるけど2文字目を大文字が使うことが多いようです。
constとletとvarのちがい
| 使う頻度 | 使うとき | 再代入 | 再定義 | |
| const | 最も使う | 不可 | 不可 | |
| let | constで使えない場合に使用 | for文 | 可 | 不可 |
| var | ほぼ使わない | 可 | 可 |
表からconstが最も使うようですが、理由としてJavaScriptでは厳密なものの方がバグが生じることが少ないためconstをよく使うようです。
constは定数と教科書にも掲載されているけれど、厳密にいえば定数ではない。
その理由としてconstのオブジェクトの中身は変更することができるからだそうです。
関数について
関数は料理を手伝ってくれる子どもたちで、子どもたちが役割分担をして円滑に料理を進むようにすることだと、しまぶーさんの動画でおっしゃっていました。
（言葉のニュアンスが違うかもしれないので、しまぶーさんの動画へどうぞ）
関数は「function」を使い、{}の中は動詞が先になるように作成する。
<=（アロー関数）によって記述を短くすることができるもの。
returnがある場合とない場合のちがい
returnがない場合は料理を子供に持って運んでもらうけど、帰りに何かを持ってかえることはない場合に使うようです。
JavaScriptのメモ
typo：打ち間違え
window：ブラウザそのもの
getElementByID：DOMの中にあるIDをとってくる
キノコードさんの動画で一緒にJavaScriptを記述してみた
キノコードさんの動画では途中途中で問題を出題してくれています。
そのたびにvscodeで実際に答えをまずは見ること無くやってみました！
できているものの方が少なかったので、実際にいろいろコードをうってトライアンドエラーを繰り返していく必要があると思いました。
おわりに
動画学習が今日メインとなってしまったので、これらを活かせるように今からじゃんけんゲームを実際に見てみます！
もりけん塾（@terrace_tech）
Thanks：もりけんさん