【学習サイト紹介】駆け出しエンジニアが学習してよかったもの5選

作成日　2022/12/31

目次

はじめに
 1　Progate　&&　ドットインストール
 2　Gmailの自動振り分けのサイト
 3　しまぶーのIT大学
 4　サバイバルTypeScript
5　Qiita/Zenn
-- 実践Docker　−　ソフトウェアエンジニアの「Dockerよくわからない」を終わりにする本
-- リーダブルコード要約とリーダブルコード要約の活用方法
-- 知らないと恥ずかしいコードレビューで指摘されがちなポイント14選
 おわりに

はじめに

こんにちは,約3ヶ月間独学でプログラミングの学習を行い、12月1日から正社員エンジニアとして就職した川北と申します。ポートフォリオはこちらになります。今回は「今年の学習を振り返る」目的で、これまで私が実際に学習する際に使ってみてよかった学習サイト（記事を含みます）を紹介させていただきます。

【この記事で対象としている方】
・未経験からエンジニアになりたい方
・どんな学習方法があるか知りたい方
・実際にサイトでの学習をする上で自分にあっているかどうかの確認をしたい方

紹介の基準になっているもの

今回の紹介基準としては、

私が実際に学習してみてわかりやすかったもの
アウトプットの幅が広がったもの
実務で役に立ちそう！

ということがベースになっています。特に紹介サイトを学習することで自分の視野が広がることが役に立つのではないかと思います。

また、私が主に学習しているJavaScriptの内容だけに偏らないように、今回は共通分野、専門分野の両方を意識して作成しています。

紹介方法

紹介方法として、

ターゲット
サイトの特徴
メリット
感想
使用方法
学習コスト（おおよその学習時間・学習にかかる費用）

などの観点から紹介したいと思います。また、今回はできるだけ他サイトで紹介されているサイトについては、独自の学び方などを説明して工夫をしていますので、いろんな学習方法をお試しください！

各項目について、以下のように説明していきます。

項目	内容
ターゲット	中級者向け（ある程度その分野の知識がある）初級者向け（その分野の知識についてあまり知らない）入門者向け（その分野の知識がまったくない）
サイトの特徴	どのようなサイトであるかの説明をします。
メリット	どんなスキルを身につけることができるのかを紹介します。
使用方法	学習サイトのおすすめの使い方について紹介します
学習コスト	学習サイトを利用してスキルを習得するまでにかかる時間を紹介します。（個人差はあります）

合わせてこちらの記事もどうぞ！

未経験から独学でエンジニアになるための学習方法・学習ロードマップ・学習ツール・独学方法・転職活動などについて、私の体験をもとに紹介した記事になっています。Vol.2がメインになります。よろしければこちらの記事もお読みください！では紹介していきます。

1　Progate　&&　ドットインストール

https://prog-8.com/dashboard

https://dotinstall.com/home

項目	内容
ターゲット	入門者向け
サイトの特徴	プログラミングを体系的に学ぶことができる Progate・・・手を動かす学習ドットインストール・・・2〜3分動画による学習
メリット	◯Progate 手を動かして学ぶことができる、わかりやすい説明スライド、演習問題がある ◯ドットインストール動画が短いので学習ハードルが低い、質問機能がある自分が書いたコードと答え合わせができる
使用方法	Progate→ドットインストールで学ぶ、質問機能を活用する
学習コスト	２つ合わせて約300時間 2つとも月額約1000円

説明

これは定番ですけど外せなかったですね笑
私は、HTML、CSS、JavaScriptの学習をする際の一番初めに、これらのサイトを利用しました（学習コストの「300時間」はこれらの学習の目安です）。
Progateでまずプログラミング言語を学んでいる時に、ドットインストールを知り、似ている単元の学習は2つのサイトを使って並行学習を行っていました。Progateの方が簡単な気がします。重要なのは2つのサイトを利用すること。1つのサイトでの学習は知識が偏ります。
また、ドットインストールさんの質問機能を利用することで、自分が何がわかっていないのかを明らかにすることができます。プログラミング初心者において苦労することは、何がわからないのかもわからない状態です。質問機能を駆使することで他の人がわからなかった部分がどういった部分で、どうやって解決するのかが明確になり基準がわかります。わからないことがなくてもできるだけ質問機能は確認しておきましょう。

