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

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

作成日　2022/12/31

## 目次

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

***

## はじめに

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

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



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

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

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

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

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

### 紹介方法

紹介方法として、
<ul>
    <li>ターゲット</li>
    <li>サイトの特徴</li>
    <li>メリット</li>
    <li>感想</li>
    <li>使用方法</li>
    <li>学習コスト（おおよその学習時間・学習にかかる費用）</li>
</ul>

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

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

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

***

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

https://qiita.com/shokawakita0630/items/916fd076053979d91696

https://qiita.com/shokawakita0630/items/6f649bf908bf0cd59e2c

https://qiita.com/shokawakita0630/items/a0239c81f8b4ae4d5038

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

***

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

[https://prog-8.com/dashboard](https://prog-8.com/dashboard)

https://prog-8.com/dashboard

[https://dotinstall.com/home](https://dotinstall.com/home)

https://dotinstall.com/home

| 項目 | 内容|
|:-:|:-:|
|  ターゲット |  入門者向け |
|  サイトの特徴|  プログラミングを体系的に学ぶことができる<br>Progate・・・手を動かす学習<br>ドットインストール・・・2〜3分動画による学習 |
|  メリット |  ◯Progate<br>手を動かして学ぶことができる、わかりやすい説明スライド、<br>演習問題がある<br>◯ドットインストール<br>動画が短いので学習ハードルが低い、質問機能がある<br>自分が書いたコードと答え合わせができる|
|   使用方法|  Progate→ドットインストールで学ぶ、質問機能を活用する |
|   学習コスト|  ２つ合わせて約300時間<br>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](https://www.maildealer.jp/column/method/management76.php)

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

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

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

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

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

## 3.　しまぶーのIT大学

[https://www.youtube.com/c/shimabu_it](https://www.youtube.com/c/shimabu_it)

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

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

### 説明
私が学習する上でとてもお世話になった方です。しまぶーさんは、「Yahoo! JAPAN」でプログラマーとして働き、その後、起業家として新規サービスを開発している方です。おもに、プログラミング講座、就活対策、IT業界ニュースについて発信しています。最近また、Reactの動画やITニュース情報のラジオがアップされているので時間がある時に私も学習したいと思います。
私は、おもにモダンJavaScriptの学習の際に使用しました。ここで言うモダンJavaScriptとは、
<ul>
    <li>Angular・React・Vueなどのフレームワークを利用している</li>
    <li>npm/yarnでプロジェクトを管理している</li>
    <li>ビルドツールを使用している</li>
    <li>ES2015年以降の記法</li>
    <li>トランスコンパイラーを使用している</li>
</ul>
を指しています。私はこの時点で、HTML・CSS・JavaScript・Gitを学習していました。
この方の動画で学習した理由は、モダンJavaScriptについて、JavaScriptの歴史的背景から一つずつ丁寧に説明されている点でわかりやすかったからです。また、動画での学習はエディターでの説明があり視覚的に理解できるので個人的に学習に向いているツールだと思っています。
<br><br>
学習方法としては、動画を見ながら、自分も手を動かせる内容は動かしてみることが大切です。なぜなら、動画の投稿期間によってバージョンがあっていないときがあるからです。動画と同じようにしても動かない可能性があります。実際に動かしてみることで、バージョンを調整したり、バージョンアップした経緯や変更仕様についても学ぶ事もできます。しまぶーさんの動画を一度見てみることをおすすめします。

## 4.　サバイバルTypeScript

[https://typescriptbook.jp/](https://typescriptbook.jp/)

https://typescriptbook.jp/

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

### 説明
こちらは私にとって印象的な学習サイトでした。こちらの記事を読むことで、TypeScriptの文法を学ぶことに加えて、
<ul>
    <li>ESLint・JestなどのCIツールの導入</li>
    <li>TypeScriptの歴史</li>
</ul>
を学ぶことができるのが特徴です。

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

## 5.　Qiita/Zenn

[https://qiita.com/](https://qiita.com/)

https://qiita.com/

[https://zenn.dev/](https://zenn.dev/)

https://zenn.dev/

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

### 説明
こちらはエンジニアなら活用しないとヤバいと思います。エンジニアの情報共有サイトはQiitaやZenn以外にもありますので自分にあったものを1つ以上は見ることが大切です。使い方は人によっていろいろですが、私の場合は投稿や記事の閲覧がメインです。ここでは、閲覧した記事の中で学習してよかったものを3つ紹介させていただきます。ここでは3つだけですが、私がおすすめしたい記事として、
<ul>
    <li>初学者向け</li>
    <li>必須スキル</li>
    <li>体系的な構造</li>
    <li>仕事で役立つ</li>
    <li>実際に手を動かして試すことができる</li>
</ul>
記事を探してみると良記事を見つけることができます。
また、QiitaやZennなどの情報共有サイトを利用した情報収集と並行して公式ドキュメントなどの一次情報も触れておきましょう。情報共有サイトは業務で詰まったりした時の調べごとなどにも使えるため活用できるようにしておきましょう。

### Qiita/Zennの投稿記事1つ目

[https://zenn.dev/suzuki_hoge/books/2022-03-docker-practice-8ae36c33424b59](https://zenn.dev/suzuki_hoge/books/2022-03-docker-practice-8ae36c33424b59)

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

### 説明

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

### Qiita/Zennの投稿記事2つ目

[https://qiita.com/AKB428/items/20e81ccc8d9998b5535d](https://qiita.com/AKB428/items/20e81ccc8d9998b5535d)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885241/814dee47-1d31-f715-568b-d9bd40ec4ec8.png)


### Qiita/Zennの投稿記事3つ目

[https://qiita.com/ouauai/items/d38eeef9f0af5a4a87da](https://qiita.com/ouauai/items/d38eeef9f0af5a4a87da)

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

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

***

# おわりに

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