プログラミング未経験文系大学生がイケイケフロントエンドエンジニアになるには

# おまえはだれだ(興味無い人は飛ばしてください)

こんにちは! 現役大学生フロントエンドエンジニアのjunseinagaoです。

僕は、国立文系の大学生です。特別高学歴ではありません。大学4年生の就職活動時にSier系企業さんの宣伝文句だったら「文系でもエンジニアになれる」に触発されて「エンジニアになりたい!」と思って、大学を2年間休学して一年間留学に行ったり、プログラミングの勉強をしたりして「エンジニアになる」を目指して来ました。結果的に、今は、Web製作会社でReact.jsを使ったLP製作、システム開発の案件と小規模な開発現場でReact Nativeを使ったiOS, Androidアプリの開発の2つの案件を頂いて生活してます。(なんか4年以上大学にいたり、一年間だけ留学に行ってるのに大学生だっり、時空が歪みまくってますが、まだ大学に籍が残ってるので大学生です。)

また、GeekSalonという大学生プログラミングコミュニティ(端的に言えば大学生限定プログラミングスクール)でJavaScript(Vue.js)を使用したWEB開発をプログラミング初心者に教えています。

# この記事の対象の人

- 文系の大学生(偏差値は問わない)
- 情報学部専攻の以外の理系大学生
- プログラミングの知識が0の人
- プログラミングを仕事にしたいと考えている人

# 学生がエンジニアになる黄金ルート

一言で言えば、**「インターンで実務経験を積みましょう」**という話です。

エンジニアに限らず、どの職でも「こういう人」がその職に就くよねっていう黄金ルートがあります。企業は、黄金ルートを通ってきた人を欲してます。

新卒エンジニアの場合だったら、一番多い母数が情報科の学生です。彼らは、知識量的に企業からの信頼が厚く、WEB系企業からして「喉から手が出るほど欲しい」人材たちです。

この知識の壁は結構高くて普通に同じ知識量を身に付けようと思ったらけっこーな努力と時間を求められます。
新卒でフロントエンドエンジニアになるためには、彼らに勝つor対等に見られる必要があります。どうしたら良いのでしょうか。

その答え、つまり文系大学生にとっての黄金ルートは、**「自分で勉強して開発インターンに採用されて、実務経験を積んだ後に新卒採用に挑む」**です。

注意しなければいけないのは、この「自分で勉強」する壁があります。みんなが一流のフロントエンドエンジニアを目指して頑張ってるのに挫折してしまうのは、僕は**最新のフロントエンドを学習するルートが整備されていない**からだと思います。

# 最新のフロントエンドを学ぼう

僕が**最新の**フロントエンドというところにこだわるのは、フロントエンドは常に技術が移り変わっていくのがフロントエンドの特色であり、この特色があるから、僕たち文系未経験であっても入り込める余地があります。

さらに古い技術は使われなくなっていきます。もの作りの現場でより不便なものに頼る必要はありません。それは、ろうそく🔥が電球💡にとって変わられるのと一緒です。

古い技術を学ぶメリットは僕たち文系未経験にとって少ないです。しかし、昔からWEB製作の業界にいて最新の情報を拾っていない人にとっては、最新の技術はまったく新しい技術で、自分たちが今まで身に付けてきた技術とは異なるものなのでリコメンドされません。それどころか、「おれたちがこう使ってきて使ってるから、おまえたちもこれを学べ！」といってこれからは使われなくなってくものを発信によって無意識的に押しつけてきます。

それは、僕たち文系未経験にとってためにはなりません。

# 2021年最新のフロントエンドとは?

