未経験から独学でエンジニアになった間の話
今回の記事
エンジニアにとって学習することの意味
--学習しないで入社すると起こること
--エンジニアに必要な学習時間
--エンジニアに必要なスキル
--まとめ
スキルを習得するために私が実際に行った学習
--期間毎の学習内容
--毎日行っていたこと
--私が学習時に使用していたwebサイトやツールのご紹介
--【コラム】独学で苦労したこと
--学習内容のまとめ
はじめに
こんにちは！未経験から上場企業のソフトウェア開発のエンジニアとして転職した川北翔と申します。今回、私がフロントエンドエンジニアになるために、学習してきたものを記録として残しておきたかったので、シリーズ別に投稿しようと思いました。今回は、私が主に学習してきたことをご紹介して参考にしていただけたらと思います！よろしければ御覧ください！
学習してきたものについて、ポートフォリオにも記してあるのでよろしければ御覧ください！
ポートフォリオは こちらから
※今回の記事はボリュームが大きいです（記事を読むのに15分くらいかかります）。
対象となる方
このシリーズでは、未経験エンジニアの方が主な対象となります（次のシリーズは更新するまでお待ち下さい）。私の性格的には、特に、
- まだ０の状態で勉強方法を知りたい！
- 成長意欲のある方
- 具体的な学習内容や学習の際の注意点を知りたい！
- スクールに通わずに、一人でもくもく学習をしていきたい！
- プログラミング言語の勉強にできるだけお金をかけたくない！
という方におすすめです。今回はできるだけ専門的な用語を避けてわかり易い文章を意識して作成したり、IT用語などに関しては参考サイトのURLを貼っているので、知識がなくても見ることができると思います。
この記事を読んでどのようなことが学べるか
こちらを見ることで、
- エンジニアになるための自分にあった学習方法を知ることができる
- できるだけお金をかけずに学習する方法が分かる
- 独学でエンジニアになるために必要な時間やコストが分かる
ようになります！また、私がエンジニアになるためにおすすめする参考記事などを要所要所で入れているのでそちらも参考にすることができます。この記事を通して、プログラミング言語初学者や未経験からエンジニアになりたい！と考えている方の参考になれば幸いです。
注意点
今回の記事は前回の記事「パソコンがない状態から約３ヶ月間独学してエンジニアになった間の話Vol.1」の続きとして作成しています。よろしければそちらをお読みになってから御覧ください。
今回の記事はあくまで私がエンジニアになるために行ってきた学習内容の紹介になります。適正な学習方法・学習量・学習スピードは個人の環境や能力などに応じて差があります。その点はご了承ください。
業務に取り掛かるためには、これくらいは必要だなぁと私が感じたものを取り上げて作成しています。
また、私の未熟な部分による誤りがある場合がございます。その際はお手数ですがメッセーシをいただけると幸いです！
全シリーズの内容について
これまでの私（前回）
学習方法について（前回）
実際に行った独学の内容（今回）
転職活動について（今後作成予定）
エンジニアにとって学習することの意味
この章ではエンジニアが自己学習を行なうことの意味について、
という観点から、サイトなどを参考に私なりの考察をしたいと思います。
学習しないで入社すると起こること
私は、エンジニアになるための学習を行わないと次のようなデメリットがあると考えます。
全くの未経験からIT業界に転職すると...
- 誰でもできるものしか任せられず、仕事を選べずに収入がアップしない
- IT業界の前提知識がないことによる仕事内容の食い違いが起こる
- 心理的な負担がある
が挙げられます。Twitterなどを見ているとよく挙げられるのは、未経験から転職して自分がやりたいことができなくて後悔したというようなツイートをよく見ます。もちろん初めのうちは知らなくて当然ですが、最低限自分がやりたいことや、エンジニアとしての働き方は転職する前に調べておく必要があります。
また、個人的にクリティカルなこととして、心理的な負担が大きいことが挙げられます。何もわからない状態から自分のスキルを獲得しようと思ったら、毎日、分からないことを上司や同僚に「すいません。わからないので教えて下さい。」と聞いて学ぶことがメインになってきます。そうなったときに、自分の「何もできない」という劣等感に対する対処を適切に行なうことができないと絶対にメンタルを壊してしまう可能性があります。
したがって、少しでも心理的負担を減らすには学習して、自分のスキルを獲得する他ないと思います。
その他、学習しないことによるデメリットに付随して以下のサイトを貼っておくのでよろしければ参考程度に御覧ください。こちらサイトでは駆け出しエンジニアがよく挫折するポイントや対策まで記載されており、エンジニアとして仕事をする上での自分の適性を知ることができるのでオススメです。その他にもサイトで調べるとたくさんでてくるので一度調べてみることをおすすめします。
https://thikashi-blog.com/fledgling-engineer/
エンジニアに必要な学習時間
結論500時間は最低限必要だと私は考えます。なぜなら、500時間くらい学習すると、エンジニアの仕事がとても難しいことであると最初に私が気づくことができた時間だったからです。
500時間くらい学習することで、エンジニアという仕事が自分にあっているかの適性が見極められるとも言いかえることができます。
◯統計データによるエンジニアになるための学習時間
こちらのサイトによると、エンジニアになるまでの学習時間は、
一日平均4時間半
平均学習期間 17ヶ月
であるということです。（統計データの詳細に関しては下記URLから確認してください）
https://prtimes.jp/main/html/rd/p/000000014.000047683.html
◯学習を行ってきて感じた私の手応え
私は、ITの学習を仕事を退職してから3ヶ月間で1000時間行ってきました。この間になんとなく感じたことを学習時間ごとにまとめると、
【学習100時間目】
プログラミング言語楽しいし、意外とイケるかも！☺
【学習300時間目】
ある程度頑張ったし、もう大丈夫やろー
【学習500時間目】
えっ全然まだまだわからないことだらけやん。どうしよう〜
【学習1000時間目】
一通り学べた！けど、ワカラナイコトダラケダ...
みたいなイメージです！
特に、学習を行ってきておおよそ500時間くらいが経過したころ自分はまだまだわからないことだらけだということに気付かされました。（各個人の学習の仕方によります）
したがって、未経験から独学でエンジニアになるかたは500時間は最低学習して自分の能力はまだまだだと自覚できるといいのではないでしょうか。というお話でした。
その他にも下のような記事もあったので参考にして学習に取り組んでみてください。（多くの記事には「1000時間は必要」と書いてありました）
https://qiita.com/drafts/6f649bf908bf0cd59e2c/edit
エンジニアに必要なスキル
次に一般的にエンジニアに必要とされているスキルや、私が学習してきたことを通して、必要だと感じた具体的なスキルについて考えたいと思います。まず、一般的にエンジニアに必要とされているスキルに関して、以下のサイトでは、「質の高いITエンジニアになるために大事な5つのスキル」が挙げられています。
https://web-camp.io/magazine/archives/71950
- 論理的思考力
- プログラミングの知識
- コミュニケーションスキル
- 相手の意図や要求を読み解くスキル
- 資料作成スキルとプレゼン能力
詳しくは、サイトを御覧ください。こちらのサイトではエンジニアの種類ごとに必要なスキルが記載されているのでオススメです。今回は都合上、詳しい説明は省略させていただきます。
次に学習する際に大切な心がけについてエンジニアに必要なスキルの補足としてお話させていただきます。今回紹介させていただくものは、私が学習を進めていく上で非常に役に立った考え方になるのでみなさんも是非参考にしてみてください。早速私が学習してきたときに感じた、具体的に大切なスキルを発表したいと思います。
私が考えるエンジニアとしての大切な考え方
◯ググること
自分で作品を作ったりしていると必ずエラーが出てきます。その際に、わからないことが出てきたら必要に応じてその都度調べることを意識することが大切です。その際、特に大切だなと感じることは、わからないことが出てきたら必要に応じてその都度調べたり、聞いたりすることです。私はこれまで3ヶ月間独学で学習を続けてきましたが、一つ確信していることは、余程特殊なことをしない限り、わからないことはホ・ト・ン・ドネットに答えが載っているということでした。また、正確な情報を素早く入手することも必要になってきます。そのためには、
- わからない部分をいくつかのサイトで確認してみること
- 調べる方法をパターン化する
- 英文を見てある程度意味が分かるようになる
ことが大切だと思いました。
「答えをすぐ見る」習慣を付けることが大切です。ググり方について詳しく学びたいという方はしまぶーさんの「エンジニアは検索力が大事。プログラミングスキル向上にググり力は必須です。」がオススメです。この方の動画はとてもわかりやすく未経験の方でもわかりやすい構成になっていてとてもオススメです。私もモダンJavaScriptの学習の一環で使用させていただきました。
https://www.youtube.com/watch?v=kNiD4rfNkFA
◯アウトプットすること
ここで言うアウトプットとはインプット（聞いた情報を頭に入れること）した内容を思い出し、自分で考えて情報を出すという行程のことを指しています。
アウトプットすることによって、
- 記憶に定着する
- 理解度が上がる
- 自分に気づきを与えることができる
- 相手にうまく伝えることができる
- 上司や同僚からフィードバックをもらうことができる
これらの恩恵をアウトプットによって得ることができます。もし、アウトプットをしないと学習の理解度はかなり低くなると思います。例えば、JavaScriptを一通り動画を見て学習しただけで、最新の業務管理システムを作ることができないことと同じようなものです。
また、アウトプットをして私が感じたことは、どんな優良なサイトであってもそれだけを見て、問題をなんの例外もなく解決することは難しいということでした。なぜならIT業界は、
- 常にバージョンがアップデートされて変化している
- 優良サイトに書いてあることが必ずしもその人にとってわかりやすいものではない
からです。私も実際にReactの学習をしている時に1年前の動画で学習していたのですが、動画と同じようにするとエラーが表示され進めず苦労した経験がありました。したがって、一度学習したものを使って作品やコードを書いて動かしてみる習慣をつけることが大切です。
◯浅く広く学習すること
浅く広く学習することによって、開発や新しいことを行おうとしたときに候補として選択することができるからです。これは、Youtubeの【とらゼミ】トラハックのエンジニア学習講座のトラハックさんがおっしゃっていた言葉です。ボールがないとサッカーができないのと同じですね〜！（ちょっと微妙な例えな気がする…）。
実践方法としては、ITニュース系の情報を取得することがオススメです。具体的にはRSSリーダーなどを使用して、ニュースを見る習慣をつけることをおすすめします。私も毎日最低でも一日一回はニュースに目を通しています。別に深く理解しなくてもいいと思います。私は気になったら更に調べてみるというようにしています。もしかしたら、自分の興味や関心が湧くような記事に出会えるかもしれません！
RSSリーダーに関するサイトはテックキャンプさんのこちらの記事がオススメです。
https://tech-camp.in/note/technology/90556/
ちなみに、私は通知機能が有るという点で、Inorederを使用しています。
まとめ
さて、ここまでのお話を一度簡単におさらいしておきます。
まとめ
- 自分にとって適正なIT会社に入るために自己学習を行おう
- エンジニアになるためには最低500時間は必要なので自分で学習する習慣をつけよう
- エンジニアに必要なスキルが何かを理解した上で効率のいい学習を行いましょう。
私もまだまだ未熟で駆け出しではありますが、カッコいいエンジニアになれるように、みなさんと一緒にスキルを磨いていきたいと思っています！
次は、私が行った学習について詳しく紹介したいと思います。
スキルを習得するために私が実際に行った学習
この章では、私が学習してきた内容について詳しくご説明させていただきます。今回は、
の順にお話します。
期間毎の学習内容
3ヶ月間の学習について、1ヶ月毎に画像形式でご紹介させていただきます。また、当時の感想や苦労したことや注意点を1ヶ月毎にお話させていただきます。
こちらの画像のものについては、マインドマップで作成しています。
◯1ヶ月目
補足説明
学習の中心は主にドットインストールさんやProgateさんでのプログラミング言語の勉強になります。
このときは、学習ロードマップは作成しておらず、プログラミング言語の学習に力を入れていました。
自分がエンジニアに向いているかの適正を知りたかったからです。
そのため、とにかくたくさん吸収して、プログラミング言語慣れるのための訓練をしていました。
どのような勉強方法であれ、1ヶ月目の学習において、
- タイピングの練習をすること
- 同じサイトでの復習は最低限にすること
が大切な心がけです。パソコンを使って仕事をしていく上でタイピングが遅いことは、サッカー選手が裸足でサッカーするのと同じです。必ずやっておくことをおすすめします。また、できるだけ一方向の学習は避けることが大切です。最初に学習したものに固執しすぎると、選択肢の視野を狭めることに繋がります。最初は私もProgateでの学習のみでしたが、ドットイントールさんでの学習も同時並行で行ってきたことで理解が早まったので2つ以上の学習サイトを利用することをおすすめします。
さらに、学習後は模写コーディングをひたすら行なうことでHTMLやCSSの理解を深めました。
1ヶ月目の主な費用についてはドットインストールさんのプレミアム会員（1080円）とProgateの有料会員（1078円）とカフェ代（9000円）です。
◯2ヶ月目
補足説明
2ヶ月目からは、いよいよエンジニアになるための本格的な勉強がスタートしました。1ヶ月目でプログラミング言語をある程度学ぶことができたので、2ヶ月目からはエンジニアになるためにより専門的な知識の獲得することを目的として学習しました。1ヶ月目と違う点としては、学習サイトから離れて自らロードマップを作成し、学習に取り組んだことです。
具体的には、モダンなJavaScriptの理解や環境構築に関することなどをYoutube動画で学習しました。私が学習する際に使用したおすすめのYoutube動画をこちらに載せておきます。
Reactを学習したいという方には、トラハックさんの「日本一分かりやすい」シリーズや、しまぶーさんのJavaScriptの環境構築に関して、歴史的背景から丁寧に説明している「モダンJavaScript講座」はオススメです。
山浦清透さんの動画は、山浦さん自体が未経験からエンジニアになっているため、未経験からのエンジニア転職に特化した動画がたくさんあり、とてもわかりやすくとても参考になりました。
セイト先生の動画は主にJavaScriptの動画や面接対策で使用させていただきました。
また、JavaScriptのフレームワークである、Reactを使用した個人的にかなり力の入ったシングルページアプリケーション（SPA）を1から環境構築を行って、Firebaseのホスティングサービスを利用したサーバーアップにも挑戦しました。作成した作品は下のものになります。
こちらの作品を作成した理由としては、実践に近いかたちで作品を作りたかったことと一つの言語を極めてみたかったからです。「実践に近いかたち」という部分に関して、具体的には、期限を決めて作成を始めたこと、作りたい機能をあらかじめ計画したこと、追加で作成したい機能を途中から盛り込んだりなどしてアジャイル開発に近いことを行いました。
また、一つの言語を極めることで、それが自分の得意な言語となりますし、複雑なコードの依存関係についてある程度理解することができます。そのためにも、まずは一つ自分が作りたいものを考え、一つの言語を極めてみることがとても大切です。
費用としては、ドットインストールやProgateでの学習を継続していたので2158円と、FirebaseのBlazeプラン（従量課金制ですが実質０円）とカフェ代（9000円）です。
◯3ヶ月目
補足説明
3ヶ月目は面接を視野に入れた対策や、エンジニアとしての幅広い知識を獲得することを目的とした学習を行いました。具体的には、ITニュースの情報を取得したり、ポートフォリオを作成したり、CI（継続的インテグレーション）ツールの導入を行ったりしてみました。
また、TypeScriptについては学習ロードマップで最後に設定した言語だったため、サバイバルTypeScriptで学習を行いました。
ITニュースの情報収集に関してはInoreaderでまとめて確認していました。詳しくは前の章の「エンジニアに必要なスキルー◯浅く広く学習すること」でおすすめのサイトを紹介したのでよかったら見てみてください。私が現在も見ているニュースの記事として、
があります。よかったら閲覧してみてください。
また、3ヶ月目に学習期間中にポートフォリオの作成も行いました。実は1ヶ月目にも作成を行っていたのですが、この期間で新しく習得したスキルが増えたためReactで作り直すことにしました。
費用はカフェ代（9000円）のみです。
◯3ヶ月間の学習のまとめ
ここまで、3ヶ月間の学習を見てきました。簡単にまとめます。
まとめ
- １ヶ月目はエンジニアに向いているかの確認、２ヶ月目はエンジニアとしてのより専門的な技術を学ぶため、３ヶ月目は面接を視野に入れた対策や、エンジニアとしての幅広い知識を獲得することをそれぞれの学習の目的としている。
- 学習ツールとして使用したものは動画や作業できるものが中心であること
- 費用はほとんどかかっていない
本での学習も行ってみたのですが私には合わなかったのでやめました。
また学習をするのに費用をできるだけ費用をかけないように意識していました。カフェ代がほとんどですね。
毎日行っていたこと
タイピング練習
特に最初の一ヶ月は毎日1時間行っていました。タイピングが遅いと業務に支障をきたすので習慣化してブラインドタッチできるようになっておくことをおすすめします。目安として、私は「寿司打」で1ヶ月間練習したら、一番難しい難易度で10000点達成できました。
また、私は同時並行でHTML用のタイピングなどを行っておくことで特殊なキーも練習しておきました。下のサイトなどがオススメです。
ゲーム感覚で練習したい方はこちらとかもおすすめですね！
ITニュース情報の取得
こちらは毎日行っておくことで最新のIT業界について理解することができるのでやっておくとことをおすすめします。
次の私が学習時に使用していたwebサイトやツールのご紹介の「情報収集で役立つもの」で詳しく説明しているのでそちらも参考にしてみてください。
その日やることを決めて評価や行ったことを簡潔に記述する
私はメモとTrelloを使用して学習計画を立てています。詳しくは次の「私が学習時に使用していたwebサイトやツールのご紹介」のTrelloで説明しているのでそちらを御覧ください。
カフェに行く
こちらの話については、Vol.1でもお話しましたが、どこかで学習する習慣をつけることでやらなければいけない環境を作りモチベーションを保つことを意識していました。
独学では一度心が折れると立ち直るのが難しいです。私は色んな所で学習するようにして、学習が飽きないような工夫をしました。具体的には、
- いつもとは違うのカフェに行く
- 図書館に行って勉強する
- 勉強会に参加する
などが挙げられます。図書館などは場所にもよりますが、無料でかつWifiがあり、本もある（とはいってもほとんど有益なものはないので息抜き程度として）ので個人的には最強です。家の周りでこのような環境が揃っていれば活用することをおすすめします。
私が学習時に使用していたwebサイトやツールのご紹介
私が学習していたときに役立ったサイトやツールの代表的なものについて、ご紹介させていただきます。便利な使い方などもお伝えするのでよろしければ御覧ください。
プログラミング言語学習で役立つもの
ドットインストール
Progate
【模写コーディング】おすすめの練習サイト【入門編～上級編】
SQL練習問題｜TECH PROjin
情報収集に役立つもの
Zenn
Qiita
Inoreader
その他学習計画や転職活動で役立つもの
Geekly
マインドマップ
Trello
【ドットインストール】
プログラミング言語の学習としてこちらのサイトは有名です。2〜3分の動画学習です。スキマ時間などに利用できることが特徴です。
便利な使い方として、質問機能を見て理解を深めることや自分のソースコードを貼り付けて手本と見比べる機能の活用がかなり便利です。
特に、HTMLやCSS、JavaScriptに関しては、質問がかなり充実しているので他の人が躓いている部分を運営が丁寧に説明してくれているので効率よく学ぶことができます。また、自分のソースコードを貼り付けることで簡単にエラー箇所を検出することができます。
また、誤字によるミスがよくありがちです。そういったミスをソースコードを貼り付けて、見本と比べることで素早く解決することができるので便利です。
【Progate】
こちらもプログラミング言語の学習として有名なサイトです。主な学習方法は手を動かしながら、プログラミング言語を使って一つの作品を作成していく学習方法が特徴的です。
便利な使い方としては、ドットインストールさんなどと併用してアウトプットを行なうと効率よく記憶に定着できるのでオススメです。
学習の順序として、通常。ドットインストール → Progateがインプット→アウトプットの順で使えるので便利ですが、個人的には、Progate → ドットインストールの順番のほうが良かったです。理由としては、学習の難易度がProgateさんのほうが易しかったからです。
【模写コーディング】おすすめの練習サイト【入門編～上級編】
こちらは、私がHTMLやCSS、JavaScriptを作成した後に模写コーディングの学習として使用したサイトです。模写コーディングとは、既存のサイトの見た目を真似てコーディングすることです。模写コーディングを行なうことで自分が学んだ文法などの使い方を理解することができるので必ずやっておくことをおすすめします。
また、模写コーディングを行なう上で学んでおいたほうがいいこととして、Google Chrome デベロッパーツールがあります。こちらは、Google Chromeに標準搭載されている開発者用の検証ツール（デバッグツール）のことで、バグの検出を効率よく行ってくれるものになります。右クリックして「検証」をクリックするか、ショートカットキーなら（MacBook）「Commandキー ＋ Optioinキー ＋ i」で開くことができます。以下のサイトで詳しく説明されていますのでよろしければ御覧ください。
https://www.sakurasaku-labo.jp/blogs/developer-tools#:~:text=%E3%83%87%E3%83%99%E3%83%AD%E3%83%83%E3%83%91%E3%83%BC%E3%83%84%E3%83%BC%E3%83%AB%E3%81%A8%E3%81%AF%E3%80%81Google,%E3%81%A7%E6%B4%BB%E7%94%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82
【SQL練習問題｜TECH PROjin】
こちらでは、SQLのデータの抽出の学習を行うことができます。学習方法としては、まずもととなるデータを読み込んで、問題のような表になるようにデータを取り出すといったものになります。一度自分が使用しているエディタなどにデータベースを読み込むため、MySQLなどの環境構築の必要があるので学習難易度は高いですがSQLの練習問題としては充実しているのでオススメです。以下のサイトを参考に環境構築を行なうことをおすすめします。
https://udemy.benesse.co.jp/development/system/mysql-install.html
https://www.javadrive.jp/mysql/connect/index1.html
ZennとQiitaに関しては、一緒に説明します。
【Zenn】
【Qiita】
こちらの用途としては主に、新しいプログラミング技術を学ぶために利用しました。また、Qiitaに関しては学習してきたことなどをマークダウン記法で寄稿する練習としても利用しました。どちらも基本的には無料で使うことができるのでエンジニアの方は必ず使用することをおすすめします。
具体的な利用方法としては、RSSで連携を行って、自分が学習しているプログラミング言語の記事が出たときに記事を参考に実践してみるといったことを行いました。記事を選ぶポイントとしては、評価が高いものやいいねがされているもの、ある程度読んでみてなんとなく理解できるものを選択するといいかと思います。
【Geekly】
こちらは転職活動の際に使用しました。詳しくは今後、Vo.3で書きたいと思いますのでしばらくお待ち下さい！
【マインドマップ】
こちらは、主に、学習の方向性を決めるためのツールや面接対策に使用しました。こちらもVol.3で詳しく説明できたらなと思います。
【Inoreader】
こちらは、RSSリーダーとして使っていたツールです。RSSについては以下のサイトを参考にしてみてください。最初Feedlyを使用していたのですが、通知機能があり、更新されるたびに表示されるという点でこちらを使うようになりました。
【Trello】
こちらは学習計画を決める時や転職活動の予定を計画するときに使用しました。かなり直感的に使用できるのでおすすめです。具体的な使い方としては、Trelloとメモの2つを活用した学習計画を立てる際に利用しました。
学習予定をTrelloに作成しておき、当日行なう具体的な内容を「メモ」に書き込むというような使い方をしました。
こうすることで自分がどんな勉強を行ったかを具体的に記録として残しておくことができるのでオススメです。
【メモ】
メモの記述方法としては、◯で当日行なうことを書いて、→で学習したことの感想を簡単にまとめまるという感じで使っています。
【Trello】
写真は私が実際に学習の際に作成したボードになります。一つ一つのアイテムごとにもチェックリストを作成したり、リマインダー機能があります。
Trelloにはたくさんの機能があるので自分の好みに応じた使い方を一度やってみるのがいいかと思います。
また、Slack連携などの拡張機能が豊富であり実際の業務でプロジェクト管理にも使用されていたりしますので、業務用ツールとしても一度触っておくことを推奨します。以下のサイトで拡張機能のおすすめ設定などについて記されています。
https://blog.trello.com/ja/the-big-list-of-free-trello-power-ups-for-everyone
【コラム】独学で苦労したこと
こちらでは、独学中にとても苦労したことに関して、具体的にお話させていただきます。内容が専門的になっていますので、ある程度IT業界やプログラミング言語の知識があるかたを対象としています。本当にたくさんの壁がありますが諦めなければ必ずできます。
私は、プログラミング言語などでのエラー出力ほど優秀な上司は知らないです。したがって、何かエラーが起きたときには、自分が書いたコードや前提知識に間違いがあるといつも考えることができたました。
具体的には以下のことをお話したいと思います。
デベロッパーツールのユーザーエージェントの存在
Githubの使い方
Webpackの使い方
Reactを使ったタスク管理アプリ
デベロッパーツールのユーザーエージェントの存在
このユーザーエージェントの存在を知らなかったためかなり苦労をしました。ここで言うユーザーエージェントとは、ブラウザ毎に定義されているデフォルトのCSS設定である「user agent stylesheet」のことを示しています。
なぜかスタイルが反映されないという方はこちらの記事でユーザーエージェントについて学習することをおすすめします。
どこかの記事で見たのですが、ユーザーエージェントの存在を知らずに案件を受けた結果苦労したという方もいたのでGoogleChromeのデベロッパーツールはいろいろいじってみることをおすすめします。
Githubの使い方
Githubに関して、私が分からなかったことは次のようなことです。
- GitコマンドがVSCode上ですでに使えるということ
- GithubPagesをつかって無料でサーバーを作るときのルール
- .gitignoreによるモジュールの管理
私は、VSCode上のターミナルとMacBookに搭載されているターミナルが全く別物だと思っていたため、逆に混乱しました。また、CUI・GUIの操作について理解が浅かったこともあり、どっちを使えばいいかわからなく混乱したことも有りました。
また、初めて自分の作成したコードをGithubPagesのサービスを利用したときに、
aタグのhrefのリンク設定のルールやIndex.htmlがプロジェクトの先頭に来ていないといけないなどで半日かかったことが有りました。
その他、.gitignoreを作成せずにソースコードをすべてGithub上にアップしたりしてかなり重くなった記憶があります。
初学者はGitを使い始めたタイミングでかなりたくさんの前提知識が必要になってくるので、予め動画で勉強したり、わからないことがあったら調べる必要があります。
Gitに関しては山浦清透さんの動画が一番わかり易いと思いましたので、よろしければ参考にしてみてください。
https://www.youtube.com/watch?v=WHwuNP4kalU
Webpackの使い方
Webpackに関する環境構築の設定ははじめに出てきたときにとても混乱しました。なぜなら、ローカルとサーバーの違いなどが分からなかったからです。また、私はReactを使用したときに初めて、Webpackを使用したのですが、以前まで使用していたJavaScriptが特に何も設定せずにブラウザで動いていたのになんでReactはWebpackで設定しないと動かないんだ？むしろめんどくさくないかこれ？と思っていました。こちらに関しては、しまぶーさんの動画でモダンJavaScriptとしてnpmなどと一緒に学ぶことをおすすめします。
Reactを使ったタスク管理アプリ
私はReacｔを一通り学習後は、一つ大きなSPAを作成するための開発を行っていました。その間何度も作りたい機能が作れずに立ち止まることが有りました。
その中でも一番苦労したこととして、Todoアプリで言うところの削除機能が実装できずに3日間画面とにらめっこしていました。文法はあっているはずなのになぜか動かない。他のファイルとの依存関係が原因なのか、それともバージョンが変わっていてわからなくなったのかなど考えていました。
あまりにも分からなかったので、挫折してMentaなどで聞いてみようかなとも思いました。
いろいろ模索した結果、ついに「親要素の関数がイベント発生時に引火して見かけ上、削除機能が動いていないようになっていた」ことが原因であることがわかりました。すかさず「stopPropergation()」を使って親要素の関数を止めました。削除がうまく機能したときはさすがに泣きそうでしたね。この削除機能が実装できるまでに、ReactのHooksの知識がついたりと、たくさんの恩恵が得ることができたのでみなさんもぜひ立ち止まったときは一度諦めずに考えてみるようにしてみましょう。
学習内容のまとめ
この章について簡単にまとめます。
まとめ
- たくさんのツールに触れてみることで幅広い知識を手に入れること
- おおよその学習計画を立てて定期的に取り組むことを決定して学習に取り組むこと
- わからないことがあったら必ず分かるまでとりあえずやってみる
あんまり、上手くまとまっていないような気がしますが（笑）今回はここで終了です。
おわりに
ここまで読んでいただきありがとうございました。今回かなりの力を入れてこの記事を作成したというよりは、書いていくうちにあれもこれも作りたいとおもったら気づいたら長くなっていた感じです。
私としては、自分のやってきた学習の記録というよりもみなさんのお役に経てばと思い作成しました。少しでも力になれば幸いです。
次回は転職活動を中心としてお話をさせていただきたいと思います。