未経験者がWebエンジニアに転職するためのプログラミング学習方法

プログラミング

こんにちは。現役フリーランスWebエンジニアの@Masaweb4です。
元々はサーバーサイド。現在はフロントエンドエンジニアとして活動中で企業に常駐し開発業務に携わっています。

ぜひ、最後までご覧ください。

エンジニアと呼ばれる職業はかなり大きい括りになっています。

エンジニアを目指す人にとっては、どのようなエンジニアを目指すかによって学ぶ内容も違ってきます。

エンジニアの種類がどのくらいあるのかというのは僕も正直わかりません。

僕が知っているITエンジニアの種類だけでもいくつかありますが、同じエンジニアでも呼び方が違ったりするため少々ややこしかったりします。

今回の内容はそのエンジニアの中でも僕が現役で職業にしているWebエンジニアについて紹介したいと思います。

Webエンジニアになりたい。どうやってWebエンジニアになったのかなど学習方法になども説明していきたいと思います。

Webエンジニアとは

Webエンジニアという職業は、その名前の通りWebシステムを構築するエンジニアです。

同じようにWebの開発を行う人は、Web制作者とかWeb屋とか呼ばれたりもします。僕のイメージではWeb制作者とかWeb屋はどちらかというとデザイナーやコーダーなどを含めてWeb制作する人たちの総称といった感じです。

僕もHTML, CSSのコーディングもしていますし、要件定義などもします。Webに関することのいろんな業務に携わっています。僕もWeb屋かもしれません。

ただ開発をメインで行っているためWebエンジニア、Webプログラマという方が正しいと思います。

この後は僕が実際に行っているWebエンジニアとしての開発業務を中心に話していこうと思っています。

その前に一般的にWebエンジニアとして必要な知識について書いてみます。

Webエンジニアになるために最低限必要なこと

必要なプログラミング

WebエンジニアはWebの開発をするためWebについての知識が必要になりますが、WebエンジニアになるためにはWebページがどのようにしてブラウザに表示されるのかという仕組みくらいわかっていなければなりません。

例えば、Amazonのサイトで「Java」と検索すると検索した内容が画面に表示されます。

ブラウザで検索するとAmazonのサーバーに「Java」という検索キーワードが送られてデータベースから該当するデータが返却され、それが画面に表示されるという流れです。

Amazonの例で考えると、Webエンジニアは以下の流れの構築ができたらよいというのがわかります。

Webエンジニアが理解する部分

  • 1.どのように検索されたキーワードをサーバーに送るか
  • 2.送られたキーワードをどのように受け取るか
  • 3.受け取ったキーワードでどのようにデータベースを検索するか
  • 4.検索した結果をどのように返すか
  • 5.返ってきた結果をどのように受け取るか
  • 6.受け取った結果をどのように画面に表示するか

ざっくりですが、 Webエンジニアは1〜6の部分を一人で構築します。規模が大きいプロジェクトの場合は2,3,4はサーバーサイドエンジニアが担当し、1,5,6をフロントエンドエンジニアが担当したりします。

では実際にどのような言語を使い学んでいくのかを書いていきます。

現役Webエンジニアの僕がした勉強方法

プログラミング学習

僕は最初にホームページを作りたかったので、HTML,CSSでコーディングからはじめました。

HTML

HTMLタグは少しずつ順番に覚えていくとよいです。h1, h2, h3, div, p, span, section, form, inputなどよく使うタグはすぐに覚えられます。

簡単なHTMLやCSSからはじめて静的な画面から作り、少しずつ難しい画面を作る練習をしていきました。

WebエンジニアがどこまでHTML,CSSの理解が必要なのかというと基本的な部分が理解できているだけで十分かもしれません。

ただ僕のようにフロントエンドエンジニアとして仕事することが多い方はHTML,CSSのを使って0から画面のコーディングができるくらいのスキルが必要です。

