大人のプログラミング入門【学習３日目】JavaScript

おぢぞう

こんにちは。おぢぞうです。
今日はプログラミング学習３日目です。

昨日はプロゲートのHTML&CSS初級編のレッスンで簡単なWebページを作成しました。
ただし、いわれるがままにコーディングしていっただけなので、あまり頭に残っていません。と、いうことで今日は、昨日の復習から始めていきます。

昨日作ったHTMLとCSSを並べて表示し、ひとつひとつ確認。とても自力では書けそうにないけれど、意味は理解できるようになっています。

続いて、HTML&CSS中級編を受講してみます。
ここから有料らしいのですが、とりあえず中に入ってみました。
レッスン1で、headerタグ、footerタグについて学習したところで、無料レッスンはここまで。
中級編7レッスンのうち２レッスン目から有料のようです。

課金する予定ですが、今日のプロゲートのレッスンはここまでにして、YouTubeでJavaScriptの入門動画を２本見ました。

JavaScript入門動画 1
1. HTMLとCSSのコードを準備
2. JavaScriptの基礎文法について解説
JavaScript入門動画 2
明日以降のプログラミング学習の進め方

JavaScript入門動画 1

この動画では、Webアプリケーション開発に必要なJavaScriptの基礎について解説しています。
プログラミングを効率よく学ぶためには、まず作りたいものを決めて、その分野に絞って学習するのが効率的だそうです。
次の動画で作る予定のWebアプリケーション開発に必要な、JavaScriptの基礎文法に絞って解説していました。

具体的な内容は以下のとおりです。

HTMLとCSSのコードを準備

HTMLやCSSのボイラープレートを使用するため、HTML5ボイラープレートをダウンロードしてフォルダに保存。
テキストエディタでインデックスHTMLを開き、必要なコードを追加します。ヘッドとボディのセクションに注意してコーディング。
プレビューするためにファイルをドラッグ＆ドロップしてブラウザで開きます。この時点ではデザインがないため、Bootstrapを使用してデザインを追加します。
Bootstrapのサイトから必要なコンポーネント（例：ボタン、アラート）のコードをコピーしてインデックスHTMLに追加。
レイアウトを整えるためにBootstrapのレイアウトオプションを使用し、コンテンツを適切に配置。
保存してリロードすると、デザインが適用されたウェブページが表示される。

JavaScriptの基礎文法について解説

変数の宣言方法について説明。変数の値は後から書き換えることができる。
コンソールログを使用し、コードの実行結果を確認。
定数の宣言方法について説明し。定数は値を書き換えることができない。
配列は複数の値を管理するためのもので、特定の位置にアクセスするにはインデックスを使用する。
ループ文についても説明。while文は条件を満たしている間、繰り返し処理を行う。
配列の要素に対してインデックスを使用し、ループを通じて要素を繰り返し処理。
f文は条件式が真の場合に、指定した命令を実行。
if-else文は条件式が真の場合にはif節の命令を実行し、偽の場合にはelse節の命令を実行。
オブジェクトは、プログラム内の要素や機能を表すもの。
オブジェクトは、変数やプロパティを持つことができる。
オブジェクトは自分で作成することもできるが、JavaScriptにはあらかじめ定義されているオブジェクトもある。
ウィンドウオブジェクトはWebブラウザ全体を表し、ウィンドウのサイズやプロパティにアクセスすることができる。
ウィンドウオブジェクトのalert関数を使うと、ポップアップメッセージを表示。
ドキュメントオブジェクトは、ドキュメントに関する操作や要素の取得・変更が可能。
ドキュメントオブジェクトにはgetElementByIdやgetElementsByTagNameなどがある。
イベントリスナーを使用すると、特定のイベント（例：ボタンクリック）が発生したときに関数を実行する。

つづいて、このJavaScriptを使って、実際に簡単なWebアプリケーションを作成する動画を視聴しました。

JavaScript入門動画 2

この動画では、簡単なWebアプリケーションとして、クイズゲームを実際に作りました。

おぢぞう

正直、全くついていけませんでした😭

でも、大丈夫です！問題ありません。
HTMLやCSSと違ってJavaScriptは全くの初見です。なんでも初見は頭に入らないもの。後々「あー、そういえばそんなこと言ってたなー」と思うぐらいで充分なのです。
これから学習していく上で、ぼんやりとでも聞いたことがあるというだけで理解がしやすくなります。学習を始める前に、関連のYouTube動画を軽く視聴しておくことをおすすめします。