JavaScript初めまして!16新卒入社、プログラミング歴半年の山﨑です!入社当時はHTMLもまともに書けませんでしたが、先輩に迷惑をかけながらエンジニアとして働いています。)今回は、エンジニア用語を問題とするタイピングソフトを作りたいと思います。今回はwindowsで開発をしました。Node.jsをインストールこれはインストーラーを使って行いました。ElectronのインストールElectronをインストールします。electronこれでElecrtronがインストールされました。1.4.6を使用しました。ファイルの用意そして、以下のようなファイル構成を作ります。initで作成しました。値をmain.jsに書き換えます。これでnode.jsであるmain.jsが、Electronの設定として動きます。.を実行し、アプリが立ち上がれば成功です。今回は、タイピングソフトなので、以下の順番で開発を進めていきます。問題を外部のファイルから読み込んで10問出す。キーボードで打たれた文字を判別まずはtyping.jsというjsを作り、htmlから読み込み、そこに処理を書いていきます。document.onkeydownにコールバックを作成することで出来るようです。console.log(e.key);}ちゃんと打った文字が出てきました!これでキーボードから何が打たれたかはわかりました!!ここまでは簡単でした。正解と、打たれた文字が同じだったら正解とすれば良いと考えました。};ここまでで1.5時間!単語はまだ1つですが、単語を打ち込む機能は完成しました。次は単語が正解したら次の単語を表示という処理をかきます。ここからコンソールへの出力だけでなく、htmlに表示していきますので、htmlも変更します。}correctAnswerNumには正解数が入っているので、単語の配列から正解数番目の単語を取り出せば良い感じにできました。ここまでで、3時間!!あとは出題単語の配列ですね。エンジニア用語がたくさんつまったjsonファイルは先輩から頂きました。笑いつか先輩のようにさっとスクレイピングできるようになりたいです。問題を外部のファイルから読み込んで10問出す。ここは結構苦労しました。頂いたjsonファイルからランダムに10個単語を取り出し、配列に入れます。問題データの配列をランダムする→その中から先頭10個だけ取得し、配列に入れ問題とするという流れで処理を行いたいとを思います。jsonは以下のような形式になっています。配列をランダムにする。}xhr.send();配列の要素数の最大値をとってランダムな配列を作ります。});ランダムになってくれず、上のような処理にしました。sortに渡した関数の中でreturnしていないからでした。)そしてランダムなオブジェクトから10個単語を取り出し配列にpushし、問題となる配列を作成します。配列をランダムにする。};}xhr.send(null);これでしっかりと動きました!!問題を答えるごとに、次の問題が出てきます。あー動くものができて良かったです。おまけの1時間これでタイピングアプリケーションは完成しました。バージョンを古いのを指定してしまって、パッケージ化して起動するとonkeydownが使えない。Mac用のapp作られない(結局、WindowsからはMac用のアプリは作れませんでした泣)これを調べながらやったら結構かかっちゃいました。今月は新卒が記事を書いていく月だったのですが前の二週間がレベル高い記事すぎて、びびりました!笑泣そして私のミスの数々。❣️こんにちは@binarytaです。新卒が入ってくる時期なの...2017-12-15家族が増えました。