WEBエンジニア 基礎知識

【目指せフルスタック①】フロントエンドとバックエンドエンジニア

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

悩む人
WEBエンジニアになっても、将来どこを目指せばいいの？WEB開発にも色々役割あるよね？この辺りも知りたい。

 

では、その疑問に答えましょう。

 

WEB開発業務には大まかな役割があります。初学者の方に向けて、その役割についてのお話です。

また、結論として、WEBエンジニアの長期的なキャリアは「フルスタックエンジニア」を目指したいという考えに向かいます。

 

WEB開発の役割についてのツイートは以下。

フロントエンドエンジニアとバックエンドエンジニアについて見ていきます。

 

スキルを掛け合わせてフルスタックエンジニアを目指せ

結論から話をすると、多彩なスキルを掛け合わせたエンジニアが希少な人材となり、重宝されます。

 

フルスタックエンジニアはWEB開発において「何でも屋」です。

一人でできる幅が広いのでフリーランスとして独立もしやすいです。

 

ただし、スキルは一朝一夕で身に付くものではありません。

限られている時間の中で「どうキャリア積んでいくのか」を意識するようにしておいた方が良いと思います。

 

ちなみに僕は、30代からWEBエンジニアを始めて、自身のキャリアについて深く考えた事があまりなかったです。

たまたま、行き当たりばったりで色んな経験をすることができたのはラッキーでした。でも、今振り返ってみれば、

 

キャリアについて(何を学ぶかについての明確な目標)はもっと深く考えるべきだった。

 

と感じています。

 

読者の方で、年齢が若い方もいると思います。

時間をお金よりも大切な資産です。

WEBエンジニアとして長期的なキャリアを考えるなら、

 

必ず何を目指すのか、明確な目標を立てておいた方が良いです。

 

時間は戻りません。今は情報社会です。

たくさんの情報の中からヒントを得て、自身のキャリアについて、しっかりと考えていきましょう。

 

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

フロントエンドエンジニアとは、主に、

HTMLとCSSとJavaScriptを駆使して、WEBページをコーディングしていく

業務を指します。

 

フロントエンドの役割は「人の目に見える処理範囲」※WEBページ自体を指します。

だと考えておけば良いです。

 

名前からもわかるように「フロント」=「正面、見た目」のような捉え方でOKです。

一昔前までは、上記の3つ(HTML / CSS / JavaScript)を覚えておけば、重宝されていました。

ですが、昨今のWEBアプリケーションはインターネットの普及で、より高品質なものが求められる傾向になっています。

 

今のWEB開発の多くは、PC以外にスマートフォンにも対応させる「レスポンシブデザイン」も採用しなければいけません。

これについても、一昔前はPC用と携帯用は別々でコーディングされていました。

それだとファイル数が多くなり、メンテナンスや開発効率が悪いので「レスポンシブデザイン」という開発手法が登場しました。

 

更に、現在のWEB開発は各ツールを上手く活用する必要があります。

 

HTMLは、さほど昔と変わっていませんが、レイアウトなどを定義するCSS(カスケーディング・スタイル・シート)はソースが複雑になりやすい問題があります。

メンテナンスが大変なので、より見通しの良いコードを書けるようにSass(サス)というCSSの拡張言語を学ぶ必要性が出てきました。

 

また、CSSのコードの書き方に対し、BEM(ベム)などといった命名規則もあり、

「どのようにスタイルシートを記述すればメンテナンスしやすくなるか」

といった部分を学ぶ必要があります。

 

フロントエンドエンジニアにとって、JavaScriptは一気に壁が高くなります。なぜなら、

JavaScriptは本格的なプログラミング言語

だからです。プロトタイプ型とか、ここではそんな小難しい話は置いておきましょう。

 

勉強の仕方としては、文法(書き方など)から本格的に学ぶ必要があります。

JavaScriptの役割は、

 

静的なHTMLページを動的なページとして機能を追加する役目

 

があります。（例えば、登録ボタンを押すと、最終確認アラートを出すなど。）

 

また、JavaScriptだけでコードを記述すると冗長な記述になってしまいやすく、

WEB開発では、より容易に記述できるようにjQueryというライブラリを使用するのが主流でした。
※今後はフレームワークの採用が主流になっていきそうです。

 

