【完全保存版】駆け出しエンジニアが活用すべき情報ソース・ツールまとめ

どうも、実務未経験から完全独学でWebエンジニア転職を達成しました。
スター宮☆みゆきです。

はじめに

エンジニア転職は情報が命です。

どれだけ努力したところで、参照する情報が誤っていれば何の意味もありません。
特に駆け出しエンジニアの方々は、業界の悪しき性質上、情報の確からしさが低い情報商材を売られるカモにされがちです。

本稿はそんな駆け出しエンジニアの方々を救うべく、実際に私がエンジニア転職に利用したインターネット上に存在する基本的に無料（ときどき課金あり）の情報ソース・ツールを網羅的にまとめたものになります。

また、情報ソースごとに確からしさ¹、読みやすさ²について評価しています

※確からしさと読みやすさはしばしばトレードオフの関係にあり、駆け出しの方々は得てして読みやすさを重視して確からしさを犠牲にしたソースを参考にしてしまいがちですが、なるべく確からしさが高い情報ソースで学習することを強くオススメさせて頂きます。

本稿は二部制で構成されています。
第一部では情報ソース・ツールの紹介、第二部では私の独学方法を紹介しています。
独学方法に関心がない方は第一部のみをご覧頂いて支障はありません。

目次

第一部: 情報ソース・ツールの紹介

1. 学習サイト
   1. 総合
   2. HTML/CSS
   3. JavaScript
   4. Ruby/Rails
2. 技術情報共有コミュニティ
3. 駆け出しエンジニア支援サービス・メディア
4. ロードマップ/サーベイ
5. ツール
6. Chrome拡張機能
7. 転職サイト

第二部: 独学方法の紹介

1. 学習過程
2. 学習のコツ
3. エラー解決手順

第一部 情報ソース ツールの紹介

1. 学習サイト

1-1. 総合

• 公式ドキュメント
  確からしさ★★★
  読みやすさ★～★★

まず最初に最も重要な情報ソースを紹介します。
それが各種公式ドキュメントです。

しばしば公式ドキュメントを読まずに他のソースから学習される方を見ますが、まず何よりも公式ドキュメントを読んでください。

確からしさに関しては公式ドキュメントが最強です。プログラミング言語であってもフレームワーク、ライブラリであってもまずは公式ドキュメントから読まれることを推奨いたします。

• Udemy
  確からしさ★★
  読みやすさ★★★

Udemyはオンライン学習プラットフォームです。日本版は米国のUdemy社とベネッセ社によって運営されています。

本プラットフォーム上で学習コンテンツに対して課金することで、購入した学習コンテンツを視聴することができます。

ハンズオン形式のものが多く公式ドキュメントだけではどうしてもわからなかった部分の補助教材として利用することをオススメします。
課金するだけあって著書ほどではないですが素人が投稿する記事よりも確からしさが高いソースであると言えます。

• Progate
  確からしさ★★
  読みやすさ★★★

こちらはご存知の方も多いと思いますが、東大生が開発した日本のプログラミング学習プラットフォームです。

Progateのコースを受講するには月額利用料が必要です（一部無料枠あり）

Reactを用いたUIがキュートなこともあって駆け出しの方々に評判が良い印象です。

プログラミング学習やフレームワークの概観をつかむにはオススメです。

• ドットインストール
  確からしさ★★
  読みやすさ★★★

前述のProgateと利用用途は同じです。Progateかドットインストールか好きな方を利用すれば良いと思います（私はドットインストールを利用しました）

• freeCodeCamp
  確からしさ★★
  読みやすさ★

ここからは何一つ課金したくないという独学過激派の人、あるいは英語で学習することに何の抵抗もない人に紹介できるソースになります。

一つ目がfreeCodeCampです。米国のプログラミング学習プラットフォームです。Progateやドットインストールと違い無料ですが、その代わりすべて英語です。

Progateと違うのはRubyやコマンドライン等がない代わりに、データサイエンス、機械学習系のコンテンツも取り扱っていることが挙げられます。

