エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

【DAY13】Progateで「JavaScriptⅠ」を学ぶ【#30DAYSトライアル2nd】

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

【DAY13課題】Progateで「JavaScriptⅠ」を学ぶ

DAY13の課題は「ProgateでJavaScriptⅠを学ぶ」です。

prog-8.com

 

HTMLやCSSとJavaScriptの違い【プログラミング言語とは】

今まで使ってきた「HTML、CSS」と「JavaScript」の違いについて。

HTMLやCSSはコンピュータ言語だがプログラミング言語ではない

実は、HTMLやCSSは、厳密にはプログラミング言語ではありません

それぞれ、

  • HTML:マークアップ言語(markup language)
  • CSS:スタイルシート言語(style sheet language)

という分類です。

 

コンピュータとやりとりする言語のあつまりを「コンピュータ言語(Computer Language)」と言います。

なので、HTMLやCSSはコンピュータ言語の中に含まれますが、プログラミング言語ではありません。

 

【コンピュータ言語の分類】

  • マークアップ言語:HTML、XMLなど
  • スタイルシート言語:CSS、XSLなど
  • プログラミング言語:JavaScript、PHP、C#、Python、Java

という感じ。

 

ただまあ、定義とか厳密な言葉遣い気にしないでOK。

大事なのは「JavaScriptはHTML・CSSと別物」覚悟することです。

 

JavaScriptはプログラミング言語

WEBサイト制作から始めた人にとっては、JavaScriptは初めてのプログラミング言語になるはずですので、簡単な説明を。

 

プログラミング言語とは簡単に言うと、コンピュータに計算するように指示する言語です。

基本的には「変数という箱」を作って、その箱の中に入れたデータをどう扱うか指示する(コンピュータに計算させる)感じです。

 

で、データの扱い方として、

  1. 計算(四則演算)
  2. 文字列結合

などがある感じ。

 

HTMLやCSSがやっていたことは

  • HTMLは、タグ(マーク)を使って、構造を表現する言語
  • CSSは、見た目を記述する言語

でしたね。

JavaScript(プログラミング言語)は、「もっと複雑なことが出来るんだなー」と理解しておけばOKです。

 

プログラムの基本は「命令」の集まりです

プログラムの基本は、命令の集まりです。

  1. 「Aしろ」
  2. 「Bしろ」
  3. 「Cしろ」

という命令が書かれた指示書みたいなものです。

 

仮に、

  1. const language = "日本語";
  2. const talk = language + "を話せます";
  3. console.log(talk);

というプログラムがあった場合は、

 

  1. 「日本語」というデータが入った箱(language)を用意しろ
  2. 先程の「日本語」というデータが入った箱(language)と、「を話せます」という文字列をあわせたデータが入る箱(talk)を用意しろ
  3. 先程の箱(talk)を画面出力しろ

というプログラム(命令指示書)になりますね。

 

プログラミング言語のポイントは2つ→「条件分岐」と「繰り返し」

プログラミング言語のポイントは2つです。

  1. 「条件分岐」
  2. 「繰り返し」

 

ProgateのJavaScript学習コース1で学んだのは「条件分岐」でした。

 

先程言ったようにプログラムとは、コンピュータに対する「Aしろ」「Bしろ」「Cしろ」という命令の集まりです。

条件分岐を使うことで、もう少し複雑な命令「Xの場合は、Aしろ」が出来るようになります。

 

JavaScriptの条件分岐の種類

JavaScriptというプログラミング言語では、条件分岐の書き方が2種類あります。

  1. if else文
  2. switch文

詳しい使い分けは取り合えず気にしないでいいと思います。

とりあえず、2種類の書き方があるんだなーということだけ把握しておけばOKです。

 

以上、デイトラDAY13の解説でした。

 

JavaScriptの歴史とか背景はこのスライドを読むと雰囲気わかると思います(後半、技術用語多いので、雰囲気だけでOK)

qiita.com

 

www.engineer-step.com