Web開発【基礎編】(HTML/CSS/Bootstrap/JavaScript/jQuery)プログラミングロードマップ ドットインストールのレッスン紹介

この記事では、Web開発が出来る様になるために、プログラミング学習コンテンツの、ドットインストールのレッスンの中でも、HTMLやCSS、JavaScriptやGoogleが提供しているツール、jQueryなどのレッスンをロードマップ形式で感想や紹介をして行きます。

レッスンをブログに掲載するにあたって、ヘルプを確認しました。
個人利用であり、非商用で、出典を明示してリンクしていて、このブログは非公式のものです。

ポートフォリオを作成しました。

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

あなたのプログラミングの勉強方法について、学習中の方も、クラウドソーシングなどで既に結果を出されている方も、教えて頂けたら嬉しいです。

ここからは、ドットインストールの周ごとのレッスンの感想と、ロードマップとして、各レッスンのリンクと感想を掲載していきます。

■ 1周目の感想 ■
学習期間:2022年6月27日〜2022年9月8日 学習に要した日数 73日間

HTML/CSS/Bootstrapについては、動画を聴いて、その通りにエディタにコードを書いて動かして、ブラウザで結果を確認して、講義についていくだけでもう、一杯一杯って感じでした。
大量の情報が押し寄せた感じで、ワケワカメ、意味フミコ状態です。まだまだ私は、HTML/CSS/Bootstrapの楽しさも良く分からないですし、私は本当にWeb開発系が向いているのかどうなのか、少々不安ではありますが、もう少し勉強を続けてみないと、はっきりと向いていないとも言い切れないのかな・・・・と思いました。
JavaScriptに関しては、過去にJava/C言語/アセンブラ/GAS(Google Apps Script)/Pythonの経験があった為、基本的な内容はスラスラと進みました。
jQueryもJavaScriptの基礎文法が何となくですが理解できてはいたので、HTML/CSS/Bootstrapよりかは理解しやすかったです。

では、ここからは、各レッスンごとの感想をロードマップ形式で掲載していきます。

はじめてのWeb制作 全11回 無料
HTMLやCSSが全くの初めての人が、「山田太郎」のプロフィール紹介サイトを作りながら体験していくレッスンです。
また、このレッスンで作った制作物は、はじめてのJavaScript 全8回 無料でも使いますので、消さないようにして、残しておくと良いでしょう。

● もっと詳しくHTMLCSSを学んでみよう ●

Web制作の準備をしよう macOS編 全10回 無料
Windows編」もあります。
今後のHTMLやCSSの学習に備えて、VS Codeを使えるように設定の仕方を紹介しているレッスンです。

詳解HTML 基本タグ編 全27回 有料
imgタグ、strongタグ、backquoteタグ、hrタグ、brタグ、リスト、tableタグ、リンクを貼る、articleタグ、timeタグ、divタグ、spanタグなどの基本的なタグやMDNについて学べます。

詳解HTML フォームタグ編 全13回 有料
入力用部品、ドロップダウンリスト、チェックボックス、ラジオボタン、ボタンを作成します。

詳解CSS 基礎文法編 全33回 有料
色や枠線、中央揃え、RGBA、HSLA、ボーダーの角を丸める、padding、margin、marginの相殺、position、fixed、絶対配置、z-indexで重なり順、box-sizing、calc、要素に影を付ける、背景のスタイリング、float

詳解CSS セレクター編 全12回 有料
要素型セレクター、classセレクター、idセレクター、属性セレクター、全称セレクター、:hover擬似クラス、:nth-of-type、:empty、:not、詳細度、優先されるスタイル

詳解CSS フレックスボックス編 全16回 有料
要素を並び、揃え、反転、要素の伸ばし、カラムレイアウト、横並び、画像とテキストの配置

詳解CSS アニメーション編 全20回 有料
ボックスをホバーすると角が丸くなるアニメーション、図形の移動、回転、時間の制御、アニメーションの速度に緩急をつける、デベロッパーツールで細かい調整、一括指定プロパティ、繰り返し回数、ポップアップアニメーション

詳解CSS レスポンシブウェブデザイン編 全8回 有料
ブラウザ幅に合わせて、レイアウトを変えていくテクニックを学んでいく。
メディアクエリー、モバイルファーストな開発、要素の表示/非表示

詳解CSS グリッドレイアウト編 全16回 有料
格子状のレイアウトについて学んでいく。
ボックスの複製や配置、直感的な配置指定、要素を揃える

詳解CSS 変数編 全7回 有料
色を変えるなど、一つ一つ指定して変更すると時間がかかるので、変数を使うと便利。
変数の継承、テーマーカラーの管理と変更

