CodeRyoku's BLOG

プログラミング教育サービス「CodeRyoku」の公式ブログです。CodeRyokuの講師が、プログラミングの基本のTipsや講座の開講情報など、ゆるく綴っていきます。

公式サイトはこちら

2018-07-06

【入門編】はじめてのJavaScriptプログラミング

written by: ARAKAWA

keywords: プログラミング, ウェブサイト制作, JavaScript, 初心者

JavaScriptのプログラミングコードのイメージです。

初心者向け、JavaScriptのプログラミングの入門です。JavaScriptを電卓代わりに使用する簡単なコードをサクッと試してみたいと思います。

1. 準備

早速、電卓を作りましょう。と言いたいところですが、その前にHTMLファイルを準備しておく必要があります。JavaScriptはHTMLの基本的なことが理解できている前提なので、HTMLファイルの雛形の準備については割愛します。body要素の終了タグの手前にscript要素を用意し、その中にJavaScriptのコードを記述していくことになります。外部ファイルに記述してHTMLファイルから参照する方法もありますが、今回は簡単に試すためにHTMLファイルの中に記述することとします。

2. 足し算

では、本題です。まずは、足し算を試してみましょう。以下のプログラムをscript要素の中身に記述します。

index.html(JavaScript)

console.log(5+3);
console.log(9+8);

実際に演算をしているのは、5+39+8の部分です。console.log(〜);コンソールという場所に出力してくださいという意味になります。コンソールはブラウザから確認することができます。使用しているブラウザによってコンソールの表示方法が異なるので、調べてみてください。ブラウザを開いてHTMLファイルを表示してみると、以下のようにコンソールに出力されていることが確認できます。

8
17

3. その他の四則演算

足し算を試してみることができました。もちろん、引き算や掛け算、割り算もできます。

index.html(JavaScript)

console.log(10-4);
console.log(8*7);
console.log(12/3);

掛け算や割り算は、直感的には×記号や÷記号を使ってしまいそうですが、掛け算はアスタリスク記号、割り算はスラッシュ記号を使うので注意が必要です。先ほど同様に、コンソール出力を確認してみると、

6
56
4

と表示されており、正しく計算できています。

4. 応用編

入門からは少し進んで応用編になってしまうかもしれませんが、電卓代わりと言うからには、もう少し数学的なこともできるとよいかな、ということで紹介します。例えば、以下のように記述することでルート演算や円周率を扱うこともできます。

index.html(JavaScript)

console.log(Math.sqrt(49));
console.log(Math.PI);

結果は以下の通りです。

7
3.14159...

JavaScriptに用意されているMathオブジェクトと呼ばれるものを利用しています。Mathオブジェクトの詳細は入門ではなくなってしまうので割愛しますが、これを使うことで、ここで紹介したルート演算や円周率の他にも、様々な数学計算を簡単に実現することができるので非常に便利です。

5. まとめ

今回は「はじめてのJavaScriptプログラミング」ということで「JavaScriptを電卓代わりにする」という内容にトライしてみました。意外と簡単に四則演算や数学計算を実現できるということを感じていただけたのではないでしょうか。今回は計算部分の紹介だけでしたが、さらに発展させて、ブラウザに入力欄を設けて、入力データを取得、計算した結果をブラウザに表示するロジックにすれば、本格的な電卓アプリケーションを作ることもできます。この辺も含めた電卓アプリケーションの作り方も機会があれば紹介したいと思います。

プログラミングを学びたいですか?
CodeRyokuではプロのITエンジニアによるプログラミング講座、ワークショップを東京、博多、仙台、オンラインで開講しています。オンラインセミナーは全国各地から受講可能です。詳しくは、こちらのページをご覧ください。また、子ども向けプログラミング教室を東京、博多、仙台、大分、オンラインで開講しています。詳しくは、こちらのページをご覧ください。

ブログトップへ戻る

 PROFILE

Kohei ARAKAWA
- System Engineer

宮城県出身のITエンジニア。国内大手IT企業にてシステム開発プロジェクトのプロジェクトマネジメント、複数のWebサイト構築実績。「HTML5レベル1」認定プロフェッショナル等。


 KEYWORDS


 ARCHIVE