• W3Schools
  確からしさ★★
  読みやすさ★

こちらはインドのプログラミング学習プラットフォームです。
HTML/CSS/JavaScript/Python/Node.js/SQL等の基本的なことはすべてW3Schoolsで学べます。
無料なので英語強者の方にオススメです。

• tutorialspoint
  確からしさ★★
  読みやすさ★

こちらも前述に引き続きインドのプログラミング学習プラットフォームです。
W3Schoolsと違うのはWeb開発だけでなくOSやデータ構造＆アルゴリズム等のComputer Scienceやデータサイエンス等あまねく取り扱っている点です。

私がインド人に生まれていたらひたすら本サイトで学習していたかもしれません。インドの方々がプログラミング強者なのも納得できますね。

1-2. HTML/CSS

• MDN web docs(HTML)
  確からしさ★★★
  読みやすさ★★

Firefoxでお馴染みのコミュニティMozillaによって書かれたHTMLのドキュメントです。
HTMLはプログラミング言語ではなくマークアップ言語でありWebの仕様の一部なので公式ドキュメントというものはないのですが、本サイトがおよそ公式ドキュメントの地位を築いているように私は感じます。

タグや属性の詳細が体系的にまとまっているのでHTMLについて確認する時は本サイトを参照することをオススメします。

• MDN web docs(CSS)
  確からしさ★★★
  読みやすさ★★

前述のCSS版となります。

1-3. JavaScript

• MDN web docs(JavaScript)
  確からしさ★★★
  読みやすさ★★

前述のJavaScript版となります。

• JavaScript Primer
  確からしさ★★★
  読みやすさ★★★

ECMAScriptやJSONの仕様策定に携わるazuさんのJavaScript解説サイトです。

ES6前の問題点や背景、ES6の記述法についても体系的に記載されていて大変参考になるのでオススメです。

• regexr.com

JavaScriptの正規表現を試せるプレイグラウンドです。
正規表現は駆け出しのエンジニアにとって難所だと思うのでここで訓練することをオススメします。

1-4. Ruby/Rails

• Ruby リファレンスマニュアル
  確からしさ★★★
  読みやすさ★★★

Ruby公式ドキュメントの付属マニュアルですが一応掲載しておきます。Ruby開発者のまつもとゆきひろさん原著になります。

• Railsガイド
  確からしさ★★★
  読みやすさ★★★

Rails公式ドキュメントガイドの日本語版です。

• Ruby on Railsチュートリアル
  確からしさ★★
  読みやすさ★★★

ご存知の方も多いとは思いますがRailsの初学者用のチュートリアルサイトです。

コンテンツを読むには課金が必要ですが、課金するに足る内容と物量なのでRails初学者の方にはオススメの教材です。

2. 技術情報共有コミュニティ

• Qiita
  確からしさ★
  読みやすさ★★★

言わずもがなですが日本最大の技術情報共有コミュニティである本サイトです。色々な技術に関して様々なユーザが記事を投稿しているので大変面白く読みやすいです。

しかし、不特定多数のユーザが投稿した記事を参照する時にはその情報がどの程度確からしいのか注意する必要があります。

不特定多数のユーザが書いた記事はとても読みやすいので、ついつい駆け出しの方々は二次情報から読み始めてしまいがちですが、新しい技術を学ぶ際には一次情報である公式ドキュメントから読まれることをオススメします。

• Zenn
  確からしさ★
  読みやすさ★★★

catnoseさんが開発したものを、classmethod社が買収、運営しているコミュニティになります。

Qiitaより後発のコミュニティになりますが、エンジニアライクなUIやコミュニティ内でマネタイズできる点などがQiitaとは異なっており、日本のエンジニアから沢山の支持を得ている印象です。

• DEV Community
  確からしさ★
  読みやすさ★★

米国発の世界最大の技術情報共有コミュニティです。
国内だけでなく世界のトレンドも押さえておきたい方は本サイトのトレンド記事等を確認しておくのも良いかと思います。