注意点として、復習として2周目を行なうのはNGです。なぜなら、復習しても実践的なスキルは身につかないからです。実践的なスキルを付けたいのであれば、8割位の理解にとどめ、わからないことが出たタイミングで活用する範囲に留めておくことが有効です。月額1000円でプログラミング言語を体系的に学ぶことができるのでコスパが良いと思います。

2　Gmailの自動振り分けのサイト

https://www.maildealer.jp/column/method/management76.php

項目	内容
ターゲット	入門者向けメールサービスを利用している方全員
サイトの特徴	Gmailでフィルターの設定を行うことための概要がまとめられている
メリット	メールの自動振り分けを行うことで業務効率が上がる
使用方法	サイトを見て実際に使用してみる
学習コスト	約30分、無料

説明

こちらはGmailのフィルター機能を行って、メール管理を行うためのサイトです。これまで、私は、会員登録していたほぼすべてのメールの通知を受け取っていたのでかなり通知がうるさかったことと、届いたメールの存在場所を探すのに時間がかかっていることでした。こちらのフィルター機能を実装することで無駄な通知を防ぐことができます。また、ラベルごとにメールの種類を分けて管理することができます。ぜひ実装してみてください。
こちらのサイトに加え、私が採用したラベル分けをご紹介します。

1.　個人用
−−　荷物管理
−−　無料登録
−−　スケジュール
2.契約関係
−−　Apple
−−　auPay
3.　仕事
4.　その他
−−　件名が〇〇なもの
5.　転職
−−　転職サイト
−−　〇〇さん

ラベルはネスト形式で登録することができます。また、並び替えはできないので、ラベル名に数字を記述することで解決できます。よかったら参考にしてみてください。

3.　しまぶーのIT大学

https://www.youtube.com/c/shimabu_it

項目	内容
ターゲット	初級者向け JavaScriptのフレームワークを使おうと考えている方
サイトの特徴	モダンなJavaScriptやITニュース情報を紹介してくれるサイト
メリット	モダンなJavaScriptが理解できる ITニュースをラジオ形式で聞くことができる
使用方法	自分の使っているコードエディターなどを使って試してみる
学習コスト	モダンJavaScriptのみで 285分（約15分×19本）、無料

説明

私が学習する上でとてもお世話になった方です。しまぶーさんは、「Yahoo! JAPAN」でプログラマーとして働き、その後、起業家として新規サービスを開発している方です。おもに、プログラミング講座、就活対策、IT業界ニュースについて発信しています。最近また、Reactの動画やITニュース情報のラジオがアップされているので時間がある時に私も学習したいと思います。
私は、おもにモダンJavaScriptの学習の際に使用しました。ここで言うモダンJavaScriptとは、

Angular・React・Vueなどのフレームワークを利用している
npm/yarnでプロジェクトを管理している
ビルドツールを使用している
ES2015年以降の記法
トランスコンパイラーを使用している

を指しています。私はこの時点で、HTML・CSS・JavaScript・Gitを学習していました。この方の動画で学習した理由は、モダンJavaScriptについて、JavaScriptの歴史的背景から一つずつ丁寧に説明されている点でわかりやすかったからです。また、動画での学習はエディターでの説明があり視覚的に理解できるので個人的に学習に向いているツールだと思っています。

学習方法としては、動画を見ながら、自分も手を動かせる内容は動かしてみることが大切です。なぜなら、動画の投稿期間によってバージョンがあっていないときがあるからです。動画と同じようにしても動かない可能性があります。実際に動かしてみることで、バージョンを調整したり、バージョンアップした経緯や変更仕様についても学ぶ事もできます。しまぶーさんの動画を一度見てみることをおすすめします。