[Front-End Study#1]([Front-End Study #1「Cloud Native時代のフロントエンド」 - YouTube](https://youtu.be/JUz_QUu8Mus)) という最新のフロントエンドを学ぶ勉強会が最近催されました。ここで、元Qiitaのフロントエンドエンジニアで業界有名人のmizchiさんが最新のフロントエンドについて語っています。

mizchiさんは講演内で

> FrnotEndにおいてNode.jsが支配的なポジションになった

と語っていて、Node.js ( JavaScript )を使用したフロントエンド開発が現状の最新安定なものになってきた趣旨を述べています。

様々なところで同じ様なことは語られていて、

Ruby on Railsを中心とするMVCモデルのDOMを直接操作するフレームワークとReact.js Vue.jsを中心とする仮想DOMを介してWEBアプリケーションをつくるフレームワークではパラダイム(世代)が違うと言われています。

**なので、本気でフロントエンドエンジニアを目指すならNode.js ( ReactやVue )を学びましょう。** 

### 用語解説

#### Node.js 
JavaScriptは、元々ブラウザ上で実行できるプログラミング言語ですが、それをブラウザ以外の場所で実行させるためものがNode.jsです。ここではNode.js イコール JavaScript でも構いません。

#### [DOM (Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction)

HTML(ブラウザに文章を記述するためのマークアップ言語)を元に作られたブラウザに表示するためのデータ表現です。JavaScriptを介して色々弄ったりすることができます。

#### React.js Vue.js

Node.jsを基盤としたSPA(Single Page Application)をつくるためのフレームワーク(=自由度の高いテンプレートのようなもの)です。この2つのフレームワークが日本のフロントエンド業界では最新で広く使われる様になってきており、しのぎを削っています。

特徴として、DOMを直接操作するのではく仮想DOMというDOMと操作する間に1つ壁を設けることでリアクティブ性を実現してます。

#### [MVCモデル](https://developer.mozilla.org/ja/docs/Glossary/MVC)

ソフトウェアの設計パターンです。サーバーサイドでは、ベストプラクティス(=最適解)として受け入れられています。フロントエンドでもその流れで使われていましたが、新しいパターンが出てきて昔のパターンとなってしまいました。

#### [Ruby on Rails](https://railstutorial.jp/)

日本のWEB開発で長く広く使われてきたWEBアプリケーションをつくるためのフレームワークです。チュートリアルが非常に充実しており、一昔前は「Railsをやっておけばまちがいない」と言われていました。

# Node.js(JavaScript)をどのように学ぶか
と、いきなり「Node.js(JavaScript)を学べ!!」と押しつけてしまいましたが、ここで文系未経験がNode.jsについてググっても「なにをするためのものなのかよくわからん」で終わりだと思います。

Node.jsを学ぶこと自体に前提となる知識がいくつか必要だからです。

他の要因もあります。

## インターネットの情報も多くのスクールの情報も信頼できない
JavaScriptは歴史的な経緯から、現在は使えない、使う価値のない過去の資料がインターネット上にたくさん残っています。それだけならまだしも、スクールを中心に最新のフロントエンド開発からズレた発信 ( 未だ多くの現場で使われてる古い技術のjQueryとか) が見られます。この様にNode.js(JavaScript)を学ぶにあたって、独学では地雷を踏み抜きながら体であたってなんとか身に付けるみたいな学習の仕方しかできせまん。

## 信頼できる学習教材はなにか

VueやReactを使ってWEBアプリケーションを1つ作ることを目標にしましょう。

@mizchiさんがZennで公開してる[プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法](https://zenn.dev/mizchi/articles/3789a101dae388d98159)では、Node.jsをどうやって学ぶかについて語られていていますが、それをふまえて僕の考える学習ロードマップはこうです。

-  [N予備校 プログラミングコース](https://www.nnn.ed.nico/pages/programming/) をやる

もしくは

1. [Progate]()のHTML CSS JavaScript CommandLine Node.js コースをやった後
2. [JavaScript Primer - 迷わないための入門書 #jsprimer](https://jsprimer.net/) をやった後
3. ReactやVueのチュートリアルをやる。

を行うのがオススメです。

また、気力がある人は、世界中の有志によって編纂されて体系的にまとめられたMDNの[ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn)をやるのもオススメです。

僕は色々手を出してMDNが一番肌に合いました。書き方は難しくても体系的にまとめられてる方がやりやすいんでしょうね。

# 最後に
この記事を読んでくださってありがとうございました。ここに書いてあることは、あくまでも僕の主観であることに注意してください。

また、僕がメンターとして所属する[GeekSalon](https://geek-salon.com/)という大学生限定のプログラミングコミュニティでは、完走率80%以上、プロダクトは受講生の作りたいものを作り、学生メンターが受講生と併走しながら自分の力で1つアプリケーションを3ヶ月で完成させる経験を10万円で提供しています。

僕が教えているWebExpertコースでは、JavaScriptを中心に学んでVueを使ったWEBアプリケーション開発を**チーム**で行います。
今のエンジニア新卒採用で面接官から必ずと言って良いほど質問される「なにか開発した経験ありますか」と「チームで開発した経験はありますか」の2点を3ヶ月でクリアできるコースですので、1人での学習が上手くいかない方は興味があったら説明を聞いてみてください。[(定期的に説明会を開いてます。)](https://geek-salon.com/user_trials/new)