【初心者向け】Javascriptの問題作成してみた
※本サイトはアフィリエイトリンクを掲載しています。
学習方法
2023.05.19
こんにちは。Web系エンジニアのカズです。数年前に未経験からプログラミング学習を始めて転職しました。現在、エンジニア歴は約7年になります。
本記事の内容はこちら
・未経験からエンジニア転職に必要な学習手順
・Javascript練習問題
Javascriptのある程度の基礎を理解して、何か練習問題がないかと探している方もいるのではないでしょうか。
今回はそういった方に向けて簡単な練習問題を作ってみました。
まず自分でプログラミングしてみて、分からければサンプルコードを参考にしてください。
未経験からエンジニア転職に必要な学習手順
①基礎学習
②実践問題練習
③練習用ポートフォリオ作成
④本番用ポートフォリオ作成
①基礎学習
おすすめ基礎学習方法
こちらについては本題ではないので、サラッといきます。詳しく知りたい場合は、下記リンクから記事を参照してください。
②実践問題練習
プログラミングに限った話でないですが、基礎を学んだら次に練習や実践をやりますよね。
基礎学習では言われたとおりにプログラムを真似ただけ、コピペしただけ。ということが多いと思っています。
練習問題のようなものを試行錯誤しながらプログラミングすることが大切です。
ということで、今回は簡単なJavascriptの問題を考えてみました。良ければ活用ください。
問題①：色を占う（Javascript編）
仕様①：HTML,CSS,Javascriptを用いて作成してください。
仕様②：ラッキーカラーをランダム表示させてください。
今日のラッキーカラーを占います。
今日のラッキーカラーは○○です。
問題②：今日の星座占いを作る。（Javascript編）
仕様①：HTML,CSS,Javascriptを用いて作成してください。
仕様②：1位～12位の順位とラッキーカラーをつけて各星座をtable表示してください。
仕様③：占いができるのは5回のみとする。5回より多く「占いボタン」を押すとアラートを出す
星座占い
| 順位 |
星座 |
色 |
| 1 |
|
|
| 2 |
|
|
| 3 |
|
|
| 4 |
|
|
| 5 |
|
|
| 6 |
|
|
| 7 |
|
|
| 8 |
|
|
| 9 |
|
|
| 10 |
|
|
| 11 |
|
|
| 12 |
|
|
この他にも練習問題があります。
javascript/jQuery練習問題一覧の記事にまとめているので、javascriptの実装練習に活用してください。
実践的に本で学習したい方におすすめ！
定番のボードゲームのリバーシ(オセロゲーム)を作り、体験しながら学習ができます。
リンク
サンプルコード
問題①
問題②
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>星座占い</h1>
<div><button id="start_btn">スタート</button></div>
<br/>
<table id="table" border="2">
<tr>
<th class="th_number">順位</th>
<th class="th_sign">星座</th>
<th class="th_color">色</th>
</tr>
<tr>
<td id="number_1">1</td>
<td id="sign_1"></td>
<td id="color_1"></td>
</tr>
<tr>
<td id="number_2">2</td>
<td id="sign_2"></td>
<td id="color_2"></td>
</tr>
<tr>
<td id="number_3">3</td>
<td id="sign_3"></td>
<td id="color_3"></td>
</tr>
<tr>
<td id="number_4">4</td>
<td id="sign_4"></td>
<td id="color_4"></td>
</tr>
<tr>
<td id="number_5">5</td>
<td id="sign_5"></td>
<td id="color_5"></td>
</tr>
<tr>
<td id="number_6">6</td>
<td id="sign_6"></td>
<td id="color_6"></td>
</tr>
<tr>
<td id="number_7">7</td>
<td id="sign_7"></td>
<td id="color_7"></td>
</tr>
<tr>
<td id="number_8">8</td>
<td id="sign_8"></td>
<td id="color_8"></td>
</tr>
<tr>
<td id="number_9">9</td>
<td id="sign_9"></td>
<td id="color_9"></td>
</tr>
<tr>
<td id="number_10">10</td>
<td id="sign_10"></td>
<td id="color_10"></td>
</tr>
<tr>
<td id="number_11">11</td>
<td id="sign_11"></td>
<td id="color_11"></td>
</tr>
<tr>
<td id="number_12">12</td>
<td id="sign_12"></td>
<td id="color_12"></td>
</tr>
</table>
</body>
</html>
<script>
count = 0;
let button = document.getElementById('start_btn');
button.addEventListener('click', function() {
count++;
if (count < 6) {
let signs = [
'みずがめ座',
'うお座',
'おひつじ座',
'おうし座',
'ふたご座',
'かに座',
'しし座',
'おとめ座',
'てんびん座',
'さそり座',
'いて座',
'やぎ座',
];
let colors = [
'赤',
'白',
'青',
'黒',
'黄色',
'緑',
'グレー',
'茶色',
'オレンジ',
'水色',
'金',
'銀',
];
randArray = [];
for (i = 0; i < signs.length; i++) {
randArray.push(i);
}
randArray.sort(function(){return Math.random() - 0.5});
for (i = 0; i < randArray.length; i++) {
let signId = document.getElementById("sign_"+(i+1));
let colorId = document.getElementById("color_"+(i+1));
let rand = randArray[i];
signId.innerHTML = signs[rand];
colorId.innerHTML = colors[rand];
}
} else {
alert("占いは5回までしかできません。");
}
});
</script>
③練習用ポートフォリオ作成
上記の練習問題のような簡単なもので良いので、「自分で考えて何かを作る」ということをたくさんやりましょう。
そして少しずつレベルを上げていきましょう。
まずはJavascriptですかね。その次にバックエンドの言語のPHPまたはRubyでやるとよいでしょう。
④本番用ポートフォリオ作成
転職活動に必要な「自分のスキルを証明できる」ポートフォリオを作成しましょう。
スキルの証明ですが、どの程度の証明ができれば良いのか。は調べる必要があると思います。
何ができればよいか逆算して学習を進めましょう。
一応、ポートフォリオ作成をサポートしてくれるプログラミングスクールをご紹介します。
・Tech Boost
・RUNTEQ
・DMM WEB CAMP
詳しくは、【現役エンジニア目線】おすすめプログラミングスクール3選を参考にしてみてください。
コメント