【文系可能】3ヶ月で内定を獲得したエンジニア就活の全て
こんな悩みを解決できる記事になっています。
なぜなら、僕は3ヶ月でこの方法を実践して、
プログラミング完全初心者の文学部出身にも関わらず、IT企業からWebエンジニアとして内定を獲得できたからです。
この記事では
『文学部の学生がエンジニア就活で準備すべきこと3つ』や、
『エンジニアとして内定を獲得した、超具体的なプログラミング勉強方法』
などをまとめた、【エンジニア就活ロードマップ】を無料で公開します。
この記事の通りに行動すれば、
文学部出身でもエンジニアとして内定をとれるぐらいの知識にレベルアップしていますよ。
文学部を卒業してから、IT企業でWebエンジニアとして働いています。
文学部出身でパソコン音痴だった僕が、初心者でも分かりやすいように
プログラミングに関する情報を発信しています。
目次
文学部の僕がエンジニアとして内定を獲得するためにした3つのこと
以上の3つをしたことで、文学部出身の僕でもIT企業のWebエンジニアとして内定をもらうことができました。
やったことはとてもシンプルです。
プログラミングの基礎学習 → Webサイトを作る → 就活エージェントを活用する
エンジニア就活でしたことは、この3つだけです。
この記事では、『プログラミングの超具体的な勉強方法【完全初心者可】』も解説しているので、プログラミング完全初心者でも大丈夫です。スタートはみんな同じです。一緒に頑張っていきましょう！
まず初めにWebサイトを作るのが重要な理由
理由はこの3つです。それでは、それぞれ深堀りしていきましょう。
- プログラミングの基礎を学べるから
「Webサイトを完成させる」という目的があるため、プログラミングを挫折せずに学ぶことができます。注意すべきは、プログラミング初心者が陥るワナです。
それは、プログラミングを学ぶ目的がないため、どこまで勉強していいか分からず、挫折してしまう人が多い、ということです。
この記事では、「Webエンジニアとして内定を獲得するために、Webサイトを作れるプログラミングの知識を身につける」という明確な目的があるので、初心者でも最後まで挫折せずに学ぶことができます。
- 基礎学習と同時に、就活の材料が完成するから
プログラミングの基礎学習と同時にWebサイトを作ることで、就活するときに成果物として企業にアピールできます。どうせプログラミングを学ぶなら、基礎学習もできて、就活の材料にもなったほうがいいですよね。一石二鳥を目指しましょう。
- 就活エージェントに優良企業を紹介してもらいやすくなるから
冒頭で僕が就活でしたこと3つを書きました。
プログラミングの基礎学習 → Webサイトを作る → 就活エージェントを活用する
しかし、この手順を見て次のような疑問を持った方がいるかもです。
「わざわざ最初にWebサイトを作らなくても、先に就活エージェントを使えばよいのでは？」
たしかに、わざわざプログラミングの基礎学習をして、Webサイトを作るのは面倒くさいですよね。
しかし、あなたが就活エージェントになったつもりで考えてみてください。入りたい会社の面接官でもいいですね。次のAさんとBさんが面接に来た場合、あなたならどちらを採用しますか？
プログラミングの経験はありませんが、エンジニアとして働く熱意は誰よりもあります！
プログラミングの経験は今までありませんでしたが、独学でWebサイトを５つ作りました。エンジニアとして働く熱意があります！
どうですかね。たぶん採用するのはBさんですよね。
就活エージェントであれば、Bさんを企業に紹介したほうが、入社後のミスマッチも防げそうですよね。
会社の面接官であれば、どれだけ熱意があってもプログラミングの「プ」の字も知らない学生は採用しづらいです。
以上のことから、
プログラミングの基礎学習 → Webサイトを作る → 就活エージェントを活用する
この順番を守ることがいかに大切か、理解していただけたと思います。
ここまでで、順番が大切なのはわかったけど、Webサイトってどうやって作るの？という疑問が浮かぶと思います。それでは早速、Webサイトの作り方【3ステップ】を解説していきます。
Webサイトの作り方【3ステップ】
Webサイト完成までは全部で3ステップあります。
上から順番に、
以上の3ステップで完成です。
それでは各ステップを詳しくみていきます。
プログラミングの基礎を学ぼう
- そもそもプログラミングとは
わたしたちは友達と会話するとき、言葉（日本人どうしなら日本語）を使いますよね。それと同じで、「機械と会話するための言葉」がプログラミングです。
その言葉について学ぼう！というわけです。
- 用意するものは？パソコンは何を使えばいいの？
用意するものはノートパソコンのみで大丈夫です。
ちなみにパソコンはWindowsでもMacでもどちらでもOK。
「プログラミングするならMac Book！」こう言う人もいますが、最初の段階で購入する必要はありません。僕は大学の生協で購入したノートパソコン（Let’s note）で就活を乗り切りました。
- どのプログラミング言語を学べばいいの？
結論＝Web系の言語を学ぼう。
理由＝短期間でWebサイトが作れて就活を有利に進められる&文系の人でも学びやすい言語だから。
Web系の言語とは言い換えると、Webサイト(ホームページ)を作るために必要な言語です。Web系の言語を勉強することで、Webエンジニアを目指そう！ということですね。
プログラミング言語は、約1000種類以上あると言われています。
例えば、AI分野ではPythonという言語が使われています。iPhoneのアプリはSwift、WebサイトではHTML/CSSなどが使われています。それぞれ用途に応じて使う言語が違うため、こんなにも種類が多いんですね。
また、Webサイト1つ作るにしてもさまざまな言語が使われています。
どの言語をどの順番で学べばいいのでしょうか。次に詳しく解説していきますね。
- 言語を学ぶ順番
HTML → CSS → jQuery → WordPress → PHP
人によって順番が前後することはありますが、HTMLからスタートするのが大事です。
HTMLやCSS、その他の言語の詳しい学習方法は『プログラミングの超具体的な勉強方法』で詳しく解説しています。
Webサイトを作ろう
- Webサイトとは
ここで言うWebサイトとは、ホームページのことです。
HTMLとCSSだけで簡単なWebサイトは完成します。しかし、一般的なWebサイト(ホームページ)は、HTMLとCSSに加えて、ページに動きをつけるためにjQueryという言語を使います。
このあたりから少し難易度が上がりますが、100％理解しようとしなくて大丈夫です。必要最低限の動きを、jQueryを使ってできるようになりましょう。
jQueryの詳しい学習方法も、『Webサイトに動きをつける【jQueryの基礎学習】』
で詳しく解説しているので、そこを見ればできるようなります。
ポートフォリオサイトを作ろう
- ポートフォリオサイトとは
ポートフォリオサイトとは、これまでに自分が作ったWebサイトをまとめたもののことです。要するに、まとめサイトですね。
このまとめサイトを作ることで、就活する際に自分を企業にアピールできます。これが有るか無いかで、今後の就活が大きく変わってきます。大半の就活生は、ポートフォリオなんて作っていません。簡単でいいので、作ってしまいましょう。
ポートフォリオの作り方に関しても、この先で解説してるので大丈夫ですよ。
以上でWebサイトの作り方3ステップのおおまかな流れがつかめたかと思います。
プログラミングの基礎学習 → Webサイトを作る → ポートフォリオサイトを作る
この流れがつかめたところで、次はプログラミングの勉強方法について超具体的に解説していきます！
エンジニアとして内定を獲得するためのプログラミング学習マップ
最初に、プログラミング学習マップの流れをまとめます。
HTMLとCSSの基礎を学ぶ
プロゲート
よくわかるHTML&CSSの教科書
ドットインストール
ディベロッパーツールを使う
CSSのFlexboxを学ぶ
模写コーディング【初級レベル3課題】
Webサイトに動きをつける【jQueryの基礎学習】
模写コーディング【中級レベル1課題】
ポートフォリオサイトを作る
HTMLとCSSの基礎を学ぶ
Webサイトはどれも、HTML/CSSと呼ばれる言語で作られています。
すべてのWebサイトの基礎となる言語なので、まずはHTMLとCSSから学んでいきましょう。
プロゲート
HTMLとCSSを学ぶのにプロゲートという教材を使います。
イラスト中心のスライドで学習できるので、完全初心者の人におすすめです。Web版とアプリ版がありますが、手を動かすことが大切なので、パソコンを使ってWeb版を中心に学習しましょう。僕は移動中に、アプリ版のスライドを見て勉強していました。
※ここで注意点が3つあります。
・スライドを見て終わりではなく、同時に手を動かしましょう。
・プロゲートのHTML&CSSコースは多くても2周までに。60％の理解でOKです。
・プログラミングはカンニングOKです。どうしても手が止まってしまうなら答えをみましょう。覚える必要はありません。
よくわかるHTML&CSSの教科書
progateをやったことで、「HTML/CSSはこんな感じか」となんとなく理解できたと思います。しかし、これだけで本当にWebサイトが作れるのだろうか。不安ですよね。でも大丈夫です。
手元によくわかるHTML&CSSの教科書を用意しましょう。
この書籍をこれからの学習で辞書的に活用していきます。パラパラと1周だけでいいので、目を通せたらGoodですね。60％くらいの理解で大丈夫です。
この先の学習で、理解が浅いなと思ったらこの書籍の巻末Indexを開きましょう。僕は分からないとこが出てきたら都度、巻末にマーカーを引いていました。ページ番号が振ってあるので、あとから探すのがラクになります。
※「わざわざ買わなくても、ググればいいのでは？」と思われた方へ。
たしかに、それでもいいと思います。しかし、この書籍のようにHTML/CSSが体系的にまとまっているサイトって少ないんですよね。唯一まとまっているのが、公式ドキュメントだったりするので、初心者が見ると情報量が多すぎて混乱してしまうんです。（僕自身そうでした笑）
一冊だけ辞書的なものを手元に用意しておくと、今後の学習がスムーズになります。
ドットインストール
ドットインストールは3分の短い動画で、プログラミングについて学べるサイトです。
ここでエディタを用意しましょう。
エディタとは、プログラミング言語を扱う際に必要な編集ソフトのようなものです。先ほどまでの学習では、progateがエディタを用意してくれていました。しかし、ここからは自分でエディタをインストールして、Webサイトを作っていく必要があります。
そこで、マイクロソフト社が無料で提供しているVisual Studio Code（通称VSCode）をインストールしましょう。手順は以下のドットインストールで解説されています。
これでWebサイトを作る下準備ができました。
それでは、インストールしたエディタを使ってみましょう。こちらもドットインストールを使います。全ての講義を見るには、有料会員になる必要がありますが、ここでは【無料公開中】のところを見て、実際にエディタを使ってみましょう。
エディタに触れることが目的なので、ここでは【無料公開中】の動画しか見ていませんが、ご覧の通り、かなり上質な動画です。この先の学習で行き詰まったら、月1000円程度なので有料会員になるのも手の一つですね。
ディベロッパーツールを使う
ディベロッパーツールは、Webサイトを作る際に手助けしてくれる便利ツールです。
以下の記事が分かりやすいので、読みながら手を動かしてみましょう。
【Chrome検証ツール使い方】初心者が抑えておくべき便利な4つの機能の使い方
プログラミングはカンニングOKです。ディベロッパーツールの使い方を忘れてしまったら、上の記事を読み返しましょう。
動画で学びたい人はこちらがオススメです。
Chrome DevToolsの使い方を徹底解説！（You Tube）
CSSのFlexboxを学ぶ
CSSのFlexbox を使うことで、Webサイトのレイアウトを簡単に変えることができます。
この先、パソコン版とスマホ版など、画面の大きさに応じてレイアウトを変える必要がでてきます（レスポンシブデザインと呼ばれます）。その際にとても便利なのが、CSSのFlexboxなんですね。しかし、便利な反面、覚えることが多いです。
なので、Webクリエーターボックスの【Flexboxのチートシート】を印刷して、手元に置いておきましょう。
日本語対応！CSS Flexboxのチートシートを作ったので配布します
印刷ができたら早速、Flexboxについて学んでいきましょう。【Flexboxのチートシート】を作ったManaさんが、非常に分かりやすくYoutubeで解説されています。感謝ですね。
CSS入門講座＃11：Flexbox（フレックスボックス）でレイアウトを組もう
ここまでの学習で、HTML/CSSの基礎が抑えられました。
この時点で、あなたは簡単なWebサイトを作れるスキルが身についています。次からは、HTML/CSSの実践学習をしていきましょう！
模写コーディング【初級レベル3課題】
ここからは模写コーディングという方法で学習していきます。
模写コーディングとは、既存のWebサイトを見ながら、それと同じサイトをHTML/CSSを使ってコーディングすることです。模写コーディングのやり方は以下の記事で詳しく解説されています。
こちらの記事の、03模写コーディングのルールと04模写コーディングの効率的なやり方をしっかり読みましょう。記事を読んだら早速、模写コーディングしていきましょう。
ここでは、初心者の模写コーディングに最適なサイトを3つ用意しました。
まずは、パソコンで表示されるデザインだけで良いのでやってみましょう。余裕のある人はスマートフォン版のコーディングにも挑戦できるといいですね。
上から順番に挑戦していきましょう！
※たぶん、ここの模写コーディングが一番しんどいです。僕は何度も挫折しかけました。大切なので繰り返しますが、プログラミングはカンニングOKです。わからなくなったら、ディベロッパーツールを使ったり、本や動画の解説を見たり、ググったりしましょう。エンジニアの方に質問するのもいいですね。teratailというサイトで、プログラミングに関する質問が無料でできます。
多少の表示崩れは気にしないで大丈夫です。ここが一番の踏ん張りどころなので、なんとか進めてみましょう。
Webサイトに動きをつける【jQueryの基礎学習】
先ほど模写した3つのWebサイトは、HTML/CSSだけで作られています。動きがないので、このようなWebサイトは「静的サイト」と呼ばれます。
サイトに動きをつけるために必要なのが、JavaScriptです。
しかし、JavaScriptは難しいので、「jQuery」を学びましょう。jQueryはJavaScriptを書きやすくしたパッケージのことです。Webサイトに動きをつけるために、最低限必要な機能をjQueryで学びましょう。
ここでもprogateを使います。
初級編は無料で学べます。中級編からは有料ですが、ここではとりあえず初級編のみを学習して次に進みましょう。次にやる模写コーディング「中級編」で、必要になる機能が出てきたら、必要に応じて調べればOKです。それが一番効率がいいです。
※初級編は多くても2周までにしましょう。模写をする中で、jQueryをさらに学びたいと思ったら、有料会員になるのもありです。（僕は有料会員になってjQueryの知識を深めました。）
ここまでで、jQueryの基礎中の基礎が理解できたかと思います。
それでは早速、実践していきましょう。
模写コーディング【中級レベル1課題】
ここまでjQueryの基礎を学んだことで、動的なWebサイトが作れるようになっています。
ここでは、中級レベルの模写コーディングに最適なサイトを1つ用意しました。
かなりボリューミーですが、パーツに分けてコーディングを進めていきましょう。
jQueryも適度に使われています(ハンバーガーメニュー、アコーディオン、スムーススクロールなど)。分からない箇所は、基本的にググればOKです。
これが完成できればWebサイトを作るスキルの習得は完了です。
それでは、就活を有利に進められるように、今まで作ったWebサイトたちをまとめていきましょう。
ポートフォリオサイトを作る
ポートフォリオサイトとは、今までに作ってきたサイトをまとめて、自分のスキルや実績をアピールするものです。
デザインできないし、コーディングスキルはまだまだだし、ポートフォリオサイトなんて自分には作れない。過去の僕はそう思ってました。しかし、ここまで学習してきたあなたなら大丈夫です。難易度は模写コーディングと変わりません。デザインに関しては、HikoProさんのポートフォリオを参考にしましょう。
ポートフォリオを作ることが大切なので、クオリティはそこまで気にしなくて大丈夫です。大半の就活生はポートフォリオサイトなんて作っていないので。（僕はポートフォリオを作ったことで、面接も通るようになりました。それまでは10社ほど、ESの段階で落ちています。笑）
ここまでで、エンジニア就活するための材料が揃いました。
お疲れさまでした。
ここまでやり切った人は、たぶん10％もいません。「プログラミング学習で挫折を経験した人は87.5％」という調査結果があるように、ここまでやり切ったあなたのスゴさがわかります。
ここまできたら、あとひと踏ん張りです。
次に、Webサイト（ポートフォリオサイト）が完成した後でやるべきこと3つについて解説していきます。
Webサイトが完成した後でやるべきこと3つ
以上がWebサイトが完成した後でやるべきこと3つです。
それでは詳しく見ていきましょう。
就活エージェント（レバテックルーキー）を活用する
まずはレバテックルーキに登録しましょう。完全無料で使えます。
レバテックルーキーとは、エンジニア就職に強い就活エージェントです。
僕がレバテックルーキーを実際に活用してみて感じた、メリットとデメリットを以下にまとめました。
- メリット
IT業界に詳しいエージェントが、マンツーマンで就活をサポートしてくれます。LINEでやり取りができるので、気軽に相談できます。初回のキャリア面接では、ZOOMを使って自分が今後、どのような働き方をしていきたいのか、どのような手順でこれからエンジニア就活を進めていけばいいのか、詳しく話が聞けます。
- デメリット
自分が本当に行きたいと思える企業が、エージェントさんが紹介してくれる企業の中にあるか分からないことです。僕は実際に、5社の企業を紹介してもらいました。そのなかで、「エンジニアとしてこの企業で働きたい！」と思える企業があったので、良かったです。
紹介された企業に、絶対にエントリーしなければいけないわけではないので、「いろんな企業を見てみよう」という気持ちで、まずは登録してみるのがいいですね。
初回のキャリア面接で、これまでに作った自分のポートフォリオサイトを担当のエージェントさんに見せておきましょう。これをすることで、自分が行きたいと思える企業を紹介してもらえる可能性がぐんと上がります。デメリットの部分を消せますね。
レバテックルーキの登録は以下の公式サイトからできます。
無料で登録できて、その後のエンジニア就活サポートも完全無料です。
レバテックルーキに無料登録できたら、次はポートフォリオサイトの公開をしましょう。
完成したポートフォリオサイトを公開する
ここまでで完成したポートフォリオサイトは、いまのところあなたのパソコン上でしか見れません。そこで、誰でも見れるようにしましょう。自分のポートフォリオサイトをネット上に公開します。
そうすることで、これから面接を受ける際に、企業の人にアピールしやすくなります。実際に、二次面接あたりからエンジニアとして働いている方たちと、接する機会が出てきます。その際に、ポートフォリオサイトがあるのと、ないのでは大きな差がでます。
ポートフォリオを公開する方法は、以下の記事がわかりやすいです。
模写コーディングでもお世話になった、だんさんが解説してくれてます。
Webサイトを公開する手順を3ステップで解説【無料サポートあり】
模写コーディングしたサイトは、必ず「アクセス制限」をかけましょう。
ここの「完成したポートフォリオサイトを公開する」に関しては、ES・面接対策と同時に進められたらGoodですね。
WordPressの基礎を学ぶ
ここまでで、ポートフォリオサイトをネット上に公開できたかと思います。
このタイミングでWordPressの基礎学習をしていきましょう。
WordPressは誰でも簡単にWebサイトが作れるツールです。
「ポートフォリオサイトは完成したし、また勉強するの？」そう感じますよね。
- なぜWordPressを学ぶのか？
実は今、「ネット上に公開されている、トップ1000サイトにおけるWordPressのシェアは50%超え」との調査結果があります。世界の半分以上のサイトが、WordPress で作られているんですね。そのため、Webエンジニアとして働くのであれば、WordPressの知識は必須になります。
ここでは、面接対策と同時に進めてほしいので基礎学習のみでOKです。
以下の動画で学習しましょう。
有料版の教材もあり、セール中だと1000円台で購入するできるのでオススメです。
ここまで勉強してきて、WordPressはPHPという言語で作られていることがわかったと思います。WordPressについてさらに理解を深めるために、余裕がある人はPHPの基礎学習とデータベース（DB）の基礎を学んでみましょう。
※ここではエンジニアとして内定をもらうのが目的なので、PHPとDBの基礎学習に関しては、ES対策や面接対策と同時に進めるのを推奨します。僕は面接で、「PHPの環境構築はどうやってしたの？大変だったでしょ。」と聞かれました。ちゃんとインプットして手を動かしていたので答えられました。
PHPとDBの理解を深めるなら、「WordPress開発講座」でもお世話になった、たにぐちまことさんの動画教材が分かりやすいです。
有料ですが、高品質で圧倒的にわかりやすいです。
ここまでお疲れさまでした。
最後にWEBサイトが完成した後でやるべきこと3つを再びまとめておきます。
以上3つを、ES・面接対策と同時に進めていきましょう。
まとめ：エンジニアになるのに学部は関係ない【文学部でもなれた】
最後に、エンジニアを目指す学生が見るべきブログを紹介して終わりにします。
僕が就活中にお世話になったサイトです。
この方たちのおかげで、エンジニアとして就職できました。ほんとうに感謝です。
僕自身は文学部出身で、まわりにWebエンジニアを目指している友達がいませんでした。
しかし、ネットの情報を頼りに、プログラミング学習を進めていったことで、Webエンジニアとして内定を頂くことができました。
マナブさん、HikoProさん、だんさんを始めとする、情報発信をしてくれた方には本当に感謝です。感謝の気持を込め、僕も1万文字近くのこの記事を無料で公開することにしました。
過去に自分が悩んでいたように、この記事が誰かの背中を押すキッカケになれたらとても嬉しいです。応援してます！
『文系でもエンジニアになれるの？』
『完全初心者だけど、どんな勉強をすればいいの？』
『エンジニアとして内定をとれる方法を知りたい！』
とお悩みの学生へ。