IT未経験者がWEBエンジニアの内定をもらうまでにやったこと[就活]

#1. はじめに

こんにちは。坂内太一と申します。
今回はITと縁のない大学に通っている僕が独学でWEBエンジニアの内定をもらうために行ったことを紹介していこうと思います。
拙い文章が多いかとは思いますが最後まで読んでもらえれば幸いです。


#2. 自己紹介

本題に入る前にまずは僕がどのような経緯でWEBエンジニアの内定をいただいたかについて自己初回も兼ねてお話ししようと思います。
僕は地方の文系私立大学に通う大学４年生です。昨年(大学３年生)の９月ごろからWEBエンジニアになるために独学で勉強をはじめました。当時はITに関する知識はほとんどなく、タイピングも人差し指のみで打つほどです(笑)。
また、文系大学ということもあり周囲に質問できる人はいませんでした。
補足にはなりますが、高校時代は理数科に所属していたこともあり論理的思考力は平均以上あったかと思います。
以上が僕の簡単な自己紹介になります。


#3. WEBエンジニアになるためにやったこと

###1. YouTubeでIT業界についての情報を集める

僕が最初に行ったのはYouTubeでIT業界についての情報を集めることでした。
現在、YouTube上では様々な立場のエンジニアがIT業界について語っています。僕はそれらの動画を視聴してIT業界について学びました。ここで僕が注意した点としては1人の動画だけを見るのではなく様々な立場のエンジニアの動画を見ることです。
なぜなら多くのエンジニアの動画見ることによって誤った情報に気付いたり情報の偏りをなくすことができるからです。
このYouTubeでの情報収集はプログラミング学習を始めた時から現在に至っても行っています。
僕が実際に見ていたチャンネルのリンクをこの記事の最後に貼りましたのでよかったらみてみてください。



###2. Progateでプログラミングの基礎を学ぶ

次に僕がやったことは[Progate](https://prog-8.com/dashboard)でプログラミングの基礎を身につけることです。

既に知ってる人も多いかもしれませんがProgateはオンラインプログラミング学習サービスです。このサービスを利用することで初心者でも簡単にプログラミングについて学習することができます。Purogateのすべてのサービスを利用するには月に千円ほど料金がかかりますがプログラミングが初めての人でもわかりやすいように説明をしてくれるのでコスパがよく非常にオススメです。

僕が行ったコースは下記になります。

- HTML/CSS
- Command Line
- Git
- SQL
- Ruby
- Ruby on Rails5
- JavaScript(最初の方をかじったのみ)

僕は最初にHTML/CSSから始めました。僕個人の意見ですがプログラミングが初めてならばHTML/CSSからやるのがプログラミングをより理解できると思います。また、上記のHTML/CSS〜SQLまではエンジニアとしては必須のスキルですので必ずやるようにしましょう。
プログラミング言語に関しましてはRuby・PHP・Pythonなどの選択肢がありますが僕はRubyを選択しました。Rubyを選択した理由に関してはこの後の章で述べていこうと思います。

###3. ポートフォリオの作成

プロゲートでプログラミングの基礎を学んだら次はポートフォリをの作成に取り掛かりました。
エンジニアのポートフォリオは自分で作成をした掲示板などのWEBサービスです。ポートフォリオが必要な理由は以下の通りです。

>エンジニアのスキルは言葉で証明するのが難しいもの。
採用側にとっては、実務未経験者の技術を知れる重要な判断材料になっています。
ポートフォリオなら明確に自身のスキルを証明できるため、就職や転職にも有利になるでしょう。
とくに、未経験から転職や就職を考えている方は、必須でなくても作成することをおすすめします。

このようなことから僕のように大学でITについて学んでいない人にとってはほぼ必須となります。

僕はポートフォリオの作成にあたってRubyとそのフレームワークであるRuby on Railsを使用しました。
ここで僕が使用するプログラミング言語にRubyを選択した理由ですがソースの数が他のプログラミング言語と比べて桁違いに多かったことが挙げられます。このように学習しているプログラム言語のソースが多ければ多いほど僕のようなプログラミング初心者にとっては環境構築やエラーの解決などがスムーズに行うことができます。
ですので皆さんが言語に関するこだわりが特にないのであればポートフォリオを作成するプログラミング言語にRubyを選択することをオススメします。

僕はポートフォリオの作成にあたってYouTubeのアプリケーション開発実況動画を参考にしました。
これは現役のエンジニアが実際にサービスの開発を実況するもので動画を見ながら自分も一緒に手を動かして作業できます。また、動画内でわからない用語が出てきたらその場で検索をして理解を深めるように努めました。

###4. 実際のポートフォリオ


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247999/9c53cf29-8e43-d9a7-35f8-bd017a857a9c.png)
https://d2v9k5u4v94ulw.cloudfront.net/assets/images/6730466/original/c0851fca-d07c-49e2-b81f-7e91f50def47?1621486644)