HTMLはタグの種類は多いですがブラウザで他の人が書いたHTMLを見れるので、どのように書いているのか参考にしてスキルアップしていました。

とにかく書いて慣れるしかないです。特に本を読んだりしなくてもHTMLの説明しているサイトを見るくらいで十分かと思います。

CSS

CSSはWebページを見やすくレイアウトするために必要な言語です。CSSを使わないWebページは読みにくいぺーじになってしまいます。

CSSについてもHTMLを書きながら、h1のフォントの色をつけたり、フォントサイズを大きくしたりとスタイルを付けて見るという作業を繰り返していると自然と理解できます

慣れてきたらSassやlessといったCSSプリプロセッサと呼ばれる変数が使えたり、便利にCSSを書ける仕組みについて勉強してみると良いです。

最初はPCの画面のレイアウトから作り、慣れてきたらタブレット用、スマートフォン用の画面のレイアウトを作ってみると勉強になります。

JavaScript

JavaScriptはWeb開発では必須のプログラム言語です。サンプルのソースコードはたくさんあるので、とりあえず書いて動かしてみる。そして書いた内容を見て、どんなことをしていて動いているのかを確認する。

これを繰り返すだけでも、かなり進歩します。JavaScriptはHTML, CSSを操作したりする時に使うことが多いためHTML, CSSと一緒に覚えていってもよい言語です。

HTMLを書き、CSSでレイアウトを調整し,JavaScriptで変更してみる。こんな感じで練習するとWebページの操作に慣れてきます。

サーバーサイドエンジニアを目指す人は、ここはそれほど力を入れなくても良いかと思いますが、少し使えるくらいになっておくとWeb開発には役立ちます。

JavaScriptのフレームワーク、ライブラリではjQueryが多く使われてきました。JavaScriptはわからないけどjQueryなら書けますというエンジニアもいるくらい。

まだまだjQueryを使うプロジェクトも多いですが、最近はVue.jsやReack、Anglarなどを使うというところが増えているため、フロントエンド、サーバーサイドで担当が分かれるプロジェクトが増えています。

jQueryくらいまでならサーバーサイドのエンジニアでも対応できる人は多いですが、Vue.js、React、Angularあたりになると、しっかりと学習する必要があるためフロントエンドとサーバーサイドを一緒に担当するということが難しくなってきています。

それでもベンチャーでは、フロントエンドもサーバーサイドも書くというエンジニアは多いです。ベンチャーのエンジニアは好きとか嫌い、苦手、得意などといっている場合ではなく、何でも挑戦し成長するというエンジニアが多いです。

僕の場合は先に書いたようにサンプルをまねして書き、参考にしました。あとは本を読んで理解を深めレベルアップしていくといった感じです。JavaScriptの本は学べることが多いです。

サーバーサイド言語[Java, PHP, Ruby, Phython]

サーバーサイドの言語は早く覚えたい場合はPHPあたりがおすすめです。ベンチャーを目指す場合はPHP、Rubyから理解するとよいかと思います。

SIerはJavaが多いため目指す方向によって学ぶ言語を変えた方が良いかもしれません。

Javaはプログラム言語の基本を学ぶには一番良いのではと思っています。文法や型など考えてプログラミングを学べる言語だと思っています。時間をかけてじっくり学ぶ場合はおすすめです。

サーバーサイドの言語は基本の文法を本だったり、Webで学べるサイト(ドットインストール、Progateなど)で一通り触ってみると理解できます。

その後は、言語によって人気のフレームワークがあるためフレームワークの理解を深めることが必須となります。以下が言語別人気フレームワークです。

プログラム言語別人気フレームワーク

  • Java: Spring、SpringBoot
  • PHP: Laravel
  • Ruby: Ruby on Rails
  • Phython: Django

僕は基本的にフレームワークを理解する場合は、チュートリアルをやります。その後、理解を深めるために本を読みます。本で学ぶのがすきなので2冊、3冊と読んだりします