● ウェブサイトをゼロから制作してみよう ●

実践!ポートフォリオサイトを作ろう 全17回 有料
山田太郎のポートフォリオサイトを作って行きます。
山田太郎の作った3つのゲームをWORKSに配置します。

実践!アプリ紹介ページを作ろう 全24回 有料
架空のお散歩アプリ、「Dotinstall Walking」の紹介サイトを作っていきます。

実践!ECサイトをマークアップしよう 全27回 有料
架空の家具販売店のサイトを作ります。

● Webサイトを公開してみよう ●

GitHub Pagesでウェブサイトを公開しよう 全11回 有料
GitHubにアカウントを登録し、リポジトリを作成、サイトを公開。
サイトを更新、プロジェクトサイトの作成と公開、リポジトリの削除

● その他のレッスン ●

Bootstrap 5入門 全21回 有料
レスポンシブに対応したサイトを素早く作れるBootstrapについて学習します。
カラムレイアウトやグリッドシステム、ユーティリティ的なクラス、paddingやmargin、実践的なレイアウトなど。

はじめてのJavaScript 全8回 無料
このレッスンでは、以前にはじめてのWeb制作 全11回 無料で使った、
山田太郎のプロフィールサイトに動きを付けて行きます。

● エディタを使いこなそう ●

Visual Studio Code入門 全13回 無料
マイクロソフト社が開発している、無料エディタのVS Codeについて、開発効率が上がるショートカットキーや、Emmet(エメット)などを学びます。

● Googleが提供するツールを使おう ●

情報が古くて調べても良くわからなかった所や、ATOMエディタ推奨で、VS Codeでは出来なかったところ、私の環境で行って上手くいかなかったレッスンは飛ばして、下記のレッスンのみを行いました。

マテリアルアイコン入門 全6回 無料
マテリアルアイコンは種類は少ないですが、無料で使えてGoogleが提供しているという安心感があります。

Google Charts入門 全9回 有料
JavaScriptで簡単にグラフが書けるツールを勉強します。
円グラフ、3D、切り出し、棒グラフ、積み上げ棒グラフ、折れ線グラフを作って行きました。

Chrome Developer Tools入門 全10回 有料
Chrome内に内蔵されているデバッグツールについて、各パネルの使い方を勉強しました。

Google Apps Script入門 全20回 有料
主にスプレッドシートを操作します。情報が古いので、GASエディタの表示の仕方が、2022年8月時点では、拡張機能→Apps Scriptになります。これはまた変わるかも知れません。トリガーで時間指定して実行させることや、GoogleフォームやG-mail、HTMLについても学びました。
個人的には、GAS全く初めての方向けというよりも、普段本でGASの勉強をしていて、補助教材として使う様なレッスンだと思いました。私が使っているGASの本について掲載します。

スプレッドシート自体初めてという方が、気軽にGASを体験出来る本です。
プログラミングやパソコンに自信が無いと不安な方におすすめです。

この教材「詳解! Google Apps Script完全入門 [第3版]」を使ってGASの勉強をしている方は本当に多いですし、基礎文法からGoogleの各サービスまで詳しく学びるので、どの本にしようか迷っている方に1番おすすめしたい本です。

では、ドットインストールのレッスンに戻ります。

Google Fonts入門 全5回 有料
Googleが提供しているウェブフォントを使います。講義ではATOMエディタでしたが、VS Codeでも無事に動作しました。

● もっと詳しくJavaScriptを学んでみよう ●

詳解JavaScript 基礎文法編 全26回 有料
console.logを使って、プログラミングでは定番の「Hello world」という文字を表示させたり、定数と変数の違い、変数を用いた簡単な計算を行いました。また、if文、switch文、for、whileループと特定の値をスキップするcontinueや処理を中断するbreak、関数、ブロックとスコープについて学習しました。この辺りは、Java、C言語、Python、GASの経験があったので、比較的スラスラ進みました。
GASでJavaScriptの基礎文法を勉強していた時、「アロー関数」がどうしても分からなかったのですが、このレッスンで、やっとアロー関数が理解出来るようになりました。


