【2020年決定版】未経験から3ヶ月でWebエンジニアになるためのロードマップ

どうも、うるぞーです。

この記事では全くの未経験からプログラミングを学習し、エンジニアとして転職したりフリーランスとして仕事を請け負うために、最短ルートで何をやったら良いのかを現役エンジニアがご紹介します

  • プログラミングを勉強したいけど、何から手をつけたらいいかわからない
  • 効率よくプログラミング学習できる方法を知りたい
  • 第一線で仕事する現役エンジニアとしての意見を知りたい

このページの上から順に流れを掴んで、実際に実践してもらえればWebエンジニアとして仕事をしていけるようになります。
もうたくさん検索をして迷わなくて済むようになります!

僕の時代にはなかったサービスやプログラミングスクールがあって、昔よりも学習のしやすさ/ハードルの低さは抜群です!

  • エンジニアとして自分の望む収入(年収1000万超えも望めます)
  • 働き方(リモートワークや週3勤務)
  • 生活(田舎や海外で固定費を下げてゆとりのある生活を送る)

僕はプログラミングを武器に仕事をすることでQOLを高めることができました。

それでは見ていきましょう。

うるぞーの経歴

この記事を書いている私『うるぞー』の経歴を簡単にまとめます。

きちんとしたエンジニアが書いておりますので、内容はお墨付きです!

  • プログラミング歴8年/エンジニアとして4年以上の経験
  • 50人以上にプログラミングレッスン/10人以上のエンジニア転職をサポート
  • 大手企業で正社員/フリーランス/起業の働き方を経験(すべてエンジニアとして)
  • 現在はWur株式会社の代表として、大手企業やベンチャー企業などのWeb/システム制作を担当
  • 過去に20件以上のサイト/サービス制作に携わる
  • 個人で複数個のサービス開発の実績あり
  • HTML/CSS/JavaScript/Ruby/WordPress を中心に開発

さらに気になる方は詳細のプロフィールポートフォリオを見てみてください。

0. 全体像の把握

まず全体像の把握から始めましょう。

プログラミング学習

プログラミングを学習するぞ!と決めてから、Web系のエンジニアになるまでの大まかな流れです。

[1] HTML/CSS/jQuery

まずはHTMLとCSSという、Webサイトの”見栄え”を作るところを勉強します。

Webサイトというものには必ず、HTMLとCSSが必要になります。
画像を表示したり、文字のサイズを変更したりというものはすべてHTMLとCSSを使って行います。

その他のプログラミング言語はデータベースからデータを取り出したり、お問い合わせフォームから送られてきたデータを処理したりという裏側の処理をするものです。

全てのベースとなるHTMLとCSSは大切で、難易度としても簡単なのでここから始めましょう!

jQueryというのはJavaScriptの仲間です。JavaScriptは少々慣れるまでに時間がかかるのですが、それを簡単に扱えるようにしたプラグインです。
スライドショーを作ったり、スルスル〜と流れるようにスクロールをするなどなど、HTMLとCSSを操作する際に使えます。

実際に自分でやってみないとイメージが湧かないと思うので、今は「ふーん、そんな感じなんだ」と思っていただければ大丈夫です。

[2] プログラミング言語を学ぶ

HTMLとCSS, jQueryを勉強したら次はプログラミング言語を勉強しましょう!

「HTML,CSSはプログラミングとは呼ばないの?」という宗教戦争のようなやりとりがTwitterでよくやりとりされていますが、自分の経験的にはHTML/CSSはマークアップ言語と呼ばれることが多いです。

まぁ正直読み方なんてどうでもいいです。自分が作りたいもの/世の中が求めているものを作り上げる尊い技術というものには変わりはありませんので、気にしないようにしましょう!

少し脱線しましたが…ここでいうプログラミング言語というのは上でも書きましたが、

  • データベースからデータを取り出したり、データを保存する
  • 検索機能をつける
  • ユーザーログイン機能

などを実現するためのものになります。

さて、プログラミングの概要を掴んだ上で、さらに2つの道があります。

  • サービスを作る→Ruby on Rails
  • 企業HP, ブログメディアを作る→WordPress

Webサービスを作っている会社で働きたい場合や、自分でサービスを作りたい場合はRuby on Railsを選ぶといいです。

