雑記

【JavaScript超入門】基礎から学べるサンプルコード解説|第1回

基礎から学べるJavaScriptサンプルコードについて分かりやすく解説していきたいと思います。

初心者でも理解しやすいようにサンプルのソースコードを交えながら解説していきます。

それではまいりましょう。

値と変数の基本

JavaScriptはオブジェクト指向言語です。ただブラウザの中に組み込まれて、

ブラウザでしか動かない言語だと思っているという人もいますが、違います。

Node.jsなどのサーバーサイドのプログラムも書けるのです。

これはJavaScript超入門なのでブラウザのコンソールで動作を確認して行こうと思います。

煩わしい開発環境を立てる必要もないので。

これを読めばJavaScriptの基本を完全に理解した!というわけではありませんが、

最低限のことは読めるようになると思います。

※JavaScirptの簡略表記でJSと書きます。
※HTMLの知識は必須となります。分からない人はネットで調べるなり、本を読んで学ぶなりしてください。

とりあえずHello World

まずはプログラムの基本Hello Worldから。

index.htmlのファイルを作成し下記のように記述してください。

html
<!DOCTYPE html> 
<html lang="ja">
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <title>HELLO</title>
   </head>
   <body>
    <h1>
     <script>document.write('Hello World!');</script>
    </h1>
   </body>
</html>

 

そしてこれをブラウザから開いてください。

Hello World!が表示されるはずです。

簡単にいうとJSのdocumentを使ってHello Worldを書けという命令をしています。

中で何をやっているのかはとりあえず無視して、

documentはhtmlを操作するものなんだと言うことを感じてください。

大文字と小文字は区別される

大文字と小文字は別の文字として扱われます。aとAは別物です。

例えば『var hello;』『var Hello;』は違う変数として区別されます。

スペースは無視

JSを書くとき、スペースは無視されます。

ですが可読性を考慮するとスペースはある方が断然読み易いです。

var a = 1 + 2

 

ただし変数を宣言するときは必ずスペースが必要になります。

上記のように書く。

インデントはつける

JSはPythonやRubyのようにインデントでコードを判別しませんが、

やはり可読性を考慮するとインデントはつけた方が良いです。

if (true) {
    alert('test');
 }

文は改行またはセミコロンで終わる

コードの終わりは改行、もしくはセミコロンで判断します。

どちらかをつければJSが勝手に判定してくれます。

セミコロンをつけない書き方をデフォルトにしている場合もあるので、

そこはスタイルガイドに合わせて書きましょう。

コメント

JSのコメントの書き方は2種類あります。

1行だけつける際は、『//』 

複数行に書く際は、『/* */』

// 1行のコメントです 
/* 
この間に書けばコメントになります。
*/

JSのスクリプトの書き方

ブラウザの中でJSの書き方は大きく2つあります。

1つは<script>タグを使うやり方です。

<h1>
  <script>document.write('Hello World!');</script>
</h1>

 

<script>の中にはいくらでも書けます。

何十万行と書いても問題ありません。

でも実際する人はいません。

そんなことしたらアホです。

良識ある普通の人なら別ファイルに分けるでしょう。

別ファイルに分ける書き方

もう一つのスクリプトの書き方は、別ファイルに用意して書くやり方です。

index.htmlと同じ場所にscript.jsのファイルを作成してください。

下記のように記述してみましょう。

document.write('<p>scriptファイルを読み込んでいます。</p>');

 

ファイルを作成したら<head>タグの中に書き込んでください。

<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <script src="script.js"></script>
   <title>HELLO</title>
</head>

 

index.htmlを保存してリロードしてください。

『scriptファイルを読み込んでいます。』が表示されるはずです。

scriptタグと属性

別ファイルでスクリプトを用意する場合は、このように<script>タグを記述します。

<script src="スクリプトファイル"></script>

 

srcと言う属性に、読み込むスクリプトの名前を書くだけです。

<script>タグがある場所に、srcで指定したスクリプトが読み込まれます。

これは複数書くこともできます。

<script>タグ内に書くよりもこちらの記述の方がスッキリします。

複数スクリプトファイルを読み込む場合はなおさらです。

値について

値は他の言語と同じです。数値、文字列、真偽値になります。

数値の書き方

123 | 0.0001 | 456000.123

 

カンマはつけることができません。

つける場合は文字列で書く必要があります。

‘1,000’←これは数値ではなくなる。

文字列の書き方

"Hello" | "あいう" | 'This is "JS". '

 

シングルクォート(’ ‘)、ダブルクォート(” “)、どちらかで囲ってください。

文字列の中にダブルクォートを書く必要があるときは

シングルクォートを使うと(” “)が表示されます。

反対も同じです。

真偽値

