[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

Webページにたくさんの要素が入ってくると、それぞれをグループに分類した方が作りやすくなります。そのようなときに便利なのが「セクショニングコンテンツ」と呼ばれる、sectionタグやheader, footerタグです。ここでは、それらの使い方を学びます。

前のレクチャーで作成したHTMLに、スタイルシートを指定していきます。ここでは、これまでの復習となるスタイルを各種使っていきます。

Webページに欠かせない要素がリンクです。他のページやサイトに自在にリンクを張って行き来することができます。ここでは、リンクを張るための aタグについて学びます。

なお、映像内で利用しているリンク先のURLは次の通りです。
https://www.youtube.com/watch?v=vjqTkOISzeY

RWDのレイアウトを作るためには、「メディアクエリー」という CSSの記述を使って、画面の横幅が狭い環境でレイアウトを変えていきます。ここでは、メディアクエリーの使い方と RWDレイアウトのもう一つの作り方、「リキッドレイアウト」について学びます。

CSSでは、簡単なアニメーションを作ることもできます。ここでは、transitionプロパティを利用してアニメーションを実装する方法を学びます。

Bootstrapで Webページを構成していくには、決められた class属性を付加した要素を入れることで、スタイルを整えていきます。ここでは、最初に使う要素として Containerの使い方を学びます。

Bootstrapの最も特徴的なものが「グリッドシステム」です。画面を12分割にして、自由にエリアを分割する事ができ、さらにスマートフォンなどさまざまな画面サイズに応じて、柔軟にレイアウトを変化させることができます。ここでは、そんなグリッドシステムについて学んでいきましょう。

Bootstrapのグリッドシステムには、「オフセット」という空欄を作るしくみがあります。ここでは、オフセットの使い方と、またフォームパーツの種類について学びます。

なお、映像内で書き込んでいる formタグの action属性は次の通りです。

https://book.h2o-space.com/html/form.php

フォームの中で、多くの選択肢から一つを選ぶときに使われるのが「ドロップダウンリスト」です。ここでは、selectタグの使い方を学びます。

複数選択ができる選択肢を準備するときに使われるのが、チェックボックスです。ここでは、labelタグの正しい使い方を含めて学びます。

ここでは、単一の選択肢を選べるラジオボタンを作りながら、CSSでプロパティの優先度を最優先まで引き上げる、!important指定について学びます。

Bootstrapにはボタンなども簡単に作るスタイルが準備されています。色もさまざまなものから選ぶことができます。ここでは、ボタンとラベルの作り方を学びます。

JavaScriptの基本は、「オブジェクト」という対象に動作をさせることです。これを「メソッド」といい、またメソッドの細かな情報を伝えるのが「パラメーター」です。ここでは、そんなオブジェクトの操作を通じて各用語について学びます。

JavaScriptで値を扱うときは、クオーテーション記号（' または "）が前後にあるかないかで、その扱いが大きく異なります。また、「+」の記号も足し算として使われたり、「文字列連結」として使われるなどややこしいです。ここでは、そんな文字や数字の扱いについて学びます。

プログラミングに欠かせないのが、計算結果などを一時的に保存しておける「変数」です。ここでは、変数の使い方を学びます。

JavaScriptでオブジェクトを利用するには、「インスタンス化」をしなければなりません。しかし、documentオブジェクトは最初からインスタンス化されていたり、Mathオブジェクトはそのまま使えるなど、例外も多々あります。ここではそんな、オブジェクトとインスタンスについて学びます。

今回のスクリプトは、画面に文字を出力するだけではなく、その内容を次々に書き換えていかなければなりません。こんな時に使えるのが、「getElementById」メソッドを使った要素の取得です。ここでは、このメソッドの使い方とプロパティについて学びます。

プログラミングで基本となるのが「制御構造」という構造です。ここでは、制御構造の1つ「選択」という、ある条件に沿ってプログラムの動作の流れを変えるという手法として、if構文を学びます。

プログラミングで、同じような記述が複数回登場する場合は「ファンクション（関数）」にまとめておくと便利です。ここでは、ファンクションの定義の方法や使い方を学びます。

ある要素に、イベントを定義するメソッドが「addEventListener」です。ユーザーのクリックやマウスの移動、キーボードの操作など、さまざまなイベントに対応したプログラムを作成することができます。ここでは、スタートボタンを動作させてみましょう。

setIntervalメソッドを使って、間隔を指定すると、画面が表示された後でその内容を定期的に変えていくことができます。

これを使えば、アニメーションを実装したり、ずっとなにかを動かし続けるプログラムを作成できます。ここでは、タイマーの表示部分を実装して行きましょう。

JavaScriptの変数には、宣言した場所の範囲内でしか利用できない「スコープ」が存在します。全体で使えるようにするには、範囲の外で宣言する「グローバル変数」にする必要があります。ここでは、そんな変数のしくみについて学びましょう。

62秒は、1分2秒。128秒は 2分 8秒など、経過秒数から時・分・秒といった記述に変換するには、計算をする必要があります。ここでは、割り算やかけ算を使って、時間を正しく計算してみましょう。

addEventListenerメソッドの中など、対称の要素が明確な場合、それを簡単に指定できる「this」という記述が利用できます。ここでは、thisの記述と classListなどを使って、STOPボタンを実装していきます

positionプロパティには、fixedの他に absoluteと relativeがあります（標準は static）。これらの使い方も学びながら、画面全体のデザインを整えていきましょう。

JSONデータは、簡単な記述でデータを記述できるもので、JavaScriptでも簡単に扱う事ができます。複数の要素は、「配列」という形で取得できるため、ここでは配列についても学んでいきましょう。

JavaScriptで HTMLを作り出す場合は、innerHTMLプロパティに直接タグを書き入れる方法と、createElementメソッドを使って要素を作り、appendChildメソッドで追加する方法があります。ここでは、後者の方法を使って写真部分を作り出しましょう。

JSONデータを読みながら、画面を作っていくには JSONに含まれた件数だけ「繰り返し」処理を行なう必要があります。ここでは、制御構造の1つ「繰り返し」構文の for構文を学びましょう。

Ajax通信を行なうには、XMLHttpRequestオブジェクトを利用します。ただし、このオブジェクトは使い方が特殊なので、注意しながら使っていきましょう。ここではまずは基本の使い方を紹介します。

Ajax通信は「非同期通信」と呼ばれる、バックグラウンドで通信を行なう方式です。そのため、データの受信を待たずに処理が進んでしまうため、データが受信できたかどうかを監視しておかなければなりません。ここでは、onreadystatechangeイベントや、readyStateプロパティを利用して Ajax通信の結果を受け取るプログラムを作成してみましょう。

Ajax通信で得られたデータを使って、画面を作り上げましょう。ここでは、これまで紹介してきて知識の復習となります。

jQueryで Ajax通信が行えるようなったので、ここでは appendや appendToメソッドを使って画面を作り上げていきましょう。

ここでは、作成したプログラムを書き換えて Vue.jsでフォトライブラリーの画面を作り上げて仕上げていきます。