【Javascript入門】Javascriptは実際どこまで理解すればいいのか

プログラミングは自己学習できるものではありますが、実際どこまでの勉強が必要なのか、何を知っていればよいのかというのは現場で働いている方しかいないと思います。

かくいう私も、Javascriptを個人的に勉強していたりはしましたが、どの記事のプログラムが古い書き方で、どれが主流なのかなどは全く分からず、「動けばとりあえず良い」のような考え方をしてしまっていました。

ただし、仕事上で扱うとなると、そうもいかずやはり今では現場で働いている方に聞いた方が良いという考えでいます。

私は一か月ほど前にMENTAというサービスでプログラミングコースを申し込んでおり、

メンターの方に課題を頂いたり、その課題を完成させた後のコードのレビューなどをして頂いたりしている身なのですが、

つい最近Javascriptの課題を終わらせることができました。

ということで、今回はその課題をしていく中で得られた経験や、どんな課題だったのかということなどを交えて、Javascriptの理解が最低限どこまであれば、仕事ができるのかというのを考察していこうと思います。

※ただし当然ですが、すべての企業でここまでできればいいと思っているかは微妙なので一つの参考程度でお願いします。（Javascriptは今流行りのVueやReactなどを使うための基礎だという認識でいい気がします）

概要

今回行ったJavascriptの課題は3つあり、それらを列挙するとこのようなものでした。

• FizzBuzz
• TodoList
• クイズアプリ

二つのプログラムについては他言語で作ったことがある内容でしたが、Javascript特有の書き方であったりという所を学べたので、とても勉強になりました。

最後のクイズアプリについては、APIの利用があり、個人的にajax通信などをやっていたことはありましたが、実際に現場で使われている方法や、レビューなどをちゃんとしてもらったことのない状態でしたので、これも自分にとって為になる課題だったと思います。

それぞれについて細かく書いていきます。

課題１：FizzBuzz

入社の際の能力テストでやるというのを昔聞いたことがあるくらい有名な課題ですよね。

知らない人用に一応内容を記載すると、

• テキストボックスを2つ用意して、それぞれをfizz用とbuzz用として整数を2個入力できるようにする
• 実行ボタンを用意して、クリックするとfizzとして入れた整数の倍数とbuzzとして入れた整数の倍数を両方合わせて小さい順に100まで並べ、その倍数の横にそれぞれfizzとbuzzを出力させる
• fizzとbuzzの倍数の値が同じときfizzbuzzと出力させる

昔ほど、このような仕事で使わないようなプログラムを書いていなかったのでちょっとだけ迷いましたがそんなに難易度は高くない内容です。（ゲームを作っている人はよく使うんですかね？）

ただ、Javascriptを利用する上で気を付けなくてはいけない内容が多くあったため、少し時間がかかってしまったところはありました。

ちなみにJavascriptを利用する際に気を付けるべき内容は前回まとめているので、今でも自分の記事を使って最終確認などに使っています。

【Javascript入門】プログラミングで指摘されないためのチェックリスト

得られる経験

• if文
• ループ処理
• getElementById()
• appendChild()
• createEmenet()

課題２：TodoList

この課題も新しい言語に触れる際によく入門書やudemyの講義などに使われると思います。

要件は、以下の通りです。

• テキストボックスを用意して、内容を記載できるようにする
• タスクを追加するボタンを用意し、クリックすると「ID(連番)」、「テキストボックスの内容」、「タスクの状態切り替えボタン(完了or進行中)」、「削除ボタン」を保存して、表示させる
• 「完了」と「進行中」のタブを用意して、それぞれ押すとタスクの状態で表示を切り替えられるようにする
• 「削除ボタン」を押すとタスクを削除して、「ID(連番)」を割り当てなおす。（ちゃんと連番になるようにする）

ここで得られる経験は、「タスクの状態切り替えボタン」を押すたびに子要素になるデータを「完了」のものと「進行中」のもので切り替えたり、

ボタンクリック時にaddEventListenerをうまく活用することが多い課題なので、課題１よりも、DOMの操作のより深い部分を知ることができたと思います。

得られる経験

• 配列操作
• DOM

課題３：クイズアプリ

クイズアプリでは以下のAPIを利用した。
プログラムを作成しました。

【OPEN TRIVIA】
https://opentdb.com/

要件は、以下の通りです。

・非同期処理でAPIからデータを取得する(10問分)
・問題を1問から10問まで切り替える
・最後に正答数を表示する

Fetchによるデータ取得ができれば、要件を満たすこと自体はそこまで難しくはありませんでしたが、クラスを利用するというのがあまり慣れていないもので、手こずりました。

APIを扱うのはjavascriptでは多くある案件だと思うので、この課題は基礎として十分勉強になったと思います。

（あと、一時期インフラに手を出そうとしていたことがあったので通信と聞いただけで楽しかったです。）

得られる経験

• 非同期処理
• API通信
• クラス
• DOM

まとめ

課題としては、少ない方かなと思いましたが、すべての言語に共通することはもちろんのこと、Javascript特有の処理方法を知ることができたので、すごくためになりました。

まとめとして、上記の得られる経験をまとめると以下がJavascriptで最低限必要とされるものなのかもしれません。

• DOMの操作
• 非同期処理
• クラス
• API通信

もし、Javascriptに手を出していない方や腕を磨こうと思っている方がいれば本稿の課題に取り組んでみてはいかがでしょうか。

簡単な説明になってしまいましたが、今の課題はVue.jsなので、
そちらも順次メモがてら考察を上げていこうと思います。