モダンなWeb系自社開発企業への転職を成功させるためのロードマップ(4:基礎の学習)

一覧

Web開発の基礎を学ぶ

実務未経験の方がWeb系のバックエンドエンジニアにジョブチェンジする上で必要な学習内容はほぼ確定しており、今後も大きく変わることはないでしょう。具体的には下記のような順序になります。

コンピュータサイエンス基礎

Linux基礎

HTML/CSS基礎

JavaScript基礎

Ruby基礎

RDBとSQL基礎

GitとGitHub基礎

Ruby on Rails基礎

必ずしもこの順序通りに勉強する必要はありませんが、モダンなWeb系自社開発企業への転職を成功させたいのであれば、コンピュータサイエンスやLinux等の基礎知識は必須になりますし、転職用のハイレベルなポートフォリオを作る上ではそれらの学習は避けて通れないと考えておいた方がよいでしょう。

ただし、前述したようにこれらの学習はあくまでも「準備運動」です。Web系自社開発企業に転職するための実力を効率よく身に付けるにはできるだけ早くポートフォリオ作成作業に入る必要がありますので、進捗に個人差はありますが、このフェーズはどんなに長くても300〜400時間程度(毎日8時間フルタイムで勉強できる人なら1ヶ月少々〜2ヶ月程度)で完了させるようにしましょう。

(人の成長における「コンフォートゾーン」と「ラーニングゾーン」の考え方は皆さんご存知だと思いますが、教材での学習は単なる「コンフォートゾーン」であり、そこに長く留まっても効率的な成長は見込めないので、なるべく早めに「ラーニングゾーン」つまり「ポートフォリオの作成作業」に入っていく必要があります)

プログラミングに限らずどんな分野でもそうですが、応用に入って色々と悩んで壁にぶつかって、そこで出てきた疑問を解決するために基礎に戻って色々調べることにより、「なるほど!」と強烈に印象に残って、点と点が繋がって「線」や「面」になり「実戦力」として身に付くわけです。

応用に入る前に色々な教材に手を出してそれを何周したりしても、点は点のままなので記憶に定着せず非常に学習効率が悪いので、基礎の学習は「応用に入った後に戻ってくる際の”地図”や”インデックス”を頭の中に構築する作業」と割り切って、分からないことがあってもあまり拘泥せず、どんどん先に進みましょう。

以下、各分野のお薦めの学習教材について列挙していきます。

コンピュータサイエンス基礎

キタミ式イラストIT塾 基本情報技術者 令和03年 | きたみ りゅうじ | コンピュータ・情報処理 | Kindleストア | Amazon
Amazonできたみ りゅうじのキタミ式イラストIT塾 基本情報技術者 令和03年。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

初学者の方がコンピュータサイエンスの基礎を学ぶ際には、基本情報技術者試験の参考書で学習することが効率的です。

評判の良い参考書であればどれを選択しても大きな違いはないと思いますが、イラストが多用されているこちらの書籍は、初学者の方には比較的とっつきやすいと思います。

n進数、論理演算、ビットとバイト、文字コード、マルチメディアデータ(画像や動画や音声)の表現方法、コンピュータの5大装置(制御装置/演算装置/記憶装置/入力装置/出力装置)、ファイル管理、データベース、ネットワーク、セキュリティ、システム開発の基礎、データ構造とアルゴリズムといった辺りは、Web系エンジニアとして働く上では必須知識になりますので、完全に理解する必要はありませんが、概要はしっかり把握しておきましょう。

こちらの書籍のChaperter18「企業活動と関連法規」以降は、現時点で学んでもそれほど意味がないためスキップしても問題はありません。時間に余裕があればざっと目を通しておく程度で十分でしょう。

Linux基礎

Amazon.co.jp

Linuxの基礎を学習する上では定評のある書籍です。PDF版なら無料で入手することも可能です。

Linuxの基礎知識、シェルの使い方、基本的なコマンド、標準入出力とリダイレクト、正規表現、viの基本的な操作方法、グループやユーザの管理、シェルスクリプト、ネットワークの基礎知識、プロセス管理、ファイル管理等の重要知識を一通りざっと学習しておきましょう。

