JavaScriptの基本例題集!変数・配列・関数などを一気にマスター!


JavaScriptの基本的な例題に挑戦してみたい
プログラミングの知識をより深めるための確認をしたい
基本構文や配列・関数の例題が見つからない…

JavaScriptの基本的な学習を進めていく中で、より知識を深めるため例題に挑戦してみるというのは非常に有効な方法です。

また、学習で得た基礎知識だけを活用して実際にプログラムを書いてみるというのは、知識を定着させるのに有効でしょう。しかし、どのように例題を確認してサンプルプログラムを作っていけば良いのでしょうか?

この記事では、JavaScriptの基本的な構文を例題を用いて学習するための方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がJavaScriptの不安を解消できれば幸いです。

変数の例題

この章では、JavaScriptプログラミングのもっとも基本と言える変数についての例題に挑戦してみましょう。主に、let / constの使い分けやスコープの概念について学習することができます。

let/constの使い分け

ES2015(ES6)から導入されたlet / constに関連した例題から見ていきましょう!

次の例題は、2つの変数の中身をコンソールログに出力するというものですが、正しい文章を以下の選択肢から1つ選んでください!

let name1 = 'イチゴ';
const name2 = 'バナナ';

name1 = 'メロン';
console.log(name1);

name2 = 'スイカ';
console.log(name2);

<選択肢>

  1. name1はメロン。name2はエラー
  2. name1はイチゴ。name2はスイカ
  3. name1はメロン。name2はバナナ

※正解はURL:コチラから閲覧できます。

次の例題は、いくつかの変数宣言を行っています。正しい文章を以下の選択肢から1つ選んでください。

let name1 = 'イチゴ';
let name2 = 'バナナ';

let name1 = name2;

<選択肢>

  1. name1はイチゴ。name2はバナナ
  2. name1はエラー。name2はバナナ
  3. name1はバナナ。name2はバナナ

※正解はURL:コチラから閲覧できます。

次の例題は、オブジェクトの作成とプロパティの値を代入しています。正しい文章を以下の選択肢から1つ選んでください。

const myobj = {
  name: 'イチゴ',
  price: 300
}

myobj.name = 'メロン';

console.log(myobj.name);

<選択肢>

  1. メロン
  2. イチゴ
  3. エラーになる

※正解はURL:コチラから閲覧できます。

スコープについて

変数を扱う上で重要な概念となるスコープについての例題を見ていきましょう。

スコープは変数が利用できる範囲を意味しており、適切に活用することでバグの少ない効率の良いプログラムを書けるようになります。

次の例題は、IF文の外と中で変数を宣言しています。正しい文章を以下の選択肢から1つ選んでください。

let name1 = 'イチゴ';

if(true) {
  var name2 = 'バナナ';
  
  name1 = 'メロン';
}

console.log(name1);
console.log(name2);

<選択肢>

  1. name1の出力はイチゴ。name2の出力はundefined。
  2. name1の出力はメロン。name2の出力はバナナ。
  3. name1の出力はメロン。name2の出力はundefined。

※正解はURL:コチラから閲覧できます。

次の例題は、前問のコードを少しだけ改良しています。正しい文章を以下の選択肢から1つ選んでください。

let name1 = 'イチゴ';

if(true) {
  let name2 = 'バナナ';
  
  name1 = 'メロン';
}

console.log(name1);
console.log(name2);

<選択肢>

  1. name1の出力はメロン。name2の出力はエラー。
  2. name1の出力はイチゴ。name2の出力はバナナ。
  3. name1の出力はメロン。name2の出力はバナナ。

※正解はURL:コチラから閲覧できます。

次の例題は、関数の外と中で変数を宣言しています。正しい文章を以下の選択肢から1つ選んでください。

let name1 = 'イチゴ';

function sample() {
  var name2 = 'バナナ';
  
  name1 = 'メロン';
}

sample();

console.log(name1);
console.log(name2);

<選択肢>

  1. name1の出力はイチゴ。name2の出力はバナナ。
  2. name1の出力はメロン。name2の出力はバナナ。
  3. name1の出力はメロン。name2の出力はエラー。

