こんにちは。もんしょー（@sima199407）です。
という疑問があるかと思います。
動画でも解説してます
フロントエンドエンジニアとは？
今回は、フロントエンドエンジニアの仕事がどんなものかざっくり解説していこうと思います。
『フロントエンドエンジニアってどういう仕事か気になる』
『Webコーダーとどう違うのか?』
っていう質問を受けたりするんですね。
そこを説明していこうかなと思います。
もし、『フロントエンドエンジニアってどういう仕事なのかな?』って気になっている方いましたら、是非是非チェックしてみてください！
フロントエンドの主な業務
フロントエンドというのは表面の部分っていうことなんですが、どこの表面かというとユーザーなんですね。
ユーザーから見て表の部分になるべく近いところにいる人
これがフロントエンドの業務になります。
主な業務として、Webサービスのデザインの部分だったり、そういうコーディング（コードを書くこと ）が主な業務なわけです。
例えば、デザイナーからもらったデザイン案をコーディングして作って動きをつけたりするっていうのが、ざっくりとしてWebフロントエンドのやるべきことですね。
それにプラスして、コーディングが終わった後にWebサービスが動くためにサーバーとか、裏側のデータベースといったところに紐づけるための架け橋の役割もします。
そのため、デザイナーさんと後ろのサーバー側の真ん中に立ってマネジメントというか、バランスを取っている人これがフロントエンドで、非常に大事な部分になってきます。
コーダーとの違い
ここで言うのはWebコーダーって言われるもので、どういう職業なのかというと
[box05 title="Webコーダーとは？"]
Webデザイナーがデザインした原案をWeb上で見られるような形に作り上げる作業を行う人
[/box05]
こういう人をWebコーダーと言います。
さっきの話で、フロントエンドエンジニアの主な業務はデザイン通りに動きをつけるとかコーディングをしていくと言いましたが、このWebコーダーの説明を読んで
『あれ、これWebコーダーと似てない！？』
みたいな感じで思われるかと思います。
コーダーとフロントエンドのどこが違うのか？
ここが結構疑問が生まれるかなと思います。
会社によっては兼務してたり、あんまり分けていないようなところがあって、あいまいだったりするんですが、ざっくりと大きな違いと言うと”プログラミング言語に触れるかどうか”っていうところが１つのポイントになってくると思います。
フロントエンドが触るプログラミング言語って言うと、JavaScriptやPHP、Rubyとかそこらへんの言語ですね。
サーバーサイドと言われる側で使われているような言語も触るというのがフロントエンドの特徴ですね。
純粋なJavaScriptだけじゃなくて、フロントエンドにはフレームワークやライブラリーと言われる非常に開発を優位に進めてくれるアイテムがあります。
[box03 title="JSのフレームワークやライブラリー"]
・jQuery(ジェークエリー)
・Vue.js(ビュージェイエス)
・React(リアクト)
・Angular(アンギュラー)
[/box03]
といったものがあり、そういったものも使います。
これは結構ロジックを組むなど色々やるべきことが多いのでコーダーさんと違っていて、コーダーさんはどっちかと言うとHTML、CSSでデザインを作っていく感じです。
フロントエンドはエンジニアって名前が付くぐらい色んなロジックを組んだり、動きをつけたいところを念入りにやっていくのが１つポイントになってきます。
まとめると、
・コーダー→コーディングまでが一応仕事
・フロントエンド→コーディング後サーバーサイド側の連携も考えるのも仕事
こういう風に思っていただければ、そこまで難しくないかなと思います。
目指すならこれをやるべき！３つのこと
「フロントエンドにこれからなりたい」
「フロントエンドのエンジニアとして、ちょっと活躍したい」
と思われる方だったら、まずは３つのステップをやっていけばいいかなと思います。
ここを押さえておけば割かし案件を取ったり、転職するのは難しくないという部分になりますね。
[box03 title="３つのステップ"]
１つ目が、HTML、CSSの理解。
２つ目が、JavaScript、ｊQuery の理解。
３つ目が、Vue.js または Reactの理解。
[/box03]
この３つをやっておくと非常に良いです！
とりあえず、CSSの中でもSass(サース)と言われる非常に管理がしやすくなるような書き方があるんですが、それもすごく学んでおくべきだと思います。
今すごく増えてます。
他のところだとCSSをまだ使ったりなどするんですけど、Web制作の会社とかに行くと結構見た目を綺麗にするとかコードを綺麗にするためにSassっていうものを使っているところが多いです。
そのため、これはぜひ勉強しておくべきですね。
２つ目と３つ目はJavaScript関連なんですが、ここが一番時間がかかるかなと思います。
勉強時間がかかる部分になってくるので、なるべく時間をかけてやっておくのがいいと思います。
ここは同じ言語なんですけど、ちょっとずつ違うのでそういった違いとかを見ながら「Vue.jsってこういう動きするんだな」「SPAってこういう意味なんだな」みたいな…
サーバーサイドって言われているのは、例えばPHPやRubyなどの裏でロジックを作るようなところですね。
https://simablog.net/no-experience-agent/
フロント部分の重要が増えている
ここよりも、”フロントエンドの需要が高まってる”っていう部分があります。
その理由としては、サーバーサイドの動きって同じような動きをするので自動化されたりといった部分が多いので、デザインの部分とかで起こしたいというところでフロントエンドの重要性が高まっております。
さらに、JavaScriptを極めてるというかすごく精通している人ってあんまりいらっしゃらないんですよ。
フロントエンドエンジニアの業界を見ても。
そういった需要と供給がすごくあるものになるので、需要の部分で結構強くて高いので希少性があるんですね。
そこを狙っていくっていうのは、フロントエンドになっていく１つの理由としてはいいんじゃないかなと思います。
https://simablog.net/beginning-javascript/
まとめ
まとめ１つ目、フロントエンドエンジニアはデザイナーとサーバーサイドの架け橋
デザイナーさんからもらってきたデータを書き写して、動きをつけて、フロントの部分を作っていく。
そして、サーバーとの連携もちゃんとやっていく。
これがフロントエンドの仕事になります。
まとめ２つ目、プログラミング言語を触るということがコーダーとの違い
コーダーさんもコーディングの部分が一応主な仕事で、そこから先のところはフロントエンドがまとめて、その後にサーバーにパスをしていくっていうイメージです。
まとめ３つ目、需要が高まっている注目の職種
フロントっていう部分は、結構いろんな新しい言語っていうのが次々生まれてきているので、すごく注目な職種だと思いますね。
今回のまとめです。
・フロントエンドエンジニアはデザイナーとサーバーサイドの架け橋
・プログラミング言語を触るということがコーダーとの違い
・需要が高まっている注目の職種