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);

＜選択肢＞

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

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

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

let name1 = name2;

＜選択肢＞

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

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

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

myobj.name = 'メロン';

console.log(myobj.name);

＜選択肢＞

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

スコープについて

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

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

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

let name1 = 'イチゴ';

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

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

＜選択肢＞

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

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

let name1 = 'イチゴ';

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

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

＜選択肢＞

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

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

let name1 = 'イチゴ';

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

sample();

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

＜選択肢＞

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

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

JavaScriptの変数って何? varで宣言や初期化をしてみよう!

更新日：2024年3月29日

配列の例題

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

基礎知識

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

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

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

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

items[0] = 'ミカン';

console.log(items);

＜選択肢＞

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

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

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

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

＜選択肢＞

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

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

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

for(let i=0; i<items.length; i++) {
  if(i % 2 === 0) {
    console.log(items[i]);
  }
}

＜選択肢＞

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

配列メソッドについて

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

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

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

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

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

console.log(items);

＜選択肢＞

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

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

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

console.log(result);

＜選択肢＞

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

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

const items = ['太郎'];

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

＜選択肢＞

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

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

【JavaScript入門】配列の使い方と操作まとめ（初期化・追加・結合・検索・削除）

更新日：2024年3月29日

関数の例題

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

基礎知識

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

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

function showLog() {

    console.log('Hello Function');

}

＜選択肢＞

※正解は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");');

＜選択肢＞

※正解は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');

＜選択肢＞

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

関数の応用

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

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

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

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

＜選択肢＞

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

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

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

showLog('太郎');

＜選択肢＞

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

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

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

myobj.showLog1();

＜選択肢＞

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

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

【JavaScript入門】function(関数)の使い方、呼び出し・戻り値など総まとめ！

更新日：2024年4月16日

まとめ

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

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

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