※正解はURL:コチラから閲覧できます。

変数についての知識にまだ不安のある方は、次の記事で基礎から応用までを体系的にまとめているのでぜひ合わせて参考にしてみてください!

JavaScriptの変数って何? varで宣言や初期化をしてみよう!
更新日 : 2019年4月26日

配列の例題

この章では、複数のデータを扱うための配列に関連した例題をいくつか見ていきましょう!基本的な使い方からメソッドを利用した実践的なプログラミング手法についても学ぶことが出来ます。

基礎知識

まずは、配列の基本的な使い方について見ていきましょう!

配列を扱えるようになると複数のデータをプログラム内で効率よく活用することができるので、パフォーマンスの向上やコードの軽量化にも繋がります。

次の例題は、配列を作成したあとに任意の値を代入しています。正しい文章を以下の選択肢から1つ選んでください。

const items = ['イチゴ', 'バナナ', 'メロン', 'スイカ'];

items[0] = 'ミカン';

console.log(items);

<選択肢>

  1. itemsの中身は["ミカン", "バナナ", "メロン", "スイカ"]
  2. itemsの中身は["イチゴ", "バナナ", "メロン", "スイカ"]
  3. エラーになる

※正解はURL:コチラから閲覧できます。

次の例題は、複数の配列を階層構造にして作成しているのですが、コンソールログに【true】を表示するにはどうすれば良いでしょうか?正しい文章を以下の選択肢から1つ選んでください。

const items = ['イチゴ', 'バナナ', 'メロン', 'スイカ'];

items[1] = [1,2,3,4,5];
items[1][2] = [true, false];

<選択肢>

  1. items[1][2]
  2. items[1][2][0]
  3. エラーになるので表示されない

※正解はURL:コチラから閲覧できます。

次の例題は、for文を利用して配列要素の中身を出力しています。正しい文章を以下の選択肢から1つ選んでください。

const items = [0,1,2,3,4,5,6,7,8,9];

