初めに
前回はchatGPTさんに学習カリキュラムを組んでもらいました。
カリキュラムの全体やあらましが気になる方はこちらをご覧ください。
（大したことは書いてないのですっ飛ばしていただいても大丈夫です）
というわけで、いよいよchatGPT先生のご指示に従い
学習を始めていきたいと思います。
第１週目である今回、学習する内容は以下の通りです。
- JavaScriptとは何か
- 基本的な文法
- データ型
- 変数
- 演算子
- 制御構文
かなりボリュームがあるので、カテゴリごとに記事を分けました。
記事の最後にリンクを貼っておくので、
「〇〇だけ詳しくみたい！」というかたは、そちらからご覧いただけると幸いです。
学習の進め方
せっかく「chatGPTと学ぶ」と銘打っているので
所々でchatGPTを使っていきたい所存。
なので、基礎知識などはchatGPTに質問して概要を掴み、
その後参考書などを確認して、その概要が正しいかの検証と深掘りをしてみたいと思います。
実際にコーディングするときも、手が止まった時にアドバイスをもらう意図で質問してみても面白いかもしれません。
なんにせよ、chatGPTだけを鵜呑みにするのは危険なので
ちゃんと調べながら進めたいと思います。
当記事では、
- JavaScriptとは何か
- 基本的な文法
を見ていきたいと思います。
では早速始めましょう！！
JavaScriptとは何か
「JavaScript」って何者？という話ですね。
参考書などを読んでいると、よく「DOMを操作する」とか見かけますが
初学者からしたらなんのこっちゃです。
なのでまずはchatGPT先生に質問してみます。
JavaScriptとはなんですか？
小学生でもわかるように、簡潔に説明してください。
chatGPTの答え
JavaScriptは、Webページを動的にするためのプログラミング言語で、文字を書き換えたり、要素の追加や削除、スタイルの変更、動的なアニメーションの実現などが可能です。ユーザーのアクションに反応して動きを変えることもできます。Webページ上でのさまざまな動きや機能を実現するために使われます。
...
なるほど、簡単簡潔に説明してくれました。
しかし、文中にある「動的」という言葉。
これ、慣れない人にはわかりづらいんですよね〜。
最初はアニメーションが入っている（画面に動きがある）って意味だと思ってました。
でも単純なアニメーションならCSSだけでも入れられるわけですし、
そういう意味ではないみたいです。
ここでいう「動的」とはすなわち
ユーザーのアクションや情報に応じて、画面に表示する情報（要素やスタイル）を変える
という意味みたいです。
例えば、
「ユーザーがこの要素までスクロールしたら、下からリンクボタンを出す」
「入力フォームで、必須項目の中に未入力の項目がある状態で送信ボタンを押した場合、エラー文を出す」
というのは、ユーザーの行動によって画面の状態が変わっているので
「動的なサイト」ということになります。
このような機能はHTMLやCSSだけで実装することができませんので
JavaScriptの出番というわけですねー
JavaScriptを使うことで
HTML/CSSだけで実装するよりも、よりリッチで使いやすいWebサイトが作れるようになる！
らしいです。
早く使いこなせるようになりたいものですねー
基本的な文法
さて、なんとなくJavaScriptの必要性は分かりましたが、
実際にどうやって書くのでしょう？
これもchatGPT先生に聞いてみました
JavaScriptの書き方を教えてください。
chatGPTの答え
- HTML内にJavaScriptを書く
HTMLファイル内の<script>タグにJavaScriptのコードを記述する方法です。
<script>タグの中に直接コードを書いたり、外部ファイルを読み込んで実行することができます。
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>hello,world!</h1>
<script>
alert("Hello,World!");
</script>
</body>
</html>
- 外部ファイルにJavaScriptを書く
HTMLファイルから外部ファイルに保存したJavaScriptのファイルを読み込む方法です。
<script>タグ内にsrc属性を指定して、外部ファイルのパスを指定することで読み込むことができます。
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script src="script.js"></script>
</head>
<body>
<h1>hello,world!</h1>
</body>
</html>
外部ファイルに保存したJavaScriptファイル（script.js）の中身は以下のようになります。
alert("Hello,World!");
- ブラウザのコンソールでJavaScriptを実行する
ブラウザのコンソールを使って、JavaScriptを実行することもできます。
ブラウザのコンソールは開発者ツールからアクセスできます。
一般的にF12キーを押すか、右クリックして「検証」を選択します。
コンソールに直接JavaScriptコードを入力して実行することがきます。
以下はコンソールに"Hello,World!"と表示するコードを入力する例です。
console.log("Hello,World!");
...
すごいですね。実際の例を出しながら説明してくれました。
説明を見るに、<script>タグの中にコードを書くか、src属性で外部ファイルを読み込むのが基本だろうと思います。
しかし、方法が３つあるならどのように使い分ければいいのでしょう？
1つ目の「HTML内にJavaScriptを書く」方法は、ファイルを分けずにHTMLファイルだけで完結するので一見楽そうに思うかもしれません。
しかしこの方法だと、他のページで同じ処理をしたい場合
もう一度同じJavaScriptのコードを、別のページ用に書き直さないといけません。
（めんどくさっ）
それにHTMLのファイルにJavaScriptのコードがあることで煩雑になって
読み解くのがものすごくめんどくさくなります。
「読みづらいコード」は害悪です。
一部の例外（システムの設計上必要な場合など）もあるらしいですが
基本的にはやめた方が良いですね。
では、HTMLファイルにコードを直接書くのではなく
JavaScriptのファイルを別に作って読み込む（２つ目の「外部ファイルにJavaScriptを書く」のことですね）として、
HTMLファイルのどこで読み込めば良いのでしょう？
方法としては<head>タグの中に書く、もしくは<body>タグの中に書く
の２パターンが考えられますが、あなたならどちらに記載しますか？
一般的には以下のような書き方をします。
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>hello,world!</h1>
<p>hogehogehogehogehogehogehogehoge</p>
<script src="script.js"></script>
</body>
</html>
そう、<body>タグの中、それも閉じタグの直前に書きます。
なぜなら<head>タグの中や<body>タグの途中に記載されている場合、
画面が全て表示されるまでにかなり時間がかかってしまう可能性があるからです。
（HTMLファイルは上から順に読み込まれるので、途中にあるJavaScriptの処理に引っかかって、下の方にあるHTMLのコードが読み込まれるまでに時間がかかってしまうため）
JavaScriptのファイルを最後に読み込むことで
全てのHTMLのコードが読み込まれた後にJavaScriptの処理が動きます。
すぐに画面が表示され、ユーザーはストレスなくWebサイトを閲覧することができるようになるわけです。
３つ目の「ブラウザのコンソールでJavaScriptを実行する」ですが
これは画面表示のため、と言うよりは開発中のテストやデバッグ時に使います。
（コンソールは開発者ツールを開かないと見られませんから、一般ユーザーの目には触れません。...同業者やマニアックな人は見られるでしょうけどね。）
JavaScriptで処理を書いている時に、途中までうまく動いているか確認するためコンソールに適当な文字を表示させる、などの使い方をします。
これは実際コードを書き始めるとイメージできるようになる...はず。
さて、なんとなく記載する場所は分かりましたが、どうやってコードを書けば良いのでしょう？
コードを書くにはまず以下のことを知っておく必要があるようです。
- データ型
- 変数
- 演算子
- 制御構文
これらについては次回以降の記事にまとめたいと思います。
リンク
全てのカリキュラムへのリンクは導入編に置いております
導入編
JavaScriptとは何か、基本的な文法 ⇦NOW!!
データ型
変数
演算子
制御構文