• hashnode
  確からしさ★
  読みやすさ★★

インドの技術情報共有コミュニティです。前述のDEV Communityにはユーザ数で劣るので、日本の方々はDEV Communityだけ確認しておけば問題ないように思います。

• HACKERNOON
  確からしさ★
  読みやすさ★★

米国の技術情報共有コミュニティです。DEV Communityと比べてプログラミングに関する記事というより読み物の側面が強いです。

cryptoやblock chain, gaming, start upに関する話題も多く扱われているのが特徴です。

• はてなブックマーク(テクノロジータブ)

前述のQiitaやZenn, speakerdeck等あらゆる技術系サイトのトレンド記事をまとめたものです。

このまとめを確認しておけば最低限のITトレンドはつかめると思います。

3. 駆け出しエンジニア支援サービス・メディア

• TechTrain

エンジニアを目指す全てのU30の方々に対して無料で有名Web企業のメンターとオンライン相談ができるサービスです。

私の観測範囲では現役Webエンジニアの方に無料で相談できるのはこのサービスだけです。

Webエンジニア転職に独学で挑戦する場合、どれだけ確からしい情報で検索していても息詰まる時が絶対にあります。
また、エラー解決のような具体的な問題ではなく、設計等の抽象的な問題を自己解決するのは難しい場合も多々ありますので、そういった時に本サービスは有用だと思います。私もSPAポートフォリオ作成時に本サービスを利用していました。

• 雑食系エンジニアTV

元GREEのKENTAさんが運営するYoutubeチャンネルです。

駆け出し時代に個人でWebエンジニアの業界知識を仕入れることは難しいので、その辺りの知識をインプットするのに重宝するチャンネルです。

ただ、動画系メディアは文章系メディアよりも一般的に確からしさが低く、ポジショントークも多分に含まれるので本チャンネルの情報をどこまで信用するかは皆さまの審美眼にお任せします。

4. ロードマップ/サーベイ

• Developer Roadmaps

オープンソースコミュニティが作成するWebエンジニアのロードマップです。

2022年3月現在GitHubスター数が19万あるので世界的に一定の評価を得ているソースであると言えます。

ただ、日本のWeb業界と海外のWeb業界(software業界)には相違点がありますので、どの技術をどんな優先順位で学ぶかという最終的な判断は皆さまにお任せします。

• Stack Overflow Developer Survey 2021

世界最大のエンジニア質問コミュニティであるStack Overflowの技術的な年間統計になります。

プログラミング言語、フレームワーク、ツール等について世界的なトレンドを知るためのソースとして活用できます。

5. ツール

• Miro

コラボレーション用ホワイトボードを提供するSaaSです。

デザインや作図、マインドマップの作成など汎用性の高いツールです。また、共同編集性にも長けているのでチームで開発する際にも有用です。

• draw.io

インフラ構成図やフローチャートの作成ができるサービスです。
出力形式は.pngや.svg等を指定できます。

Visual Studio Codeで開発されている方はこちらから拡張機能をインストールできます。

• KanbanFlow

カンバンボードとポモドーロテクニックを組み合わせたタスク管理ツールです。
私は開発中何にどれほど時間をかけたかを計測したいので重宝しております。

• Notion

すでに利用されている方も多いとは思いますが、タスク管理からWiki作成、テーブル作成、メモとあらゆる機能を搭載した非常に汎用性の高いコラボレーションツールです。

私はNotionを開発だけでなく家計簿用にも使っていました笑

• Postman

APIエンドポイントに手軽にHTTPリクエストを送れるプラットフォームです。

簡素なHTTPリクエストを送るだけならcURLが一番手軽ですが、HTTPヘッダが複雑な場合等はPostmanを利用しています。

• DeepL

AIを用いた高水準な翻訳ツールです。
英語圏の記事を読む時にGoogle翻訳に勝るデファクトスタンダードとなってきている印象です。