自分でブログを始めてカスタマイズをしたり、フリーランスとしてホームページ制作を請け負って仕事をしたい人はWordPressを選ぶといいです。

自分が実現したい道を確認せずに、有名だからという理由で勉強を始めると全然違う道に進んでた!なんてことにもなりかねないので、きちんと決めておきましょう!

[2-1]Ruby on Rails

rails_lo

手前味噌ですが、僕が好きな言語である『Ruby on Rails』がオススメです。

Java, C#, PHP, Goなどたくさんの言語がありますが、初めて勉強するならこれですね。

理由はいくつかありますが、

  • 書き方がシンプルで書いていて楽しい(これ重要)
  • ゼロからサービスを作るときに早く作れる
  • 0%→60%までの習得度が割と早くて成果を感じられる
  • エンジニア求人が多い
  • 学習コンテンツが多い

などです。

僕が初めて勉強したプログラミング言語はJavaというものでした。金融系などで使われている歴史のある言語ですが、初心者にはかなり難しかったです。

正直Javaを書いているときはプログラミングが嫌いだったのですが、Rubyを勉強してから自分の上達も感じられてプログラミングが好きになりました。

自分が行きたい会社があって、そこの求人票に書かれている言語がRuby on Railsではない場合はもちろん別のもの選ぶべきですが、特に決まっていない場合はRuby on Railsにしましょう!

[2-2]WordPress

WordPressは世界中で使われているコンテンツ管理システムです。
難しく聞こえますが、要するに独自ブログを作ることに特化したツールと思っていただければ大丈夫です。

『世界の35%のサイトはWordPressで出来ている』というのはよく聞く話。
これだけ作られているんだったら仕事としてWordPressの需要を感じませんか?

日本でもWordPressでホームページを作っている会社が圧倒的に多く、大手企業から中小企業まで幅広い会社が利用しています。
知り合いから「ホームページを作ってほしい/直してほしい」と依頼があったら、99%の確率でWordPressです。

ブログ用システムなのにホームページ?と疑問に持つ方もいますが、ニュースや社内ブログ/お問い合わせ機能を載せている会社もあり、拡張もしやすいのでよく選ばれています。

今ご覧いただいている当ブログ『I am うるぞー』もWordPressで作っています。

もしWordPressを使わず、ゼロからブログ機能を作ろうと思ったら

  • ログイン機能
  • 記事管理機能
  • 画像アップロード機能
  • ページ作成機能

など、自分でゼロから開発しなくてはなりません。これってとても大変です。

ですがWordPressを使用すれば最初から大枠の機能を使用することができます。

注意

この記事ではWeb系のエンジニアを対象として書いています。
アプリを作りたい!という人は、別の記事でご紹介しようと思います。
Swift(iOS)/Kotlin(Android)/ReactNative, Flutter, Unity(ハイブリッド)など、たくさん選択肢があります!

1. パソコンを用意する

IMG_1229

(↑ベトナム・ダナンにてカフェで仕事をしているときに撮影)

ご存知の通り、プログラミング学習にはパソコンが必要です。

個人的にはMacをオススメしています。

  • エンジニアの多くが愛用している
  • 最初からRubyがインストールされている
  • 操作性とデザイン性

理由は以下の記事でも書いています。

学習をしていく際に、わからないところをググりながら調べ物をしていくわけですが、多くのクリエイターがMacを使っているためそこを前提に書かれているサイトが多いです。

「Windowsのやり方書いてないのかよ!」とストレスを抱えた実体験がありますので、可能であればMacを使ってください。

余談 – 投資によるモチベ向上

僕が初めてMacbook Proを買ったのは大学2年生の時です。
アルバイトしてゼロから貯めたお金20万ちょっとを握りしめてApple Storeで購入しました。

貯金は一気にゼロになりましたが、これで絶対元をとってやる!と覚悟を決めてプログラミングを勉強し、半年ちょっとでMacbook Proを買った金額を回収することができました。

今は最大24回まで無利子で分割支払いもできるようになっていて、月々1万円ちょっとの支払い金額にもできます。無駄な飲み会や出費を抑えれば支払える範囲内だと思いますので、是非投資として購入してみてはいかがでしょうか。

2. 実際にコードを書く

