【JavaScriptの基本①】基本構文(変数・関数)を理解することから始めよう！

こんにちは、こがたです。
ぼくは商品・サービスをURLベースで紹介できるサービス「Goorec」を運営しています。

こがた

普段使っている商品や自分のコンテンツを紹介できるので是非ご活用してみてください！

この記事ではJavaScriptを書くための基本的な構文(変数と関数)を説明していきます。

対象読者

これからJavaScriptを勉強する
JavaScriptってどんなものか知りたい
WEBページに動きをつけたい
ブログ運営している
プログラマーになりたい

JavaScriptを使えばWEBページに動きをつけることができます。
できること/できないことは↓↓↓をご覧ください。
(ニコ動のようなコメントが流れるコードも紹介しています)

【初心者向け】JavaScriptを使ってできること｜読み込み方とサンプルコード

いまではどのWEBページでもJavaScriptを利用しています。この記事ではJavaScriptの役割を説明して実際にどのようなことができるのかサンプルコード(ニコ動のようなコメント)を紹介します。JavaScriptがどういったことができるのか知りたい方は是非ご覧ください。

まずJavaScriptを手元で動かして確認する方法を解説します。
実際に手元で動かしてみましょう！

それからJavaScriptの構文について説明していきます。
問題も用意しているので、構文ごとに試してみてください！

こがた

意外と構文が少なくてビックリすると思いますよ！

ムズカしいという概念を取っ払っていきましょ〜！

最後にフロントサイド(HTML,CSS,JavaScript)全体の学習方法を紹介します。
自分で考えながらコーディングできるようになる最速の方法なので是非ご覧ください。

【初心者向け】HTMLの基本を理解して応用させていこう｜フロントサイドの知識

WEBアプリ・サイトの開発、ブログの運営にはクライアント(ユーザ)側で表示するフロントサイドの知識が欠かせません。この記事ではWEBページの内容であるHTMLについて初心者向けに説明しています。最後まで読むと自分で応用させることができるようになるので、是非読んでみてください。

【初心者向け】CSSの役割と書き方を学び応用力を身につけよう｜学習のやり方が重要

この記事ではCSSの学習方法と書き方を説明します。「CSSとは何か」というところから解説していくので、WEBアプリを開発したい方、ブログ運営されている方は最後までご覧ください。どのように学習すれば効率的に身につけられるのか紹介しているので、是非試してみてください。

事前知識(実行して確認してみよう！)
1. アラート表示
2. コンソール出力・確認方法
変数/定数の使い方
関数の使い方
自分で考えて実装できるようになるための学習方法
フロントエンドの学習方法
最後に

事前知識(実行して確認してみよう！)

実際に簡単なJavaScriptのコードを動かしていきましょう！

以下のコード(HTML)をコピーして「sample1.html」というファイル名で保存してください。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    
    <script>
        alert("サンプル実行");
        console.log("コンソール確認おめでとう！！");
    </script>
    <title>JavaScriptサンプル</title>
  </head>
  <body>
    <h1>JavaScript実行サンプル</h1>
  </body>
</html>

保存したファイルをダブルクリックしてみてください。
このような画面が表示されるはずです！

もし表示されなかったら保存したファイルをブラウザにドラッグ＆ドロップしてください。

おぉー、表示されたー！

こがた

これからコードの中を解説していきますね！

アラート表示

7行目でアラートを表示しています！

alert("サンプル実行");

JavaScriptはこのように処理ごとにセミコロン(;)を記載するルールになっています。

こがた

なにか注意喚起したいときにアラートを利用するとよいでしょう！

ここではWEBページを表示したときにアラート表示していますが、本来はボタンをクリックしたり、エラーを表示したりするときに使います。

初めてJavaScriptを動かせたよぉ！

コンソール出力・確認方法

コンソールとは入出力をまとめたものです。
分かりやすく言うと、入力や出力を確認できるようにしたものです。

先ほどのコードでは8行目にコンソールに入力しています。

console.log("コンソール確認おめでとう！！");

コンソールはGoogle Chromeの場合、表示したページで「右クリック」→「検証」をクリックすると右下に表示されます。

実際に入力した内容が表示されています！

本当だ！
コンソールに表示されてる！

でも何に使うんだ、、、？

コンソールの用途

入力内容の確認
エラー内容の確認

先ほどの例のように自分で入力して表示することができるので、変数の中身など確認する際に利用します。
(変数については後ほど解説します)

JavaScriptでエラーが起こったとき、コンソールにエラーの内容が出力されます。
そのため、どういったエラーがどこで発生しているのか確認する際にも利用します。

こがた

実際にコーディングしていく際は「WEBページ表示の確認」と「コンソール表示の確認」をしながら進めていくことになります。

