この記事では、プログラミング学習コンテンツの1つである、ドットインストールのレッスンの感想を掲載しております。
およそ3分程度にコンパクトにまとまった動画で、モチベーションも維持しやすかったです。
1点目: HTML / CSS / Bootstrap
2点目:JavaScript
3点目:jQuery
の順番で紹介させて頂きます。
■ HTML / CSS / Bootstrap ■
動画を聴いて、その通りにエディタにコードを書いて動かして、ブラウザで結果を確認して、講義についていくだけでもう、一杯一杯って感じでした。
大量の情報が押し寄せた感じで、ワケワカメ、意味フミコ状態です。まだまだ私は、HTML/CSS/Bootstrapの楽しさも良く分からないですし、私は本当にWeb開発系が向いているのかどうなのか、少々不安ではありますが、もう少し勉強を続けてみないと、はっきりと向いていないとも言い切れないのかな・・・・と思いました。
1週目を終えた後にレッスンが新しい内容に更新してありましたので、一旦レッスンをノート代わりにまとめているGoogleドキュメントを全て消してから受講しました。1周目の時は、セレクタ、プロパティ、プロパティの値という初歩的なCSSに躓いていたましたが、それらの混乱は、動画を止めて確認しながらコーディングしていくことで、かなり解れてきました。ただ、CSSも応用スタイリングになると、まだまだ難しく、レッスンを終了しても中々全ては理解出来ていない様です。
■ JavaScript ■
JavaScriptに関しては、過去にJava/C言語/アセンブラ/GAS（Google Apps Script）/Pythonの経験があった為、基本的な内容はスラスラと進みました。
jQueryもJavaScriptの基礎文法が何となくですが理解できてはいたので、HTML/CSS/Bootstrapよりかは理解しやすかったです。
console.logを使って、プログラミングでは定番の「Hello world」という文字を表示させたり、定数と変数の違い、変数を用いた簡単な計算を行いました。また、if文、switch文、for、whileループと特定の値をスキップするcontinueや処理を中断するbreak、関数、ブロックとスコープについて学習しました。この辺りは、Java、C言語、Python、GASの経験があったので、比較的スラスラ進みました。
GASでJavaScriptの基礎文法を勉強していた時、「アロー関数」がどうしても分からなかったのですが、このレッスンで、やっとアロー関数が理解出来るようになりました。
配列の基礎、配列の要素にアクセス、配列とループの組み合わせ、push()で配列に要素を追加までは、他の言語の経験もあってスラスラ進めました。
unshift()、shift()、pop()が、良く考えると分かるのですが、一瞬では出てこない状態になりました。splice()で要素の削除や追加は、少し混乱しました。スプレッド構文と分割代入は、名前だけは聞いたことがあったのですが、このレッスンでようやくハッキリ理解出来ました。分割代入の値の交換は便利そうです！
レスト構文は初めて知りました。変数に代入したい値と、配列として使いたい値を指定できるのは便利だと思いました。
forEachとアロー関数の組み合わせは、少し難しかったです。
mapとアロー関数で別の配列を作る処理、filterで条件に合う要素のみ別の配列を作る処理は、アロー関数の省略が難しかったですが、別の配列が新たに出来た時は面白かったです。
オブジェクトについては、簡単なオブジェクトを作って表示させて、用語の説明がありました。オブジェクトの値の変更や、追加、削除は直感的に理解出来ました。
オブジェクトもスプレッド構文や分割代入、レスト構文が使え、その挙動を確かめました。オブジェクトの全ての要素の列挙や配列の中に複数のオブジェクトが入った複雑な構造で、特定の要素を取得しました。
単純なデータ型と、複雑なデータ型の配列で、代入した時の出力の違いを確認しました。配列での代入に関して、なぜその様な挙動になるのかは、基本情報技術者試験を勉強していた時に、選択言語でアセンブラを勉強していた時に、アドレスについてかなり深く学んだことが、理解を助けてくれました。
文字列の操作では、文字列の個々の文字にアクセスしたり、部分文字列を取得しました。文字列の操作では、結合や分割、分割代入をして、文字列と配列を扱いました。この辺りは比較的分かりやすかったです。
配列の数値の合計・平均・小数点の扱い、乱数の辺りは、多少経験があるので、スラスラ進めました。乱数を指定の整数の範囲で表示させる方法の公式で、だいぶ乱数の理解が進みました。
日時の取り扱いは、JavaScriptでは、「月」に注意しないといけないと思いました。
alertやconfirmでメッセージを表示させると、いよいよWeb開発っぽくなってきた感じがしました。
タイマーを作ったり、IF関数を使って、タイマーを止めたりする処理が面白かったです。setTimeoutとsetIntervalの違いで、システムの負荷の例でやっと理解できました。
例外処理に関することは、今まで勉強して来た言語では、めんどくさそうだし、どうせ使わなそう・・・なんて思って避けて来ましたが、ドットインストールの解説は、非常にシンプルで分かりやすかったです。
クラスの実装については、図を用いた解説の後、次のレッスンで実際にコーディングしました。説明自体は分かりやすかったものの、エラーが起き、ソースコードで自分のコードと比較ボタンを押して、どこが違っているのかを調べて、３箇所違っていたので、直したところ、ブラウザで無事に実行出来ました。多分、私はクラスについて殆ど理解していないと思います。
カプセル化とは何なのかについては、ぼんやりと掴めた感じです。
static 静的メソッドなど、他の言語を別のサービスで学習していた時は混乱していましたが、こちらのレッスンで、頭の中の絡まった糸が、だいぶほぐれて来ました。
クラスの継承は、まだ理解不足な感じがしました。もう少しこの辺りを頑張ります！
■ jQuery ■
最初に、jQueryとはどういうものなのか説明があって、次からデスクトップにフォルダーを作って、開発環境を整えました。
jQueryの公式サイトから、コードをコピーして、HTMLに貼り付けました。
jQueryの基本的な文法をJavaScriptと対比しながら学びました。
実際にクリックイベントのコードを書いて、JavaScriptよりもかなり短く書けることにビックリしました！！
ボタンをクリックしたらスタイルを付ける処理を、pタグ、リストで行い、リストでは指定の番号にスタイルを付ける処理を書きました。
ボタンをクリックしたら、リストの末尾に新しいリストを追加する処理と、フォームの入力で、次の入力の為にフォームを消してフォーカスを当てる処理を書きました。
変更しやすいように定数で管理しました。jQueryの慣習的な定数名の付け方などを学びました。
追加したリストを削除する処理を行うため、まずはHTML内のstyleタグ内でリストとリストのアフター擬似要素にスタイルを付けました。
リストを削除する処理で、論理演算子のまたはに当たる「||」を使いました。
最後に、ふわっと消えるメソッドを使いました。
ご精読誠にありがとうございました。
レッスンをブログに掲載するにあたって、ヘルプを確認しました。
個人利用であり、非商用で、出典を明示してリンクしていて、このブログは非公式のものです。
ポートフォリオを作成しました。
プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。
■ 関連記事 ■
挫折経験者が語る！！これからプログラミングを始められる方へ
基本情報技術者試験トップページ
自己紹介