HTML/CSS基礎

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
HTML/CSSの学習環境を整えよう [macOS版] (全5回)
初めてHTML/CSSのレッスンを受講する方に向けて、必要なツールや設定について解説していきます。
詳解HTML 基礎文法編 (全22回)
ウェブページを作るための言語であるHTMLの基礎的な文法について学んでいきます。
詳解HTML フォーム部品編 (全8回) - プログラミングならドットインストール
ユーザーからの入力を受け取る部品を作るためのタグについて学んでいきます。
詳解CSS 基礎文法編 (全33回)
ウェブページの見た目を整えるための言語である、CSSの基礎的な文法について学んでいきます。
詳解CSS セレクター編 (全12回) - プログラミングならドットインストール
CSSのセレクターを使って要素を柔軟に指定するための方法を学んでいきます。
詳解CSS フレックスボックス編 (全16回) - プログラミングならドットインストール
ウェブページのレイアウトに広く使われている、CSSのフレックスボックスについて見ていきます。
詳解CSS レスポンシブウェブデザイン編 (全8回) - プログラミングならドットインストール
画面サイズにあわせてレイアウトを切り替えていくことができるレスポンシブウェブデザインについて学んでいきます。

HTMLとCSSに関しては、この段階ではProgateとドットインストールを併用して学習する方式で十分でしょう。

またCSSはかなり範囲が広いため、Progateもドットインストールも「フレックスボックス」と「レスポンシブデザイン」のカリキュラムは一旦後回しにして先に進んでもよいでしょう。

JavaScript基礎

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
詳解JavaScript 基礎文法編 (全26回) - プログラミングならドットインストール
ブラウザを操作することができる言語、JavaScriptの基礎文法について学んでいきます。
詳解JavaScript オブジェクト編 (全35回) - プログラミングならドットインストール
JavaScriptの配列、オブジェクト、クラスといった仕組みを使って、複雑なデータを操作する方法を学んでいきます。
詳解JavaScript DOM編 (全21回) - プログラミングならドットインストール
JavaScriptからドキュメントを操作するためのDOMを扱う方法について解説していきます。
ES2015(ES6) 入門 - Qiita
はじめに 今更ですが、ES2015(ES6)で追加された機能や構文に関する備忘録です。 「JSは書けるけどES2015(ES6)はわからないっす...!」といった人達向けの記事です。 入門記事のためイテレータやジェネレータ等のわ...
【ES6】 JavaScript初心者でもわかるPromise講座 - Qiita
はじめに Promiseって...難しくないですか??? 3ヶ月くらい前の私は、Promiseをほとんど理解できてないのにasync/awaitとか使っちゃってたし、様々な記事を読み漁ってもなかなか理解できず、Promiseの正...

JavaScriptに関しても、この段階ではProgateとドットインストール、および一部のネット記事を併用する方式で十分だと思います。

Ruby基礎

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
Ruby入門 (全26回) - プログラミングならドットインストール
オブジェクト指向スクリプト言語で定評のあるRubyの基礎を学んでいきます。

Rubyに関しても、この段階ではProgateとドットインストールを併用する方式で十分だと思います。

RDBとSQL基礎

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
【旧版】MySQL入門 (全36回) - プログラミングならドットインストール
オープンソースのデータベースシステムであるMySQLについて基本的な使い方を学んでいきます。

RDBもSQLも非常に奥の深い分野ですが、最初はProgateとドットインストールを併用して学習する方式で十分でしょう。

ちなみにWeb業界ではPostgreSQLというデータベースも比較的よく使われていますが、現場ではMySQLの方が比較的多く使われているので、MySQLを学習しておく方が賢明でしょう。

この後に紹介する「Ruby on Railsチュートリアル」ではPostgreSQLが使用されますが、MySQLに関して学習した知識の多くはそのまま使えますので心配する必要はありません。

(ポートフォリオに関しても、データベースにはPostgreSQLではなくMySQLを選択することをお薦めします。「現場での使用率が高い技術に合わせておく」方が大抵の場合は無難です)

GitとGitHub基礎