変数/定数の使い方

プログラミングでは変数/定数の利用が必須です！

こがた

いきなり問題です！
以下の答えは何になるでしょう？

余裕じゃん！

この「X」と「Y」が変数/定数です。

変数と定数の違い

変数：値をあとで変えることができるもの
定数：値を変えることができないもの

こがた

それでは実際のコードをみて確認していきましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    
    <script>
        var x = 3;
        const y = 5;
        console.log(x + y);
        
        x = 7;
        console.log(x + y);
        
        y = 8;
        console.log(x + y);
    </script>
    <title>JavaScriptサンプル</title>
  </head>
  <body>
    <h1>JavaScript実行サンプル</h1>
  </body>
</html>

まず7,8行目に注目してください。
ここで変数(x)と定数(y)を作成しています。

「var」は、これから変数を作りますよ〜という合図です。

「const」は、これから定数を作りますよ〜という合図です。

また変数名/定数名(ここでいう「x」「y」)にもルールがあります。

変数名/定数名のルール

半角の英文字、アンダーバー(_)、ドル記号($)が使用できます
大文字と小文字は別の文字として扱われます
1文字目には数字は使用できません
JavaScriptの予約語(「var」のような構文で用意されているもの)は使用できません

変数はその値が何を指しているのかわかりやすように名付けるようにしましょう！

こがた

では実際にコンソールを確認してみよう！

↓↓↓のようになったよ！

9行目で「８」がコンソールに出力されています。

12行目で「12」がコンソールに出力されています。

おぉー、予想した通りだぁ^^

でも11行目はなんで「var」がないの？

変数や定数の宣言(var / const)は最初に作るときだけ使うものになります。

15行目は「15」かと思ったけど違うの〜？

問題は14行目の↓↓↓です。

y = 8;

y は const で宣言されているので定数です。

そのため、値を変更することができずに、コンソールにエラーが出力されました！

やっと変数と定数の違いがわかったよ！！

ん？ちょっと待って！
定数って必要なの？

こがた

たとえば毎回「5」など書いていると、それを修正したくなったときに全部変更しないとダメだよね、、、

でも定数を使うと１箇所変更すれば定数を使用してる全ての箇所が変わるから楽ちんだよ^^

変数には数字以外にも文字列・オブジェクト(データをまとめたもの)など代入することができます！

var blog = "こがたぶろぐ"
const owner = 'こがた'

文字列はこのようにダブルクオテーション(“)もしくはシングルクオテーション(‘)で囲むルールとなっています。

関数の使い方

関数は処理をまとめたものです。
同じ処理を何度も実行したい場合に利用します！

こがた

実際に動きをみて確認していきましょう！

これまでHTMLにJavaScriptを書いてましたがここでは外部ファイルを利用してみます。

外部ファイルについてはこちらをご覧ください。

【初心者向け】JavaScriptを使ってできること｜読み込み方とサンプルコード

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    
    <script src="sample3.js"></script>
    <title>JavaScriptサンプル</title>
  </head>
  <body>
  </body>
</html>

function kgtFeature(feature) {
    const kgt = "こがたは"
    console.log(kgt + feature);
}

kgtFeature("男性");

var looks = "イケメン";
kgtFeature(looks);

looks = "ちょんまげ";
kgtFeature(looks);

コンソール出力は↓↓↓になります。

サンプル内容が気になる笑

こがた

内容はスルーしてください！

ここでは特徴データを渡したら「こがたは」という主語を追加してコンソール出力する関数を定義しています。

１〜４行目で関数を定義しています。

関数は「function」で宣言します。

関数名も変数/定数と同様のルールの上で自由に設定することができます。
(ここでは「こがたの特徴」ということで「kgtFeature」と定義しています)

関数名は処理内容がわかりやすく、簡潔にすることを心がけましょう！

引数は関数に渡すときのデータが入る変数です。
ここでは１つだけ定義していますが、いくつでも設定することができます。
その場合はカンマ(,)で区切って設定します。

function 関数名(引数1, 引数2, 引数3) {
    処理内容
}

ちょっとずつわかってきたよ！

サンプルコードの場合、特徴データ(feature)を関数に渡して、「こがたは」に付け足してコンソール出力してるんだね！

６行目・９行目・１２行目で関数を利用しています。
直接データを渡すこともできますし、変数に格納して渡すこともできます。

こがた

関数は処理するだけでなく、処理したデータを返すこともできます！

関数から返ってくる値のことを返り値といいます。

10加算した値を返す関数を利用してみます。

function add10(data) {
    data = data + 10;
    return data;
}

var origin_num = 5;
console.log(origin_num);

var new_num = add10(origin_num);
console.log(new_num);