Web

Webエンジニアに必要なスキルとは【現役エンジニアの経験より】

どうも、つよぽんです!

以前ツイートした内容が少しバズり、Webエンジニアになりたいと思っている人が知りたい内容なのかなと思い、今回それに関する内容をまとめてみました。

Webエンジニアとして働けるようになりたいけど何を学べば良いかわからない

本、progate、ドットインストール、udemy、Railsチュートリアルとかいろいろ使って学習しているけど、実際にどの程度まで学習しなければいけないのかわからない

今回はこのような疑問に、フリーランスフルスタックエンジニアとして活動している僕の経験からお答えしていきたいと思います。

フルスタックエンジニアとは

Web開発でフロントエンドバックエンドの両方を開発できるエンジニアのこと。一人でWebサービスを作ることが出来る

個人的な経験からの解説記事となるので、エンジニアとして活躍するまでの1つの参考として読んでいただけたらと思います。

この記事の内容は次のとおりです。

今回の内容
  • 僕のWebエンジニアになるまでの遍歴
  • 実際に会社で働いてきて思うエンジニアに必要なスキルとは

Webエンジニアになるまでの遍歴

エンジニア遍歴

まずは、僕がどのように会社でエンジニアとして働いてきて、フリーランスのフルスタックエンジニアになったとか簡単に自己紹介します。

僕のエンジニア遍歴
  1. 未経験からiPhoneアプリエンジニアとなる
  2. Androidアプリの開発も行い、スマホアプリエンジニアとなる
  3. Webのフロントエンドの開発を行いフロントエンドエンジニアとなる
  4. Webのバックエンドの開発を行いバックエンドエンジニアとなる
  5. フリーランスのフルスタックエンジニアとなる。(バックエンドの仕事多め)

上記のうち①~④までが会社員時代にやってきたことですが、基本的にどれも未経験状態から仕事をスタートしています。

に関しては完全未経験からスタートしたので、寝る以外の時間はプログラミングの学習成果物を作ることを繰り返して、一番苦しい時期でした。

②~④に関しては、で身につけたプログラミングの知識をベースに学習(=インプット)と仕事(=アウトプット)が出来たので、と比べると比較的カンタンに習得できました。

実際に会社で働いてきて思うエンジニアに必要なスキルとは

プログラミングをする子ども

今まで、さまざまなエンジニアの職種をやってきて思うのが、同じWebエンジニアでも、がっつり出来なくても良いスキルと、それなりに出来たほうが良いスキルがあることです。

会社に入ると同じようにWeb技術者といっても、コーダーフロントエンドエンジニアバックエンドエンジニアという職種に分かれます。

コーダー、フロントエンドエンジニア、バックエンドエンジニアの主な仕事は次のとおりです。

それぞれの役割
  • コーダー : 主に静的なWebページ実装までで、プログラミングはあまりしない。
  • フロントエンドエンジニア : APIを使った動的なWebページの実装を行う。
  • バックエンドエンジニア : フロントエンドエンジニアが利用するAPIを実装したり、データを保存するためのデータベースの構築などを行う。

上記のように、職種に応じてやる作業が異なるため、実際に仕事で使う技術は職種によって異なります。

コーダー

  • HTMLとCSSの深い知識が必要
  • プログラミングの知識はほぼ不要 (一部アニメーションを実装するためにJQueryの利用が必要となるが、サンプルのコピペで問題ない)

コーダーに関しては、用意されたデザインどおりにWebページを実装するのが仕事になるので、HTML・CSSの知識が、フロントエンドエンジニア、バックエンドエンジニアよりも必要となります。

逆にいうと、デザイン通りのWebページの実装ができれば良いので、プログラミングに対して深い知識を持たなくても問題ありません。

フロントエンドエンジニア

  • HTMLとCSSの最低限の知識があれば問題ない
  • JavaScriptに対して深い知識が必要(DOM操作非同期処理APIを使ったデータのやりとりが出来るレベルの知識は最低限欲しい)

コーダーがいる会社であれば、基本的にコーダーが用意したHTML・CSSを利用して開発を進めることが出来ますが、全ての会社でコーダーがいるわけではありません。

特に創業間もないベンチャーでは、コーダーが居ない傾向があり、その場合はエンジニアがHTMLとCSSを作る必要があります。

ここで「エンジニア」と言った理由は、そもそも開発者が1人しか居ないという場合もあり、その場合は必然的に1人がフロントエンドバックエンドを兼任、つまりフルスタックエンジニアとして働くことを余儀なくされるからです。

そのため、エンジニアもHTMLとCSSのスキルは必要となりますが、コーダーほど深い知識を持たなくても問題ありません。

というのも、Webページの実装も大事なのですが、それよりもエンジニアの主な役割は、「機能の実装」だからです。

