ENGINNER

【初心者向け】フロントエンドエンジニアとは?【解説シリーズ】

こんにちは。もんしょー(@sima199407)です。

悩んでいる人
悩んでいる人
フロントエンドエンジニアって何?どういうことをする仕事?

という疑問があるかと思います。

動画でも解説してます

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

今回は、フロントエンドエンジニアの仕事がどんなものかざっくり解説していこうと思います。

『フロントエンドエンジニアってどういう仕事か気になる』

『Webコーダーとどう違うのか?』

っていう質問を受けたりするんですね。

そこを説明していこうかなと思います。

もし、『フロントエンドエンジニアってどういう仕事なのかな?』って気になっている方いましたら、是非是非チェックしてみてください!

フロントエンドの主な業務

フロントエンドというのは表面の部分っていうことなんですが、どこの表面かというとユーザーなんですね。

ユーザーから見て表の部分になるべく近いところにいる人

これがフロントエンドの業務になります。

主な業務として、Webサービスのデザインの部分だったり、そういうコーディング(コードを書くこと )が主な業務なわけです。

例えば、デザイナーからもらったデザイン案をコーディングして作って動きをつけたりするっていうのが、ざっくりとしてWebフロントエンドのやるべきことですね。

それにプラスして、コーディングが終わった後にWebサービスが動くためにサーバーとか、裏側のデータベースといったところに紐づけるための架け橋の役割もします。

そのため、デザイナーさんと後ろのサーバー側の真ん中に立ってマネジメントというか、バランスを取っている人これがフロントエンドで、非常に大事な部分になってきます。

コーダーとの違い

ここで言うのはWebコーダーって言われるもので、どういう職業なのかというと

Webコーダーとは?

Webデザイナーがデザインした原案をWeb上で見られるような形に作り上げる作業を行う人

こういう人をWebコーダーと言います。

さっきの話で、フロントエンドエンジニアの主な業務はデザイン通りに動きをつけるとかコーディングをしていくと言いましたが、このWebコーダーの説明を読んで

あれ、これWebコーダーと似てない!?

みたいな感じで思われるかと思います。

コーダーとフロントエンドのどこが違うのか?

ここが結構疑問が生まれるかなと思います。

会社によっては兼務してたり、あんまり分けていないようなところがあって、あいまいだったりするんですが、ざっくりと大きな違いと言うと”プログラミング言語に触れるかどうか”っていうところが1つのポイントになってくると思います。

フロントエンドが触るプログラミング言語って言うと、JavaScriptやPHP、Rubyとかそこらへんの言語ですね。

サーバーサイドと言われる側で使われているような言語も触るというのがフロントエンドの特徴ですね。

純粋なJavaScriptだけじゃなくて、フロントエンドにはフレームワークやライブラリーと言われる非常に開発を優位に進めてくれるアイテムがあります。

JSのフレームワークやライブラリー

・jQuery(ジェークエリー)

・Vue.js(ビュージェイエス)

・React(リアクト)

・Angular(アンギュラー)

といったものがあり、そういったものも使います。

これは結構ロジックを組むなど色々やるべきことが多いのでコーダーさんと違っていて、コーダーさんはどっちかと言うとHTML、CSSでデザインを作っていく感じです。

フロントエンドはエンジニアって名前が付くぐらい色んなロジックを組んだり、動きをつけたいところを念入りにやっていくのが1つポイントになってきます。

まとめると、

・コーダー→コーディングまでが一応仕事

・フロントエンド→コーディング後サーバーサイド側の連携も考えるのも仕事

こういう風に思っていただければ、そこまで難しくないかなと思います。

目指すならこれをやるべき!3つのこと

「フロントエンドにこれからなりたい」

「フロントエンドのエンジニアとして、ちょっと活躍したい」

と思われる方だったら、まずは3つのステップをやっていけばいいかなと思います。

ここを押さえておけば割かし案件を取ったり、転職するのは難しくないという部分になりますね。

3つのステップ

1つ目が、HTML、CSSの理解。

2つ目が、JavaScript、jQuery の理解。

3つ目が、Vue.js または Reactの理解。

この3つをやっておくと非常に良いです!

とりあえず、CSSの中でもSass(サース)と言われる非常に管理がしやすくなるような書き方があるんですが、それもすごく学んでおくべきだと思います。

今すごく増えてます。

他のところだとCSSをまだ使ったりなどするんですけど、Web制作の会社とかに行くと結構見た目を綺麗にするとかコードを綺麗にするためにSassっていうものを使っているところが多いです。

そのため、これはぜひ勉強しておくべきですね。

2つ目と3つ目はJavaScript関連なんですが、ここが一番時間がかかるかなと思います。

勉強時間がかかる部分になってくるので、なるべく時間をかけてやっておくのがいいと思います。

ここは同じ言語なんですけど、ちょっとずつ違うのでそういった違いとかを見ながら「Vue.jsってこういう動きするんだな」「SPAってこういう意味なんだな」みたいな…

サーバーサイドって言われているのは、例えばPHPやRubyなどの裏でロジックを作るようなところですね。

あわせて読みたい
未経験からのIT転職に使える専門エージェントはここ【最初の3つで決まり】こんにちは。もんしょー(@sima199407)です。 という疑問があるかと思います。 私は学生時代からIT企業で仕...

フロント部分の重要が増えている

ここよりも、”フロントエンドの需要が高まってる”っていう部分があります。

その理由としては、サーバーサイドの動きって同じような動きをするので自動化されたりといった部分が多いので、デザインの部分とかで起こしたいというところでフロントエンドの重要性が高まっております。

さらに、JavaScriptを極めてるというかすごく精通している人ってあんまりいらっしゃらないんですよ。

フロントエンドエンジニアの業界を見ても。

そういった需要と供給がすごくあるものになるので、需要の部分で結構強くて高いので希少性があるんですね。

そこを狙っていくっていうのは、フロントエンドになっていく1つの理由としてはいいんじゃないかなと思います。

あわせて読みたい
【質問回答】JavaScriptから始めるのはアリ?【将来性、単価も説明】こんにちは。もんしょー(@sima199407)です。 こんな質問が届きました。 初心者がJavaScriptから始める...

まとめ

まとめ1つ目、フロントエンドエンジニアはデザイナーとサーバーサイドの架け橋

デザイナーさんからもらってきたデータを書き写して、動きをつけて、フロントの部分を作っていく。

そして、サーバーとの連携もちゃんとやっていく。

これがフロントエンドの仕事になります。

まとめ2つ目、プログラミング言語を触るということがコーダーとの違い

コーダーさんもコーディングの部分が一応主な仕事で、そこから先のところはフロントエンドがまとめて、その後にサーバーにパスをしていくっていうイメージです。

まとめ3つ目、需要が高まっている注目の職種

フロントっていう部分は、結構いろんな新しい言語っていうのが次々生まれてきているので、すごく注目な職種だと思いますね。

今回のまとめです。

・フロントエンドエンジニアはデザイナーとサーバーサイドの架け橋
・プログラミング言語を触るということがコーダーとの違い
・需要が高まっている注目の職種