これが僕が実際に作ったポートフォリオの画像になります。
僕は中高大と野球部に所属しており、その際にグローブ選びに悩んだ経験からグローブ選びの参考になるようにとグローブを紹介する掲示板を作成しました。
このようにポートフォリオの題材には自分の問題意識の解決を目的としたものがアイディアも思いつきやすくオススメです。
また、このポートフォリオの仕様は以下になります。

【使用している技術】

- インフラ→ heroku
- データベース→ sqlite3　　
- 開発環境→Cloud9 
- 言語→ Ruby on rails 
- デザイン→bulma-rails


【アプリケーションの機能】 

- 認証機能→devise
- グラブ投稿のCLUD機能
- 画像投稿→refile



###5.ポートフォリオが完成したら

ポートフォリをが完成したらいよいよエントリーです。
僕は[wantedly](https://www.wantedly.com/projects)を使ってエントリーをしました。wantedlyはエンジニアの求人サイトで簡単に言えばリクナビのエンジニア版です。wantedlyには自己紹介文を書く欄が履歴書の約3倍ほどあるので自分のやりたいことや長所などをしっかりとアピールしていきましょう。

#4.問題に直面したときの解決方法

ここまで実際に僕が学習を進めてきた内容をまとめてきましたが僕の場合、周りに質問できる人がおらず様々な問題に直面しました。下記にそんな時の主な解決法をいくつかあげたのでよかったら参考にしてみてください。


###1. タグや専門用語の意味がわからない

HTMLなどの専門用語は検索すると解説の書いてあるサイトがいくつもあるのでそれらで意味を知ることができます。
分からないままにしておくとポートフォリを作成するときに余計に時間がかかるので分からないことは早めに調べてしまうのがいいでしょう。



###2. 環境構築やポートフォリオ作成の際のエラー

環境構築やポートフォリオ制作時のエラーは前に述べたタグのように意味を調べるだけで解決することはほとんどなく、Qiitaで同じエラーを体験した人の記事を参考にしたり、YouTubeなどの解説動画で解決するのがいいと思います。また、これらのエラーは解決するまでに多くの時間を費やすことが多々あり、僕自身も一つのエラーの解決のために3時間、4時間かかることもざらにありました。
これに関しては根気強く解決方法を調べていくしかありません。


###3. 教材の意味が理解できない

意味がわからない場合は基礎が足りていないということがほとんどだと思うので教材のレベルを少し下げてみましょう。
僕自身も最初はrailsで一番有名な参考書であるrailsチュートリアルを使って学習をしようとしていましたが最初の１章ですら全く理解することができずYouTubeでの動画学習に切り替えました。そしてYouTubeでの動画学習を進めていく中でもう一度railsチュートリアルを眺めてみると以前理解できなかったところが理解できるようになっていました。
このようなことから自分に合う教材を選ぶことはとても大切でそれらを進めていくうちに理解できなかった教材も理解できるようになるかと思います。


#5.独学でエンジニア就活をしてみての感想

僕が独学でエンジニア就活をして強く感じたことが２つあります。
1つ目は根気強く学習をすることがとても大事だという点です。
特にポートフォリオを作成する段階に入ると環境構築やデプロイなど様々な場面でエラーが発生し、それらを解決するまでに3時間〜4時間かかることもザラにあります。僕自身もエラーが解決せずイライラしたりしましたがそうなってしまうと解決するエラーも解決しなくなるので問題に直面しても常に平常心でいることが大切だと実感しました。
2つ目は安易にエンジニアになろうと思わないことです。
CMなどの謳い文句で『誰でも簡単にエンジニアになれる』などとよく聞くかと思います。しかし実際に独学で勉強をしてみてメチャクチャ難しかったので安易にエンジニアになろうと思わず、まずはProgateなどで一度プログラミングはどんなものなのか実際に体験してみるのがいいかと思います。


#6.まとめ

今回は僕がタイピングすらまともにできない初心者からエンジニアになるために勉強した内容をまとめました。
僕自身、内定をもらったのみでまだ実務未経験ですので参考程度に考えてもらえればと思います。
これ以降に文章中の補足説明やリンクなどを幾つか貼りましたので文章を読んでいて疑問に思うことがあったら見てみてください。
最後まで読んでいただきありがとうございました。


#7.専門用語の補足

ここでは文章中で登場した主な専門用語の意味を解説しています。
もしわからない用語があればここで確認してみてください。

HTML
HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するために開発された言語。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されている。

CSS
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語。 上記のHTML文書の文字を大きくしたり色をつけたりなどができる。

Command Line
キーボードだけで操作する画面上の入力行のこと(キーボードのみでファイルの作成や削除等の操作ができる)

Git
ファイルのバージョン管理が簡単にできるツール

SQL
データベース言語の一つで、データベースの定義や操作を行うことができる





#8.参考にしたい主なYouTubeチャンネル

僕がYouTubeの動画学習でよく見ていたチャンネルです。
面接対策のチャンネルはITとは関係ありませんが非常に参考になったので一緒に貼っておきます。

[セイト先生のWeb・IT塾](https://www.youtube.com/channel/UC8IWoNfegB72Q2nT9GJy2zQ)

[せお丸のプログラマー養成講座](https://www.youtube.com/channel/UCnEEa-IbWQ8_b-dqBgNNu4Q)

[しまぶーのIT大学](https://www.youtube.com/c/shimabu_it)

[GTM【プログラミング講座】](https://www.youtube.com/channel/UCz5jr6-bzt5C4mk1YNbKS6A)

[Farstep【プログラミング講座】](https://www.youtube.com/channel/UCiGdng-6ZLS5tlfw0xnG3TA)

[かよちんchannel*ひよっこエンジニア]
(https://www.youtube.com/channel/UCGnKrBlfJWq05hFB5kpzsPQ)

[だれでもエンジニア / 山浦清透]
(https://www.youtube.com/channel/UC452hry4DI_pDn_CVT9ZKhQ)

[TECH WORLD]
(https://www.youtube.com/c/TECHWORLD111)

[KENTA / 雑食系エンジニアTV]
(https://www.youtube.com/channel/UC_HLK-ksslL-Z_2wiIZDlMg)

[面接対策]
[エルトの就活/転職チャンネル]
(https://www.youtube.com/channel/UC3JDU1U32pvptG-Cl8O_jjA)

[Utsuさん]
(https://www.youtube.com/c/Utsu3)


[最近見始めたチャンネル]
[エンジニア転職チャンネル【RUNTEQ公式】]
(https://www.youtube.com/channel/UCwjx6ZG4pwCvAPSozYEWymA)



#9.参考文献

[エンジニアのポートフォリオ例5選！テンプレートや作成の注意点も紹介]
(https://web-camp.io/magazine/archives/64387)

[HTMLクイックリファレンス]
(http://www.htmq.com)

[わわわIT用語辞典]
(https://wa3.i-3-i.info/word11158.html)

[【初心者向け】Gitとは何なのか。基本用語やその仕組みをまとめています。]
(https://tcd-theme.com/2019/12/what-is-git.html)