IMG_1946

(↑僕のいつもの仕事スタイルです)

パソコンが手に入ったら、次は実際にコードを書き始めましょう!

『0. 全体像の把握』で、自分のなりたい将来像を固めているので、もう迷うことはありません。

①必要なツールをインストールする

  • Google Chrome
  • エディター

この2つを用意があればOKです。

Google Chrome

Google Chromeは使っている人も多いですが、まだインストールしていない人はぜひ切り替えてください。

サイトをつくる時にデザインの調整などを行う際に『検証モード』をよく使うのですが、Google Chromeが特に優秀なのでオススメしています。

また拡張機能というプラグインを利用することでスクリーンショットを簡単に撮ることができたり、開きすぎたタブを履歴に残して全部閉じたり、広告ブロックのツールを入れたり、色々カスタマイズできます。

エディター

エディターというのはコードを編集するソフトのことです。

上で載せた画像のモニターにコードが書かれていますが、これがエディターです。

エディターには色々種類があり、無料で有名どころではVS Code, Atom, SublimeText などなどあります。

僕のオススメはVS Codeです。アプリが軽いのでサクサク動作して気にいっています。多くのエンジニアが愛用しているエディタですね。写真に載っているエディタもVS Codeです。なのでこだわりがない方はVS Codeをインストールしましょう。

②ProgateでHTML/CSS, jQueryを勉強する

Progateというオンライン学習サービスがあります。

無料で基本レッスンを学ぶことができ、月額980円の有料会員プランになれば全てのレッスンを受けることができます。

モダンなデザインでイラストがたくさん入っているので、遊んでいる感覚でコードの学習をすることができます。

Progateではオンライン上にエディターが表示され、そこでコードを書くことができます。なのでProgateで学習する際にはエディターは必要ありません。

「せっかくエディターを入れたのに!」という感じですが、Progateで学んだことをインストールしたエディターでアレンジして書いて学ぶというのもオススメです。

しつこいですが、大切なのはとにかく繰り返しコードを書くことです!何度も何度も、書いていくことで、ある意味思考停止してでもサイトは作れるようになります。(それは言い過ぎかw)

無料だと初級編のところまで学ぶことができます。
そこから独学でググりながらでの中級編/上級編の内容は学べます。自分が作ってみたい参考サイトを決めて、

有料にして全コース勉強するのも良いですし、月額料金支払うのはちょっと・・と抵抗があるのであればHTML/CSS, jQueryについて書かれた書籍でも良いです。

ただ、書籍だと読みながらコードを書きづらいという難点がありますので、動画を見ながらの学習がオススメです。

Udemyという動画学習サービスがあります。有料ですが、時々セールをやっていて1万円以上する動画が1000円前後で購入できるときがあるので、そういうときを狙って買うのも良いでしょう。実際のエンジニアがどうやってコードを書いているのかを実際に見ることができますし、一度買えば繰り返し見ることができるので、投資としてはとても良いです。

HTML/CSS, jQueryを50%くらい理解してきたら、次のステップに進みましょう!

50%くらいでいいの!?とよく驚かれますが、100%は目指さなくてOKです。Progateなり書籍, Udemyの動画なりを2周繰り返してやりましょう。余裕がある人は3周してもよいでしょう。

  1. 1周目は全体をさっと通すイメージ。わからないところがあったら素直に飛ばして完走を目指す
  2. 2周目は理解を深めていくイメージ。わからなかったところを中心に復習する
  3. 3周目は学んだことを活かした応用のイメージ。教材で勉強したものをカスタマイズしてみる(これはやってもやらなくてもOK)

うるぞーアドバイス

こんなことを言ったら怒られちゃうかもですが、コードの書き方は全部知らなくてもいいんです。

現役でエンジニアしている僕でさえ、HTMLとCSSを100%覚えているわけではありませんし、多くのエンジニアがそうだと思います。でも目的のサイトは作れます。なぜか。

サイトを作って知識を深めていく中で『どうやってこれを実現できるのか?』を自分の引き出しに入れています。要はググって見つけられて、実現できればいいわけです。

例えば、

  • 左に画像、右にテキストを置くレイアウトはflexboxを使う
  • 画像を丸く縁取って表示するにはborder-radiusを使う
  • ヘッダーを固定するならpositionを使う

