WEBエンジニア 基礎知識 転職・キャリア

WEBエンジニアの仕事内容をざっくりと解説【作業フロー編】

※本サイトはPR表記を含みます。

悩む人
悩み: WEBエンジニアっていう職種が気になるけど、仕事の内容が今一つわからない所が多い。一体何をしているの?

WEBエンジニアって、WEB系っていってみたり、WEBプログラマーという言い方をしたり、色々な呼び名がありますね。
実際に、これからのキャリアとして、エンジニアへの道を検討している人のために、「WEBエンジニアの仕事内容」について、ざっくりと解説していきたいと思います。

プロジェクト計画と要件定義

WEBエンジニアの仕事内容における、最初のステップとしては、プロジェクトの計画と要件定義になります。これは会社の進め方によるかもですが、どういう仕様にするか詳細な設計を書き出すこともあると思います。

クライアント(上司や社内メンバーもシステム要望があればそれはクライアントと同義)の要望を理解し、システムや機能の要件を明確にします。この時にどれぐらいのチームを構成するかなど、人員の配置も行います。プロジェクトの目標や期限を設定し、達成するための計画を立てます。

デザインとユーザーインターフェース

次に、WEBエンジニアはウェブサイトやアプリケーションのデザインとユーザーインターフェース(UI)を作成します。が、これは分業の場合が多いです。

WEBエンジニアがデザインまで担当するケースは少ないです。WEBエンジニアはデザインなどを作成することはしないです(職業的にも分かれている)

ウェブサイト・システムのおおまかな方向性や、設計はやることはあっても、具体的なモック(イラレとかでデザインした見た目の試作品的な)はデザイナーに作ってもらって、出来上がってきたモックを元にミーティングで都度確認してもらい、デザイン・ユーザーインターフェースのゴールを目指します。その後、実際に動くもの(機能実装・プログラミング)にしてく、という流れになります。

昨今ではスマホが主流になっているので、パブリックな(一般公開する)ウェブサイトの場合レスポンシブ対応を考慮した設計になることがほとんどだと思います。

フロントエンド開発

フロントエンド開発では「HTML、CSS、JavaScript」などの技術を使用して、ウェブサイトやアプリケーションの見た目と動作を実装します。フロントエンドとは、前面という意味合いであり、ユーザーの入力であったり、処理の前段階的な意味合いも含まれているイメージで捉えると分かりやすいと思います。

HTML 自体の技術は不変的と決めつけるわけにはいかないですが、バージョンアップによって HTMLタグと呼ばれるブラウザで認識させる各タグが今のところ大きな変動をするわけではないので、「WEB初心者は必ず通るべき道・覚えておくべき言語」とも言えると思います。

CSS(カスケーディングスタイルシート)は主に画面の色やフォント、見た目のデザインをコードで表現するものです。ですが、素のCSSでは保守性に乏しく、Sass(サス) などを用いたコードの記述をすることで効率的な書き方ができるようになり(素のCSSよりコードが絡み合った状態になりにくい)保守性を上げることをしたりします。せめて、ある程度(簡単なサイト作成)をできるぐらいのCSS、もしくはCSSフレームワークと言われる Bootstrap(ブートストラップ)は扱える方がよいと思います。

あと、初心者にとって、一気に壁を感じやすくなる、フロントエンドの「機能」の部分を担当する Javascript(ジャバスクリプト) です。これは、人によりますが、好き嫌いが分かれると思います。プログラミングをし始めた人で、まだロクにプログラムを書けないのに「JavaScript めっちゃ好きやねんけど」って思える人は、将来有望かも。苦笑。より簡潔にコード表現ができる jQuery(ジェイクエリー) は個人的にまだ健在だと思っているし、最近では、フレームワークやライブラリ(例: React、Angular、Vue.js)の活用も多くなっています。

バックエンド開発

バックエンド開発では、ウェブサイトやアプリケーションの裏側で動作するサーバーサイドの処理を担当します。データベースの設計と連携、ユーザー認証やデータの処理など、安全性と効率性を考慮しながら機能を実装します。

WEBエンジニアにとって、一番スキルを深堀りする必要があるのが、このバックエンドに相当すると思います。WEBエンジニア職を探す際でも、バックエンド技術は最重要視される部分です。

SPA(シングルページアプリケーション)という手法(従来サーバーサイドで処理されていた多くの部分を画面遷移なしで、できるだけ一つのページで完結してしまおうという試みの開発)を React や Vue を駆使して開発+サーバーサイドもいけますーというようなエンジニアは重宝されると思います。まあ、開発スキルが高ければ、とにかく仕事はたくさんあるという風に考えてもらってよいと思います。

主要なプログラミング言語(例: PythonRubyPHPJava)やフレームワーク(例: DjangoRuby on RailsLaravel)がよく利用されます。(自分は Cakephp オンリーですが)

テストとデバッグ

開発が進むにつれて、1つの機能が、一定の単位まで作業を進めると、バージョン管理ツール(Git が有名)を用いた、他のエンジニアによるコードレビューが入ります。そこで、実装者が作った機能のコードのテストとデバッグを行います。

この部分が非常に重要で、コードが効率的で見通しがよく、書き方が理にかなっているのか、など、エンジニアの力量によりますが、コードの品質を上げる部分となります。

その後、バグやエラーを特定して修正し、システムが正常に動作することを確認します。他にも、テストコードを書いてから機能実装をするテスト駆動開発というものがあります。さまざまなテスト手法(ユニットテスト統合テスト受け入れテストなど)を通過して、最後に本番へリリースする形になります。

この辺りは、企業によって、または、CTO(最高技術責任者)の意向により、変わってくると思います。コードレビュー文化が存在する所はまだまだ少ない気がしているし、テスト駆動開発をデフォルトとしている企業も少ないと思います。(長期的視点では一番理にかなった開発手法だけど、開発の成果としてはテストコードを書きつつ、進めていくことになるのでかなりの工数がかかる。ということと、どこまでテストするのか?という尽きない境界線が悩ましい問題です)

当テーマは話すと長くなるので(汗)、初心者の方は「コード実装してから要件通りに機能するかのテストがある」という風にシンプルにイメージできればOKかと思います。

デプロイと運用

開発~テストが完了したら、ウェブサイトやアプリケーションを実際のサーバーにデプロイし、一般公開します。現在は JenkinsCircleCI を代表としたさまざまなデプロイツールというものがあり、Git(バージョン管理ツール)と連動し、本番リリースを任意に決めた変更点までをリリースしてくれます。(また、WEBエンジニアはそうした仕組みを把握する必要もあるし、時にはツールの構築や運用も担います)

最後に保守の部分ですが、運用中のシステムの監視やバージョンアップ、セキュリティ対策などの作業も行います。システムが安定稼働するようにチームで動き、安定してユーザーにサービスを利用してもらえるようにします。

まとめ

WEBエンジニア」という仕事の内容についてざっくり解説していきました。こうしてみてみると、結構幅広い知識とスキルが必要なのがわかると思います。プロジェクトの計画からデザイン、フロントエンド開発、バックエンド開発、テスト、デプロイ、運用まで、まじきちですが幅広いです。その割には年収が低いという日本のITに関する給料水準問題がありますが、それはまた別の機会でも話ができたらと思います。

とりあえず、WEB開発に興味があるのなら、やってみるべきだと思います。しばらく続けてみて、「全然合わないわーおもんないわー」だったら辞めればよし。「いや、それでもスキルガンガン磨くんや!」だったら続ければよし。そんな気軽さでいいんじゃないでしょうか。

-WEBエンジニア, 基礎知識, 転職・キャリア
-,