Webエンジニアってどういう仕事？Webエンジニアになるための勉強法
こんにちは、okutani(@okutani_t)です。本記事は、僕の知り合い向けに「Webエンジニアの仕事について」から「Webエンジニアになるための勉強法」をまとめたものです。
とてもざっくり書いていきますが、適宜加筆修正していきたいと思ってます。
それでは、まずはじめに「Webエンジニアの仕事について」いろいろと書いていきます。
スポンサーリンク
もくじ
Webエンジニアの仕事って？
Webエンジニアの仕事は「Webサイト（ホームページ）を作る人」です。
Webサイトを作るといっても、その仕事内容はさまざまです。
ざっくりですが、その中でも大まかに3つに分けられます。
- フロントエンドエンジニア
- バックエンドエンジニア
- インフラエンジニア
かなりざっくりなので明確にこの3つだけというわけではないですが、とりあえずこの3つの領域が大まかにあると思って読み進めてください。
それぞれの解説と、プラスで心構え的なところを書いていきます。
フロントエンドエンジニアについて
主に「HTML」「CSS」「JavaScript」といった言語を使ってWebサイトを構築します。
ようするに「目に見える部分」ですね。
「HTMLで構造を」「CSSで見た目を」「JavaScriptで動きや処理などを」書いていきます。
……とかんたんに書きましたが、ここでは理解できなくてOKです。実際、HTMLやCSSを書いていけばなんとなく理解できます。
Webエンジニアの中には、このフロント部分をほとんどやらない人もいます。
ですが、僕個人的には全Webエンジニアにフロント部分は触ってもらいたいと思っています。
仕事の幅も広がるし、自分で1からサイト作りたいときにもHTMLやCSSの知識はおおいに役立ちます。
ぜひこの領域も積極的に勉強していきましょう。
ちなみに、Webデザイナーがこの領域を兼ねている場合もよくあります。そのことも頭に入れておくとGoodです。
また、HTMLとCSSのみを使ってサイトを作る人を「コーダー」「マークアップエンジニア」と呼ぶこともあります。HTMLとCSSに加えて、JavaScript（+ちょっとしたPHPなど）がかける人を「フロントエンドエンジニア」と呼ぶ、ぐらいに考えておくと分かりやすいかと思います。
バックエンドエンジニアについて
主に「サーバーで動く部分」をプログラミング言語で書いていく人です。
要するに「目に見えない部分」ですね。例えばお金の計算とか、ユーザーの登録処理とか。
例えば、「サイトに予約機能つけたいんだよねー」って要望があったとします。
名前や日時の入力フォーム、送信ボタンなどがフロント部分。目に見える部分ですね。
送信ボタンを押して、情報をデータベースに登録したり、メールでお知らせしたりする処理などがバック部分です。
主に「Ruby」「PHP」「Java」などの言語を使ってアプリの中身を作っていきます。
よくあるのが「どのプログラミング言語を勉強すればいいですか？」って質問ですが、ぶっちゃけどれでもいいです。
CookPadに入りたいならRubyですし、Facebookで働きたいならPHP書きましょう。
ちなみに、僕は最初の仕事ではPHPを書いていました。今はバリバリRuby書いてます。
「よく分からないからさー、どれ勉強すればいいか決めてよ！」ってせっかちさんにはRubyおすすめしてます。書くのかんたんですし。
後述のSTEP3でも出てきますが、「Ruby on Rails」というツールがRubyでWeb開発をおこなうときはほぼ必須で、実際にいろんな有名企業が導入しています。
どれか決められない人は、とりあえずRubyを勉強しておけばOK。もしくはサイコロふって決めてもいいかもしれません（超投げやり）。
ようするに、Webで使われていて、よく名前が上がる言語であればなんでもいいんです。GoでもPythonでもいいんです。
元々PHPできる人がRubyなんてかるく勉強すればすぐ書けちゃいますし、とりあえず一つ言語をマスターしていけばOK、ぐらいの認識でいいです。
ちなみに、他の呼び方としては「プログラマー」「アプリケーションエンジニア」などがあります。SE（システムエンジニア）とはまた違うので注意（違いが気になる人は調べてみてください）。
インフラエンジニア
僕はこの領域あまり詳しくないですが、サーバー作ったり、ネットワークを構築したりする人です。
大きい会社では専門のインフラエンジニアがいたり、サーバーの構築や運用する会社であれば専業でやってる人はいます。
ですが、小〜中規模ぐらいの会社やサービスなら、誰かしらが兼任してる場合が多いです。
この領域は一般的なサーバー周りの知識をつけておけば、特殊なケースを除いて仕事できます。
とはいえ、UNIXコマンド（サーバーを操作するコマンド）を覚えたり、サーバーにログインしてログを調査できるスキルが必要だったり、やることはけっこう幅広いです。
ここは入りたい企業や、自分の働くスタンスなどを考慮して勉強していきましょう。
最終的にはぜんぶできるようになればGood
今回紹介した内容は、Webエンジニアになるならある程度触れるようになっておいた方がよいです。
というのも、この業界は成長するスピードが速いですし、廃れる領域もたくさんあります。
最近だと、サーバーなんかはボタンひとつで構築できてしまいますし（Herokuなど）、フロントもAIが自動で書き出してくれるサービスがでてきたり、バックもGoogleが運営している「Firebase」などを使えば、かんたんなサービスなら1日かからず作れてしまいます。
廃れてしまった例では、AdobeのFlashなどの技術が例にあげられますね。
日々進化していくIT領域で働くには、さまざまな幅広い知識に加えて、常に脳みそをUPDATEしていく必要があります。
とはいえ、どの領域も中途半端だと仕事になりません。難しいところですね。
自分の場合は「メインの仕事はサーバーサイド（プログラミング）」で、「仕事によってはフロント部分も触るし、サーバーも立てる（運用もする）」といったスタンスで仕事してます。
自分は今のところ、このスタンスで仕事を断れるぐらいには依頼がきています。参考にしてください。
もちろん、自分の向き不向きや好みの部分もあるので、入ってきた情報を噛み砕き、自分のやりたい部分と常に照らし合わせるようにしてください。
それでは、次のステップに進みましょう。STEP1です。 ここから、okutani流の勉強法を紹介していきます。
STEP1: ポートフォリオサイトを作ってみよう
ここで断言しておきますが、一番の勉強法は「手を動かす」です。必ず手を動かしてください。
自分で手を動かす内容が決まっていたり作りたいものがある場合はそちらを優先して手を動かしてください。
「何をしていいか分からない」場合は、「ポートフォリオサイト（自己紹介用のWebサイト）」を作ってみましょう。
…….さて、作ることを今決めましたか？
今ここで作るものを決めない場合、以下を読んでも特に響くことはないと思います。
「よし、ちょっくらやってみるべー」ぐらいの感じでいいので、作ることを今決めましょう。決めないことには始まりません。
いきなりサイトをひとつ作るのは一見ハードルが高そうですが、実はぜんぜん難しくありません。
世の中にはたくさん「テンプレート」となるものが用意されています。 それを使えばいいんです。最初は楽しましょう。
ちなみに、僕もWebサイトをつくりはじめのころは、テンプレートを使って作成していました。こちらのサイトです。
LINKhttps://okutani-t.github.io/okutanis-portfolio-v1.0
ちょっとしたアニメーションをつけたり、かっちょいいフォント（Google Fonts）を使ったりしていますが、ベースとなる大枠はテンプレートを使っています。
実際に上記のポートフォリオは、以下のサイトのテンプレートを使っています。無料です（素晴らしい）。
LINKStart Bootstrap – Free Bootstrap Themes and Templates
ちなみに「Agency」というテンプレートを使っています。僕のポートフォリオと比較してみてください。大体の構成が同じことに気づくと思います。
このサイトを使ってもいいですし、他のサイトのテンプレートをダウンロードして利用すれば、かんたんにサイトが作れちゃいます。
とはいえ、テンプレートをいじるだけでも「Webの知識」「HTMLの知識」「CSSの知識」ときには「JavaScriptの知識」が必要になってきます。
そこで、Webについてちょっと勉強しましょう。
Webについて知る
さて、やることは決まりましたね。あとは目標に向かって進むだけです。
まずはWebについて知ることから。
例えば、「サーバー」や「ドメイン」などの知識がない場合は、一般的なWebの勉強からしていきましょう。
HTMLとCSS、Webの一般的なことについては、過去に僕が作った資料があるので参考にしてみてください（ブロガー向けかつ、超ーざっくりですが……そのうち作り直したい）。
また、書籍では以下の本がわかりやすいです。僕も手元に一冊あります。
LINKわかばちゃんと学ぶ Webサイト制作の基本〈HTML5・CSS3〉 | 湊川 あい |本 | 通販 | Amazon
とりあえず上記の本読んでおけばざっくりとしたWebの知識が手に入ります。個人的にとてもおすすめの参考書です。
HTMLとCSSを知る
HTMLとCSSについて勉強していきましょう。
そもそも、HTMLとCSSがなぜ必要なのかは「Webについて知る」でおおまかに理解しているとして……
実際の書き方はこちらの動画サイト「ドットインストール」がおすすめです。
LINKドットインストール – 3分動画でマスターする初心者向けプログラミング学習サイト
以下の二つの講座を見てみましょう。無料です（素晴らしい）（2回目）。
LINKはじめてのHTML (全15回) – プログラミングならドットインストール
LINKはじめてのCSS (全17回) – プログラミングならドットインストール
ドットインストールでは実際に1からサイトを作っていますが、今回は1から作っても作らなくてもどちらでもいいです。
めんどくさい人は、まずはテンプレートを使ってサクッとサイトを作ってみましょう。
実際に、僕は仕事でテンプレートを使うことがあります。WordPress案件なんかはテンプレートを使うことが多いです。
楽にサイトが作れますし、「一番最初にサイト制作に触れる」という意味では、1から作るよりテンプレートを使っちゃった方がいいかと思ってます。
なにより手を動かす
「Webの知識がどうとか、HTMLとかCSSとか、いきなり言われてもよく分からないよ！」
とあなたは今思っているんじゃないでしょうか。僕もはじめはそうでした。
僕が一番最初にサイトを作ろうと思ったとき、HTMLやCSSもろくに知りませんでした。
学生時代、Tシャツのネットショップを作りたくて、ネットで超ぐぐりまくって、3ヶ月かけてようやくリリースしました。このサイトです。
現在はリニューアルして綺麗になってますが、当時はスマホ対応なんかもできてないし、デザインはびみょーなサイトでした。
しかし、「サイトを作って公開する」という目標があったから、Webの勉強やHTML・CSSの知識がつきました。
まずは勉強がどうこうというより、「目標を決め、それに向かって手を動かす」ということを心がけましょう。
STEP1の冒頭で決めた「ポートフォリオサイトを作る！」というところまではやりきりましょう。かんたんなものでいいんです。
そして、余力があれば、1からHTMLとCSSを使ってサイトを作ったり、JavaScriptを使って足し算フォームやポップアップウィンドウを実装したりいろいろとチャレンジしてみてください。
テンプレートを使ったサイトでも、
「スクロールしたら画像がふわっと出てくるようにするには？」
「“詳細を見る”ボタンを押したら、ポップアップで自分の好きな食べものについての項目を表示させるには？」
「お問い合わせフォームを設置するにはどうしたらいいか？」
「じゃんけん機能やおみくじ機能をつけてみたい！」
などなど、追加できることはたくさんあります。
そのつど、Googleで調べて、ガンガン手を動かしましょう。さらに素敵なサイトになっていくはずです。
STEP2: サイトを公開してみよう
さて、素敵なサイトは作れましたか？
作ったのはいいですが、まだ手元のPCでしか見れないんじゃないかと思います。
作ったサイトをサーバーに上げて、誰でも見られる状態にしてみましょう。
ちなみに、サーバーの契約方法やドメインの取得などは過去に記事にしています。
・ロリポップサーバー
・さくらレンタルサーバー
・エックスサーバー
・ドメインの取得
ミニマムでも月に数百円ですがお金がかかってしまうので、それが嫌だという方は無料で公開できるサーバーを探してみてください。
ちなみに、GitHubを利用すれば無料でサイトを公開できます。こちらを参考にしてみてください。
とはいえ、一度有料のサーバーを借りれば基本的には複数サイトを設置できるのでお得ですし、自分のドメインを持っとくと所有感があってGoodです。
自分の検証用に持っておくのもいいですし、仕事でものちのち使える可能性がありますね。
ちなみに僕は1台のエックスサーバー で、このブログやTシャツのサイトを運営しています。
僕個人では「okutani.net」という名前でポートフォリオも公開してます。ご参考にどうぞ（このサイトは後述するRuby on Rails+Herokuで公開してます）。
それでは、次のステップ。
STEP3: Ruby on Railsを触ってみよう
Webエンジニアのための記事なので、Ruby on Railsを導入して触ってみましょう（ちなみに、RubyとRuby on RailsはPHPとLaravelなどに置き換えてもOKです）。
「Ruby on Railsってなに？」
と疑問に感じていると思いますが、一言で言うと「Webサイトを作るのに、いろいろ便利にしてくれるツール」ぐらいにとらえてください。触ってればそのうち理解できます。
このステップでは、自分で作りたいものを作るというより、「とりあえずなんでもいいから動かしてみる」ことから始めるといいとおもいます。
僕がはじめてRuby on Railsを触った時は、「名前とコメントを入力して登録するだけ」のアプリを作りました。そんぐらいで大丈夫です。
先ほどと同じく、ドットインストールを見ながらやってみましょう。
LINKRuby入門 (全26回) – プログラミングならドットインストール
LINKRuby on Rails 5入門 (全28回) – プログラミングならドットインストール
まずはRubyの講座を見て、次にRuby on Railsの講座を進めてみてください。
Ruby on Railsの導入方法はこちらも参考にどうぞ。
作ったアプリは「Heroku」などでかんたんに公開できます。こちらを参考に。
Ruby on Railsの記事などなど、当ブログでもたくさん紹介しています。
あとは、ただひたすら手を動かすだけです。気がついたら、自分のオリジナルサービスを運用している日もそう遠くないですね……！
ここでは細かく導入方法や実際の書き方には触れませんが、ドットインストールをみたり僕の過去の記事を参考に進めてみてください。
STEP4: サイト制作に関わることを勉強していこう
これでHTMLを使ったサイト構築と、Rubyを使ったシステム構築をおこなうことができました。
ですが、Webの領域は幅広いです。
ターミナル、GitやGitHub、PhotoshopやらCSSアニメーション、はたまた「人間関係」……（ちなみに僕は人間関係でしょっちゅうやらかしてます）
Webエンジニアの勉強に付随してやることはたくさん出てくると思います。
その都度調べて、手を動かして自分に吸収できる体勢に慣れましょう。 必ず分からないことは出てきます。
今回、「HTMLやCSSをどのツールを使って書いていくか」などについても触れてません（※一応、この答えは記事下のコメントに書いておきます）。
疑問に思ったら、その疑問が解消されるまで検索しましょう。99.99%のことは、ネットにあります。
まとめ
かなりざっくりでしたが、Webエンジニア初学者向けの勉強方法について書いてみました。
もちろん、勉強法はさまざまあります。これが全員にベストだとは思ってません。自分にあった方法とモチベーションでもってチャレンジしてみてください。
とはいえ、僕はこの方法（半分根性論みたいな方法）で、Webエンジニアのフリーランスとして成功しています。同年代の倍ぐらいは稼いでます。
僕は綺麗事があまり好きじゃないです。楽してWebエンジニアになる方法はありません。泥臭くていいので手を動かしましょう。
Twitterとかでイキってるキラキラ系Webエンジニアはみんな大した技術力無いですから（超偏見）、そういう人たちを目指さず、実力でもってWebエンジニアになる努力をしましょう。
勉強法に悩んでいたり、自分の進路に悩んでいたら、僕のTwitter(@okutani_t)にリプ飛ばしてください。かんたんな相談ならいつでも乗れます。個人コンサルもほそぼそとやってるのでお気軽にお声がけください。
Webエンジニア初学者の方の参考になれば幸いです。
おまけ課題
この記事では、いろいろと知らない単語が出てきたと思います。
分からない単語はぐぐる（検索する）ことを忘れずに。ぐぐることも手を動かすことと同じぐらい重要です。
一度、頭から読み直してみて、分からない単語があればぐぐってみましょう。
それが「Webエンジニアの第一歩」です。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