などはサイトをつくる上でよく使うCSSですが、何回も使っていけば勝手に頭に入ります。いつか使うかも・・と全部を覚えようとするのではなく、必要に応じてググって見つければ大丈夫だと思うようにしましょう!

③Ruby on Rails もしくは WordPressを勉強する

さて、HTML/CSSパートを大枠理解できるようになれば、Ruby on RailsもしくはWordPressの勉強をしていきましょう!

基本的な学習の仕方はHTML/CSSと変わりません。

1周目で全体をさらって把握して、2周目で詳細を詰めて、3周目でカスタマイズしたりオリジナルのサイトをつくる流れです。

Ruby on Railsの場合

Ruby on Railsを学んでエンジニアとして仕事していけるようになるには、大きく次のステップがあります。

  1. Ruby on Railsを使った開発はどんな流れなのかを実際にコードを書きながら理解する
  2. 模写してサンプルサイトを作れるようにする
  3. オリジナルサイトを作り、ポートフォリオとして見せられるようにする

HTML/CSSの項目でも紹介しましたが、【Web開発初心者向け!】Web開発入門完全攻略 充実の18時間コースを受講すればステップ①②は完了ですね。

ショートカットをしたい方はこちらの動画を購入して、繰り返し学習すれば問題ないでしょう。

また、Ruby on Railsに強いプログラミングスクールに通うのもいいと思います。

プログラミング学習はマラソンと同じで、継続できないと習得はできません。意志を鍛えるのはなかなか難しいので、『やる・やりきる』という環境に身を置くのも大切です。

がオススメです。ほぼ100%転職できるので独学+転職支援があると思えばお金をかけてでもいく価値はありますよね。

詳しくは以下の記事で書いています。

1. Ruby on Railsを使った開発はどんな流れなのかを実際にコードを書きながら理解する

HTML/CSSと違い、Ruby on Railsは学ぶことが多いです。

変数という概念が出てきたり、データベース(SQL)、MVC(Model/View/Controller)など最初はよくわからないと思います。でも大丈夫、繰り返しやれば必ず理解できますので諦めず、怖がらずにやっていきましょう!

ProgateにはHTML/CSSのレッスン以外にも、

  • Ruby
  • Ruby on Rails
  • Git
  • SQL

など、Ruby on Railsの開発に必要なスキルを全て勉強できるようになっています。

Progateの有料会員になっていれば、実践編まで勉強することができるのでWebサービス開発に必要なベーススキルはここで身につけられます。

レッスンの順序は、

Ruby → Ruby on Rails5 → Git → (SQL)

が良いと思います。

Gitは書いたコードの履歴を残していくものです。もしGitを使わずにファイルを変更していたら、どこをいじっていたのかわからなくなってしまう時があります。その際にどこを変更したのかがわかるように、バージョンを管理するためのツールです。チームで開発をする際にも使用するので学んでおきましょう。

SQLはやった方が良いですが、やらなくても大丈夫です。Ruby on Railsではデータベース操作を行いますが、SQLというデータベース専用言語(※わかりやすく書いています)を使わなくても、Railsから操作できるようになっているためです。

2. 模写してサンプルサイトを作れるようにする

一通り勉強が完了したら、Web開発パス(Ruby on Rails)をやりましょう。

新しいコースと思いきや、これまでやってきた

  • HTML/CSS
  • Ruby
  • Ruby on Rails5

のコースを一連の流れとしてやることができます。

繰り返しが大切なことは何回も書いていますが、きちんと理解できていればサクサク進めていけますし、わからないところがあれば復習にもなります。

実際にサンプルサイトをゼロから作っていくと、サービスができていく過程を知ることができます。模写してるだけ、と思うかもしれませんが自分が書いたコードによって少しずつサービスが作られていく感じはとても嬉しいものです。

自分の書いたコードからTwitterのようなWebサービスが誕生したらワクワクしませんか?

3. オリジナルサイトを作り、ポートフォリオとして見せられるようにする

1,2が終わったら、自分でゼロからサービス開発をしてみましょう!

転職活動をする際や、フリーランスとして仕事を取る際に「どんなものを作れるのか?」を示すためのポートフォリオ が必要になります。