「機能の実装」とは、例えば、APIを使ったデータのやり取りがそうです。

APIについて知りたい方は以下の記事で解説しているのでそちらを参照していただけたらと思います。

あわせて読みたい
【キャラ講義】デザイナー・ディレクターにもわかるAPI解説
【キャラ講義】デザイナー・ディレクターにもわかるAPI解説Web・アプリ開発に関わる必ず聞くと言っても過言ではない「API」について解説していきます。APIとはなんなのか、APIを使って何が出来るのかをキャラクター講義形式でわかりやすく解説します!...

HTMLとCSSの知識については、最低限のルールを覚えれば問題なくて、あとは参考になるサイトのコードを真似したり、「Bootstrap」というツールをつかうことで、キレイなWebページを作ることができます。

Bootstrapのようなツールを使うことで、キレイなWebページが作れるため、HTMLとCSSの深い知識は不要となるのです。

HTMLの学習コンテンツに関しては以下で用意しているので、学習コンテンツに用意されている内容を覚えれば問題ないでしょう。

あわせて読みたい
HTMLこのページは初心者向けのHTMLの学習コンテンツを揃えたページになります。随時必要な学習コンテンツの必要だと思われるコンテンツの追加と、詳細解説記事も追加していきます。...

CSSの学習コンテンツに関しては、まだ用意されていませんが順次アップしていくので、最終的には以下のリンク先に用意される学習コンテンツの内容を覚えれば良いでしょう。

あわせて読みたい
CSSこのページは初心者向けのCSSの学習コンテンツを揃えたページになります。随時必要な学習コンテンツの必要だと思われるコンテンツの追加と、詳細解説記事も追加していきます。...

HTMLとCSSの深い知識は必要ないと説明しましたが、フロントエンジニアJavaScriptに関してはそれなりの知識が必要となります。

というのも、Webブラウザで動くプログラミング言語は「JavaScript」のみで、APIを使ったバックエンドとデータのやり取りや、React, Vue.jsなどを使ったSPA(シングル・ページ・アプリケーション)はガッツリJavaScriptを使うことになります。

なので、なんとなくJQueryを使えるレベルではなく、JavaScriptの基礎を身に着けているのは前提として、Promiseを使った非同期処理や、Fetch APIを使ったAPIを使ったデータのやり取りは出来るようになっておきたいところです。

非同期処理APIを使ったデータのやり取りを行えるようになると、基本的には動的なWebサービスを作れるようになります。

動的」という言葉の意味がわからない方は、以下の記事で説明しているのでそちらを参照していただけたらと思います。

あわせて読みたい
会話で使われる用語パート2~フロントエンド~
会話で使われる用語パート2 ~フロントエンド~フロントエンドについての解説記事。HTML、CSS、JavaScriptでフロントエンドが構成されているが、HTML、CSS、JavaScriptがどのような役割を持っているのか先生と生徒の会話形式で一緒に学習しよう!...
あわせて読みたい
会話で使われる用語パート3~バックエンド~
会話で使われる用語パート3 ~バックエンド~今回はバックエンドの講義。前回学んだフロントエンドとバックエンドのデータのやり取りの流れ、Webサーバーとデータベースのデータのやり取りの流れなど、図も交えてつよぽん、みゆき、まことの3人で会話形式で学べる。...

バックエンドエンジニア

  • HTMLとCSSの最低限の知識があれば問題ない
  • Webフレームワークで使われるMVCの概念の理解
  • Webフレームワークで使われるプログラミング言語の理解
  • データベースの知識

フロントエンドエンジニアの章でもお話したように、会社によってはコーダーが存在せず、エンジニアが一人だけの場合があります。

そのときにはエンジニアがHTMLとCSSを書く必要があるので、そのためのHTMLとCSSの最低限の知識が必要になります。

「HTML・CSSの最低限の知識が必要」というのがフロントエンドエンジニアバックエンドエンジニアの共通部分になります。

それでは、フロントエンドエンジニアとバックエンドエンジニアの異なる点はどのような部分でしょう?

以下にフロントエンドエンジニアバックエンドエンジニア異なる点を挙げておきます。

異なる点
  • フロントエンドの主な役割
    • APIを使ってバックエンドに行って欲しい処理を依頼(リクエスト)
    • バックエンドから受け取った値(レスポンス)を元に動的なWebページを作ること
  • バックエンドの主な役割
    • APIを通してフロントエンドから来たリクエストを元に処理を行い、必要に応じてデータベースにデータを保存・データベースからデータの取得を行う。
    • 処理を行った結果をフロントエンドに返す(レスポンス)

リクエスト」「レスポンス」については以下の記事で説明しているので、わからない方は以下の記事を参考にしていただけたらと思います。