6. Chrome 拡張機能

• Wappalyzer

Webサイトの利用技術スタックを確認できる拡張機能です。

フロントエンド、バックエンド、インフラ、広告等で利用している技術を確認することができます。

• Similarweb

Webサイトの順位、運営国、カテゴリーランクを確認できる拡張機能です。

技術的なものではありませんが、類似するサービスを調査したい時に重宝しています。

• SearchPreview

Google検索結果に小さいウィンドウを付けてWebページを確認できる拡張機能です。

記事にアクセスすることなく外観を把握できるので便利ですが、その代わり検索速度が少し遅くなります。

• uBlacklist

検索結果に表示させたくないドメインをブラックリストとして排除できる拡張機能です。

私は、日本のSEO対策ばかりを気にして何一つ中身のないメディアを一掃しています。

7. 転職サイト

• Wantedly

Wantedly社が運営する転職プラットフォームです。

結果的に私はWantedlyしか使うことなく転職を終えました。掲載企業数、求人数ともに日本のスタートアップ界隈では業界一だと思います。

• Green

アトラエ社が運営する転職プラットフォームです。

Greenを利用されている求職者も多い印象です。

• 転職ドラフト

LIVESENSE社が運営する転職プラットフォームです。

他の転職プラットフォームに比べて企業の年収が可視化されているのが特徴です。

しかし、こちらは駆け出しエンジニア向けではなくて、ドラフトという名前の通り、実務経験ありのエンジニアが登録するイメージを持っています。

第二部 独学方法の紹介

まず結論から話しますと、私はエンジニア転職するまでに一年半を要しました。

自社開発系企業から内定を得るまでの道のりは決して一本道ではなく、回り道をしながらここまで辿り着いたと思っております。

ここからはそんな私の学習過程と学習のコツを紹介していきます。

1. 学習過程

0ヶ月目～12ヶ月目(Python, AWS)

エンジニアになろうと思ってから一年は結構迷走していたりしていました。

そもそも自分がWebエンジニアになりたいのか、データサイエンティストになりたいのか迷っていて、データ分析・機械学習等に手を出し、主にPythonを使ってプログラミングをしていました。

この期間はWeb分野としては、W3Schoolsやtutorialpointなどで無料で様々な分野の基礎学習をしていましたが、今思えばComputer Scienceは基本情報技術者試験の勉強をして、Web基礎はProgateかドットインストールをすれば良いだけだったような気もしています。

UdemyでAWSの講座を受講していたら、私のオペミスで10万円 / 月の請求がきたことも今となっては良い思い出です。

12ヶ月目～13ヶ月目(ドットインストール他)

プログラミングをはじめて約一年経ってから、真剣にWebエンジニアになるために学習計画を組んで学習をはじめていきました。

ここからは割と最短経路で学習できたのではないかと思っていますので、私の学習過程を参考にされる方はここから参考頂ければと思います。

まず、Web業界の全体像を把握するためKENTAさんのYoutubeチャンネルを2日で視聴しました。
本当にインプットしておくべきWeb業界知識のコアな部分は最初の方の動画に多く詰め込まれている印象なので、私は2020年8月頃までの動画を重点的にメモにまとめながら一気に視聴していきました。

次に、Roadmapを確認しながらフロントエンド、バックエンドともに必要そうな技術をドットインストールで一ヶ月間かけて重点的に学習していきました。

Progateやドットインストールの学習は期限を設けて一気に実施することをオススメします。

ちなみに、私のドットインストールの学習講座は以下でした。

• Ruby入門
• Ruby on Rails5入門
• Active Record入門
• はじめてのJavaScript
• 詳解JavaScript　基礎文法編
• 詳解JavaScript　オブジェクト編
• 詳解JavaScript　DOM編
• React入門
• Vue.js入門
• AngularJS入門
• TypeScript入門
• MySQL入門
• PostgreSQL入門
• MongoDB入門
• Go言語入門
• Node.js入門
• Docker入門
• Chrome Developer Tools入門
• Google Chrome拡張機能入門
• Bootstrap5入門
• JavaScriptで学ぶFirebase入門