4.　サバイバルTypeScript

https://typescriptbook.jp/

項目	内容
ターゲット	中級者向け TypeScriptを学び始めようと考えている方
サイトの特徴	TypeScriptを学ぶ・作品作成ができる
メリット	TypeScriptを体系的に学習する CIツールについて理解することができる
使用方法	サイトを読む、サイトを見て練習する
学習コスト	約20時間、無料

説明

こちらは私にとって印象的な学習サイトでした。こちらの記事を読むことで、TypeScriptの文法を学ぶことに加えて、

ESLint・JestなどのCIツールの導入
TypeScriptの歴史

を学ぶことができるのが特徴です。

私の学習方法は、はじめに「作って学ぶTypeScript」を行ってTypeScriptを使った開発を体験しました。その後、「読んで学ぶTypeScript」を読んでノートに学習したことを記述しました。反省点としては、ノートの記述方法が良くなかったことです。大事な部分以外もすべて記述していたので時間がかかりました。したがって、必要な情報のみをメモして、わからないことが出てきたら、サイトを確認すればいいかと思います。

5.　Qiita/Zenn

https://qiita.com/

https://zenn.dev/

項目	内容
ターゲット	入門者向けわからない技術が出てきてエラーが出た解決したい時学習のきっかけを知りたい方
サイトの特徴	エンジニアに関する情報共有ツール
メリット	専門的な情報の記事を見ることができる学習方法を知ることができるエラーの解決に役立つetc...
使用方法	記事の投稿・閲覧、わからないことの質問
学習コスト	エンジニアとして働く上で継続的に必要、基本無料

説明

こちらはエンジニアなら活用しないとヤバいと思います。エンジニアの情報共有サイトはQiitaやZenn以外にもありますので自分にあったものを1つ以上は見ることが大切です。使い方は人によっていろいろですが、私の場合は投稿や記事の閲覧がメインです。ここでは、閲覧した記事の中で学習してよかったものを3つ紹介させていただきます。ここでは3つだけですが、私がおすすめしたい記事として、

初学者向け
必須スキル
体系的な構造
仕事で役立つ
実際に手を動かして試すことができる

記事を探してみると良記事を見つけることができます。また、QiitaやZennなどの情報共有サイトを利用した情報収集と並行して公式ドキュメントなどの一次情報も触れておきましょう。情報共有サイトは業務で詰まったりした時の調べごとなどにも使えるため活用できるようにしておきましょう。

Qiita/Zennの投稿記事1つ目

https://zenn.dev/suzuki_hoge/books/2022-03-docker-practice-8ae36c33424b59

説明

こちらの記事はDockerについての説明が詳しく説明されています。また、作者が前回書いた記事のアップデート版ということもあり定義などの説明がしっかりしています。Dockerを学ぶ機会がある方は見てみることをおすすめします。

Qiita/Zennの投稿記事2つ目

https://qiita.com/AKB428/items/20e81ccc8d9998b5535d

説明

こちらは書籍「リーダブルコード」のようやく記事になります。私は書籍を読んでいないのですがこちらの記事で要約を見て書籍の概要を学習しました。書籍の概要を効率よく確認することができるのでオススメです。書籍を読む前に一度確認し、読んだ後に興味があったら購入する方法が良いかと思います。

Qiita/Zennの投稿記事3つ目

https://qiita.com/ouauai/items/d38eeef9f0af5a4a87da

説明

こちらの記事は初心者の方向けにコードレビュー時の注意点がわかりやすくまとめられています。特に独学で学習をしていると自分のコーディングスキルを確認することは難しいので一度記事を見て自分のコードを見直してみると良いでしょう。

おわりに

今回は、学習してよかったものを紹介させていただきました。いろいろな分野で統一感はありませんがどの記事もエンジニアになるのであれば参考になる記事ばかりです。また、私にも言えることですが、「自分で調べる」という習慣をつけて、わからなかった問題が出た時に適切に対応できるよう調べ学習を進めていきましょう。