GitHubの無料チュートリアル - Git:はじめてのGitとGitHub
GitとGitHubが初めての人が仕組みを理解した上で基本的な操作ができるようになるコースです。ハンズオンでGitコマンドを入力することを通じて、未経験から、Gitで記録しGitHubにコードをアップできるようになります。 - 無料コース

ProgateやドットインストールにもGitの学習教材は存在するのですが、GitHubと一緒に解説されている動画の方が効率がよいため、評価の高いこちらの教材で学習しておくとよいでしょう。

Ruby on Rails基礎

Ruby on Rails チュートリアル:プロダクト開発の0→1を学ぼう
SNS開発やWebサイト制作が学べる大型チュートリアル。作りながら学ぶのが特徴で、電子書籍や解説動画、質問対応、社員研修、教材利用にも対応しています。

Railsの学習に関しては定評のあるこちらの教材だけで十分です。難易度はやや高めですが、これをやり切ればポートフォリオ作成前の準備は一応完了と考えてよいでしょう。

こちらの教材は複数のRailsのバージョンに対応しており、現時点でのデフォルトは5.1ですが、5.1はかなり古い&もう6.0向けの記事や情報もネット上に十分に揃っているので、バージョンは6.0を選択しておいた方がよいでしょう。(6.0版のRailsチュートリアルは有料になりますが980円程度です)

その他の教材

以下の教材や参考書籍のうち「Web系エンジニアになろう」以外は基礎学習の際に目を通しておく必要はありません。

ポートフォリオ作りがある程度進行して基礎知識の不足を強く感じた際や、「UI/UXのブラッシュアップ」や「単体テストや統合テストの追加」をおこなう際などに、必要に応じて補助教材として活用すると良いでしょう。(これらの教材に関しては、ポートフォリオ作りについて解説しているロードマップでも改めて紹介します)

Web業界とWeb系エンジニアに関する基礎知識

Amazon.co.jp

手前味噌ではありますが、Web系エンジニアへのジョブチェンジを目指されている方ならば、拙著「Web系エンジニアになろう」はご一読頂いた方がよいと思います。

Web業界の概要やWeb系企業の定義、SIer系企業とWeb系企業の違い、Web制作とWeb開発の違い、Web系エンジニアの各職種における具体的な仕事内容、Web系エンジニアになる方法、フリーランスエンジニアになる方法、必要とされるスキルやキャリア戦略を、できる限り現場の実態に即した形で包括的にわかりやすく解説していますので、こちらをざっと読んで頂ければ、Web系自社開発企業への転職を成功させるために必要な知識の概観は大体把握できるのではないかと思います。

Linux

Amazon.co.jp

Linuxの補助教材としてはこちらの書籍がお薦めです。ただしページ数が多く、全て学習しようとすると挫折する可能性が高いので、主に「Linux標準教科書」で学習を進めて、こちらはリファレンス的に活用するという方式が無難でしょう。

Webデザイン

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 | Mana | コンピュータ・IT | Kindleストア | Amazon
AmazonでManaの1冊ですべて身につくHTML & CSSとWebデザイン入門講座。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

HTMLやCSSの補助教材、およびポートフォリオのUI/UXをブラッシュアップする際には、こちらの書籍を参考にしてみるとよいでしょう。

フロントエンド

Webページ高速化に必須の知識!ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説
ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつ

ブラウザがWebページをレンダリングする仕組みや順序をざっと速習したい場合は、こちらの記事を読んでみるとよいでしょう。

JavaScriptの基礎知識をGIFアニメで分かりやすく解説 -総まとめ
JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジ

JavaScriptのイベントループやJavaScriptエンジンの仕組みといったやや高度な基礎知識を、アニメーションを使った解説で学びたい人にはこちらの記事が参考になるでしょう。

ネットワーク

Amazon.co.jp

ネットワークの補助教材としてはこちらの書籍がお薦めです。イラストや図が多用されているため、ネットワークの構造やデータの流れがイメージとして掴みやすいと思います。

データベース

Amazon.co.jp

データベースの補助教材としてはこちらの書籍を使ってみるとよいでしょう。

テスト