人に見せるという大きな目標を持って、初めてのサイト制作がスタートします。

「作りたいものはなんとなくイメージできているんだけど、いざ作ろうと思ったら何からやっていけばいいのかわからない・・・あれだけ写経したのに・・・」

そうやって焦って落ち込んだりするのもこの時期です。

でも安心してください。多くの人がそうだと思います。僕もそうでした。

急にゼロから開発するとなって、上手く作れる方がすごいです。

最初から難しいものを作らずに、シンプルで簡単に作れるものから着手すると良いです。

僕のYoutubeチャンネルではゼロからRuby on Railsを使ってブログを作る動画を載せています。

完全ノーカットで収録して、実際にエラーが出た際にどうやって対応するのかまで丁寧に話している動画です。

  • ブログ投稿機能
  • ログイン機能
  • 画像アップロード機能

など、サービス開発する際に必要になる機能の作り方をシリーズに分けて説明しているので、ぜひベースにしてみてください。

WordPressの場合

WordPressを学んでエンジニアとして仕事していけるようになるには、大きく次のステップがあります。

  1. 実際にコードを書きながら理解&模写してサンプルサイトを作れるようにする
  2. オリジナルサイトを作り、ポートフォリオとして見せられるようにする

WordPressはPHPというプログラミング言語で動いています。なので軽くPHPの勉強もしておくと理解がスムーズでしょう。ProgateにPHPのコースが用意されているので、余裕があればそこで勉強しておくのがおすすめです。

なお、Ruby on Railsのパートでも書きましたが、プログラミングは継続が重要で、自分に厳しくできない意志の弱い人は自分で追い込める環境に飛び込むのもオススメです。

プログラミング学習はマラソンと同じで、継続できないと習得はできません。意志を鍛えるのはなかなか難しいので、『やる・やりきる』という環境に身を置くのも大切です。

TechAcademy [テックアカデミー]にはWordPressコースがあるので、初心者でも理解しやすいように作られた充実した教材と、経験を積んだ講師がいるスクールで学べば継続しやすいかと思います。わからないところをすぐに相談できるのもスクールの利点ですね。

有料スクールですが、TechAcademyは無料カウンセリングや無料体験もできますので、興味のある人は相談してみると良いでしょう。

1. WordPressを使った開発はどんな流れなのかを実際にコードを書きながら理解する

ProgateにはWordPressコースはないので、ドットインストールで勉強すると良いでしょう。

動画が作られたのが2013年と古いですが、無料で見れて大まかな流れを理解することができるのでオススメです。

書籍だと『いちばんやさしいWordPressの教本』がオススメです。WordPressと言ったらコレ!というほど有名な書籍で、タイトルからわかるように初心者の方にもわかりやすく書かれています。

Udemyの動画で勉強しても良いでしょう。通常時は高いですが、頻繁にセールが行われるのでタイミングが合えば安く購入することができてお得です!

2. オリジナルサイトを作り、ポートフォリオとして見せられるようにする

1.でサイトの作り方を学んだら、オリジナルサイトを作っていきましょう。わからないところが出てきたら都度ググって調べてみるのが良いでしょう。

オリジナルサイトは、企業ホームページやブログ/メディアサイトを作ってみるのがオススメです。

そして完成したポートフォリオは全画面をスクリーンショットで撮って見せられるようにしたり、そもそも自分用のサイトを作ってポートフォリオサイトを作るのも良いでしょう。

どんなサイトを作ろうか?と悩む場合は『ランディングページ集めました。』などから参考サイトを見つけるのもいいと思います。LPの場合はWordPressがなくてもHTML/CSSだけで実現できますが、デザインの勉強になるのでポートフォリオとして活用していけるでしょう。

企業サイトであればSANKOU!などを参考にしましょう。

ちなみに、感の良い方は「HTML/CSSだけでサイトは作れるのに、なんでWordPress必要なの?」と思われたかもしれません。

企業サイトでWordPressを活用するメリットは、ブログ機能を追加できたりお知らせ投稿機能をつけられたり、お問い合わせ機能をつけることができるからです。これはプログラムなしでは実現できず、WordPressを活用することで簡単に追加することができるのです!

WordPress”らしさ”を出せる企業サイト/メディアサイトは必ずサンプルサイトとして作ってみましょう。

