[JavaScript] はじめてのJavaScript その1

注意 : この記事は私の非常に少ない知識と偏見で書かれているので、ここに書いてあることを信じ込み何らかの不利益を被ったとて何の責任も負えません。ご指摘等はウェルカムです。

こんにちは。tomoです。
ここ最近JavaScriptとか言うプログラミング言語を勉強しています。

はじめに

なぜJavaScriptかというとスマホで操作可能なアプリケーションを作りたかったからです。

最初は正々堂々とAndroidアプリを作ろうかと思ったんですが、家の(買ってから結構年数が経っている)ノートPCの残り容量が少なく、VisualStudioにAndroidアプリ作成パッケージを入れるのが辛かったのでWebアプリにすればいんじゃね？と思ってJavaScriptを勉強することにしました。
(Github pagesというものを使えばサーバーを借りたり立てたりする必要もないですし。)

そしてスキルの低さをさらけ出すことにはなりますが、備忘録ついでにJavaScriptプログラミング初心者の方にとって何かしらの助けになればということでnoteにまとめようと思った次第です。
たぶん盛大に意図せずウソをつきまくることになると思うのでご指摘は大歓迎です。

ちなみに今回はクイズアプリを作っていこうと思っています。内容はそんなに凝ってなくて「クイズを出す」「ユーザーが答える」「正解！とか言う」程度のものを考えてます。

JavaScriptとは

ぼくは知識やスキルを身に着けようとするときにはまず何となく「全体像」を把握してから勉強したいと思う派なので、はじめはJavaScriptって何やねんって言う話から。

そもそも我々が普段閲覧しているWebページはどのようにしてGoogle ChromeやMicrosoft EdgeといったWebブラウザに表示されているかというとたぶんこんな感じ。

この絵の中でサーバーから送られてくるやつら(ファイル)の中にJavaScriptファイルがいます。ちなみにこの他にも画像ファイルとかも送ってきます。

HTML / CSS / JavaScript がそれぞれ概ねどのような役割かというと、

HTML (HyperText Markup Language)
我々がブラウザで目にする文字や画像の情報が書かれているファイルですね。ブラウザに表示されている文字列や写真などはほとんどすべてこのHTMLファイルに記述されています。

CSS (Cascading Style Sheets)
HTMLで記述されている文字や画像を装飾したり、ページに表示される枠組み(このような要素をまとめてスタイルと呼ぶ)の定義が記述されているファイルです。

JavaScript
JavaScript自体は言語を表します。JavaScriptが何をしてくれるかというとページに存在するボタンがクリックされたことなどを認識して先述のHTMLファイルの記述を書き直したり、サーバーと情報をやりとりしてくれたりします。

今回使用しようとしているGithub pagesではサーバーで処理するサーバーアプリケーションというものは利用できないので、ブラウザで動作する上記の3要素 (HTML / CSS / JavaScript) だけで完結するクイズアプリを考えています。

要するにHTML/CSSでクイズや正解情報を表示して、JavaScriptがユーザーの回答に対し正誤判定をすることになると思われます。

おわりに

という感じで今回はここまで。

まだクイズアプリ作成に全く入ってないし、この記事に興味をもつひとなら誰でも知ってるわというような内容かもしれませんが…。

次回はクイズアプリの構想から書いていく予定です。

次回