どうも、つよぽんです！
以前ツイートした内容が少しバズり、Webエンジニアになりたいと思っている人が知りたい内容なのかなと思い、今回それに関する内容をまとめてみました。
僕(バックエンド寄り(Node.js)のエンジニア)の意見
・ HTML, CSSは書き方がわかればあとは良さげなコードを真似すればいける
・JQueryは使ってないけど、JSの基礎があればググればいける
・プログラミングの基本構文わかればググればいける
・MVCの理解本当に大事結論: 基礎があればググればいける https://t.co/qbR7N2VUMZ
— つよぽん@自由探求エンジニア (@tsuyopon_xyz) September 28, 2018
Webエンジニアとして働けるようになりたいけど何を学べば良いかわからない。
本、progate、ドットインストール、udemy、Railsチュートリアルとかいろいろ使って学習しているけど、実際にどの程度まで学習しなければいけないのかわからない。
今回はこのような疑問に、フリーランスでフルスタックエンジニアとして活動している僕の経験からお答えしていきたいと思います。
フルスタックエンジニアとは
Web開発でフロントエンドとバックエンドの両方を開発できるエンジニアのこと。一人でWebサービスを作ることが出来る。
個人的な経験からの解説記事となるので、エンジニアとして活躍するまでの1つの参考として読んでいただけたらと思います。
この記事の内容は次のとおりです。
- 僕のWebエンジニアになるまでの遍歴
- 実際に会社で働いてきて思うエンジニアに必要なスキルとは
目次
Webエンジニアになるまでの遍歴
エンジニア遍歴
まずは、僕がどのように会社でエンジニアとして働いてきて、フリーランスのフルスタックエンジニアになったとか簡単に自己紹介します。
- 未経験からiPhoneアプリエンジニアとなる
- Androidアプリの開発も行い、スマホアプリエンジニアとなる
- Webのフロントエンドの開発を行いフロントエンドエンジニアとなる
- Webのバックエンドの開発を行いバックエンドエンジニアとなる
- フリーランスのフルスタックエンジニアとなる。(バックエンドの仕事多め)
上記のうち①~④までが会社員時代にやってきたことですが、基本的にどれも未経験状態から仕事をスタートしています。
①に関しては完全未経験からスタートしたので、寝る以外の時間はプログラミングの学習と成果物を作ることを繰り返して、一番苦しい時期でした。
②~④に関しては、①で身につけたプログラミングの知識をベースに学習(=インプット)と仕事(=アウトプット)が出来たので、①と比べると比較的カンタンに習得できました。
実際に会社で働いてきて思うエンジニアに必要なスキルとは
今まで、さまざまなエンジニアの職種をやってきて思うのが、同じ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について知りたい方は以下の記事で解説しているのでそちらを参照していただけたらと思います。
HTMLとCSSの知識については、最低限のルールを覚えれば問題なくて、あとは参考になるサイトのコードを真似したり、「Bootstrap」というツールをつかうことで、キレイなWebページを作ることができます。
Bootstrapのようなツールを使うことで、キレイなWebページが作れるため、HTMLとCSSの深い知識は不要となるのです。
HTMLの学習コンテンツに関しては以下で用意しているので、学習コンテンツに用意されている内容を覚えれば問題ないでしょう。
CSSの学習コンテンツに関しては、まだ用意されていませんが順次アップしていくので、最終的には以下のリンク先に用意される学習コンテンツの内容を覚えれば良いでしょう。
HTMLとCSSの深い知識は必要ないと説明しましたが、フロントエンジニアはJavaScriptに関してはそれなりの知識が必要となります。
というのも、Webブラウザで動くプログラミング言語は「JavaScript」のみで、APIを使ったバックエンドとデータのやり取りや、React, Vue.jsなどを使ったSPA(シングル・ページ・アプリケーション)はガッツリJavaScriptを使うことになります。
なので、なんとなくJQueryを使えるレベルではなく、JavaScriptの基礎を身に着けているのは前提として、Promiseを使った非同期処理や、Fetch APIを使ったAPIを使ったデータのやり取りは出来るようになっておきたいところです。
非同期処理とAPIを使ったデータのやり取りを行えるようになると、基本的には動的なWebサービスを作れるようになります。
「動的」という言葉の意味がわからない方は、以下の記事で説明しているのでそちらを参照していただけたらと思います。
バックエンドエンジニア
- HTMLとCSSの最低限の知識があれば問題ない
- Webフレームワークで使われるMVCの概念の理解
- Webフレームワークで使われるプログラミング言語の理解
- データベースの知識
フロントエンドエンジニアの章でもお話したように、会社によってはコーダーが存在せず、エンジニアが一人だけの場合があります。
そのときにはエンジニアがHTMLとCSSを書く必要があるので、そのためのHTMLとCSSの最低限の知識が必要になります。
「HTML・CSSの最低限の知識が必要」というのがフロントエンドエンジニアとバックエンドエンジニアの共通部分になります。
それでは、フロントエンドエンジニアとバックエンドエンジニアの異なる点はどのような部分でしょう？
以下にフロントエンドエンジニアとバックエンドエンジニアの異なる点を挙げておきます。
- フロントエンドの主な役割
- APIを使ってバックエンドに行って欲しい処理を依頼(リクエスト)
- バックエンドから受け取った値(レスポンス)を元に動的なWebページを作ること
- バックエンドの主な役割
- APIを通してフロントエンドから来たリクエストを元に処理を行い、必要に応じてデータベースにデータを保存・データベースからデータの取得を行う。
- 処理を行った結果をフロントエンドに返す(レスポンス)
「リクエスト」「レスポンス」については以下の記事で説明しているので、わからない方は以下の記事を参考にしていただけたらと思います。
https://tsuyopon.xyz/2018/09/18/learn-basic-web-service/
上記の異なる点をまとめると、「フロントエンドは利用者」「バックエンドは提供者」ということになります。
フロントエンドは求めているデータをバックエンドに依頼(リクエスト)することで、データを取得して、それを利用して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の基礎部分をざっくり理解した後は、プログラミングの方に力を入れるべきでしょう。
目標としているエンジニア像から逆算して学習することで、効率よくエンジニアとして働けるレベルまで行けるようになるでしょう。
LINE登録で無料特典を受け取る
次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。
- Webエンジニアになりたいけど何から学習を始めれば良いかわからない
- 今まで独学で頑張ってきたけど、独学に限界を感じてきた
- プログラミングは出来るけど、大きめのコードが書けない
「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。