詳解JavaScript オブジェクト編 全35回 有料
基礎文法編と同じファイルをそのまま使ってレッスンを受けられます。
配列の基礎、配列の要素にアクセス、配列とループの組み合わせ、push()で配列に要素を追加までは、他の言語の経験もあってスラスラ進めました。
unshift()、shift()、pop()が、良く考えると分かるのですが、一瞬では出てこない状態になりました。splice()で要素の削除や追加は、少し混乱しました。スプレッド構文と分割代入は、名前だけは聞いたことがあったのですが、このレッスンでようやくハッキリ理解出来ました。分割代入の値の交換は便利そうです!
レスト構文は初めて知りました。変数に代入したい値と、配列として使いたい値を指定できるのは便利だと思いました。
forEachとアロー関数の組み合わせは、少し難しかったです。
mapとアロー関数で別の配列を作る処理、filterで条件に合う要素のみ別の配列を作る処理は、アロー関数の省略が難しかったですが、別の配列が新たに出来た時は面白かったです。
オブジェクトについては、簡単なオブジェクトを作って表示させて、用語の説明がありました。オブジェクトの値の変更や、追加、削除は直感的に理解出来ました。
オブジェクトもスプレッド構文や分割代入、レスト構文が使え、その挙動を確かめました。オブジェクトの全ての要素の列挙や配列の中に複数のオブジェクトが入った複雑な構造で、特定の要素を取得しました。
単純なデータ型と、複雑なデータ型の配列で、代入した時の出力の違いを確認しました。配列での代入に関して、なぜその様な挙動になるのかは、基本情報技術者試験を勉強していた時に、選択言語でアセンブラを勉強していた時に、アドレスについてかなり深く学んだことが、理解を助けてくれました。
文字列の操作では、文字列の個々の文字にアクセスしたり、部分文字列を取得しました。
文字列の操作では、結合や分割、分割代入をして、文字列と配列を扱いました。この辺りは比較的分かりやすかったです。
配列の数値の合計・平均・小数点の扱い、乱数の辺りは、多少経験があるので、スラスラ進めました。乱数を指定の整数の範囲で表示させる方法の公式で、だいぶ乱数の理解が進みました。
日時の取り扱いは、JavaScriptでは、「月」に注意しないといけないと思いました。
alertやconfirmでメッセージを表示させると、いよいよWeb開発っぽくなってきた感じがしました。
タイマーを作ったり、IF関数を使って、タイマーを止めたりする処理が面白かったです。setTimeoutとsetIntervalの違いで、システムの負荷の例でやっと理解できました。
例外処理に関することは、今まで勉強して来た言語では、めんどくさそうだし、どうせ使わなそう・・・なんて思って避けて来ましたが、ドットインストールの解説は、非常にシンプルで分かりやすかったです。
クラスの実装については、図を用いた解説の後、次のレッスンで実際にコーディングしました。説明自体は分かりやすかったものの、エラーが起き、ソースコードで自分のコードと比較ボタンを押して、どこが違っているのかを調べて、3箇所違っていたので、直したところ、ブラウザで無事に実行出来ました。多分、私はクラスについて殆ど理解していないと思います。
カプセル化とは何なのかについては、ぼんやりと掴めた感じです。
static 静的メソッドなど、他の言語を別のサービスで学習していた時は混乱していましたが、こちらのレッスンで、頭の中の絡まった糸が、だいぶほぐれて来ました。
クラスの継承は、まだ理解不足な感じがしました。もう少しこの辺りを頑張ります!


詳解JavaScript DOM編 全21回 有料
オブジェクト編と同じファイルをそのまま使ってレッスンを受けられます。
h1タグとpタグぐらいの簡素なHTMLを作って、h1やpタグを書き換えました。
オブジェクト編で学んだ配列や、forEach、setTimeoutの復習にもなりました。
要素の取得方法が、色々出てきてごっちゃになりましたが、Nodeについては、基本情報技術者試験で随分勉強したので、雰囲気だけは掴めた感じです。
ボタンを押したらメッセージが書き変わる処理を学んで、やっとWebサイト制作らしくなって来たな、とこれからのレッスンが楽しみになりました。
また、HTMLやCSSの復習も出来ました。
ボタンを押したらクラスが追加される命令のシンプルな書き方を視聴しました。
DOMツリーに新たな要素を追加する時にリストアイテムを追加する例で、流れをなんとか掴めて感じです。
inputボックスに入力した文字列やセレクトボックスで選択した文字列、ラジオボタンやチェックボックスの選択した値を、ボタンを押すとリストに追加してブラウザに表示される処理が面白かったです。
webアプリ作成に近づいた感じです !!
それまで長ったらしいメソッドなどが続いて、少し混乱してしまいましたが、実際にブラウザに好きな文字列を表示させられるという動きを付けらえると、今まで頑張って勉強した甲斐がありました。
マウスのある位置の座標を表示させるイベントや、リアルタイムに入力した文字数を表示するイベントも面白かったです。
blurというイベントがあることを初めて知りました。
formを使うメリットも知ることが出来ました。
最後のレッスンの伝播というのがよく分かりませんでしたが、お手本の通り、トグルで実行出来ました。


