はじめてQittaで記事を書きます。
私は現在アメリカにいますが、エンジニアになるために独学で勉強しています。

普段はnoteでアメリカ生活の新たな発見などを主に載せてますが、エンジニア関連の記事はこちらに乗せることにしました。

8月より勉強を始めてはや1か月がたちましたが、とても学ぶことが多く備忘録を兼ねてエンジニア関連で勉強していることを記事にしていこうと思いました。

Markdown記法が初めてなのでぎこちないとは思いますが、たくさん記事を書いて慣れていきたいと思います。

1.1か月何を勉強したのか。

まずは1か月独学で勉強を進めてきて私は以下の言語を学びました。

HTML
CSS
Javascript

正確にいうとHTMLとCSSはプログラミング言語ではありませんが、webをやるうえでのフロント部分をつかさどるので、模写ができるレベルまで勉強を進めました。

htmlとcss

本来であれば分けて学ぶものかもしれませんが、私は一緒に学習したのでまとめて記載しておきます。
私が以前勤めていた学習塾のHPはwordpressというものを使用して自分で作成していたので、なんとなくhtmlとcssは知っていたので学習ハードルは低かったです。

勉強方法

未経験の人の学習法でprogateやドットインストールを使用して勉強するのがあるあるみたいなのです。
私の場合はそこまでコストをかけたくなかったのと、英語であればyoutubeにたくさん動画が落ちていることを知っていたのでまずはyoutubeで勉強することにしました。

この動画は英語の動画ですが、字幕を日本語でつけることができるので問題がなく学習を進めることができます。

また、セクションごとに動画が分かれておりセクションが終わったら課題が出るのでhtmlとcssが身につきやすいです。

HTMLとCSSのフルコース動画（約6時間30分）

この動画を見終わった後に模写を始めようと思ったのですが、いざ模写をしようと思うとなかなかできません。

HTMLとCSSのフルコースの動画は基本的なところはしっかり網羅してくれますが、h1やsecionnタグはさらっと最後に教えてくれるだけなので、その部分についてもう少し深く学ぼうと思いました。

下記リンクの動画はdiv やsection、header、footerなどの組み方を学ぶことができてとてもためになりました。

Isaraというサイトの模写を一緒にやってくれる動画なので手を動かしながら学習することができます

Isara 模写動画

上記2つの動画のおかげで、htmlとcssの基礎はできるようになりました。
模写は2サイトほどに済ませて8/19までだったので、約3週間くらいかかりました。

3.Javascript

やっとプログラミング言語に取り掛かれると嬉しい気持ちになりました。

というのも、実はプログラミング言語は大学のころにfortranを授業で扱い、橋梁の構造計算などを行いました。

成績も5段階中の5だったので大丈夫だろうと思っていましたが、スコープの考え方がややこしくややてこずりました。

勉強方法

この後にMysqlやrubyを学習することを踏まえて、勉強時間をあまりかけずに効率よく学習ができるprogateに1か月だけ登録してみました。

ほんとは可能な限り課金したくありませんでしたが、youtubeに転がっているJavascriptの動画はかなり長尺だったので、効率よく基礎を学ぶために使用しました。

progate のjavascript コースは全部で7コースあるのですが4日ほどで完遂。復習もかねて2週勉強したが、なかなか頭に残りずらい、、、

勉強していて気づいたのですが、progateはこの操作はこういう時に使うんだよ的な案内があまりにも少なすぎてイメージがわきずらかったと思いました。（例えばif文とswich文やforとwhileの使い分け等）

7コースが終わり試しにミニゲームを作ろうとしましたが、概要を学んだだけなので実際の使い方は以下のyoutubeで学習しました。
動画は22時間30分ですが、最初はprogateの復習がてら勉強しました。

この動画は4～5日くらいでDOM操作までやりました。
Javascript フルコース(22時間30分)

ミニゲーム1:数字あてゲーム

このゲームはコンピューターが自動で1から100までのうちランダムで整数を生成するので、できるだけ少ない予想回数で数字を当てるといういたってシンプルなものです。
chatgptから案をもらい、このゲームを作るうえで必要な機能は以下の通りでした。

1～100の数字のランダム生成
DOM操作によるinputの読み取り
if文による値の振り分け
alertで結果を伝える

しかし、それだけでは文字以外を入力したり試行回数がわからなかったり等ゲーム性に欠けたので他にも機能を追加してみました

数字を入力すると「数字を入力してください」とalelrtが出現
試行回数を表示させていかに最小で実施できるか挑戦させる
Enterkeyでも入力できるように設定。

初めてのミニゲーム作成だったので2時間程度かかってしまいましたが、何とか作り上げることができました。
数字あてゲーム

ミニゲーム2:寿司打的なタイピングゲーム

これも同様にJavascriptの学習深度を確認するためにchatgptに勧められたゲームです。寿司打を想像していただければわかると思います。

このゲームを作るうえで必要な機能は以下の通りでした。

function,if文の使い分け
DOM操作（document.querySelectorやinnerHTML)
ランダムな要素選択（Math.randomや配列を使用）
イベントリスナー（キーボード入力、クリックイベントの処理）
setIntervalやclearIntervalの使用

setInterval？clearInterval？なにそれおいしいの？と思いつつもエンジニアは知らないことでも自分で調べて実装するので、知らないことでもエンジニアになったつもりになって実装しました。

今回もこのゲームを実装するうえで、いくつか工夫してみました。

コードを可能な限り短くするためにfunctionを活用
ゲームが始まる前に入力できないように、inputをdisabledに
ローマ字だけだとイメージがわかないと思ったので、オブジェクトに漢字をセットに組み込んだ

寿司打ほど精度は高くないが、まあまあのできのゲームができた気がします。
タイピングゲーム

4.今後やっていくこと

1か月でフロントの基礎部分を学ぶことができました。
最終的なポートフォリオは学習塾の生徒管理システムを作りたいと考えております。

私自身学習塾で経営と指導、保護者との面談も含め30～40人を管理してきました。
生徒を指導しているときや保護者との面談時に、内容をすべて覚えておくのは経験がないとかなり難しいと考えており、使いやすいこのサービスがあれば情報の管理がとてもやりやすくなると考えております。

特に小規模の学習塾経営者負担を極力下げることができるので、早く形にしたいです。

細かい実装内容については現在考えている最中なのでまとまったらまた記事にしていこうと思います。