2020年（およびそれ以降）にフロントエンド開発者になることの意味

フロントエンド開発者のフロントエンド部分が実際に何を意味するのか考えたことはありますか？ 私はかつてエリック・マイヤー（ウェブサイトが存在するのとほぼ同じくらい長い間ウェブサイトを構築してきた）に、その用語がごく初期の頃に何を意味するのか知っているかどうか尋ねたところ、彼はそう言った。 したがって、これはまったく新しいタイトルや位置ではありませんが、確かに何年にもわたって範囲が変更されています。

「フロントエンド」とは、基本的にWebブラウザを意味します。 私は自分自身をフロントエンド開発者だと思っています。あなたが私をWebブラウザー開発者と呼んでも、正直言って嫌いではありません。 しかし、それはおそらくうまくいきません（そしてあなたがウェブブラウザを構築するような音がします）。 フロントエンド開発者は、Webブラウザーと非常に緊密に連携し、Webブラウザーで実行されるコード、具体的にはHTML、CSS、JavaScript、およびWebブラウザーが話す他のいくつかの言語（たとえば、SVGなどのメディア形式）を記述します。 または、おそらくもっと一般的に説明されているように、最終的にブラウザが理解できる言語に処理されるコード。 それがフロントエンド開発者としてのあなたの領域です！

ブラウザは単独では存在せず、さまざまなデバイスで実行されます。 レスポンシブデザインの時代を通してそれを学びました。 そして最も重要なのは、ユーザーがそれらのデバイスでそれらのブラウザーを使用することです。 フロントエンド開発者ほどユーザーに近い人はいない。 そのため、フロントエンド開発者は、さまざまなデバイスで実行されるブラウザーを使用する人々のためにコードを作成します。

ユーザー、デバイス、ブラウザのこの巨大な風景に対処することは、それ自体が仕事です！ 役職について哲学的に考えるのは毎日ではないと思いますが、それは問題ありません。 私たちはあなたの古いおじいちゃんクリスとここで少し反省しているだけです。

コーディングブートキャンプを卒業したばかりで、ウェブサイトの構築経験がやや狭くて新しい場合、フロントエンド開発を「Reactのもの」、バックエンド開発を「ノード」と考えると許される可能性があります最近最も人気のあるフレーバーと同様に、「もの」または「Pythonのもの」。 あなたも間違っていません。 Reactは通常、フロントエンドフレームワークとして使用されます（文字通り、ブラウザーで実行されるJavaScriptです）。 ノードとPythonは、実際にはWebブラウザーで実行されない言語の例です。 それらはWebサーバー（ええと、コンピューター）で実行するように構築されています。

しばらくこの分野にとどまると、これらのライブラリ、言語、ビルドプロセス、そしてウェブサイトを構築するための最善の方法に関する哲学全体がゆっくりとした流れのように行き来するのを見ることができます。

昔の人が時々拳を振って、過去の過ちから学ぶべきだと叫んでいるのを目撃するかもしれません。 また、特に騒々しい若者が拳を同じくらい高く振って、過去を無関係な文脈で発音し、もはや有用な話のポイントではなくなっているのを目撃することもできます。

おそらく、どちらも正しいでしょう。 誰も嫌なことをしていない限り、それはすべて流れの一部です。

物事は変化します。 今日の多くのウェブサイトは過去のウェブサイトよりも複雑であるのは事実だと思います。 特に大きなもの。 ソーシャルネットワークとメディアプレーヤー。 旅行予約サイト。 eコマースストアフロント。 エンジニアリングツール。 これらのサイトは大きく始まり、大きくなってきただけです。 彼らは彼らをサポートする大規模なチームを持つ彼ら自身の経済です。 この複雑さは、Webテクノロジーの変化の原因であり、新旧の学校間の摩擦の原因です（単純にそれを描くことができれば）。

テクノロジー業界で働く多くの人々は、本質的に大きなウェブサイトで働いています。 そのため、これらの人々から最も頻繁に連絡があります。 これらの人々はツールを構築します。 彼らはブログの投稿を書き、ポッドキャストに参加し、講演を行います。 彼らは彼らのニーズに合うように、テクノロジー自体を変えるのを助けます。

それまでの間、「フロントエンド」は依然として単なるブラウザです。 ブラウザの言語、HTML、CSS、およびJavaScriptは、現在でもコアテクノロジーです。 これらの言語は進化し、ブラウザ自体も進化しますが、速度は遅くなります。 彼らはシリコンバレーのお気に入りのスローガンとは正反対のことをします：速く動き、物事を壊します。 彼らはゆっくりと動き、ほとんど何も壊しません。

フロントエンド開発者であることは、それらのデバイスでそれらのブラウザーを使用するユーザーを依然として気にかけています。 彼らの経験は私たちの仕事です。 うまくいけば、ツールは私たちがそれを行うのに役立つだけです。

では、フロントエンド開発者として何をしていますか？

• どの画面でも見栄えがするようにデザインを実行しています
• コンテンツにセマンティクスを適用しています
• パーツやスタイルを効率的に再利用できるように、UIを抽象的に構築しています
• ブラウザでレンダリングされるもののアクセシビリティを検討しています
• サイトのパフォーマンスが心配です。つまり、ブラウザで使用されているリソースの大きさと数を処理しているということです。

これらは基本的にブラウザレベルの懸念事項であり、それがフロントエンドであるため、これらのことは常に真実であり、今後もそうなるでしょう。

変化しているのは、ブラウザがますます多くの作業を行えるようになっていることです。 一般に、ブラウザAPIの機能が向上したり、ライブラリがより高度になったり、コンピュータが向上したりするなど、さまざまな理由があります。 サーバーからブラウザーへの作業のオフロードは、長年にわたってますます理にかなっています（シングルページアプリ！）。 振り子が振り返るのを見て（事前にレンダリングされたサイト！）、中間点を見つけるのは興味深いことですが（JAMstack！）。

最近のフロントエンド開発には、次のものも含まれる可能性があります。

• 最も小さなコンポーネントからURLレベルまでのページ全体までサイト全体を設計する
• APIから独自のデータを取得し、表示のために必要に応じてデータを操作します
• 自分でサイトの状態に対処する
• ユーザーの操作と入力によるデータの変更/変更、およびAPIを介した状態でのデータの入力と永続化、およびサーバーへの返送

これらはすべてブラウザで実行できることであり、この古い開発者の目を広げています。 それはあなたがすでにしなければならないすべてのことの上にあると考えるとき、それは責任の山積みです。

仕事の山積みは何年にもわたって成長する傾向がありますが、フロントエンド開発者としての私たちの指針はそれほど変わっていません。 私たちの主な責任は、デバイスでWebブラウザを使用するユーザーの世話をすることです。 したがって、いくつかのデータをフェッチする必要があります。 これはすばらしいことです。ユーザーのニーズに応えるために、高速でセマンティックでアクセス可能なページを構築するためにサービスを提供しています。 したがって、設計システムを構築する必要があります。 これはすばらしいことです。一貫性のない混乱を引き起こすことなく進化できる、ユーザーが理解できるインターフェースを構築するために取り組んでいます。 ですから、なじみのない新しいテクノロジーを学ぶ必要があります。 さて、私たちの仕事は注意深く見守り、ユーザーのために私たちのサイトをより良くするために新しいものが最終的にそこにあることを確認することです。

頑張ってください！

次のステップ：ChrisCoyierが自分のWebサイトを強化するためにLocalとFlywheelを選択する理由

クリスがローカルとフライホイールを使用してサイトを次のレベルに引き上げる方法を学びましょう。 彼のお気に入りの機能、Flywheelを利用してサイトを移行する方法（無料！）などをご覧ください。 詳細については、ここをクリックしてください。