JavaScript 練習 ドリル 研修コースに参加してみた

今回参加したコースは JavaScript 練習ドリル です。
JavaScript は、ブラウザで使える開発言語では、ほぼ一択 *注 ということもあり、 Python とともにいま人気ランキング最上位に登場するプログラミング言語です。
*注 Mozila が開発した WebAssembly (wasm) という言語もあります
一方、ブラウザさえあれば取り組める気軽さがあるだけに、「いつかやる(今ではない)」という気持ちも発生しやすいように感じます(わたしだけかも知れませんが…)。
また、近年の React / Vue などのフロントエンドフレームワークに加え、そのフロントエンドフレームワークをより使いやすくするフレームワーク Next.js / Nuxt.js が最近のトレンドを引っ張り、もはや主戦場はサーバサイドではなく、フロントエンドにあるという風潮もあります。
つまり、 JavaScript 出来ないとマズい、という雰囲気をとっても感じます。。
このコースは、そんな危機感を持っている方はもちろん、 JavaScript の入門書を読んだことがある方や、新人研修以来やっていないの方などを対象に、ドリルの名の通り、演習問題をとにかく解いて、解説を聞き、脱 JavaScript 初心者を目指すものでした。
では、どんな内容だったのかレポートします!
もくじ
コース情報
想定している受講者 | JavaScript の基本文法がわかる |
---|---|
受講目標 |
|
講師紹介
講師は、この参加レポートではご登場が増えている 植田崇靖 さんです。

