概要
Web系エンジニアになることを目標にした学習者にとって、身になりそうなサイトや教材をまとめました。
紹介する教材やサービスは、何れも無料もしくは数千円程度で購入、サブスクでできるものに限定しています。
また、バックエンドの言語は、私が使用しているRuby、Pythonに限定しております。
学習を始める前に
以下の記事は、個人的に、エンジニアにとって大切ではないかと感じる考え方が詰まっています。
一読してから、学習を進めることをおすすめします。
また、以下の内容から必要なものを設定することをお勧めします。
Windowsユーザーの方はこちら。
Macユーザーの方はこちら。
学習サイト/教材
コンピューターサイエンス
⚫︎ HTTP
Linux
⚫︎ 基礎
Linuxは「新しいLinuxの教科書」を一読するのが良いと思います。
⚫︎ コマンドライン
基本的なコマンドを把握するのに、以下のProgateがお勧めです。
このコースは非常に短く、1周10分ぐらいで終わらせることが出来るので、何周か繰り返している内に、ここで使用されるコマンドが自然と打てるようになります。
HTML/CSS
⚫︎ 基本
HTML/CSSについて全く触れたことがないという人は、Progateを1周だけで良いので、やってみて、感覚を掴むのが良いかもしれません。
ある程度わかる方は、ここはスキップで良いと思います。
⚫︎ アウトライン
HTMLの理解に非常にアウトラインは重要です。
以下にアウトラインについてまとめた私の記事を公開してます。
⚫︎ OGP
以下の記事でOGPの設定方法を学べます。
⚫︎ Flexbox
Flexboxは以下のゲームを通して、感覚として叩き込むのがお勧めです。
また、以下の記事も非常にわかりやすくまとめてくれています。
⚫︎ 画像
画像の表示速度の最適化は以下の記事で知ることができます。
⚫︎ セレクタ
以下の記事はCSSセレクタのチートシートになります。視覚的にも確認しやすいサイトだと思います。
⚫︎ リセットCSS
リセットCSSの種類について下記添付サイトで確認してみてください。
リセットCSSにはdestyle.cssをおすすめします。
JavaScript
⚫︎ 基礎
Progateなら意外と、プログラミング言語で汎用的に使われる概念を学べると思います。
「JavaScript Primer」というのもあったりします。
⚫︎ 配列
TypeScript
⚫︎ 基礎
個人的には、ブルーベリー本を手を動かしながら進めるのが良いと思います。
具体的な進め方としては、以下を参考に行うと良いかもしれません。
また、TypeScriptの基本がわからなくなった際は、「サバイバルTypeScript」を見に行って確認したりしております。
React
⚫︎ Reactをはじめる前に
現時点でなぜフロントエンドにReactがよく使われているのか以下の記事がわかりやすいと思いますので、一読することをお勧めします。
⚫︎ 基礎
⚫︎ Hooks
⚫︎ react-router-dom
⚫︎ React 19
Ruby
⚫︎ 環境構築
Progateが公開している環境構築のサイトは非常に初学者にとってもわかりやすいので、ここで悩んでいる方には是非活用して頂きたいです。
⚫︎ 基礎
こちらも基本文法はProgateで浚うのがいいと思います。
Ruby on Rails
⚫︎ Ruby on Railsをはじめる前に
個人的にはRailsは学習に必要な時間も非常に長くどの様に進めていけばいいか理解する為に、以下の記事はRailsを始める前に目を通して頂きたいです。
⚫︎ 環境構築
こちらにもProgateの公開している環境構築のやり方のサイトを掲載させて頂きます。
⚫︎ 基礎
まず始めにRailsを触ってみるのに、以下のチュートリアルは個人的にわかりやすいと思います。ただRubyの基礎の成熟度をある程度高めてからの学習をお勧めします。
また専門知識を学ぶのには不向きかもしれませんが全体を大雑把に把握するのはやはりProgateを活用するので良いと思います。
Ruby on Railsの学習には「Ruby on Railsチュートリアル」が良いと思います。大学や社員研修でも採用されているそうで、Webサービス開発が学べる世界的に有名なオンライン学習サービスだと言えます。チュートリアルでは、TwitterのようなWebアプリ開発を通して、基礎知識から応用知識までを体系的に学んでいく教材になっています。
Railsチュートリアルを終わらせた後は以下を参照するのをお勧めします。
Python
⚫︎ 環境構築
こちらにもProgateの公開している環境構築のやり方のサイトを掲載させて頂きます。
⚫︎ 基礎
ここでも超基礎はProgateで復習うのをお勧めします。
⚫︎ 言語特性
Python其の物の言語特性についてこちらの記事でまとめてあります。
⚫︎ エラー
これは私が書いた記事ですが基本的なエラーを忘れてしまう初学者にとって見やすく理解しやすい記事になっていると思います。
⚫︎ Python3エンジニア認定基礎試験
Pythonの基本文法を理解するのに、Python3エンジニア認定基礎試験はうってつけだと思います。
まず以下の記事を読んでどこに注力すべきか理解します。
この試験に纏わる基礎学習はDIVERと以下のYoutubeをおすすめします。DIVERはデジタル教材だけでなく、実践問題もついてますが、有料です。
その他の模擬試験を受けれるサイトには以下があります。
RDB/SQL
⚫︎ 基礎
Git/GitHub
⚫︎ 環境構築
⚫︎ 基礎
Gitを全く使用したことがない方は、Progateをお勧めします。
よく使うコマンドが出てくるので、何周かしても良いかもしれません。
Gitのコマンドを忘れたら以下の記事を早見表のように使ったりしています。
⚫︎ git-flow
git-flowを理解するのに以下の動画は非常にわかりやすいと思います。
個人開発でのgit-flowは、以下のサイトのやり方を使用することが多いです。
⚫︎ プルリク
これは私が書いた記事ですが、この記事で基本的なプルリクの流れが見えると思います。
⚫︎ HEAD
⚫︎ エラー
⚫︎ GitHub Pages/GitHub Actions
コマンドライン
⚫︎ 基礎
Docker
VSCode
⚫︎ Prettier
デベロッパーツール
⚫︎ デバッグ
おまけ
Google Extensions
⚫︎ Wappalyzer
WappalzerはWebサイトの技術スタックを知りたい時に非常に重宝します。
お役立ちサイト
⚫︎ Fledge Hub
Fledge Hubはさまざまなプロダクトがまとめられており検索することができます。技術スタック、GitHubも掲載されているので非常に参考になると思います
⚫︎ Techpit
Udemyの動画みながらサービス作成される方がいると思いますが、学習教材(テキスト)でサービスを作ってみたいという方はTechpitがお勧めです。
本
⚫︎ フロントエンドの知識地図
筆者のこの本に対する解説です。
⚫︎ なぜ、あなたの仕事は終わらないのか
⚫︎ プログラマー脳