最近では、SPA(シングルページアプリケーション)というユーザー操作をより便利にするため、

一つのページでたくさんの処理を行うことを目的としているアプリケーションの開発が多くなっています。

代表的なWEBアプリケーションとして「チャット」などになります。

 

SPAなどをjQueryで記述すると、更に多くの開発工数がかかってしまうこと、

コードのメンテナンスが大変になる背景から、フレームワークというものが登場します。

たくさん種類がありますが、最近、案件で良く目にするのは、Vue.jsとReactになると思います。

 

僕はWEBエンジニアを始めて、約10年程になりますが、たった10年で開発の形が大きく変わりました。

また、開発効率を求めて、フロントエンドエンジニアが学ぶべきことは格段に増えました。

こうした背景を知らないと、初学者の方は一体何から学べば良いのかわからなくなってしまうと思います。

 

ですが、大事なことは、

 

「効率化」を求めた結果、色んな技術的選択肢が増えた。

 

ということはシンプルに覚えておくようにしましょう。

 

それと、基本は昔と変わりません。まず、

「HTML5・CSS3・JavaScript」

を学べば良い。ということを肝に銘じておきましょう。

 

また、実際は違いますが、「JavaScript = jQuery」という感覚で構いません。僕はその認識で困ったことはないですから。

JavaScriptの基本的な文法・概念を学んだ後は、すぐにjQueryの書き方を覚える方が効率的な書き方ができます。

業務運用でWEB稼働しているJSはjQueryがまだまた多いです。ですので、その方が実務的です。

 

その後、

「もっと沢山の動的機能が必要だ」

ということになれば、JSフレームワークのVue.jsやReactなどを学べば良いのです。

 

WEB開発の各技術は問題解決の手段です。

「何が流行っているのか」

という形だけにとらわれないようにしましょう。

 

バックエンドエンジニアとは

バックエンドエンジニアとは、シンプルに言うと、

 

「プログラムでデータを扱うこと」

 

だと考えて良いです。

以下、ツイートです。

バックエンド処理とは、WEBブラウザ(クライアント)とサーバーとのやりとりに使う、HTTPメソッド(GET / POST / PUT / DELETE)を駆使します。

 

例えば「画面遷移時にデータベースにデータを挿入する処理」などがメインになります。

 

後は、他のシステムと連携を行うためのAPI(アプリケーション・プログラミング・インターフェース)の開発といった所でしょうか。

 

僕は「何のプログラミング言語を学べば良いか？」という問いには、

単純に興味を持ったもの、単に就職先で使われてたから、という理由でも構わないと考えています。

最初は何のプログラミング言語が良いのか、そもそも知らないのに選べるわけないですから。

 

もし、選ぶのであれば、検索で「プログラミング　ランキング」とかで、

WEB系の上位の言語を選べば間違いないです。

 

僕は未経験からの就職先がPHPを主体としていたので、PHPを学ぶことになりました。

で、今も主にPHPをやってます。

 

プログラミングについて、大切だなと思うことは、

 

「プログラムをとりあえず書く」

 

ことです。間違えまくって上手くなっていきます。

 

以下、ツイートもしました。

バックエンドエンジニアもプログラミング言語の文法は当然覚えなければいけません。

また、フレームワークも多彩に存在し、長期的なメンテナンスなどを考慮すると、

できるだけ主流なフレームワークを採用して、それをベースに開発していくことが求められます。

 

フレームワークを採用するメリットはたくさんあるので、それはまたの機会に話します。

「開発では必ず求められるスキルなのだな」ということは認識しておきましょう。

 

✅ 最後に

今回はフロントエンドエンジニアとバックエンドエンジニアについて、僕なりの視点で考えてみました。

難しい言い回しは極力避けていますが、初学者の方にはそれでもイメージが伝わりにくいかもしれません。

また、他にもWEB開発業務は大きく分けてWEBデザインとインフラエンジニアの業務領域がありますので、次回はそのあたりも見ていきたいと思います！

 

✅ 続きの話はコチラ

おすすめ
【目指せフルスタック②】WEBデザイナーとインフラエンジニア

続きを見る

-WEBエンジニア, 基礎知識
-,