#markupmeetup

online

Otsuka Yuhi

  • 株式会社ゆめみ 所属 
    • Front-End Engineer & Scrum Master
  • Markup Meetup 運営
  • ふわふわエンジニアタイム 運営

Skill Set

  • Markup & CSS Styling & JavaScript Programming
    • React / Next.js , CSS in JS ( TS ), TypeScript
  • Scrum Master
  • AWS Certified Solutions Architect - Associate

@otsukayuhi

Otsuka Yuhi

I enjoy playing the electric bass guitar !
And I love cats !!

@otsukayuhi

What is "Markup Meetup" ?

What is "Markup Meetup" ?

Markup Meetup は HTML / CSS / JavaScript の情報共有コミュニティです。

ふわふわエンジニアタイムが主催しています。

 

フロントエンドエンジニア、マークアップエンジニア、コーダー、デザイナーの垣根なく、HTML / CSS / JavaScript に関わるナレッジを共有しましょう！​

ノーマウント系コミュニティ
ふわふわエンジニアタイム
に参加しよう!!

エンジニア同士の情報共有を目的としたコミュニティ
「ふわふわエンジニアタイム」を発足いたしました。
「心理的安全性」を最重要においた、
ノーマウントなコミュニティを目指しています。
エンジニアであれば、経験問わずどなたでも参加できます。
ご興味あるかたは、大塚までご連絡くださいm(_ _)m

よろしくお願いいたします。
m(_ _)m

Time Schedule

Time Presenter

Content
19:10 otuskayuhi 結局、マークアップエンジニアとフロントエンドエンジニアって違うの？
19:35 もりてつ IE11が消えた世界で実際に役に立ったCSS
20:00 Y.K グラスモーフィズムのススメ
20:25 YoshihiroHasegawa もう一度imgタグをおさらいしよう
20:35 PepeikeDeteron Three.js の魅力を語る
20:45 yuzuru スクリーンリーダーとマークアップ妥当性の話
20:50 otsukayuhi 締め

結局、
マークアップエンジニアと
フロントエンドエンジニア
って違うの？🤔

@otsukayuhi

あなたは、
マークアップエンジニアですか？
フロントエンドエンジニアですか？

たびたび、話題になる

  • マークアップエンジニアの上位互換がフロントエンドエンジニア？
    • いや、同じクライアント（ブラウザ）側を作るエンジニアじゃん？
  • Web 制作？Web 開発？
    • 「俺は React をやっているぞ！」
    • 「仕事は Wordpress が多いかな」
    • 「Vue.js で Web 制作してます」
    • 「私はなんでもやっています」

🤔

全員フロントエンドでええやん？

バンクエンドに対してのフロントエンドなので、

ブラウザに表示されるもの作ってるなら、全員フロントエンドエンジニア。

それでええやん？

しかし！

マークアップエンジニアとフロントエンドエンジニア、
けっこう違うことやってそう。

 

垣根なんてない！という大前提は一旦おいておき、
実際のところ何が違うのか？を考えてみました。

🤔

基礎は同じ

  • ウェブのしくみ
    • クライアント・サーバー, HTTP, TCP/IP, DNS, etc...
  • 基本的な技術スタック
    • HTML, CSS, JavaScript
      • Web アクセシビリティ
    • Node.js ( npm )
    • Git
  • UI / UX の理解

広告寄り（Web 制作）

  • 静的コンテンツ
    • 全ユーザーに同じ情報を提供
    • 更新頻度が低い
  • リッチなデザイン
    • 高度なクリエイティブプログラミングは少ない
  • 短納期

マークアップエンジニア

広告寄り（Web 制作）

  • 静的コンテンツ
    • 全ユーザーに同じ情報を提供
    • 更新頻度が低い
  • リッチなデザイン
  • 高度な表現、インタラクション
  • 短納期

システム開発寄り（Web 開発）

  • 動的コンテンツ
    • ユーザー毎に表示が変わる
  • シンプルなデザイン
  • 開発期間が長い

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

  • CSS による高度な表現力
  • jQuery で十分なことが多い
  • Wordpress による更新
    • ( HTML 編集 😇 )
  • 表示崩れ、文言間違いチェック
  • ソースコード差分納品
    • FTPでデータをアップ

マークアップエンジニアの技術

広告寄り（Web 制作）

  • CSS による高度な表現力
  • クリエイティブプログラミング
  • テスト
    • 静的、単体（、結合、E2E）
  • 自動デプロイ？
    • HTML 編集は少ない？

システム開発寄り（Web 開発）

  • 宣言的 UI ライブラリ
  • 状態管理
  • コンポーネント設計
    • デザインシステム
  • テスト
    • 静的、単体、結合、E2E
  • 自動デプロイ

フロントエンドエンジニアの技術

（ぶっちゃけ、会社による）

（あくまで、そういう傾向があるという経験則）

