未経験からITエンジニアを目指す方に対し、本稿ではITエンジニアの職種や必要な基礎知識について説明します。フロントエンドとバックエンドの違いを理解し、学習ロードマップやキャリアパスを学ぶことで将来のイメージを具体化することで、何から始めてよいかわからない状態から抜け出し、途中で挫折することを防げます。
はじめにITエンジニアの職種ソフトウェアエンジニアフロントエンドとバックエンドの実例各領域のスキルや基礎知識フロントエンドエンジニアの基礎知識学習ロードマップウェブの基礎HTML/CSS/JavaScriptレスポンシブデザインとブラウザの互換性モダンなフロントエンドフレームワークテストバックエンドエンジニアの基礎知識学習ロードマッププログラミング言語データベースとSQLHTTPとRESTサーバーとデプロイメントWebセキュリティ共通する基礎知識プログラミングの基本GitとGitHubインターネットの基本問題解決スキル英語（翻訳ツールの活用力）まとめ参考
はじめに
ITエンジニアの職種や必要なスキルは解釈の幅が大きく、人によって指すものが違ったりします。本稿では昨年IPAが発表した デジタルスキル標準 で利用される言葉の定義を基に説明を行います。標準に沿って説明することで、解釈の違いが発生しにくいようにし、より詳細を知りたいときは元の資料をあたれるようにしています。
IPA（情報処理推進機構）は、日本の情報処理に関する技術開発及び人材育成を促進するための独立行政法人です。デジタルスキル標準（DSS）の策定や、高度IT人材の育成と評価を行う「情報処理技術者試験」の運営などを行なっています。資料が硬くて読みにくいのが難点ですが、情報の質は非常に高いので押さえておくと良いでしょう。
ITエンジニアの職種
スキル標準の中ではロールの分類としては大きく5つあります。
自分は ソフトウェアエンジニア としての経験が10年以上あり、スキルについて詳しく説明できるため、以降はソフトウェアエンジニアの必要な知識について説明していきます。
ソフトウェアエンジニア
この文章では、ソフトウェアエンジニアは4つの種類に分けられています。
- フロントエンドエンジニア
- バックエンドエンジニア
- クラウドエンジニア/SRE
- フィジカルコンピューティングエンジニア
特に疑問が多いフロントエンドエンジニアとバックエンドエンジニアの役割について、具体的な開発の例を用いて説明します。
フロントエンドとバックエンドの実例
ただ言葉で説明するだけでは難しいので、例としてWebブラウザやiPhone/Androidのアプリで使用できるサービスを挙げ、それぞれのエンジニアがどのような役割を果たし、どのように実装を進めていくのかを説明します。
では、まず、オンラインショッピングサービスを例に考えてみましょう。これは、Webブラウザからも、iOSやAndroidのアプリからもアクセス可能です。
このようなサービスの構造を簡単に描くと、以下のようになります。各要素間でデータのやり取りが行われる経路を線で示しています。
graph LR subgraph フロントエンド A[iPhone] B[Android] C[Webブラウザ] end subgraph バックエンド D[サーバー] E[データベース] end A --- D B --- D C --- D D --- E
フロントエンドエンジニアの仕事は、ユーザーが直接触れる部分、すなわち商品のリスト表示、商品詳細ページ、カートへの追加機能、購入手続きのインターフェースなどの実装です。これらはWebではHTML、CSS、JavaScriptを用いて作成しますが、iOSではSwift、AndroidではKotlinやJavaなどを使って実装します。
例えば、ユーザーが商品のリストを閲覧し、気になる商品をタップするとしましょう。すると、フロントエンドのコード（WebならJavaScript、iOSならSwift、AndroidならKotlinなど）がそのタップイベントを検知し、商品詳細ページを表示するために必要なデータをサーバーにリクエストします。
graph LR subgraph フロントエンド A[iPhone] B[Android] C[Webブラウザ] end subgraph バックエンド D[サーバー] E[データベース] end A --> D B --> D C --> D D --- E
そのリクエストがバックエンドのサーバーに到達したら、バックエンドエンジニアが実装したプログラムが動き出します。サーバーはデータベースに問い合わせを行い、指定された商品の詳細情報を取得します。
graph LR subgraph バックエンド direction LR D[サーバー] E[データベース] end D --> E
そのデータは適切な形式（一般的にはJSON）でフロントエンドに送り返され、フロントエンドのコードがそれを用いて商品詳細ページを表示します。
graph RL subgraph フロントエンド A[iPhone] B[Android] C[Webブラウザ] end subgraph バックエンド D[サーバー] E[データベース] end D --> A D --> B D --> C E --> D
これらは一例で、フロントエンドエンジニアとバックエンドエンジニアが協力してWebサービスやアプリを機能させる典型的なシナリオです。各エンジニアの役割はサービスやシステムの要件により異なりますが、基本的な役割分担はこのようになります。
次は各領域におけるスキルや基礎知識について見ていきます。
各領域のスキルや基礎知識
IT業界の進歩は速く、それぞれの分野のスキルや基礎知識のトレンドも頻繁に変わります。最新のトレンドを掴むために、Roadmap.shというウェブサイトを参照しながら説明します。
*Roadmap.sh*は、Web開発に関わる職業のための学習ロードマップを提供しているウェブサイトです。これらのロードマップは、特定の職業を目指す人々が自分のキャリアパスを計画し、必要なスキルや知識を身につけるためのガイドラインを示しています。
それぞれのロードマップは、該当する職業に必要なスキル、知識、ツール、技術を詳細に視覚化しています。これにより、初心者から上級者まで、自分のレベルに合わせた学習が可能です。
フロントエンドエンジニアの基礎知識
フロントエンドエンジニアとは、ユーザーが直接触れるWebアプリケーションのユーザーインターフェースを設計・開発するエンジニアを指します。フロントエンドエンジニアの基本的なスキルセットには、HTML、CSS、JavaScriptが含まれます。さらに、より高度なスキルとして、各種フレームワークやライブラリ（React.js、Vue.js、Angular.jsなど）、バージョン管理システム（Gitなど）、APIとの連携、パフォーマンス最適化などが求められます。
学習ロードマップ
フロントエンドエンジニアが学ぶべきスキルや知識、採用するべきテクノロジーについては、Frontend Developer Roadmap に記載されています。下記にロードマップを引用します。
項目が多すぎて何からやればさっぱりわからないですね。
この中から特に未経験者に向けて必要なものを抜粋して説明してきます。
ウェブの基礎
フロントエンド開発を始める前に、インターネットがどのように機能するか、基本的なウェブ開発の仕組みについて理解しておくことが重要です。これには、DNS、HTTP、ブラウザ、DOMといった基本的なウェブの概念が含まれます。
HTML/CSS/JavaScript
フロントエンド開発の3つの基本的な要素です。HTMLはウェブページの構造を定義し、CSSはスタイルやレイアウトを制御し、JavaScriptは動的な機能を追加します。これらのテクノロジーはウェブ開発の根幹であり、フロントエンドエンジニアとしてはこれらの基礎をしっかり理解することが重要です。
レスポンシブデザインとブラウザの互換性
ウェブアプリケーションは様々なデバイスとブラウザで正しく動作するように設計されている必要があります。レスポンシブデザインとは、異なるデバイスサイズでの閲覧に対応したウェブページの設計方法です。また、各ブラウザの特性と互換性について理解しておくことも重要です。
モダンなフロントエンドフレームワーク
現在のフロントエンド開発では、React.js、Vue.js、Angular.jsなどのフレームワークやライブラリが広く使用されています。これらのツールはコンポーネントベースの開発を可能にし、大規模なアプリケーションの構築と保守を容易にします。
テスト
コードが期待通りに動作することを確認するために、ユニットテスト、統合テスト、エンドツーエンドテストの理解と実施が必要です。
バックエンドエンジニアの基礎知識
バックエンドエンジニアとは、主にウェブアプリケーションのサーバー側の開発を行うエンジニアのことを指します。バックエンドエンジニアの主な仕事は、データベースの設計と管理、サーバーとクライアント間の通信の管理、ビジネスロジックの実装、APIの設計と開発などです。
学習ロードマップ
バックエンドエンジニアとして必要な知識とスキルの詳細は、Backend Developer Roadmapに詳しく記載されています。
同様に項目が多すぎですね。特に未経験者に向けて必要なものを抜粋して説明してきます。
プログラミング言語
バックエンドエンジニアとして最初に選ぶべきは、使用するプログラミング言語です。Python、Java、JavaScript（Node.js）、Ruby、PHP、C#など、様々な言語があります。選択する言語はプロジェクトやチームの要件、個人の興味や目標によります。
エンタープライズの現場ではJavaが選択されることが多いように思います。SpringBootというデファクト（ほぼ標準として）となっているフレームワークがあり、提供される豊富な機能が開発現場との相性が良いためです。
データベースとSQL
ほとんどのウェブアプリケーションは何らかの形でデータを保存し、操作します。そのため、データベースの理解は不可欠です。SQL（構造化クエリ言語）は、リレーショナルデータベースとやり取りするための標準的な言語で、これを理解することは重要です。
HTTPとREST
HTTPはウェブ通信の基本で、RESTはAPIを設計する際の一般的なアーキテクチャスタイルです。バックエンドエンジニアとして、これらのプロトコルと原則を理解し、適切に使用することが求められます。
サーバーとデプロイメント
アプリケーションをデプロイ（公開）するためには、サーバーとデプロイメントについての理解が必要です。これには、Linuxの基本的なコマンドやネットワークの基礎知識、さらにはDockerやKubernetesといったコンテナ技術の知識が含まれます。
Webセキュリティ
バックエンドエンジニアとして、ウェブアプリケーションを安全に保つための様々なセキュリティ原則とベストプラクティスを理解することが重要です。これには、認証と認可、データ保護、セキュリティヘッダー、クロスサイトスクリプティング（XSS）、SQLインジェクションなどの対策が含まれます。
共通する基礎知識
各領域の専門的な知識も重要ですが、共通する基礎知識はより重要です。
これらの項目を最初に押さえておけると、専門的な知識の習得でつまづくことも少なくなると思われます。
プログラミングの基本
エンジニアとして最も基本的なスキルは、プログラミングの基本を理解することです。変数、データ型、条件分岐、ループ、関数といった基本的な概念を理解し、一つのプログラムを書けることが求められます。
GitとGitHub
Gitはソースコードの変更履歴を管理するためのツールであり、GitHubはこのGitを使ったプロジェクトを公開・共有するためのプラットフォームです。これらを使って、ソースコードのバージョン管理やチームでのコード共有が行えるようになることは、プロのエンジニアに必須のスキルです。
インターネットの基本
インターネットがどのように動作しているのかを理解することも重要です。例えば、Webサイトを見るときに何が起きているのか、またはURLが何を意味しているのかなど、基本的な知識があると役立ちます。
問題解決スキル
プログラミングは基本的には問題解決のプロセスです。エラーをデバッグする技術や、新しい技術を学ぶためのリサーチ能力、そして自分が直面している課題に対する最適な解決策を見つけ出す能力は、全てのエンジニアに共通して必要とされるスキルです。
英語（翻訳ツールの活用力）
インターネット上のドキュメントの９割以上は英語で書かれています。プログラミング言語やフレームワークのドキュメントも同様に英語で書かれており、日本語のドキュメントは提供されていないことが多いです。
英語をスラスラ読める必要はないのですが、Google翻訳などのツールを活用して多少不自然でも公式の情報や英語で発信される情報を読むことで、日本語のドキュメントからは得られない情報が得られるようになります。
まとめ
未経験者がITエンジニアになるための第一歩を踏み出すのに役立つガイドとして、この記事を作成いたしました。ITエンジニアの世界は広大で、学び始めるのは難しいかもしれません。
フロントエンドエンジニアとしてユーザーインターフェースを作り上げ、直接ユーザー体験に影響を与えることに興奮を感じるかもしれません。また、バックエンドエンジニアとしてアプリケーションの核心的な部分を構築し、サーバーとデータベースの運用に携わることが魅力的に感じるかもしれません。
どちらの道を選んでも、Web開発のトレンドを把握し続けることが大切です。そのために、「Roadmap.sh」のようなリソースが役立ちます。これは、どのスキルを習得すべきか、何を学べば良いのか、どの順番で進むべきかを示してくれます。
重要なことは 楽しんで学ぶこと だと思います。一歩一歩前進すれば良く、一度に全てを理解する必要はありません。学びは積み重ねであり、最も重要なことは始めること、そして進み続けることです。
学習を進める上で悩むことがありましたら、メッセージを頂けるとありがたいです。この記事に関する質問でも、より専門的な質問でもなんでも構いません。可能な限り回答いたしますので、お気軽にご連絡ください。
参考
プログラミングのメンターサービスを提供中！まずはお気軽にご相談ください
この記事の著者mosugi
Web系の企業でITエンジニアとして働いて12年になる、プライベートでは子育てに奮闘する3児の父です。仕事の傍らで子供たちとプログラミングを楽しむ方法を日々模索しています。
運営者について記事一覧
HTML5で一般的に使用される基本的なタグを学ぶ
HTMLとは、ウェブページを作成するための言語です。テキスト、画像、ビデオなどの情報をどのように表示するかを指定します。代表的なHTMLタグを利用して作成されたサンプルコードを基にして、HTMLを学びます。
HTML
Notionでそのままプレゼン！Chrome拡張機能による資料作成術📊
Chrome拡張機能のNotion Presentationを使ってプレゼンテーションを行う方法を紹介します
プログラミングで開発ができるパソコンは数万円の中古ThinkPadがおすすめ
中古市場で数万円程度で購入できるため、初心者や学生でも手軽に導入できます。また、ThinkPadは耐久性が高く、長期間使用することができるため、コストパフォーマンスが優れています。
パソコン
プログラミング
SmalRubyでScrachからRubyを学ぶ
SmallRubyは、学習用のプログラミング言語です。この言語は、Ruby言語をベースにしており、初心者が簡単にプログラミングを学ぶことができるように設計されています。SmallRubyは、Ruby言語の基本的な文法を抽象化し、より直感的に操作できるようにしています。 SmallRubyを使用することで、初心者が簡単にプログラミングを学ぶことができます。
Scratch
Ruby
カテゴリ一覧