for(let i=0; i

<選択肢>

  1. 出力結果は、0,2,4,6,8
  2. 出力結果は、1,3,5,7,9
  3. 出力結果は、0

※正解はURL:コチラから閲覧できます。

配列メソッドについて

今度は、配列でよく使われるメソッドの使い方について見ていきましょう!

メソッドを組み合わせることで、配列に格納された要素をより効率よく扱えるようになります。

次の例題は、slice / pushを利用して配列要素に手を加えています。正しい文章を以下の選択肢から1つ選んでください。

const items = ['太郎', '二郎', '三郎', '四郎'];

items.slice(1);
items.push('五郎');

console.log(items);

<選択肢>

  1. ["二郎", "三郎", "四郎", "五郎"]
  2. ["三郎", "四郎", "五郎"]
  3. ["太郎", "二郎", "三郎", "四郎", "五郎"]

※正解はURL:コチラから閲覧できます。

次の例題は、slice / joinを利用して配列要素に手を加えています。正しい文章を以下の選択肢から1つ選んでください。

const items = ['太郎', '二郎', '三郎', '四郎'];
const result = items.slice(2).join('と');

console.log(result);

<選択肢>

  1. 三郎,四郎
  2. 三郎と四郎
  3. 四郎

※正解はURL:コチラから閲覧できます。

次の例題は、繰り返し処理を効率化するforEachに配列要素を利用しています。正しい文章を以下の選択肢から1つ選んでください。

const items = ['太郎'];

items.forEach(function(a,b,c) {
  console.log(a);
  console.log(b);
  console.log(c);
});

<選択肢>

  1. aは配列要素、bはインデックス番号、cはundefined
  2. aはインデックス番号、bは配列要素、cは現在処理している配列
  3. aは配列要素、bはインデックス番号、cは現在処理している配列

※正解はURL:コチラから閲覧できます。

配列についての基礎から活用技までを再確認したい場合は、次の記事で体系的にまとめているのでぜひ参考にしてみてください!

【JavaScript入門】配列の使い方と操作まとめ(初期化・追加・結合・検索・削除)
更新日 : 2020年3月10日

関数の例題

この章では、さまざまな処理をまとめられる関数について見ていきましょう。基本的な使い方からちょっとした活用方法までを学んでいきます。

基礎知識

まずは、基本的な関数定義の方法から見ていきましょう!

次の例題は、単純な文字列を出力するだけの基本的な関数を作成しています。正しい文章を以下の選択肢から1つ選んでください。

function showLog() {

    console.log('Hello Function');

}

<選択肢>

  1. showLog
  2. showLog()
  3. ()showLog

※正解はURL:コチラから閲覧できます。

次の例題は、いくつか方法の違う関数定義を行っています。正しい文章を以下の選択肢から1つ選んでください。

// 1つ目の関数
function showLog() {
  console.log('Hello Function');
}

// 2つ目の関数
const showLog2 = function() {
  console.log('Hello Function');
}

// 3つ目の関数
const showLog3 = new Function('console.log("Hello Function");');

<選択肢>

  1. 1つ目、2つ目だけ動作する
  2. 3つ目だけ動作する
  3. すべて正しく動作する

※正解はURL:コチラから閲覧できます。

次の例題は、ES2015(ES6)から利用できるようになったアロー関数を3種類作成しています。正しい文章を以下の選択肢から1つ選んでください。

// 1つ目の関数
const showLog = () => console.log('Hello Function');

// 2つ目の関数
const showLog3 = name => console.log('Hello ' + name);

// 3つ目の関数
const showLog2 => console.log('Hello Function');

<選択肢>

  1. 1つ目と3つ目だけ正しく動作する
  2. 1つ目と2つ目だけ正しく動作する
  3. すべて正しく動作する

※正解はURL:コチラから閲覧できます。

関数の応用

今度は、関数を作成する際によく使う手法や概念について見ていきましょう!

次の例題は、引数を2つだけ持つ関数を作成しています。実行結果として正しい文章を以下の選択肢から1つ選んでください。

function showLog(name, age) {
  console.log(name + 'さんの年齢は' + age + '歳です');
}

showLog('太郎', '30', '東京都');

<選択肢>

  1. 太郎さんの年齢は30歳です
  2. 太郎さんの年齢は30歳です東京都
  3. エラーになる

※正解はURL:コチラから閲覧できます。

次の例題は、関数の処理内でreturnを利用しています。実行結果として正しい文章を以下の選択肢から1つ選んでください。

function showLog(name) {
  return 'こんにちは、' + name + 'さん';
}

showLog('太郎');

<選択肢>

  1. こんにちは、太郎さん
  2. 太郎
  3. 何も表示されない

※正解はURL:コチラから閲覧できます。

次の例題は、オブジェクトのプロパティとして関数を作り、その中へさらに別の関数を作成しています。それぞれのthisはどのように表示されるでしょうか?

const myobj = {
  showLog1: function() {
    console.log(this);
    
    function showLog2() {
      console.log(this);
    }
    
    showLog2();
  }
}

myobj.showLog1();

<選択肢>

  1. showLog1のthisはmyobjを意味し、showLog2のthisもmyobjを意味している
  2. showLog1のthisはmyobjを意味し、showLog2のthisはwindowオブジェクトを意味している
  3. showLog1のthisはmyobjを意味し、showLog2のthisはundefinedを意味している

※正解はURL:コチラから閲覧できます。

JavaScriptの関数について基礎から応用技までを次の記事で体系的にまとめているので、まだ不安のある方はぜひ参考にしてみてください!

【JavaScript入門】function(関数)の使い方、呼び出し・戻り値など総まとめ!
更新日 : 2019年4月21日

まとめ

今回は、JavaScriptの基本的な構文を学べる例題をいくつかまとめてみました。

基本的なプログラムが書けるようになった段階で、今回のような例題に挑戦してみると知識の定着とプログラムを読む力が増していくので非常にオススメです。

ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

マサト

マサト

フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習やキャリアのお悩み、お気軽にご相談ください。