ソフトウェア品質を高める開発者テスト アジャイル時代の実践的・効率的なテストのやり方 | 高橋 寿一 | コンピュータ・IT | Kindleストア | Amazon
Amazonで高橋 寿一のソフトウェア品質を高める開発者テスト アジャイル時代の実践的・効率的なテストのやり方。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

テストに関する補助教材としてはこちらの書籍がお薦めです。境界値テストや状態遷移テスト、単体テストや統合テスト、CI/CDなど、開発者のおこなうソフトウェアテストの基本がわかりやすく解説されています。

Everyday Rails - RSpecによるRailsテスト入門
RSpecを使ってRailsアプリケーションに信頼性の高いテストを書く実践的なアドバイスを提供します。詳細で丁寧な説明は本書のオリジナルコンテンツです。また、説明には実際に動かせるサンプルアプリケーションも使用します。本書は2017年版にアップデートされ、RSpec 3.6やRails 5.1といった新しい環境に対応し...

RSpecはRubyおよびRails用のテストフレームワークです。「Ruby on Railsチュートリアル」ではMinitestというテストフレームワークが使用されていますが、Web業界の現場における使用率ではRSpecが圧倒的なので、テストをしっかり書く段階になって、ある程度ボリュームのある本で学習したくなった方はこちらの書籍を購入してみるとよいでしょう。(ただしRSpecの基本的な使用方法を学びたいだけであれば、こちらの記事や、RSpec自体のREADMEのガイドを見ておくだけで十分だとは思います)

セキュリティ

体系的に学ぶ 安全なWebアプリケーションの作り方 第2版[リフロー版] 脆弱性が生まれる原理と対策の実践 | 徳丸 浩 | コンピュータ・IT | Kindleストア | Amazon
Amazonで徳丸 浩の体系的に学ぶ 安全なWebアプリケーションの作り方 第2版[リフロー版] 脆弱性が生まれる原理と対策の実践。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

Webアプリケーションのセキュリティに関して体系的に学習したいという方は、非常に評価の高いこちらの書籍で学習するとよいでしょう。(Kindle版を購入する場合は、固定レイアウト版ではなく上記の「リフローレイアウト版」の購入がお薦めです。検索機能やハイライト機能が使用できます)

ただし非常にボリュームのある書籍なので、基礎学習の際に目を通す教材としては不向きです。ポートフォリオの作成が一通り完了した後に比較的時間に余裕があって、セキュリティ絡みの知識を補強したいという場合に読んでみるとよいでしょう。

コーディング試験対策

Problems - LeetCode
Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.

コーディング試験対策に関しては、「LeetCode」というサービスの「Easy」レベルの「Top Interview Questions(面接でよく出題される問題)」を、「Acceptance(難易度と考えてよい。数字の小さい方がより難しい)」の降順でソートして順番に解いておくとよいでしょう。「Fizz Buzz」等の頻出問題に対して無難に対応できるようになると思います。

質問力を高める

質問は恥ではないし役に立つ - Qiita
一年半SEとして働いてきた中で、私自身が苦手だと思っており、他人からもそのように評価されていたのが「質問の仕方」でした。 それが先日、他人から「質問の仕方がうまいね」と褒められることがあり、ようやく一人前の質問の仕方ができるようになっ...

オンラインコミュニティ等で技術的な質問をする上では「良質な質問をする技術」が非常に重要になります。質問スキルが高ければ問題解決の時間も速くなりますので、こちらの記事等を参考にして、技術的な質問をする際の自分なりのテンプレを作っておくとよいでしょう。(当サロンの「質問ガイドライン」のチャンネルで公開している質問テンプレートも参考にしてみてください)

スキルチェック問題集

教材での学習がおおよそ完了したら、「スキルチェック問題集」を使用して現在の知識レベルを確認してみましょう。

この問題集の基礎分野の8科目(コンピュータサイエンス基礎、Linux基礎、HTML/CSS基礎、JavaScript基礎、Ruby基礎、RDB/SQL基礎、Git/GitHub基礎、Rails基礎)でそれぞれ8割以上正答できるなら、基礎の勉強はもう十分です。できるだけ早めにポートフォリオ作成作業に入りましょう。

タイトルとURLをコピーしました