【エンジニアになりたい文系必見】外国語大生がフロントエンドエンジニアの長期インターンに参加するまでにやったこと・使用した教材を全部公開します！(ロードマップ)

# 前書き

初めまして！外国語大4年生のジャックと申します。
私はエンジニアになるため2021年の9月から一年間休学しており、現在はweb制作会社のフロントエンドエンジニアの長期インターンとして働いております。

プログラミングを始めるまでの僕のスペックは以下の通りでした。

+ 偏差値50ちょいの外国語大生
+ 生粋の文系(高三から数学は取ってない)
+ 小学生の頃からパソコンは触っていたが、ほとんどがネットサーフィン
+ Wordとパワポはなんとか使える程度
+ インターネット、パソコンの仕組みなんてもちろん知らない HTTPって何？拡張子って何それ状態
+ 理系の友人やエンジニアの知り合いはいない

いたって普通のそこら辺にいる文系大学生って感じですね。
今回はそんな僕が長期インターンに参加するまでにやったこと、使った教材について包み隠さず公開しようと思います。

ぜひ参考にしてください！

## こんな人に読んでほしい

+ これからプログラミングを始める人
+ インターンに参加したい人
+ Web制作会社で働きたい人

## こんな人には向いてないかも

+ 既にエンジニアのインターンに参加している人
+ Web制作ではなくWeb開発をしてみたい人



それでは本題に入っていきましょう！

## 2020年12月〜