このやり方でフレームワークの基本を理解し、実践に入ります。現場によって微妙に違ったりする部分はあるため、現場の指示に従います。

SQL

サーバーサイドエンジニアの場合、プログラム言語の他にデータベースからデータを取得したり、更新したり削除するときに使用するSQLを理解しなければなりません。

SQLはデータベースによって少し違いがあったりしますが、基本的な書き方はそれほど変わりないということを理解しておきましょう。

SQL文を理解しておくと、データベースが変わってもフレームワークが変わっても「O/Rマッパー」と呼ばれるデータベースとプログラムの中間で変換してくれる機能が面倒な操作を簡単に処理してくれます。

ただO/Rマッパーを使うにしてもSQL文の理解が必要なのでプログラム言語の学習と一緒に学んでいくことがおすすめです。多くの本でも開発環境でデータベースの構築もするとおもうので、データの取得や更新、削除などの操作でSQLを使いながら理解を深めていきましょう。

Web開発でこれだけは使えるようにする必須ツール

Webツール

一人で開発の学習していると、他の誰かが自分と同じ部分のソースコードを変更したりすることがないため問題はありませんが、複数人で開発しているとソースコードの管理をしなければ自分で書いたソースコードを上書きされて消されるという問題が出てきます。

そのような問題が起こらないようにソースコード管理を行います。

Git

多くの現場ではソースコードのバージョン管理にGitを使います。他の誰かが自分と同じソースコードを更新するとわかるようになっているため、上書きしてしまう危険を回避することができます。

Gitの操作を誤ると他人のソースコードを消してしまい、相手に迷惑をかけるためGitの理解も必須となっています。

Gitは基本の操作、用語は理解しておくとよいです。リモートブランチ、ローカルブランチ、Push, Pull, marge, Commitあたりの基本操作を理解しておくと対応できると思います。

SourceTreeやTortoiseGitといったツールを使ったり、慣れるとコマンドで操作できるようになります。これは現場で教わりながら覚えました。

Subversion

SubversionもGitと似ているソースコードを管理するツールですが、最近はあまり使われていないという感じがします。

僕もここ5年くらいはSubversionを使っている現場には参画していませんが、古いシステムの改修などのプロジェクトの場合は使う可能性がありますが、もし未経験で始める場合はGitの方を学びましょう。

まとめ: 未経験者のプログラミング学習方法

本から学ぶ

プログラミングの学習方法は人によって違うかもしれませんが、僕は基本は「本」から学びます。学ぶ流れは以下のような感じです。

MEMO
  1. チュートリアルをやってみる
  2. ネットで学種サイト(ドットインストール、Progateなど)でサンプルを書く
  3. 本を読み理解を深める。(2、3冊は読む)

ネットだけで学ぶ人も多いですが、ネットの情報は古かったりするため僕は本の方が学びやすいです。また書いている人がどのような人かわからないということもあるため情報を信頼できるかわからないという理由もあります。

ちょっと調べるくらいの場合はよいのですが、しっかり学ぶ場合は本にしています。通勤中でも読めますし、効率良く学んでいきたいという理由もあります。

未経験の方は独学で学ぶのが難しい場合もあると思います。その場合はプログラミングスクールに通ったりできますが、仕事をはじめると自分で学習する必要があります。

独学で挫折してしまうという方はメンターがつくオンラインのプログラミングスクールがおすすめです。ご自分に合う講座があれば体験してみたりするとよいかもしれません。

プログラミングの学習方法を自分で身につけて成長していけるようにしてみてください。


MEMO
  1. 未経験の方は早めに目標を決めましょう。
  2. 何を作りたいか、どんなものを作りたいか考える。そしてそのために何を学ぶか調べます。
  3. あとは独学でやってみる(プログラムを書いてみる)
  4. 独学で実績(公開できるレベルのもの)を作れるなら転職活動・就職活動をしてみる。
  5. 難しい場合はスクールに通い実績を作り、早めに就職する。