真偽値は真か偽か二者択一の状態を示すのに用いられる値です。

trueとfalseの二つです。

JSは値の評価でtrue、falseの判定が違ってきます。

例:0はfalse、-1はtrue

この辺は型が絡んでくるので慣れてから調べるのが良いと思うので今は書きません。

変数について

値を保管しておくための入れ物の役割をします。

他のプログラム言語と同じです。しかし宣言の仕方が変わります。

var 変数 = 値;
let 変数 = 値;

varとletの違いは、

一言で言うと、変数のスコープがブロックスコープ関数スコープかの違いです。

スコープについては割愛します。説明が長くなるので。

各自調べるか、わかる人に聞いてください。

最近はvarよりもletが好まれて使われます。

変数は宣言しなくてもかける

JSではvarやletの宣言をしなくても問題ありません。

JSが判断して自動的に変数を用意してくれます。

つけなくても良いと思われるかもしれませんが、

宣言をすることによりソースコードを見たときに、

その変数がどこで使用され始めたのかが分かりやすくなるので

値を追いかけるのにとても便利です。

定数もある

変数は、いつでも値を代入可能ですが、定数は一度値を入れると変更できないものです。

const 定数 = 値;

定数は、宣言をしたときに値を設定し、それ以降は一切変更できません。

ですので宣言後に値を入れると言うやり方はできません。

定数を使うときは必ず『const』を使ってください。

定数は状態の変更をしたくないときに使われます。

例えば消費税の計算をするときは8を使います。

この8は計算するときに勝手に変更されると困ります。

変数に入れても値が変わってしまうので定数に入れて変更できないようにするのです。

const COMSUMPTION_TAX = 8;

 

こうすれば消費税率が勝手に変更されることもありません。

四則演算

値や変数は、様々な計算をするときに使います。

数字の基本的な計算(四則演算)は『 + , -, *, / 』を使って計算をします。

var x = 1 + 2 - 3;
var y = (4 / 2) * 5


かっこも使うことができます。

数字の代わりに変数や定数も使うことができます。

『=』を使えば変数に計算した値を入れることもできます。

計算をしてみよう

値・変数・計算、基本的なものが分かりました。

実際にこれらを使ってみましょう。

上で作成したscript.jsのファイルを下記のように変更しましょう。

let price = 14800;
document.write('<p>価格:' + price + '円</p>');
const TAX = 0.1;
price = price * (1.0 + TAX);
document.write('<p>税込価格:' + price + '円</p>');


保存したらwebブラウザでindex.htmlを見てみましょう。

『価格:12300円』、『税込価格:16280円』が表示されます。

テキストとの足し算

ここではいくつかのテクニックが使われています。

まずdocument.writeをみてみましょう。

document.writeはJSのに予め用意されているメソッドです。

今は深く考えないでください。

こう書けばWebの画面に値を表示できるということだけ覚えておいてください。

この部分には『‘<p>価格:’ + price + ‘円</p>’』という値が書いてあります。

ここでテキストと変数を+記号で計算しています。

テキストはこんな具合に+記号で計算できるのです。

要するに2つの値を1つのテキストに繋げるというものです。

自分を自分に代入する

変数priceと定数TAXを用意して税込価格を計算しています。

よく見ると不思議な書き方をしています。

price = price * (1.0 + TAX);

 

priceの値をpriceを使って計算しています。

普通の数学だと『x = x + 1』はあり得ないと思います。

しかしプログラミングの世界ではイコールは値の代入の記号です。

これはアリなのです。

同じpriceの値が違う

値を表示するdocument.writeが2つ書いてあります。

最初は元の金額を表示するための部分です。

document.write('<p>価格:' + price + '円</p>');

 

2つめは、計算した税込価格を表示するための部分です。

priceをテキストでつなげて表示しています。

document.write('<p>税込価格:' + price + '円</p>');

 

変数priceの値を表示しています。

それなのに表示される金額は違っています。

どちらもpriceの値を表示しているのだから同じ値になりそうな気もするのですが。

JSは最初の文から順番に文を実行していきます。

1つ実行して次に。。。というのを繰り返しているので同じ変数を表示しても

途中で変数の値が変わっていれば表示される値も変わるのが当たり前です。

document.writeの表示は「それが実行されたときの値」を表示します。

その後で値が変わっても一度表示された値は変わらないのです。

ここまでがJavaScript超入門 第1回です。

自分のJSに関する知識を整理するためにも2,3と続けて書こうと考えております。

 

😊参考書籍😊

【JavaScript超入門】基礎から学べるサンプルコード解説|第2回前回に引き続き、基礎から学べるJavaScriptサンプルコードについて解説していきたいと思います。 それでは早速まいりましょう。...