4月23日(木)HTML/CSS/JavaScript基礎研修(3日目)

皆様、こんにちは。

 

HTML/CSS/JavaScript基礎研修も3日目に入りました。

今日は、JavaScriptの基本を学んでいきます。

 

昨日の日報に、「良かったこと」として、こんなことを書いている人を見かけました。

 

 CSSのコードを書くとき、教科書で指定された数値以外にも

 自分で数値を変えるなど、自分で手を動かして試したことが良かった。

 変化を実際に確認することで、自分が書いているコードでどう変わるのか

 イメージがつき、頭の中に定着しやすくなった。

 

現場に配属される前に、自分で考えて試す癖がついていることは、

とても素晴らしいことです。

昨日までよりも、徐々に難易度が上がりますが、自主学習をするときはぜひ、

「こう入力したらどうなるかな?」という、ある種の「遊び心」も大事にして、

いろいろと試してほしいと思います。

 

f:id:insblog:20200423183155j:plain

 

さて、講義では、「HTMLファイルの中にJavaScriptを書き込む方法」と

「別ファイルでJavaScriptを作り、HTMLを紐づけする方法」

の2つの方法について、コードの書き方を詳しく学んでいきました。

 

次々に新しい命令文が出てきますが、

これまでの単元で学んだ、「id属性」などのルールがとても重要になってきます。

 

受講者からは、こんな質問がありました。

「短い命令文を書いてみると、セミコロンを忘れていても出力されるのですが、

 これは問題ないでしょうか」

動かしてみて、正しくない命令文で動く場合があることに加えて、

命令文が長くなると、正しく動かなくなることに気づけたようでした。

 

講義では、命令文を書くだけではなく、

文の中の「オブジェクト」、「メソッド」、「パラメーター」は何か?と

逐一確認しながら進めていきます。

 

 

f:id:insblog:20200423183211j:plain

午後一番は、午前中の振り返りを行いました。

5つほどの問いに対して、3人一組で考えてもらいました。

※今日は、「サブ講師と、誕生日が一番近い人」が進行役です。

 

グループワークをのぞいてみると、しっかり1問1問の解答について、

答え合わせをしていました。

「HTML、CSSJavaScriptのそれぞれの役割…って講義で話してたかな?」

「私は、○○だと認識していますよ!」

こんなやりとりをしながら、活発に意見を交わしていました。

 

f:id:insblog:20200423183207j:plain

 

見えているWebページに動きや変化を加えていくJavaScriptですが、

例えば、ダイアログボックスを表示する

「window.alert」と「window.confirm」は何か違うか、

コードを変えて書くとどのように違って見えるのか、細かい部分も確認していきます。

 

コードの入力スピードに個人差があり、進捗が遅れると

講義についていけない可能性があるので、

講師は、順調に進んでいるかを受講者に確認しながら、慎重に進めています。

 

 

皆さんがコードの書き方に慣れてきたところで、

テキストをもとに入力した内容に、

自分なりのカスタマイズしてみよう!というお題が出ました。

 

個人ワークに取り組んだ後、カスタマイズした内容を見ながら、

グループで確認するワークをしてみました。

 

理解度に個人差があるので、カスタマイズがうまくいった!という人を軸に

グループを組みなおしています。

 

グループ内では、じっくりと考えて、2、3分ほど黙り込む時間もありましたが、

「この条件式が間違っていたんだ!分かった~!」

「○○さんは大丈夫?見せてもらってもいいですか?」

「ここが、どうしても原因が分かりません…」

「ここ、nが余分に入ってる!あ、シングルクォーテーション重なってました…!」

というやり取りがあり、無事に解決に至りました。ばっちりです。

 

f:id:insblog:20200423183223j:plain

 

昨日、「ミスをすることで誤りに気づいて、正確に書けるようになる」と

講師から指摘がありましたが、

講師の力を借りずに、助け合って発見できるようになっているのは、

とても大きな一歩ですね!

 

 

最終的には、一番分かりやすいコードを書いた方に説明していただきました。

いつ授業で習った内容だったかも踏まえて、プレゼンテーションしていました。

 

この方のチームでは、

もし入力した数値が1~5以外だったら、どんな出力をしたらいいですか?

といったような議論もしたうえで、このコードを完成させたとのこと。

 

とても適切な箇所にコメントが入力されており、後で読み返したとき、

誰もがわかる内容になっていて、講師の評価が高い仕上がりになっていましたね。

 

f:id:insblog:20200423183228j:plain

 

アルゴリズムに基づいて、コードを書き、想定した動きまで確認できることを

「実装できた」といいますが、

着実に型ができているように思えます。

 

明日もこの調子で進みますので、復習、振り返りをしっかりして、

そして体調を整えて研修に臨みましょう!

 

今日も一日、お疲れさまでした。