36日目:ドットインストールで勉強中(JavaScriptで作る誕生日診断入門開始)

SNSやってます。

今日は引越しの契約書にサインをするために新居へ行きました。

が、かなりいまさらですが、外国人は入居させられないと断られました。

私の拙いタイ語を聞けば初めからタイ人じゃないことぐらい分かっていたろうに、、、。

タイ人名義にしても、とにかく外国人を入居させることはできない。

これまで問題があったんだの一点張りで謝られました。

どうしようもありません。。。

もしかして何か事情があって、理由つけて断りたいだけだったんでしょうか?

とにかく、おかげで朝から現アパートの退去のキャンセルをしたり明日引越しを手伝ってもらう予定だった人に事情を説明してキャンセルしてもらいました。

という事で無事振り出しには戻れました。

今日も前置きが長くなりました。

こんにちは、SPF36のダイ(@daijirok-jp)です。

今日はドットインストールのレッスンJavaScriptで作る誕生日診断 (全5回)」の勉強を始めました。

本日の学習結果

「JavaScriptで作る誕生日診断 (全5回)」の下記

  • #01 誕生日診断を作ってみよう
  • #02 getTime()で日数計算をしよう

の2つの動画を勉強しました。

現在のドットインストールでの学習状況

総完了レッスン数:244

視聴時間:10:11:08

学習日数:49日

マイページ:http://dotinstall.com/users/daijirok_jp

本日導入したもの

今日はエディターATOMのUIテーマとSyntaxテーマ、そしてパッケージ1つを導入しました。

ATOMのテーマ

テーマに関してはバックが黒の方が目が疲れにくいなという記事を読んだので、黒のものに変更しました。

いくつかおすすめのテーマを確認した後、どうやらもっともダウンロード数が多い「Monokai」というSyntaxテーマを導入しました。UIテーマは結局初めから入っているAtom Darkとしています。

実際に運用してみましたが、おかげで少し目の疲れが軽減されたような気がします。

ATOMのパッケージ

ドットインストールで使われているのに何故かドットインストールのATOM入門では紹介されていないプラグイン「Hightlight-Selected」を導入しました。

これはどんな単語でもダブルクリックするとそれと同じ別のところにある単語がハイライトされるというものです。

これのおかげで今日は実際に変数の入力ミスなどを見つける事が出来たので、インストールして正解でした。

これに味をしめて他に何かつかえるパッケージがないかと探して見たところ「less-than-slash」というのはHTMLの閉じタグ入力の補助をしてくれるパッケージを見つけたのでこれも導入しました。

<body> の後に </body> を書こうとすると 、</ と打った時点で </body> を自動で入力してくれます。

使ってみるとなかなか効率が良くなったと思います。

感想

今回レッスンを始めてみて、どうしてこの「JavaScriptで作る誕生日診断 (全5回)」がドットインストールのJavaScript入門のパッケージセットの中に入っていないのかよく分かりました。

#01 誕生日診断を作ってみよう」では、完成品の確認、土台となるHTMLの記述、そしてJavaScriptをほんの少し書き始めました。

さてこのHTMLの記述ですが、HTMLのinput要素の中に直接関数を書き込んで、JavaScript側でその関数の動作を書くという方法で進んでいました。

これまでの勉強では毎回HTMLはHTMLだけを書いて、<Script>以下のJavaScriptでは即時関数を宣言してから、HTMLの要素を取得という流れでしたので、それに比べて今回は稚拙な印象を受けました。

もしかしたらレッスン動画を撮った時はそれが最新の技術だったのか、もしかしたらサイト管理者の力量不足だったのか、真意のほどは知る由もありません。

とにかく全体的なコードの記述方法が今までのJavaScriptのレッスンとは少し違っていました。

#02 getTime()で日数計算をしよう」では、入力値と現在の日数の差を計算してポップアップで表示するというところまでコードを書きました。

やった事はこれまで勉強してきた事なのでたいして難しくはありませんでした。

ただ、今回はJavaScriptのコードエラーをChrome Developer Toolsで効率良く見つける事ができ、またHightlight-Selectedで変数の入力ミスをいち早く確認する事ができました。

このレッスンを終えたらコードを独自に編集してHTMLでは関数は使用しないという方法に変更してみようと思います。

きっと良い勉強になるでしょう。