まず初めに取り組んだ教材は[Progate](https://prog-8.com/ "Progate")です。
プログラミングを始めた人のほとんどはこの教材を使っているのではないでしょうか。

Progateで僕が学んだレッスンと学んだ順、学ぶべきものは以下の通りです。

+ **HTML&CSS (必須)**
+ **JavaScript　(ほぼ必須)**
+ **jQuery　(必須)**
+ **PHP　(必須ではないが学んでおいた方がいい)**
+ **Sass　(学ばなくても問題はない)**

### HTML&CSS
これはWeb制作をする上で避けては通れない道なので必ずやりましょう。

### Javascript
Webサイトにアニメーションをつけるのに必須の技術になります。
jQueryの基礎はJavaScriptなのでjQueryを理解しやすくするためにも学びましょう。

### jQuery
jQueryはJavaScriptを簡単に書くための言語です。
よくjQueryはオワコンだから勉強する必要はないと言われますが、Web制作界隈ではいまでも現役です。 
僕は3社Web制作会社でインターンに参加したことがありますが、3社ともjQueryを使用していました。
ですので、Web制作会社で働きたい方はjQueryは学びましょう。

### PHP
Web制作会社ではWordPressを使ってサイトを構築することが多いのですが、そのWordPressの基礎はPHPになります。
個人的には学んでおいた方が良いとは思いますが、PHPを学ばなくてもこの後紹介するWordPressの構文を勉強すればなんとかなるという人がちらほらいるので「必須ではないが学んでおいた方がいい」にしておきました。
できる限りはやくインターンに参加したいorWeb制作会社で働きたい！って人は飛ばしちゃっても問題ないかと思います。

### Sass
こちらは現段階では学ばなくても問題ないかと思います。
使う企業もあれば使わない企業もありますし、体感ですが、求人を見てもSassをバリバリ使っているという企業はあまり見たことないです。
僕も全然使ってませんし、最悪、使う企業に入社してもSassはそこまで難しくないので業務中にキャッチアップできると思います。

## 2021年1月〜

Progateを終えて次に[こちらのサイト](http://demo.themegraphy.com/write-ja/ "Progate")の模写をやりました。
「これくらいできるだろうなー」と思い、始めてみたのですが、見事になにもできませんでしたw

「今まで習ってきたことをどうやって使えばいいのだろう」

と、ポカーンとしていたのを今でも覚えていますww

そこでもう少し理解を深めようと思い、[ドットインストール](https://dotinstall.com/ "ドットインストール")でHTML,CSS,JavaScriptを復習しました。
その後は[こちらの動画](https://www.youtube.com/watch?v=n6aOk9ZJ6jI "【DAY28-30】初心者のための模写コーディング実践編【Web制作入門】")を見ながら先ほど紹介したサイトを写経しました。
思いのほか写経が楽しくてPENGIN BLOGさんのサイトにある[コーディング課題](https://crestadesign.org/category/study-support/coding-practice/ "「コーディング実践課題」の記事一覧")の初級から上級まで全て写経しました。

写経といいつつも慣れてきたらこのパーツはこうやって実装するのではないかと試してみたり、予想を立てながらコーディングしていました。
**※写経はただ写せば良いということではありません。コピペしているだけだと何も身につかないので上記にもあるように予想を立てたり、写したコードを理解しながら進めていくことが大切です。**

写経を4つもしていると、徐々にサイトの作り方がわかるようになりました。

よく「Progateで基礎を学んだら模写をしよう！」という記事を見かけますが、模写でつまづいた人は写経してみると良いですよ！


## 2021年2月〜
写経が一通り終わったら次は写経で作成したサイトを自分風にアレンジしてみました。

アレンジとはどんな感じかというと例えば、フォントの色を変えてみたり、画像を自分の写真に変えてみたり。
本当に簡単なことですが、このおかげでより理解が深まりました。

次にやったことは完全オリジナルのポートフォリオの作成です。
模写や写経ではなく、デザインからコーディングまでです。

デザインはネットにあるサイトをいくつか参考にしてなんとなく頭の中でイメージしながらコーディングをしました。
今見ると、デザインの四原則も守られてないダサいデザインでとても恥ずかしいですw

ここまででHTML,CSS,jQueryを使った簡単なアニメーション付きの静的なサイトを作成できるようになりました。

次はWordPressでブログを作ろうと思ったのですが、この時にはProgateで学んだPHPのことをすっかり忘れていたので復習がてら評価の高かったたにぐちまことさんの[Udemy](https://www.udemy.com/course/php7basic/ "ちゃんと学ぶ、PHP+MySQL（MariaDB） Webサーバーサイドプログラミング入門")でPHPを学び直しました。

## 2021年3月〜
PHPを学んだ後はWordPressの勉強をし始めました。
たにぐちまことさんが[WordPressの講座](https://www.udemy.com/course/wordpress_master/ "ちゃんと学ぶ、WordPress テーマ開発講座")も出していたのでそちらも受講しました。

一通り、Udemyで学んだところで次はWordPressでポートフォリオを作りました。
デザインは前回と同様、いくつか参考サイトを見ながらコーディングしました。

コーディングが完了したらレンタルサーバーを借りてドメインも取得し、公開しました。
ここまででプログラミングの勉強を始めてから三ヶ月ほど。
コーディングから公開まで一人でできるようになったのでようやくインターンを探し始めました。

僕がインターンを探した方法は以下の二つです。

+ InDeedで探す
+ 「〇〇県　Web制作　インターン」のような感じで検索して企業のホームページから応募する

東京や関東圏だとWantedlyやゼロワンインターンなどたくさんエンジニアのインターンを探す媒体がありますが、僕は地方在住なため利用できる媒体は少なかったです。上記二つの方法が一番探せました。

そして、何社か応募をし、無事にWeb制作会社のフロントエンドエンジニアの長期インターンとして内定をいただきました。

以上が僕がインターンに参加するまでにやったこと全てになります。

## 最後に
インターンに参加するまでに勉強した時間は300時間ほどでした。
一ヶ月約100時間、一日平均3時間ほどといったところでしょうか。

僕も最初は何もわからない状態でしたが、手を動かしていれば少しずつ理解できるようになっていきます。
独学はつらいですが、諦めなければ必ずできるようになります！
ぜひ参考にしていただけると嬉しいです！

[Twitter](https://twitter.com/notifications "ジャックのTwitter")をやっていますので何かご質問等ありましたらお気軽にご連絡ください:v:

最後までご覧いただきありがとうございました！