④転職活動/仕事を受けてみる

3ヶ月程度みっちり学習したら、ある程度の知識とポートフォリオが出来上がっているはずです。

  • 正社員を目指す方は転職活動
  • フリーランスとしてやっていきたい方は周りの知人やSNS等で仕事を探す

転職活動はWantedlyを使ってやっていくのが良いでしょう。未経験でも採用募集している会社は結構あります(632件!)ので、ラフにお話する感じでマッチする会社を探してみましょう。

フリーランスとしてやっていく場合は周りにホームページ制作やサイト制作をして欲しい人がいれば声をかけてみましょう。特にいなければクラウドワークスランサーズなどのクラウドソーシングサービスを利用したり、TwitterなどのSNSでエンジニアを探している会社に連絡してみましょう。最近だとbosyuでも結構な出会いがありますので、こちらを探してみるのも良いでしょう。

あとは制作会社に連絡して、案件を紹介してもらうケースもあるようです。そのようにして案件獲得をしている人も結構いるようでした。

フリーランスでクライアントワークをしながら生計を立てるためには、兎にも角にもクライアントを見つけるための営業活動が必要になります。

この辺りはまた別の記事で書いていきますね。

転職してエンジニアキャリアを積むVSいきなりフリーランス

現在25歳なうるぞーですが『起業→フリーランス→正社員→起業』というキャリアです。

現存している働き方を全て経験しています。

その経験から事実を素直にお伝えすると、一度正社員のエンジニアとして働いていると今後仕事を取る上で非常にスムーズな場合が多いです。

僕も会社員時代に現場エンジニアとして採用面接に参加して面接したり履歴書を見る立場にありましたし、今は会社を経営していてチームで制作をしているので『この仕事を一緒にやれるスキルのあるエンジニアかどうか』を判断しています。

ある程度技術的な話をしたりGithubというソースコード管理サービスを見せてもらうことで『正社員のエンジニアとして働いている/いた=ある程度コードが書ける』と判断しやすいからです。

例えば、

  • 1 サイバーエージェントでエンジニアしていました!
  • 2 フリーランスとして経験積んできました!

であれば1の方が「サイバーでやってたなら即戦力になりそう」の方が判断しやすい経営者が多いのではないでしょうか。決定する人が必ずしも技術的なところがわかるわけではないからです。

なので、未経験からエンジニアになりたいけど仕事取れるか不安な方は正社員としての経験を一度挟んだ方が安全です。僕が正社員で働いていた会社は完全リモートワークで社員がバラバラな会社だったのですが、フリーランスのような自由度があって楽しく仕事することができました。

それを踏まえて転職するなら

Ruby on Railsの項目でも紹介しましたが、プログラミングスクールに通ってみっちり勉強し、そのまま就職サポートまでしてもらうのもオススメです。独学で学ぶことを中心に紹介する記事なのにオイっ!という感じですが、、(笑)

でも「転職が上手くいかなかったらどうしよう・・」と行動できないのであれば本末転倒。そうなりがちな人はスクールに通う方がいいと考えています。

上でも書きましたが、有名企業でエンジニアとして働いてましたという『キャリア実績』が作れれば、その後に年収アップのための転職やフリーランスとして独立してやっていくに当たってもかなり楽(スムーズ)になります。

繰り返しになりますが、オススメのスクールはTECH::CAMPの即戦力エンジニア養成プログラム【TECH::EXPERT】GEEK JOBです。

理由は以下の通り。

  • 現役エンジニアである”うるぞー”が信頼
  • 転職先が充実している
  • 無料でキャリア相談できる

まとめ

いかがでしたでしょうか。

だーっと1つの記事にまとめて書いてしまったので、今後いくつかパートに分けて記事を分轄して見やすくしていこうと思います。

気になることや質問がある方は、ぜひ僕のTwitterをフォローの上、メッセージをください!
可能な限りお答えしていきます。またいただいた質問は他の方の役にも立つと思うので、ぜひこちらの記事でも『Q&A』という形で掲載させていただきます。

では最後まで読んでいただきありがとうございました。

エンジニアとして新しいキャリアへ進める人が一人でも多く増えれば幸いです。

2020-05-30|
関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA