フロントエンド開発者に対する責任の拡大

この記事では、元々StripeのIncrement Magazineで紹介されていた以前のエッセイ「Front-End Means Full Stack」を展開しています。 「The Great Divide」と「Ooops」で探求されたテーマに基づいています。私たちは今、フルスタックの開発者だと思います。」

私のフロントエンドの旅は、WordPressのstyle.cssで始まりました。数行のコードでウェブサイトを変換する力は、魅力的でした（そして今でもそうです！）。 HTMLとCSSを通じて、ユーザーエクスペリエンス、購入またはソーシャル共有の奨励、インフレエクスペリエンスを可能にすることができます。

プロのフロントエンド作業の前でさえ、私は役割が提供する芸術と論理のユニークな融合を経験しました。それは表情豊かな芸術形式ですが、コミュニケーションとビジネスの目標に制約されています。

フロントエンド開発は魅力的な交差点です。

• 芸術と論理：創造的な表現と技術的な精度の融合。
• ビジネスと表現：ビジネス目標と芸術的デザインのバランスをとる。
• 左脳と右脳：分析的および創造的な思考の両方に関与しています。
• デザインとオタク：審美的な感性と技術的専門知識を組み合わせる。

私の教育的背景は、この二重性、つまりコンピューターサイエンスとアートコースのブレンドを反映しています。

「フロントエンド開発者」という用語は、役職として広く理解されています。ただし、役割は企業間で大きく異なり、ジョブタイトルが記述子が不十分になっています。実践的なスキルを示すことが重要です。

Chris Coyierフロントエンド開発者

タイトルは異なる場合がありますが、コアフォーカスは一貫しています。ブラウザ向けのWebサイトの構築です。

• フロントエンド=ブラウザ
• バックエンド=サーバー

この根本的な区別は、進化した仕事の役割にもかかわらず持続します。

「ブラウザ中心の」開発は、独自の課題を提示します。標準化の取り組みにもかかわらず、ブラウザの矛盾は残ります。最近の出会いがこれを強調しました。これは、Chromeで正しく解析された日付の文字列ですが、Firefoxにエラーが発生します。これがフロントエンド開発の現実です。

ブラウザの違いを超えて、ユーザーの動作は複雑さの別の層を追加します。画面サイズ、ダークモード、色域、ピクセル密度、帯域幅、入力メソッド（キーボード、マウス、タッチ）はすべてユーザーエクスペリエンスに影響を与えます。これらの考慮事項は、デスクトップとモバイルに等しく適用され、HTMLメールでさらに顕著になります。

この多数の未知数は、フロントエンド開発者からの包括的なアプローチを必要とします。

最も重要な側面？ユーザー。彼らは私たちの仕事の理由です。彼らは私たちのCSSの芸術性、私たちのウィジェットの潜在的な買い手、私たちの仕事に反応する個人の聴衆です。これらのユーザーは、正当に台座に配置されており、さまざまな言語、ニーズ、能力、緊急性のレベルなど、ブラウザを超えた多様な景観を表しています。フロントエンド開発者は、コードとユーザーの間のギャップを埋めます。

フロントエンドの開発は、私たちを最前線に置き、私たちの作品をユーザーと直接結び付けます。多くの人がやりがいのある位置です。そして、これは反応を検討する前です。

ユーザー中心の重点は自明に思えるかもしれません。理想的には、CEOからインターンまでの会社のすべてのメンバーがユーザーに優先順位を付ける必要があります。ただし、フロントエンド開発者の役割はユニークです。コーディングするとき<button></button>、インタラクティブな要素をユーザーのブラウザウィンドウに直接配置しています。色を調整すると、ユーザーの視覚体験に直接影響します。

これは、コーヒーカップを形作るセラミックアーティストに似ています。職人技をデジタルエクスペリエンスに適用しています。バックエンドの開発者は、Monica Dinculescuが適切に指摘したように、ユーザーについて深く関心を持っているかもしれませんが、しばしば「その責任を外部委託する」ことがよくあります。

フロントエンド開発者はブラウザのスペシャリストです。 HTML、CSS、およびJavaScriptの習得は基本です。これは時代遅れの教義ではありません。何十年もの経験がその重要性を確認します。プリプロセッサやフレームワークを使用しても、ブラウザは最終的にHTML、CSS、およびJavaScriptを受信します。デバッグとブラウザの最適化が重要な責任です。

CSSは私の個人的なお気に入りのままであり、HTMLには絶え間ない注意が必要ですが、JavaScriptは特別な試験に値します。単純な効果のためのツールから、Webスタック全体で支配的な言語への進化は注目に値します。 Webサイト全体をJavaScriptのみを使用して構築できるようになりました。

ブラウザ内のJavaScriptの力は、HTMLおよびCSSの力を上回ります。 HTMLの解析によって作成されたDOM（ドキュメントオブジェクトモデル）と、スタイルを適用するCSSOM（CSSオブジェクトモデル）を操作できます。

ただし、これは完全に正確ではありません。 HTMLは最初に解析され、Webサイト速度の重要な側面です。サイトの基本的な情報と機能は、理想的にはHTMLのみで配信する必要があります。

この哲学は、進歩的な強化として知られています。私はそれを目指して努力していますが、完璧な順守は必ずしも実行可能ではありません。 a<button></button> JavaScriptなしで機能できますが、JavaScriptを介してAJAXの送信を追加すると、ユーザーエクスペリエンスが向上します。同様に、JavaScriptに完全に依存する要素は、JavaScriptの実行までレンダリングされない場合があります。時々、実用性は厳格なアドヒアランスに勝ります： 「ボタンを入れてください、サム。誰も死ぬつもりはありません。」

JavaScriptの優位性は、特に人間工学と強力なフレームワークの改善により、Web開発者にとって主要な焦点となっています。 Matt Mullenwegの2015年のアドバイス「JavaScriptを深く学ぶ」は、引き続き非常に関連性があります。 JavaScriptのフロントエンド開発、特に職務要件における成長は否定できません。

Webサイトの統計は、jQueryと比較してReactを使用してトップサイトの割合が少ないことを示している可能性がありますが、求人は別のストーリーを語ります。これらの数字のほぼ逆転です。

フロントエンド開発者の実際の日々のタスクには次のものがあります。

• デザインをコードに変換します。
• デバイス全体でレスポンシブデザインを実装します。
• 再利用可能なコンポーネントとパターンの構築。
• セマンティックHTMLの適用。
• アクセシビリティを確保します。
• ウェブサイトのパフォーマンスを最適化します。

最初のポイントでさえ、それ自体が大学のコースのように感じます。

これを仮説的なWebサイトに適用しましょう。

私たちの心の人種！

• レイアウト用のCSSグリッド。
• フォントの最適化：サブセットまたはフルロード、およびフォントシフトの処理。
• 再利用可能なカードコンポーネントの作成。
• CSS変数またはSASSのようなプリプロセッサを使用して配色を定義および管理します。
• スクリーンリーダーのソースオーダーの優先順位付け。
• 画像形式（PNG、JPG、次世代形式）およびALTテキストの最適化。
• アイコンにインラインSVGを使用します。
• フロントエンドフレームワーク（React、Vue、Svelte）を決定し、システムを構築します。
• CMS統合（ヘッドレスまたはその他）を考慮します。
• 対話性の計画：フォーカス状態、移行など。

これは、フロントエンド開発者の思考プロセスを示しています。多くのタスクが繰り返されていますが、特定の課題は各プロジェクトによって異なります。

これにより、記事のタイトルが表示されます。

多くのタスクが長年にわたって仕事の一部でしたが、特に最新のJavaScriptフレームワークでは、新しい責任が浮上しています。コンポーネントの概念は、これらのフレームワークの中心です。コンポーネントにより、プロジェクトに合わせた再利用可能な抽象化を構築できます。

このコンポーネントベースのアーキテクチャは、フロントエンド開発者をサイトレベルのアーキテクトに引き上げます。ページは、ネストされたコンポーネント（カード、ボタン、アイコン、グリッド、ヘッダー、サイドバーなど）で構成され、それぞれ独自のロジックとスタイリングがあります。これには、多くの場合、URLとルーティングの処理が行われ、サイト全体のアーキテクチャにフロントエンド開発者を効果的に担当します。

コンポーネントには、ハードコーディングされたデータが含まれることはめったにありません。それらはテンプレートとして機能し、JavaScriptを介してデータを取得します。これには、多くの場合、API（例えば、Apolloクライアントを備えたGraphQL）とコンポーネント自体内のデータフェッチと更新の管理が含まれます。これは別の拡大する責任です。

APIデータを超えて、Webサイトは内部状態を管理します：アクティブタブ、モーダルダイアログ、アコーディオン状態、エラーメッセージ、ページネーション、スクロール位置など。この状態を効果的に管理することが重要です。 DOMを真実の源として使用することから、より洗練された州管理ソリューション（フレームワークまたはサードパーティライブラリを介して組み込まれている）への移行は、大きな変化です。フロントエンドの開発者は、この州の管理をアーキテクテクタリングと実装する責任を負っています。

堅牢な状態管理と再利用可能なコンポーネントの必要性は、設計システムの上昇につながりました。体系的にコンポーネントを構築することは自然な進行です。

デザインの例に戻る：

新しい考慮事項が現れます：

• JavaScriptフレームワークとその意味の選択（静的対サーバー側のレンダリング）。
• データフェッチ（GraphQL API）の設計。
• CMSの選択（ヘッドレスまたはその他）。
• 必要なコンポーネントとその相互作用を定義します。
• クライアント側の状態の管理。
• 認証の実装。
• サードパーティコンポーネントの活用（例、画像ローダー）。

これらの責任は、設計の実装、セマンティクス、アクセシビリティ、パフォーマンスの最適化の既存のタスクに追加されます。フロントエンド開発に必要なスキルセットは絶えず拡大しています。

この成長は、Webの拡張、使用量の増加、より広範なインターネットアクセス、成長するWebエコノミー、およびますます能力のあるブラウザーによって促進されます。

専門化はますます一般的になっています。一部の開発者は、設計とHTML/CSSに焦点を当てていますが、他の開発者はシステムまたはデータ管理を専門としています。すべてがタイトル「フロントエンド開発者」を保持する可能性がありますが、その役割と責任は大きく異なる場合があります。

ウェブサイトの開発について議論する方法も変わりました。ランプスタック（Linux、Apache、MySQL、PHP）は、完全にバックエンドに焦点を当てています。平均（Mongo、Express、Angular、Node）がフロントエンドテクノロジー（Angular、ノード）を導入します。 node.jsの出現により、JavaScript開発者はフロントエンドとバックエンドの両方で作業し、役割間のラインを曖昧にすることができます。多くの場合、node.jsを使用して「サーバーレス」アーキテクチャは、フロントエンド開発者のリーチをさらに拡張します。 Star（Design System、TypeScript、Apollo、React）は、フロントエンドテクノロジーに完全に構​​築されたスタックを表します。

責任の拡大は気が遠くなる可能性があります。圧倒されたと感じることは一般的です。専門化は受け入れられるだけでなく、推奨されます。関心のある分野に焦点を当て、専門知識を構築します。

唯一の定数は変化です。それを受け入れます。

¹私は白人男性で、大きな利点があります。 browsersは、他の多くの言語（HTTP、SVG、PNGなど）をサポートしています。より広い知識は能力を高めます。 ↩皮肉なことに、多くのWordPressサイトは、クライアント側のJavaScriptコンポーネントで構築されていません。 ↩↩️

以上がフロントエンド開発者に対する責任の拡大の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。