タイトル通り筆者は元インフラエンジニアで現在は出向の関係で非エンジニアです。
近いうちにまたエンジニアとして働きたいため今はフロント系(HTML,CSS,JavaScript)の勉強してます。
最初はProgate等の学習サイトで勉強してたんですがその後、勉強どうしようかなと頭を悩ませたんですが実際にコード書いて物作るのが一番と思い
今回初めてJavaScriptでコードを書いたのでその記録と
自分と同じように初学者でどう勉強すればと迷ってる人に向けにどうやって勉強のお題を見つけたかとかどう勉強していったかなどの一例になればと思い投稿します。
ちなみに実際に作ったものはスロットゲームでこの記事の方プログラムをほぼほぼ真似してます。
https://qiita.com/hacchi56/items/0f2ea20de8b9d7046d45
そして実際に私が作った物のデモへのリンクも貼っておきます。
スロットゲーム
では実際に私がどう勉強していったか書いていきます。
変更履歴
- 2019/8/28：スロットゲームのデモリンクを冒頭へ追記しました。
学習サイトでやったことはほぼ忘れてた件
まず一番最初に個人の感想というか私と同じように学習サイトに結構時間割いてる初学者の方へ個人的に気を付けた方がいいと思った点を書きます、
実際にコードを書いていこうと思うと具体的な書き方が浮かばないうえにコードを書こうとしても細かい構文の書き方が出てこないことがほとんどでした。
私はProgateを使って学習を進めていましたがこれだけではコードは書けるようにはならないと思います。
こういった学習サイトは概要理解とかどんな構文なのかとか「ふーん」っていう程度で知れるくらいのものとして利用した方がいいかもしれません。
学習サイトで概要をなめたら実際にお題を探してコード書く！っていう流れの方が身になるんじゃないかと今回コード書いてみての感想です。
お題探し
では実際にコードを書いてみようと思ったのですが
学習した言語今回はJavaScriptでどんなものが作れるかもよくわからなかったので自分で一からコードを書くという選択肢は私にはありませんでした。
そこで先人の作ったものを真似てみようと思い立ってGoogle先生で「JavaScript 初心者」とか「JavaScript 初心者 お題」で探しました。
実際に探すと今回のビンゴゲーム以外にもいろいろなものがありましたが
自分と同じく初学者がお題を選定する上で大事かなーと思うのはなるべく簡単そうなもの、作りがそんなに凝ってないものを選びましょう。
作りが豪華なもの ＝ 複雑なもの になりがちだと思うのでなるべく最初はハードルの低いものを選びましょう。
選定したコードの理解・熟読
次に選んだお題の動きとコードを理解できるまで読みました。
わからないところはGoogle先生に聞きつつ書いてあるコードがどういった動きをするのかを読み込みます。
私は3周くらいコードを読みましたが、下記のような流れでよみこんでいきました。
- 1周目はわからないとこは飛ばしつつ全体的に流して読む
- 2周目はわからないとこは1つずつ調べていってわからない構文の理解をする
(理解できたら対象のコード近くにコメントで意味を書いていく)
- 3周目はそれぞれの構文を理解した上で改めて全体のコードがどの動きに対応しているのかを確認する
※どうしても読んでて理解できない時は知見のある人に聞いてしまいましょう。
周りにエンジニアがいないよって人は teratail【テラテイル】｜ITエンジニア特化型Q&Aサイトなどの質問サイトなどに頼る方法なんかもあるそうです。(私はまだ利用したことないですごめんなさい)
コード書く際に心掛けたこと
勉強のために書くのでなるべく元のコードは見ないようにわからない部分はGoogle先生に聞いて書くようにしてました。
まあ最初の白紙の状態から"いざ書くぞ"ってなったときはチラチラ見ながら書いてました。
ですが最初の書き出しが終わると事前にコードを熟読しているのもあって構造はなんとなく覚えてるというかわかってるので途中まではなんとなく書けました。(それでもちょいちょいチラ見はしてますw)
逆に絶対にやらないようにしていたのが『何で動いてるかわからないけどググってきたものそのままコピペ』だけはやらないようにしました。
これをやってしまうと勉強の意味がなくなりますしこの癖がつくと実務で自分の書いたコードなのに仕様がわかりませんとか言うことになりそうだったので
実際に書いたコード
書いたコードも貼っておきます。
CSSも書いて見栄えをもう少しきれいしようかとおもいましたが今回はJavaScriptの勉強が主な目的だったのでBootstrapでセンタリングとボタンの色付け程度にしておきました。
index.html
<!DOCTYPE html>
<html>
<head>
<meta lang="ja">
<meta charset="UTF-8">
<title>Slot Game</title>
<script type="text/javascript" src="slot.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<h1 class="text-center">スロットゲーム</h1>
<div class="container slot-box text-center">
<p>得点<span id="score">0</span></p>
<div class="row">
<div class="slot1 col-6">
<p id="slot0">0</p>
<input class="btn btn-primary" type="button" value="STOP" id="stop0">
</div>
<div class="slot1 col-6">
<p id="slot1">0</p>
<input class="btn btn-primary" type="button" value="STOP" id="stop1">
</div>
</div>
</div>
</body>
</html>
JavaScriptに関しては参考にしたコードとスロットを回す処理のところをすこし変えました。
元のコードはもう少し短かったんですが自分的に読みにくいと思ったので長くても自分が読みやすいと思ったコードに変えてます。
(もとコードはsetTimeoutを使用してましたが私はsetIntervalを使用してます)
slot.js
//HTMLが読み込まれた後にJavaScriptを実行します。
window.onload = ()=>{
//即時実行とスコープの限定
(()=>{
//変数定義
var interval = 400;
var stopCount = 0;
var results = [];
var timeOutId = [];
var score = 0;
var target = 0;
//一定時間間隔を開けスロットを回す処理を呼び出す
function startSlot(num){
timeOutId[num] = setInterval(startSlotProcess, interval, num);
}
//スロットを回す処理内容
function startSlotProcess(num){
//スロットの現在の数値を取得する
var slotValue = document.getElementById(`slot${num}`)
if(slotValue.textContent < 9){
slotValue.textContent++;
}else{
slotValue.textContent = 0;
}
}
//スロットを左右スタートさせる
startSlot(0);
startSlot(1);
//スロットを止める処理内容
function stopSlot(num){
//スロットのカウントを止める
clearInterval(timeOutId[num]);
//スロットが止まった際の数字を取得する
results[num] = document.getElementById(`slot${num}`).textContent;
//集計用に何かいスロットを止めたか集計する
stopCount++;
//集計用の関数を動かす
aggregate();
}
//ボタンを押された際に左右それどれのスロットを止める
document.getElementById("stop0").onclick = function(){
stopSlot(0);
}
document.getElementById("stop1").onclick = function(){
stopSlot(1);
}
//集計処理
function aggregate(){
if(stopCount === 2){
//スロットの数値を合わせられた時
if(results[0] === results[1]){
alert("おめでとう！もう一回遊べるドン！！！");
//集計処理を行う
score += 200;
getScore();
//スロットが回る感覚を短くする
interval *= 0.8;
//スロットを止めたカウント数をリセットする
stopCount = 0 ;
//スロットのスタート
startSlot(0);
startSlot(1);
}else{
alert("残念！そこまで！！")
}
}
}
//集計結果を表示させるための処理
function getScore(){
target = document.getElementById("score");
target.textContent = score;
}
})();
}
最後に
初めて自分でコードを書いてみましたが実際に完成すると嬉しいですね。
最初は簡単なものしか作れないかもしれませんがしばらくは人のコードを真似させてもらって(自分で少しでもオリジナル要素は入れつつ)勉強していこうかと思います。
私と同じような初学者の方で勉強の仕方を迷っている方の参考程度になればうれしいです^^