13ヶ月目～14ヶ月目(Vue.js)

ポートフォリオはSPAを作成するつもりでフロントエンドはVue.jsを使いたかったので、この期間はVue.jsを学習しました。

公式ドキュメントとUdemyの講座を参考に簡単なアプリを作ってFirebaseにホスティングするところまでを実施しました。

14ヶ月目～15ヶ月目(Docker, CircleCI, Bash)

この期間は公式ドキュメントや書籍を参考にコンテナ技術やCI、Shellといった周辺技術を学習していきました。

15ヶ月目～16ヶ月目(Ruby on Rails)

Railsの公式チュートリアルとRailsチュートリアルを一ヶ月かけて実施しました。

Railsチュートリアルは案外物量があるので焦って学習しようとせずに時間をかけて着実に学んでいけば良いと思います。

16ヶ月目～18ヶ月目

3ヶ月かけて本格的にSPAポートフォリオを作成してAWSにデプロイしました。
Terraformとか周辺技術については、アプリを作りながら学んでいきました。
作成したポートフォリオはこちらの記事にまとまてありますので参考にしていただければ幸いです。

2. 学習のコツ

独学を成功させるためには自走力を高めることが必須要件ですが、高い自走力を養うためには、大きく二つのコツがあると思います。

一つ目のコツは、検索のコツです。

独学はスクールと違って指導教員がいないので、学習計画の策定やエラー解決をすべて自力で行う必要があります。
TechTrainのメンターさんに相談することも可能ですが、一週間に一度30分の時間しかないので、基本的には自己解決能力が求められます。

その際に大事なのが検索力なのですが、端的に言うと私は基本的に技術関連の検索を英語で実施していました。

以下のリンクのようにGoogleは英語圏での検索結果を表示させることができます。

私は技術の検索からエラー解決を英語で行うことで、日本の低品質な記事を回避して効率良くエラー解決を実施することができました。

もちろん日本語検索によるエラー解決を否定するわけではありませんが、プログラミング人口がそんなに多くない国内の記事だけを参照するより世界中の知見を効率良く検索する方が最適であると私は考えます。

二つ目のコツは、発信のコツです。

SNSの時代において発信することは非常に大事だと思いますし、自走していくモチベーション維持のためにも継続的発信は欠かせないのではないかと思っています。

私はポートフォリオ作成中にTwitterで毎日進捗を発信していました。

過度に駆け出しエンジニアの方とのつながりを求めるのはあまり効果がないと思いますが、一方でSNSで発信すると少なからずリアクションが得られるので独学の継続には不可欠な要素であると思っています。

3. エラー解決手順

最後に、私がエラーに直面した時に参照する情報ソースの優先順位について書きたいと思います。

私はエラー解決をする際には、以下の優先順位で参照しています。

1. 公式ドキュメント
2. GitHubのIssues
3. Stack Overflow
4. その他個人ブログ等
5. DEV CommunityやQiita等の不特定多数ユーザによる記事

公式ドキュメントの確からしさは言うまでもありませんが、次点でGitHubIssuesやStack Overflowの回答がエラー解決にクリティカルにつながることが多いという印象です。

Qiita等の情報共有コミュニティはエラー解決の際に参照するのは最後で良いと個人的に思っております。

さいごに

ここまでお読みいただきましてありがとうございました！
ご意見や感想あればコメント欄でお待ちしております。

脚注

1. 確からしさの評価基準は、★不特定多数で権威のないユーザによる投稿★★特定のある程度権威があるユーザによる投稿★★★公式あるいはそれに準ずる団体による投稿、という風に区分しております。 ↩

2. 読みやすさの評価基準は、★難解かつ英語のもの★★難解ではないが英語のもの、あるいは、難解だが日本語のもの★★★平易かつ日本語のもの、という風に区分しております。 ↩