詳解JavaScript Intersection Observer API編 全13回 有料
このレッスンの開発環境は、デスクトップに新たにフォルダを作って、素材をダウンロードして用意しました。画像がどれくらい交差しているのか割合を調べるのに、まずはデフォルトの場合を確認しました。その後、画像が20%、80%交差する所の挙動を見ていきました。画像をふわっと表示させるアニメーションの設定を色々と変えて行きました。consoleでログ表示をすると、ブラウザに負荷を掛けてしまうことを知りました。

● よく見るUIを作ってみよう ●

JavaScriptでモーダルウィンドウを作ろう 全8回 有料
デスクトップに新たにフォルダを作って学習環境を用意しました。
HTMLでボタンなどの必要な要素を配置し、ボタンにidを指定して、スタイルを付けて行きました。
色の設定で透明度を指定するので、rgbaを使いました。
lesson5まではHTMLとCSSだけですが、lesson6からJavaScriptを書いて行きます。
ボタンをクリックすると、表示/非表示を切り替え得られるようにしました。
最後に、CSSでz-indexを使って順番を操作しました。

● JavaScriptでミニアプリを作ってみよう ●

JavaScriptでおみくじを作ろう 全9回 無料
デスクトップに作業用フォルダを作って開発環境の構築をしました。
まずは、HTMLでボタンにidを付けて、CSSでスタイルを付けていきました。
JavaScriptでは、クリックイベントの動作確認で、文字が表示されるようにして、ボタンにマウスをホバーした時の設定をしました。
ボタンを立体的にするのに、text-shadowを使って影を付けました。
ランダムな数値の生成の仕方の公式の復習をしました。
おみくじの結果を、swich文や配列を使って表示させました。
最後に、IF文で確率を操作しました。

JavaScriptで三択クイズを作ろう 全20回 有料
デスクトップに新たにフォルダを作って学習環境を用意しました。
HTMLでクイズの問題文と3択の回答の選択肢と、ボタンの表示文をマークアップしました。
クイズを表示するエリアや問題文のスタイルを付けました。
選択肢のスタイルを付け、余白などで調整し、マウスホバーした時のスタイルも付けました。
JavaScriptでid取得やダミーの問題を用意しました。
選択肢をシャッフルするアルゴリズムを学び実装しました。
正誤判定にIF文を使いました。
正解の場合、不正解の場合のクラスをJavaScriptで付けて、CSSでそのクラスのスタイルを付けていきました。
一度回答したら、選べないようにJavaScriptでIF文とフラグを使って管理をしました。
正答数を計算する変数を用意して、結果を表示させました。

●もっとJavaScriptに触れてみよう ●

jQuery入門 全13回 有料
最初に、jQueryとはどういうものなのか説明があって、次からデスクトップにフォルダーを作って、開発環境を整えました。
jQueryの公式サイトから、コードをコピーして、HTMLに貼り付けました。
jQueryの基本的な文法をJavaScriptと対比しながら学びました。
実際にクリックイベントのコードを書いて、JavaScriptよりもかなり短く書けることにビックリしました!!
ボタンをクリックしたらスタイルを付ける処理を、pタグ、リストで行い、リストでは指定の番号にスタイルを付ける処理を書きました。
ボタンをクリックしたら、リストの末尾に新しいリストを追加する処理と、フォームの入力で、次の入力の為にフォームを消してフォーカスを当てる処理を書きました。
変更しやすいように定数で管理しました。jQueryの慣習的な定数名の付け方などを学びました。
追加したリストを削除する処理を行うため、まずはHTML内のstyleタグ内でリストとリストのアフター擬似要素にスタイルを付けました。
リストを削除する処理で、論理演算子のまたはに当たる「||」を使いました。
最後に、ふわっと消えるメソッドを使いました。

ポートフォリオを作成しました。

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

■ 関連記事 ■
挫折経験者が語る!!これからプログラミングを始められる方へ
基本情報技術者試験トップページ
自己紹介

投稿者: nekosiestr

プログラミング学習中の発達障害者です。宜しくお願いします。 趣味で写真を撮っています。 プログラミングは、GAS/HTML/CSS/JavaScript/jQuery/PHP、 発達障害は、自閉症スペクトラムASD/ADHD、 写真は、以前はコンパクトデジカメ、現在は、OLYMPUSミラーレス一眼を使っています。

モバイルバージョンを終了