見出し画像

【未経験がエンジニアになるまで#0】勉強を始めて1か月がたちました。

たいらブログ@アメリカ在住

こんにちは、以前の自己紹介でも少し触れましたが私はアメリカにいながらエンジニアになるために独学で勉強しています。
8月より勉強を始めてはや1か月がたちましたが、とても学ぶことが多く備忘録を兼ねてエンジニア関連で勉強していることを記事にしていこうと思いました。

※9/26追記
勉強用の記事はQiitaにあげることにしました。
こちらのブログはアメリカ生活を中心に上げるようにしていきます


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

まずは1か月独学で勉強を進めてきて私が学習した言語は

1.HTML
2.CSS
3.Javascript

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

2.htmlとcss

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

勉強方法

未経験の人の学習法でprogateやドットインストールを使用して勉強するのがあるあるみたいなのですが、
そこまでコストをかけたくなかったのと、日本語に絞らなければyoutubeにたくさん動画が落ちていることを知った私はyoutubeで勉強することにしました。
この動画は英語の動画ですが、字幕を日本語でつけることができるので問題がなく学習を進めることができます。
また、セクションごとに動画が分かれておりセクションが終わったら課題が出るのでhtmlとcssが身につきやすいです。

ただしこの動画は6時間30分くらいの動画で、課題も出るのでかなり時間がかかることを覚悟して取り組まれることをおすすめします。

この動画を見終わった後に模写を始めようと思ったのですが、h1やsecionnタグはさらっと最後に教えてくれるだけなので、Isaraというサイトの模写を一緒にやってくれる動画をみながらhtmlの組み方を学びました。

上記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の復習がてら勉強しました。
progateでは勉強できなかったDOM（Document Object Model）操作を理解できたので、簡単なポートフォリオを作ることに。
この動画は4～5日くらいでDOM操作までやりました。

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

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

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

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

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

初めてのミニゲーム作成だったので2時間程度かかってしまいましたが、機能は簡単にまとめてみました。
やってみたい方は下のファイルをダウンロードして、number-select-game.htmlを開けばできると思います。

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

これも同様にchatgptに勧められたゲームです。
このゲームを作るうえで必要な機能は以下の通りでした。

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

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

今回もこのゲームを実装するうえで、いくつか機能を追加しました。

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

寿司打ほど精度は高くないが、まあまあのできのゲームができた気がする。
上記同様やってみたい方は下のファイルをダウンロードして、typing-game.htmlを開けばできると思います。


4.今後やっていくこと

1か月でフロントの基礎部分を学ぶことができました。
最終的なポートフォリオは学習塾の生徒管理システムを作りたいと考えております。
私自身学習塾で経営と指導、保護者との面談も含め30～40人を管理してきました。
生徒を指導しているときや保護者との面談時に、内容をすべて覚えておくのは経験がないとかなり難しいと考えており、使いやすいこのサービスがあれば情報の管理がとてもやりやすくなると考えております。
特に小規模の学習塾経営者負担を極力下げることができるので、早く形にしたいです。
細かい実装内容については現在考えている最中なのでまとまったらまた記事にしていこうと思います。
本日はここまでです。この記事は専門的な内容が非常に多くなります。
この記事は自分の知識整理や同じ境遇の方に少しでも力になればと思い書いております。
もちろんアメリカ生活のことについての記事も並行して書いていくつもりなのでよろしくお願いします。


この記事が気に入ったらサポートをしてみませんか？