あわせて読みたい
Webサービスの基本的な仕組み
【図解付き】実例から学ぶ!Webアプリ・サービスの基本的な仕組みWebサービスの裏側がどうなっているか気になりませんか?実を言うとどのWebサービスも基本的には同じ仕組みで動いています。なので、Webの基本的な仕組みを理解すれば、全てのWebサービスの裏側を理解することにもなります。一緒にWebの裏側を学びましょう!...

上記の異なる点をまとめると、「フロントエンドは利用者」「バックエンドは提供者」ということになります。

フロントエンドは求めているデータをバックエンドに依頼(リクエスト)することで、データを取得して、それを利用してWebページを作り上げます。

バックエンドはフロントエンドからお願いされたリクエストを処理して、求められているデータを提供します。

この、バックエンドの行う「処理」と「データの提供」を実現するために必要な技術が、「Webフレームワーク」と「データベース」となるのです。

Webフレームワーク

Web開発の勉強をしていて、「Ruby on Rails」や「Laravel」という言葉を聞いたことがある人もいるのではないでしょうか?

Ruby on Rails」であればプログラミング言語Rubyを、「Laravel」であればPHPを使うので、必然的に利用するWebフレームワークのプログラミング言語の知識が必要となります。

この2つはWebアプリケーションを作る上で、よく使われる機能を提供するWebフレームワークと呼ばれるものになります。

よく使われる機能」とは次のようなものです。

よく使われる機能
  • ユーザーの新規作成機能(SNSなどのアカウント作成)
  • ログイン機能(会員サイトなど)
  • データの閲覧・投稿・編集・削除機能 (Twitter・Facebook・ブログ)

これらはどのWebサービスにも使われる機能です。

みんなが利用する機能を1人1人がゼロから実装するのは単なる時間の浪費に過ぎません。

それであれば、

みんなが使う機能は最初から用意されている方がみんな幸せだよね

の考えのもとWebフレームワークには最初からよく使われる機能が実装されているのです。

そして、このWebフレームワークは「MVC(モデル・ビュー・コントローラー)」という概念で構成されています。

MVCの詳しい解説はここでは割愛してますが、MVCの理解に参考になるサイトを以下に貼っておきます。

そして、Webフレームワークを使って、フロントエンドから求められる「処理」「データの提供」を行うのですが、さきほど挙げた以下の「よく使われる機能」で必要なツールがもう1つあります。

よく使われる機能
  • ユーザーの新規作成機能(SNSなどのアカウント作成)
  • ログイン機能(会員サイトなど)
  • データの閲覧・投稿・編集・削除機能 (Twitter・Facebook・ブログ)

それは「データベース」です。データベースは「データを保存する場所(ツール)」となります。

このデータベースに「ユーザー情報」「投稿したデータ」などを保存することで、動的なデータを実現することが出来ます。

データベースへのデータの保存やデータの取得・編集・削除は、さきほど説明したWebフレームワークを介して行われます。

このことから、バックエンドエンジニアには「Webフレームワーク」「Webフレームワークで使うプログラミング言語」「データベース」の知識が必要となってきます。

まとめ

ここまで話してきた内容を簡単にまとめておきたいと思います。

この記事のまとめ
  • Web開発者でも職種に応じて、力を入れるべきスキルが異なる
    • コーダー: HTML, CSSの深い知識が必要
    • フロントエンドエンジニア: 最低限のHTML, CSSの知識と、深いJavaScriptの知識
    • バックエンドエンジニア: 最低限のHTML, CSSの知識と、利用するWebフレームワークと利用するプログラミング言語、データベースの知識

上記スキルは仕事する前から全て身につけられる人はよほどの天才ではない限りむずかしいでしょう。

つまり、仕事しながらスキルを身につけていくのが一般的だと思います。

その際に、自分の目指しているエンジニア像として近いものは上記のうちどれかがわかれば、力を入れて学ぶべき内容と、軽く学べば良い内容ハッキリします。

基本的にどの職種もWebをやっている以上はHTMLとCSSの知識は必要となります。

しかし、フロントエンドエンジニアバックエンドエンジニアに関しては、HTMLとCSSの基礎部分をざっくり理解した後は、プログラミングの方に力を入れるべきでしょう。

目標としているエンジニア像から逆算して学習することで、効率よくエンジニアとして働けるレベルまで行けるようになるでしょう。

【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、「【学習コンテンツ】Web開発」と「【初心者向け】The Web Developer Bootcamp」で紹介している教材を使って学習を進めていただきます。

【学習コンテンツ】Web開発」に用意している学習コンテンツのスライドも「【初心者向け】The Web Developer Bootcamp」で紹介している教材をベースに作っています。

あわせて読みたい
【初心者向け】The Web Developer Bootcampはじめに 「The Web Developer Bootcamp」はWeb白熱教室の「学習コンテンツ」のベースとなっている教材です。 ...
あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

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