Web プログラミング

【もりけん塾6日目】課題『JavaScriptを知る』続:Statementのルールから

もりけん塾生になって6日目のねこらのん(@nekoranon256)です。

 

JavaScriptで勉強方法で悩んでいる方いらっしゃいませんか?

 

はい、仲間です。

 

分からなくてもりけん塾(@terrace_tech)で質問した所や勉強方法で悩んでいるともりけんさんがTwitterで答えてくださったのでその内容やその後自分でどうしたかについてこの記事で記載していきます。

 

JavaScriptの勉強方法、もりけんさん流:ロードマップ

JavaScriptの勉強方法で、

 

あなた
分からないよ〜

 

って迷子になっていたらもりけんさん(@terrace_tech)がTwitterで答えてくれた…‼

こうして文章化されていると、今自分がどこの段階で次何をすべきなのかが分かるから精神的に落ち着く…

 

もりけんさん(@terrace_tech)お忙しいなか、ありがとうございます(TT)

 

このロードマップだと今私がいるところは、2の改訂新版JavaScript本格入門です^^!

 

 

JavaScriptの『Statement』のルール

さて今日は昨日の続きで改訂新版JavaScript本格入門の『Statement』から。

 

JavaScriptのコードは、一般的に、1つ以上の文(Statement)から構成されます。

引用:改訂新版JavaScript本格入門

 

1つ以上の文(Statement)というのは、

このこと!

 

このStatementのルールは3つ。

  • 文末に「セミコロン(;)をつける」
  • 文の途中で空白や改行/タブを含めることも可能
  • 大文字/小文字が厳密に区別される

この3つのルールについて自分なりに解釈したことを以下でまとめていきますね!

 

ルール①文末に「セミコロン(;)をつける」

よく忘れる文末のセミコロン…ここJavaScriptでも頻繁に登場するので忘れないように注意したい…

 

セミコロンは「文の区切りですよ〜」という意味合いを持っているので、省略を避けたいもの。

 

日本語でいう「。」と似たようなイメージなので忘れないこと‼

 

1つの行に1つの文章が基本。

 

ルール②文の途中で空白や改行/タブを含めることも可能

簡単で短い内容のものだと空白や改行はしなくてもよいでしょうが、長くなると見づらくなる…

 

そんなときに使うのが、

  • 空白
  • 改行

らしいです。

 

ココに注意

Statementの意味がおかしくなる空白や改行は避けた方が良いということ。

 

日本語に置き換えてみて「え!ここで文書区切っちゃう?」というおかしな空白や改行はしないことだと捉えていい感じ^^!

ルール③大文字/小文字が厳密に区別される

「alert」と「Alert」同じだけど、大文字と小文字が違うだけで全然意味が違ってくるらしい…‼

 

ココに注意

大文字と小文字が違うだけでバグの原因になる…‼

 

JavaScript、コメント化(コメントアウト)のルール

エンジニアはキラキラしたものではなく実際は泥臭い、他人のバグを修正するということがメインなお仕事になるとか…

 

 

そこで他人が作ったコードの手がかりとして必要なものが…

コメント

です。

 

以前ぷよぷよプログラミングをしたときにコメントがあったからこそ、

ねこらのん!
ここでぷよの数を減らせる!

というのがわかったのでコメントは非常に重要だと学びました。

 

 

 

JavaScriptのコメントの記述方法は3つあるようです。

  1. 『//coment』:単一行コメント。行末までがコメントとみなされる
  2. 『/*comment*/』:複数行コメント。「/*〜*/」で囲まれたブロックをコメントとみなす
  3. 『/**comment*/』:ドキュメンテーションコメント。「/**〜*/」で囲まれたブロックをコメントとみなす

最も優先順位が高いのは赤字の単一コメント「//」のようです。

 

コメントの例。

引用:改訂新版JavaScript本格入門

これがコメントで使う実際の例のようです。

 

『//coment』は「//」だけでコメントになるようですね…‼

 

つづいて『/*comment*/』は「/*〜*/ 」でコメントをサンドするみたいですね。

複数行のときに利用されるので、文末の方を忘れないようにしたい…

 

文のコメント化をコメントアウトという。

 

「『/**comment*/』ドキュメンテーションコメント」についてはまたの章で解説があるそうです。

 

JavaScript『変数』

Progateでお世話になった変数。

 

やっと改訂新版JavaScript本格入門でも突入することができた〜!

 

本題で変数について。

変数とはデータの入れ物

だそうです。

 

スクリプトと変数の違い

  • スクリプト:最終的な回答を導くための一連のデータのやりとり
  • 変数:やりとりされる途中経過のデータを一時的に保存する

 

一連の流れのデータか一時的なデータ保存かという点が違うポイント!

 

引用:改訂新版JavaScript本格入門

これわかりやすい〜!

 

変数は単一のデータで一時的な値を入れるものだけど、スクリプトはその変数の一連の流れを表すもののように見える…!

 

変数:宣言の方法

宣言の方法で使う命令言語は『var』。

  • var:変数を命令するために必要
  • varの次に「変数名」を入れる

引用:改訂新版JavaScript本格入門

意味が分かるとシンプルに見える^^!

 

変数が複数あるときは表示方法が2つあるようで、

  1. var命令を1つずつ書く
  2. varを1つでまとめて「,」で区切る方法

があるようです。

 

引用:改訂新版JavaScript本格入門

1行でシンプルに書きたい時は「,」を使って、1文が長そうな時は「var」を複数に分けて書くと見やすそう。

 

プログラミング言語は数学と似ている気がしていて…

「=」が登場してくるんですけど、代入でなくて「格納」という命令になるようです。

 

引用:改訂新版JavaScript本格入門

変数の宣言:varとletの使い方の違い

Progateでは「let」のほうが記憶にありますが、「var」と何が違うのでしょうか?

 

  • var
    ・同名の変数を許可する
  • let:細かく変数の有効範囲を管理できる
    ・同名の変数を許可しない

細かく変数管理できるのがletなので、letを優先的に使用するようです…‼

 

だからProgateでletを頻繁に使っていたのか〜なるほど!

 

おわりに

Progateでゲーム感覚でやったことがやっとJavaScript本格入門で登場しました‼

 

そのおかげで「あ、これ見たことある」という勝手な親近感…笑

 

本格入門は説明が丁寧なのでページ数が多くてもこちらをやっている方が情報の漏れがなく良さそう…‼

 

 

楽しくなってきたぞ〜‼

1日の時間が短いと思うので、もうちょっと時間の使い方をうまくしてJavaScriptの勉強に費やせるよう努力したいな〜><

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada