はじめに

私はフロントエンドエンジニアへの就職を目指して、現在4ヶ月程独学でプログラミングを学習している初学者です。
学習内容のアウトプットを行うために、自由に数値を入力することが可能なFizzBuzzアプリを作成しました。

このアプリを作成するに当たって参考にした記事はこちらになります
【実体験】未経験からフロントエンド開発を目指す！効率良く就活フェーズへ入る為のロードマップ【課題３種付き】

こちらの記事では未経験者がフロントエンドエンジニアに転職するまでのロードマップが課題と共にわかりやすく解説されていますので、ぜひ参考してみて下さい。

学んだことのアウトプット・私と同じようなJS初学者の参考になればと思いこの記事を作成しています。

この記事で分かること

アプリ作成の流れ
私が行き詰まった点

アプリ作成の流れ

1、追加したい機能を書き出す
2、その機能がどのようなコードで実装できるか大まかに予測する
3、実際にコードを書く

まず初めに自分が作りたいアプリに必要な機能の洗い出しを行いました。
具体的に今回のアプリを例にとって書き出すと

FizzBuzzの計算式
入力された整数値を読み取る
計算結果を表示する

などです。

この時最初から全ての機能を洗い出せる必要はなく、後から足りないと分かれば足していけばいいと思います。

次に行うのは、洗い出した機能をどうすれば作ることができるのか文章で書くことです。
具体的に言うと、

FizzBuzzの計算式→if文を使ってFizz・Buzz・FizzBuzzの条件を分ける
入力された整数値を読み取る→inputに入力された値を変数に保存する
計算結果を表示する→documentにtextcontentなどを使って表示する

この時点で自分が見当がつく処理の仕方を少しだけ具体的に書いておきます。

なぜこのような一見手間なことをするのかと言うと、

1.個別の機能を一つずつ作成していくことができる
2.自分の中でどのような手順で作っていけばいいのか考えやすくなる

以上の理由からこのような工程を行なっていきます。

※完了した作業は✔︎を入れるとどこまで作業が完了しているのか分かるのでおすすめです！！！！

私が行き詰まった点

1、入力欄の値を取得する
結論から言うと、valueを使えばいいという簡単な話なのですが、この結論に行き着くまでにかなりの時間がかかりました。
というのも定数や変数にinputに入力した値を保存するという概念がなかったのでvalueをどこに記述すればいいのかが分からず、ググりつつあれこれ自分でコードをいじりながら一つずつ試していきました。
valueの使い方を念のため記載しておきます。

let form1 = document.getElementById('fizznumber');
let fizz =  form1.value;

2、追加した要素を削除する
追加した要素というのは、documentに表示した計算結果のことです。
innerhtmlでdocumentに計算結果を追加する機能は簡単に実装することができましたが、再度入力した時に前回の計算結果が表示されたまま次の計算結果を表示してしまう問題にぶつかりました。

この問題点も個人的に大きく時間がかかりました。
innerhtmlを空にするという方法が簡単にググれば出てくるのですが、具体的に自分で書いたコードのどの箇所にそれを記述するのかが分からず、この問題は自分では解決できないと判断したためテラテイルで質問して解決しました。

#まとめ
実際に自分で一からコードを書いて何か成果物を作るのはとても大変で時間がかかりましたが、大きな自信になりました。
また、コードを書いていてエラーにぶつかることはとてもストレスになりますが、今の自分にはないスキルを身につける大きなチャンスにもなりこれからもどんどんコードを書いていきたいと思いました。
と技術的な点には全く触れずブログのような記事になってしまいましたが、これにて終わりにしたいと思います。