今回はこの前提で

  • マークアップエンジニア
    • Web 制作
      • 広告系メイン
      • クリエイティブ少なめ
  • フロントエンドエンジニア
    • Web 制作
      • 広告系メイン
      • クリエイティブ多め
    • Web 開発
      • システム開発メイン

フロンエンドエンジニアは
上位互換？

技術力 = React 力？

フロントエンドのスキル = React 力（UI フレームワーク力）なのであれば、

それを触る機会が少ないマークアップエンジニアは不利。

基礎は同じ

  • ウェブのしくみ
    • クライアント・サーバー, HTTP, TCP/IP, DNS, etc...
  • 基本的な技術スタック
    • HTML, CSS, JavaScript
      • Web アクセシビリティ
    • Node.js ( npm )
    • Git
  • UI / UX の理解

マークアップエンジニアは、

ここが弱い傾向あるかも？

Web の基礎知識や CI/CD が苦手

  • API でデータを取得することが少ない
    • HTTP 等の知識がなくても、なんとかなってしまう
  • Wordpress （Plugin）がなんとかしてくれる
  • FTPでアップするため、ソースコード納品が多い
    • CI / CD の知識が少ない

プログラミングが苦手

  • HTML, CSS で完結することが多い
    • 複雑なプログラムを書く機会が少ない
      • 軽い DOM 操作くらいのプログラミングが多い
      • API でデータを取得することが少ない
    • テストを書く機会も少ない

マークアップエンジニアの強さ

  • デザインカンプをブラウザに落とし込むことが得意
    • けっこう複雑なデザインもレスポンスウェブデザイン対応しちゃう
  • CSS のプロパティをたくさん知っている
    • 使い所も知っている
  • クロスブラウザ対応が得意
  • セマンティックなマークアップができる
    • アクセシビリティへの意識が高い

フロントエンド技術スタックの垣根はなくなってきている

  • API ベースの開発
    • 宣言的 UI ライブラリ
    • CSS in JS ( in TS)
    • 状態管理
    • TypeScript
    • テスト
    • 自動デプロイ

Headless CMS の採用

フロントエンドエンジニアの技術スタックに
近づいている。

ふたりの心の距離のように…

技術スタック、最大の壁

HTML 編集 😇

顧客が求めているもの

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 class="content__title">きれいな HTML</h1>
  <ul class="content__list">
    <li class="content__item">2023/01/15 ほげほげ</li>
    <li class="content__item">2023/01/18 ほげほげ</li>
    <!-- ここを表示する -->
    <!-- <li class="content__item">2023/02/22 にゃぁにゃぁ</li> -->
  </ul>
</body>
</html>

我々が提供するもの

<!DOCTYPE html><html><head><style data-next-hide-fouc="true">body{display:none}</style><noscript data-next-hide-fouc="true"><style>body{display:block}</style></noscript><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1673770180050"></script><script src="/_next/static/chunks/webpack.js?ts=1673770180050" defer=""></script><script src="/_next/static/chunks/main.js?ts=1673770180050" defer=""></script><script src="/_next/static/chunks/pages/_app.js?ts=1673770180050" defer=""></script><script src="/_next/static/chunks/pages/index.js?ts=1673770180050" defer=""></script><script src="/_next/static/development/_buildManifest.js?ts=1673770180050" defer=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1673770180050" defer=""></script><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><div id="__next"><h1 class="content__title">きれいな HTML</h1><ul class="content__list"><li class="content__item">2023/01/15 ほげほげ</li><li class="content__item">2023/01/18 ほげほげ</li><li class="content__item">2023/02/22 にゃぁにゃぁ</li></ul></div><script src="/_next/static/chunks/react-refresh.js?ts=1673770180050"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"development","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>

レガシーな環境で、開発し続けざるを得ない

エンジニアだけだと難しい

  • 開発効率のアピール
  • 顧客要望の代案
    • Headless CMS の訴求

まとめ

  • マークアップエンジニアとフロントエンドエンジニア
    • 基本的な技術は同じ
    • 扱うモノが違う（傾向がある）ので、技術スタックが異なる
    • マークアップエンジニアは Web の基礎知識や CI/CD、
      プログラミングが苦手な傾向がある
      • HTML, CSS 関連は強い方が多い
    • フロントエンド技術スタックは近くなってきている
      • 最後の壁は「HTML 編集 😇」

まとめ

しらんけど！

ありがとうございました
m(_ _)m

Markup Meetup #3 online

By Otsuka Yuhi

Made with Slides.com

Markup Meetup #3 online

- Markup Meetup #3 online 概要＆「結局、マークアップエンジニアとフロントエンドエンジニアって違うの？」登壇資料。https://markup-meetup.connpass.com/event/268115/

  • 472

More from Otsuka Yuhi

  • いいから黙って UI からマージンは 外してしておけ !!
    Otsuka Yuhi
    222
  • 「受け入れ条件」なき仕事は、失敗する。
    Otsuka Yuhi
    393