IoT / AI から Web までフルスタックな開発経験をもとにした、幅広く実践的な研修コースを開発
以前のレポートでは、 AI 中心ですが、その他にも IoT 、データベースなど、さまざまな開発者向けのコースにご登壇頂いています。
3 時間で学ぶ!AI・機械学習 入門 研修コースに参加してみた
G検定で学ぶ AI の体系と基礎知識 「オンライン」研修コースに参加してみた
JavaScriptの基礎
ドリルの前に、 JavaScript の基礎をあらためて座学で復習しました。
JavaScript とは
- 「 JavaScript は、クロスプラットフォームで動作するオブジェクト指向のスクリプト言語で、ウェブページをインタラクティブにするために使用されます。」MDN( Mozilla Developer Network )より
- 現在は Ajax や HTML5 の登場で利用場面が増えた
- Node.js によりバックエンドでも利用される
- ES2015 ( ES は EcmaScript の略。 ES6 とも言う ) が登場し、構文と機能変更があった
- 変数宣言など大きな変更が入った
- 非同期処理も入った
async
: 非同期で読み込み、即座に実行defer
: 非同期で読み込み、 HTML の解析完了後に実行
- 今回のコースも ES2015 で実施
- フロントエンドフレームワークが人気
- React / Vue / Angular
JavaScript 練習ドリル 基礎編
ここから演習です。演習は 10 分 程度で行われ、植田さんが用意した index.html をブラウザで開き、それをもとに実行します。
ただ、かなりのボリュームがあるため、このレポートではその中から抜粋して紹介します。全問やってみたい方は、ぜひコースにご参加ください!
まずは、基礎問題からです。
01. 定数、変数
code解答サンプルを見るexpand_more
const a = 10;
const b = 20;
const sum = a + b;
console.log('定数 a は' + a, '定数 b は' + b, '合計は' + sum);
false
true
文字列の書き方としてテンプレートリテラル ` `
も紹介されました。
console.log(`定数 a は ${a} 定数 b は ${b} 合計は ${sum} `);
- ES6 からは定数に
const
を使う。必ず値は入れる - 値を変更しないときはできるだけ定数にする
- 明示的に宣言された変数は削除できない
- 定数は初期値省略は NG
- 最近では定数を積極的に使うことが多いので、値の再代入が必要ない場合は、変数でなく定数を使用する
知っているようで知らないというのは、こういう演習のときに痛い目をみます。。テンプレートリテラル、覚えてなかった。
04. 関数
code解答サンプルを見るexpand_more
// 1
function calcSum(...prices){
let result = 0;
for (const value of prices){
result += value;
}
return result;
}
console.log(calcSum(1, 2, 3));
// 2
const calcSumArrow = (...prices) => {
let result = 0;
for (const value of prices){
result += value;
}
return result;
};
console.log(calcSumArrow(1, 2, 3));
function
による定義、アロー関数による定義がある- 不定個の引数を受け取るときは
...valiable
を使う - 配列の要素を for of (後述) で順次処理
アロー関数、慣れないです。。
05. 文字の一部を取り出す slice / substring
code解答サンプルを見るexpand_more
// 1
const comment = 'こんにちは、本日は快晴です。';
console.log(comment.slice(0, 5)); // こんにちは
// または
console.log(comment.substring(0, 5)); // こんにちは
// 2
console.log(comment.slice(4)); // は、本日は快晴です。
// 3
console.log(comment.substr(4, 3)); // は、本
- 第 2 引数に負の数を指定した場合
slice()
は後ろからの位置の指定substring()
は 0 とみなす
console.log(comment.slice(4, -2)); //は、本日は快晴で console.log(comment.substring(4, -2)); //substring(4, 0)と同じ。こんにち
- 第 2 引数が第 1 引数より小さい場合
slice()
では開始インデックスから始まって終了インデックスに到達しないのでundefined
になるsubstring()
では、第 1 引数と第 2 引数を入れかえて実行
console.log(comment.slice(4, 1)); console.log(comment.substring(4, 1));
slice()
と substring()
の挙動の違い
10 分だとググって細かな挙動を調べるのが辛くなってきています。ヤバいぞ。。
JavaScript 練習ドリル 配列やオブジェクトデータ操作編
続いて、配列やオブジェクトの操作の問題です。
02. 配列の要素の操作 for / for of など
code解答サンプルを見るexpand_more
const array = ['dog', 'monkey', 'bird'];
// 1
for (const value of array) {
console.log(value);
}
// または
for(let i = 0; i < array.length; i++) {
console.log(array[i]);
}
// 2
array.unshift('momotaro');
array.push('oni');
console.log(array);
// 3
array.shift();
array.pop();
console.log(array);
- for 文は 2 種類ある
for of
を使うのが今風
- 配列の先頭への追加には
unshift()
、末尾への追加にはpush()
- 取り除くときは unshift push の反対で
shift()
、pop()
for of
は英語の of に似ていて書きやすいですね。ただ、ループカウンタは出力できないので、従来の書き方も必要です。
04. オブジェクトの複製
code解答サンプルを見るexpand_more
const array1 = [1, 1, {a: 1}];
const array2 = array1; // 単なる代入(元の配列を参照)
const array3 = [...array1]; // spread 演算子による shallow copy
const array4 = array1.concat(); // concat による shallow copy
const array5 = Object.assign({}, array1); // Object.assign による shallow copy
const array6 = JSON.parse(JSON.stringify(array1)); // deep copy
array1[0] = 2;
array1[2].a = 2;
console.log(array1); // [ 2, 1, { "a": 2 } ]
console.log(array2); // [ 2, 1, { "a": 2 } ]
console.log(array3); // [ 1, 1, { "a": 2 } ]
console.log(array4); // [ 1, 1, { "a": 2 } ]
console.log(array5); // [ 1, 1, { "a": 2 } ]
console.log(array6); // [ 1, 1, { "a": 1 } ]
- array2 は array1 と同じ対象を参照
- array3 〜 array5 では、変数が直接参照している配列はコピーされるが、その中に入っているオブジェクトは共通 (shallow copy)
- array6 ではすべてがコピーされるので、 array1 の変更は反映されない (deep copy)
shallow copy と deep copy の違い
これはムズい。。また、安易にコピーしたつもりだとバグの原因になりそうです。
JavaScript 練習ドリル ブラウザ、 HTML 要素、フォーム要素操作編
次は、ブラウザや HTML 要素を扱う問題です。
window 幅やオンライン判定などブラウザの API を使う処理や、フォームの input 処理を行う演習問題を行いました。
このレポートでは割愛します。
JavaScript 練習ドリル ユーザーアクション編
01. イベントリスナー addEventListener
次は、ボタンクリックやマウスを載せたときのアクションの問題です。
この問題では、予め HTML が用意され、これをもとに演習します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript演習(ユーザーアクション)</title>
</head>
<body>
<script src="script.js" defer> </script>
<button class="button">button</button>
<p id="log">mouse here</p>
<button class="mouse">
mouse over
</button>
</body>
</html>
code解答サンプルを見るexpand_more
// 1
const button = document.querySelector('.button');
button.addEventListener('click',() =>{
console.log('ボタンがクリックされました');
});
// 2
const logArea = document.querySelector('#log');
logArea.addEventListener('mousemove',() => {
logArea.innerHTML = 'mouse moved!';
})
// 3
document.querySelector('.mouse').addEventListener('mouseover', () => {
log('mouse on button');
});
function log(message) {
console.log(message);
}
- script の読み込みのタイミングに注意
- JavaScript で DOM 要素を操作できるのは、 HTML ドキュメントの読み込みと解析が完了したタイミング
まとめ
このコースでは、全 12 問をドリルのように演習と解説を繰り返して、 JavaScript プログラミングを行いました。
私は JavaScript が必要なときにはチョロっとググりながら、なんとなくやってきた勢ですが、これではやはり「知っているようで知らない」状態でした。こういった演習をテストのように使うと、これを痛感させられます。
やはり実装系のスキルテストがあると、自分の力不足を感じられるので、学習意欲が増しますね。
研修の終わりに、受講者の方からサンプルコードだけでなく、問題のスライドそのものが欲しい、というコメントが相次いだのもの、そういった意欲の現れかも知れません。
JavaScript プログラミングに慣れるだけでなく、現在のご自身の JS スキルを知ることもできるコースでした!

SEプラスにしかないコンテンツや、研修サービスの運営情報を発信しています。