この記事では、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よりかは理解しやすかったです。
■ 2周目の感想 ■
学習期間：2022年11月23日(水)〜202X年XX月X日() 学習に要した日数 XX日間
1週目を終えた後にレッスンが新しい内容に更新してありましたので、一旦レッスンをノート代わりにまとめているGoogleドキュメントを全て消してから受講しました。1周目の時は、セレクタ、プロパティ、プロパティの値という初歩的なCSSに躓いていたましたが、それらの混乱は、動画を止めて確認しながらコーディングしていくことで、かなり解れてきました。ただ、CSSも応用スタイリングになると、まだまだ難しく、レッスンを終了しても中々全ては理解出来ていない様です。
では、ここからは、各レッスンごとの感想をロードマップ形式で掲載していきます。
はじめてのWeb制作 全11回 無料
HTMLやCSSが全くの初めての人が、「山田太郎」のプロフィール紹介サイトを作りながら体験していくレッスンです。
すぐに学べて試せるように、実行環境も用意されています。
HTMLはh1タグとpタグで簡単な紹介文を書きました。
CSSは、画像の角を丸めて、bodyの中身を枠線で囲みました。
また、このレッスンで作った制作物は、はじめてのJavaScript 全8回 無料でも使いますので、消さないようにして、残しておくと良いでしょう。
● もっと詳しくHTMLCSSを学んでみよう ●
Web制作の準備をしよう macOS編 全10回 無料
「Windows編」もあります。
今後のHTMLやCSSの学習に備えて、VS Codeを使えるように設定の仕方を紹介しているレッスンです。
詳解HTML 基本タグ編 全27回 有料
h1タグやpタグ、imgタグ、aタグといった、使用頻度の高いタグから、記事のようなコンテンツarticleタグ、日時を表すtimeタグといったやや高度なタグ、spanタグ、divタグで簡易的にスタイルをつけました。また、HTMLについて最も信頼できるMDNの使い方の説明もありました。
詳解HTML フォームタグ編 全13回 有料
入力用部品、ドロップダウンリスト、チェックボックス、ラジオボタン、ボタンを作成しました。また、placeholderで予め入力名を表示させる方法も学びました。作成した部品をグループ化する方法でlegendも覚えました。
テキストだけでなく、パスワードや数量、日付の入力に特化したtype属性の指定方法も学べました。
詳解CSS 基礎スタイリング編 全27回 有料
ボックスモデルやmargin、widthとheightを習得。
これ以上広げたく無いという場合はmax-widthを指定し、逆にこれ以上縮んで欲しくないという場合には、min-widthを使う。境界線の指定の仕方、一括指定プロパティの注意点。paddingの4方向の指定の仕方。marginの相殺、box-sizing、overflowプトパティでテキストが溢れた時の処理、Line-heightの設定、font-family
詳解CSS 応用スタイリング編 全27回 有料
インライン要素、ブロック要素について。インライン要素のmargin auto。display inline-block、blockとinlineとinline-blockの違いのまとめ、position、z-indexで重なり順の調整、object-fit:cover、透明度のopacity、float、display:flow-root;、line-heightで高さを均等に割り振る、背景画像の幅と高さを指定background-size、contain、cover、background-position、backgroundの一括指定プロパティ、inheritで色を継承、tableのスタイル、リストのスタイル、calcの使い方、em、rem、Chromeに搭載されているカラーピッカーの使い方、変数を使って色を一括で変更
詳解CSS セレクター編 全21回 有料
セレクターの種類のまとめと整理、要素セレクター、全称セレクター、クラスセレクター、idセレクター、属性セレクター、複合セレクター、セレクターリスト、結合子、擬似クラス、nth-child() で奇数番目、偶数番目、最初と最後にスタイルを付けた、ボタンに対してマウスホバーした時のスタイル、インプットに対してフォーカスした時のスタイル、ボタンを押し込んだ時のスタイル、否定の擬似クラスnot、::before、::afterの擬似要素、詳細度（優先度）、詳細度を上げて優先順位を変える修正方法、更に優先度を上げる方法。!importantは詳細度を無視する上に Googleでも非推奨、セレクターのまとめ
詳解CSS フレックスボックス編 全22回 有料
display: flex;を使って、親divをフレックスコンテイナーとして設定する方法、flex-direction で、主軸の向きを変える方法、justify-contentによる主軸を基準とした要素の揃え方の制御、align-itemsで交差軸の制御、flex-wrap:wrap;で溢れた分の折り返し、gapで隙間を設定、align-selfで箱を一つだけ位置を設定し、autoキーワードも併せて使うことを学習、orderで順番制御。初期値0、小さい順。マイナスも指定出来る、
flexで幅の比率を指定、具体的な実装例（2カラム、3カラム、）、画像と記事のレイアウト、ロゴ画像でフレックスボックスの中に更にフレックスボックスを使うレイアウト。
詳解CSS メディアクエリー編 全14回 有料
メディアクエリや、レスポンシブデザイン、ビューポート、ブレイクポイントなどの用語説明、min-widthは最低でも幅が何px以上という意味、max-widthは何px以下、display-noneは「ページから存在を消してね」という意味、
詳解CSS アニメーション編 全19回 有料
ボックスをホバーすると角が丸くなるアニメーション、図形の移動、回転、時間の制御、アニメーションの速度に緩急をつける、デベロッパーツールで細かい調整、一括指定プロパティ、繰り返し回数、ポップアップアニメーション
詳解CSS レスポンシブウェブデザイン編 全8回 有料
ブラウザ幅に合わせて、レイアウトを変えていくテクニックを学んでいく。
メディアクエリー、モバイルファーストな開発、要素の表示/非表示
● ウェブサイトをゼロから制作してみよう ●
実践！ポートフォリオサイトを作ろう 全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の違いで、システムの負荷の例でやっと理解できました。
例外処理に関することは、今まで勉強して来た言語では、めんどくさそうだし、どうせ使わなそう・・・なんて思って避けて来ましたが、ドットインストールの解説は、非常にシンプルで分かりやすかったです。
クラスの実装については、図を用いた解説の後、次のレッスンで実際にコーディングしました。説明自体は分かりやすかったものの、エラーが起き、ソースコードで自分のコードと比較ボタンを押して、どこが違っているのかを調べて、３箇所違っていたので、直したところ、ブラウザで無事に実行出来ました。多分、私はクラスについて殆ど理解していないと思います。
カプセル化とは何なのかについては、ぼんやりと掴めた感じです。
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でクイズの問題文と３択の回答の選択肢と、ボタンの表示文をマークアップしました。
クイズを表示するエリアや問題文のスタイルを付けました。
選択肢のスタイルを付け、余白などで調整し、マウスホバーした時のスタイルも付けました。
JavaScriptでid取得やダミーの問題を用意しました。
選択肢をシャッフルするアルゴリズムを学び実装しました。
正誤判定にIF文を使いました。
正解の場合、不正解の場合のクラスをJavaScriptで付けて、CSSでそのクラスのスタイルを付けていきました。
一度回答したら、選べないようにJavaScriptでIF文とフラグを使って管理をしました。
正答数を計算する変数を用意して、結果を表示させました。
●もっとJavaScriptに触れてみよう ●
jQuery入門 全13回 有料
最初に、jQueryとはどういうものなのか説明があって、次からデスクトップにフォルダーを作って、開発環境を整えました。
jQueryの公式サイトから、コードをコピーして、HTMLに貼り付けました。
jQueryの基本的な文法をJavaScriptと対比しながら学びました。
実際にクリックイベントのコードを書いて、JavaScriptよりもかなり短く書けることにビックリしました！！
ボタンをクリックしたらスタイルを付ける処理を、pタグ、リストで行い、リストでは指定の番号にスタイルを付ける処理を書きました。
ボタンをクリックしたら、リストの末尾に新しいリストを追加する処理と、フォームの入力で、次の入力の為にフォームを消してフォーカスを当てる処理を書きました。
変更しやすいように定数で管理しました。jQueryの慣習的な定数名の付け方などを学びました。
追加したリストを削除する処理を行うため、まずはHTML内のstyleタグ内でリストとリストのアフター擬似要素にスタイルを付けました。
リストを削除する処理で、論理演算子のまたはに当たる「||」を使いました。
最後に、ふわっと消えるメソッドを使いました。
を作成しました。
プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。