入門JavaScriptの基本例題集!変数・配列・関数などを一気にマスター!マサト2019/6/112019/6/11JavaScriptの基本的な例題に挑戦してみたいプログラミングの知識をより深めるための確認をしたい基本構文や配列・関数の例題が見つからない...JavaScriptの基本的な学習を進めていく中で、より知識を深めるため例題に挑戦してみるというのは非常に有効な方法です。学習で得た基礎知識だけを活用して実際にプログラムを書いてみるというのは、知識を定着させるのに有効でしょう。どのように例題を確認してサンプルプログラムを作っていけば良いのでしょうか?この記事では、JavaScriptの基本的な構文を例題を用いて学習するための方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。一人でも多くの方がJavaScriptの不安を解消できれば幸いです。まとめ変数の例題この章では、JavaScriptプログラミングのもっとも基本と言える変数についての例題に挑戦してみましょう。constの使い分けやスコープの概念について学習することができます。'スイカ';console.log(name2);<選択肢>name1はメロン。name2はエラーname1はイチゴ。name2はスイカname1はメロン。name2はバナナ※正解はURL:コチラから閲覧できます。次の例題は、いくつかの変数宣言を行っています。正しい文章を以下の選択肢から1つ選んでください。name2;<選択肢>name1はイチゴ。name2はバナナname1はエラー。name2はバナナname1はバナナ。name2はバナナ※正解はURL:コチラから閲覧できます。次の例題は、オブジェクトの作成とプロパティの値を代入しています。正しい文章を以下の選択肢から1つ選んでください。'メロン';console.log(myobj.name);<選択肢>メロンイチゴエラーになる※正解はURL:コチラから閲覧できます。スコープについて変数を扱う上で重要な概念となるスコープについての例題を見ていきましょう。スコープは変数が利用できる範囲を意味しており、適切に活用することでバグの少ない効率の良いプログラムを書けるようになります。次の例題は、IF文の外と中で変数を宣言しています。正しい文章を以下の選択肢から1つ選んでください。'メロン';}console.log(name1);console.log(name2);<選択肢>name1の出力はイチゴ。name2の出力はundefined。name1の出力はメロン。name2の出力はバナナ。name1の出力はメロン。name2の出力はundefined。※正解はURL:コチラから閲覧できます。次の例題は、前問のコードを少しだけ改良しています。正しい文章を以下の選択肢から1つ選んでください。'メロン';}console.log(name1);console.log(name2);<選択肢>name1の出力はメロン。name2の出力はエラー。name1の出力はイチゴ。name2の出力はバナナ。name1の出力はメロン。name2の出力はバナナ。※正解はURL:コチラから閲覧できます。次の例題は、関数の外と中で変数を宣言しています。正しい文章を以下の選択肢から1つ選んでください。'メロン';}sample();console.log(name1);console.log(name2);<選択肢>name1の出力はイチゴ。name2の出力はバナナ。name1の出力はメロン。name2の出力はバナナ。name1の出力はメロン。name2の出力はエラー。※正解はURL:コチラから閲覧できます。配列の例題この章では、複数のデータを扱うための配列に関連した例題をいくつか見ていきましょう!基本的な使い方からメソッドを利用した実践的なプログラミング手法についても学ぶことが出来ます。基礎知識まずは、配列の基本的な使い方について見ていきましょう!配列を扱えるようになると複数のデータをプログラム内で効率よく活用することができるので、パフォーマンスの向上やコードの軽量化にも繋がります。次の例題は、配列を作成したあとに任意の値を代入しています。正しい文章を以下の選択肢から1つ選んでください。"スイカ"]エラーになる※正解はURL:コチラから閲覧できます。次の例題は、複数の配列を階層構造にして作成しているのですが、コンソールログに【true】を表示するにはどうすれば良いでしょうか?正しい文章を以下の選択肢から1つ選んでください。false];<選択肢>items[1][2]items[1][2][0]エラーになるので表示されない※正解はURL:コチラから閲覧できます。次の例題は、for文を利用して配列要素の中身を出力しています。正しい文章を以下の選択肢から1つ選んでください。pre><選択肢>出力結果は、0,2,4,6,8出力結果は、1,3,5,7,9出力結果は、0※正解はURL:コチラから閲覧できます。配列メソッドについて今度は、配列でよく使われるメソッドの使い方について見ていきましょう!メソッドを組み合わせることで、配列に格納された要素をより効率よく扱えるようになります。pushを利用して配列要素に手を加えています。正しい文章を以下の選択肢から1つ選んでください。"五郎"]※正解はURL:コチラから閲覧できます。joinを利用して配列要素に手を加えています。正しい文章を以下の選択肢から1つ選んでください。※正解はURL:コチラから閲覧できます。次の例題は、繰り返し処理を効率化するforEachに配列要素を利用しています。正しい文章を以下の選択肢から1つ選んでください。※正解はURL:コチラから閲覧できます。関数の例題この章では、さまざまな処理をまとめられる関数について見ていきましょう。基本的な使い方からちょっとした活用方法までを学んでいきます。基礎知識まずは、基本的な関数定義の方法から見ていきましょう!次の例題は、単純な文字列を出力するだけの基本的な関数を作成しています。正しい文章を以下の選択肢から1つ選んでください。Function');}<選択肢>showLogshowLog()()showLog※正解はURL:コチラから閲覧できます。次の例題は、いくつか方法の違う関数定義を行っています。正しい文章を以下の選択肢から1つ選んでください。Function");');<選択肢>1つ目、2つ目だけ動作する3つ目だけ動作するすべて正しく動作する※正解はURL:コチラから閲覧できます。次の例題は、ES2015(ES6)から利用できるようになったアロー関数を3種類作成しています。正しい文章を以下の選択肢から1つ選んでください。Function');<選択肢>1つ目と3つ目だけ正しく動作する1つ目と2つ目だけ正しく動作するすべて正しく動作する※正解はURL:コチラから閲覧できます。今度は、関数を作成する際によく使う手法や概念について見ていきましょう!次の例題は、引数を2つだけ持つ関数を作成しています。実行結果として正しい文章を以下の選択肢から1つ選んでください。'東京都');<選択肢>太郎さんの年齢は30歳です太郎さんの年齢は30歳です東京都エラーになる※正解はURL:コチラから閲覧できます。次の例題は、関数の処理内でreturnを利用しています。実行結果として正しい文章を以下の選択肢から1つ選んでください。何も表示されない※正解はURL:コチラから閲覧できます。次の例題は、オブジェクトのプロパティとして関数を作り、その中へさらに別の関数を作成しています。}}myobj.showLog1();<選択肢>showLog1のthisはmyobjを意味し、showLog2のthisもmyobjを意味しているshowLog1のthisはmyobjを意味し、showLog2のthisはwindowオブジェクトを意味しているshowLog1のthisはmyobjを意味し、showLog2のthisはundefinedを意味している※正解はURL:コチラから閲覧できます。2019年4月21日まとめ今回は、JavaScriptの基本的な構文を学べる例題をいくつかまとめてみました。基本的なプログラムが書けるようになった段階で、今回のような例題に挑戦してみると知識の定着とプログラムを読む力が増していくので非常にオススメです。自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。