LoginSignup
13

More than 5 years have passed since last update.

マークアップコーダーとフロントエンドエンジニアの決定的な違い

Last updated at Posted at 2018-12-10

マークアップコーダーとフロントエンドエンジニアの決定的な違いを調べて見ました。

調べたきっかけは、会社で一番凄いフロントエンドの方が、自分の書いたjQueryを「余計な記述多いから、最適化して表示速度をあげよう!」と言って作業してくれたことです。

フロントエンドに興味をもったきっかけの会話

(自分が書いたjQueryのアドバイスをいただいていたときのこと)

最強のフロントエンドの先輩曰く・・・

「jQueryを書くときは、「プラグイン」を選んでから記述しちゃダメだよ。
どういう動きにしなければいけないのか!目的から要件定義・設計をする。その設計を、いちから構築するのがすごく時間がかかるときに、プラグインを使用するんだ。
はじめからプラグインありきで作業してると、同じ記述が多くなって表示速度が遅れたり、jsがバッティングしてトラブルが起きたりするから気をつけて。」

そして、話がかわり・・・

「えっ!?マークアップとフロントエンドの違い?
そりゃー決定的に違うでしょ。そもそも、マークアップはプログラマーとは呼ばないからね。マークアップもjQueryとかJavaScript使ったりするけど、フロントエンド名乗るなら、jsのフレームワークが使えるレベルじゃないとね。」

というわけで・・・

結論

フロントエンドを名乗りたいなら、jsのフレームワークを使えるようになれ!

フロントエンドを名乗るその前に・・・

・生のJavaScriptを勉強するべし
・目的から設計をしたjQueryを書けるようになるべし

フリーランス案件情報で、職種と案件と必須スキルを調べてみる

▼職種
フロントエンド・マークアップエンジニア

▼案件
ECサイトリニューアル

▼必須スキル
PHPを使用しての開発経験
ECサイトの開発経験

▼尚良
JavaScript、CSSなどフロントエンドに強い

====================

▼職種
フロントエンド・マークアップエンジニア・webデザイナー

▼案件
ECサイトのリニューアル

▼必須スキル
・WEB製作の実務経験
・Photoshop、Illustratorが使える方
・JavaScript、CSS 等フロントエンド開発に強い方

▼尚良
・SEO、ユーザビリティの基本的な知識

====================

▼職種
フロントエンド・マークアップエンジニア

▼案件
インターネットサービスのフロント開発や、新規サービス開発に携わって頂きます。

・Slim、 Sass、PostCSS、JavaScript ES6 (React、JQuery)による開発
・レスポンシブW...

▼必須スキル
・JavsScript / ES5, ES6の経験
・React / flux architectureの経験
・Mocha等のテストフレームワーク経験

====================

▼職種
フロントエンド・マークアップエンジニア・webデザイナー・UI/UXデザイナー

▼業務内容
・フロント周りの設計/開発/テスト/運用
・HTML5、CSS3、JavaScript を利用した開発
(モックアップ作成、テスト、バージョン管理 含む)
・負荷軽減などによるプログラムの高速化

▼必須スキル
・基本的なHTMLのマークアップや、CSSによるスタイリングが可能な方
・JavaScriptを使用したWebサイトの開発経験

▼尚良
・node.jsを使用したwebアプリケーショ...

====================

▼職種
webアプリケーション ・フロントエンド・マークアップエンジニア

▼業務内容
自社サービス動画配信メディアの
Webアプリケーションの開発業務をお任せします。
現場はAngularを使用しており、
サーバーサイドの理解があると尚良です。

▼必須スキル
・HTML、CSS、JavaScriptでのフロントエンド開発経験
・Anguler、React、Vue等のjsフレームワークを用いた開発経験

▼尚良
・サーバーサイドの理解

====================

▼職種
フロントエンド・マークアップエンジニア

▼業務内容
●●会社のメルマガ制作・修正・調整業務を
お任せします。

▼必須スキル
・HTML、CSSの実務経験
・社会人としてのビジネスマナー
・コミニュケーション能力

====================

募集ではマークアップとフロントエンドは同じ土俵に乗っている気がしました。
ただ、自分はまだフロントエンドは名乗れない・・・。

マークアップエンジニアに求められるスキル

▼必須スキル
・HTML
・CSS
・JavaScript
・Photoshop
・CMSの構築(組込)
・jQuery(プラグインの利用)

▼尚良
・sass
・bootstrap(CSSフレームワーク)
・gulp
・babel
・webpack
・npm

フロントエンドエンジニアに求められるスキル

▼必須スキル
・HTML
・CSS
・JavaScript
・Anguler(jsフレームワーク)
・React(jsフレームワーク)
・Vue(jsフレームワーク)
・CMSの構築(拡張)
・laravel(PHPフレームワーク)
・jQuery(プラグインのカスタマイズ・スクラッチで制作)

▼尚良
・サーバーサイドの理解

5人以上のチーム開発に求められるスキル

Git(チェックアウト・コミット・プッシュを理解している。Git-flowがわかる。)
GitHub(issue・pullreq・マージ・レビューを理解し、周囲に教えることができる)

まとめ

マークアップコーダーは、Webサイトの目に見える範囲をコーディングできることが最低条件。
フロントエンドは、Anguler、React、Vue等のjsフレームワークを用いた開発経験が必要。

マークアップエンジニアからフロントエンドエンジニアになるには、jsフレームワークまで踏み込む必要がある。
そのためには、生のjavascriptやjQueryの勉強の必要性を感じた。

でも、大事なことは、自分のあとに誰が何をするのか理解すること。
自分の作業を受けとった人が楽になるような仕事をすること。

それはすなわち「愛」なのだ。

そーいうひとになるために、今日も勉強しちゃいましょ!

ただし、フロントエンドエンジニアの最先端は・・・まだまだ見えない雲の上でした。

2018年の最先端フロントエンドエンジニアになろう
roadmap
Modern Frontend Developer in 2018

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13