ウェブフロントエンドエンジニアにおすすめのヒント

まず、Webフロントエンドエンジニアの価値についてお話ししましょう。現在、Web製品のインタラクションはますます複雑になっています。ユーザーエクスペリエンスとWebサイトのフロントエンドパフォーマンスの最適化はすべて、Webフロントエンドエンジニアに頼らなければなりません。Webフロントエンドエンジニアは、設計と開発を組み合わせたものです。開発者の中で、Webフロントエンドエンジニアは最も直接的に製品とユーザー志向の設計者です。開発チームの結果は、Webフロントエンドエンジニアによって提示されなければなりません。なぜなら、ユーザーはバックグラウンド処理の強力さを気にしないからです。設計者の中で、Webフロントエンドエンジニアは、開発者と直接向き合い、設計コンセプトをコンピューター言語で開発者に伝える設計者です。Webフロントエンドエンジニアは、チーム全体の中で非常に重要です。

私の意見では、有能な Web フロントエンドエンジニアは HTML、CSS、JavaScript を習得する必要があります。 1 つまたは 2 つの言語を知っているだけでは十分ではなく、3 つの言語すべてに精通している必要があります。 3 つの言語すべてに堪能である必要はありませんが、少なくとも他の人に頻繁に助けを求めなくても、ほとんどのタスクを完了できる必要があります。

私の意見では、Web フロントエンドエンジニアが習得すべき基本的な知識とスキルは次のとおりです。

1 ウェブページの基本構造（HTML + CSS）

HTML はプログラミング言語ではなく、マークアップ言語です。最も基本的なタグは <html> と <body> です。CSS は HTML 要素の表示方法を定義するために使用されます。 HTML+CSS を使い始めるのは簡単ですが、多くの人は十分に深く理解していません。次にいくつかの例を示します。<meta> タグは何のために使用されますか? margin-left と left の違いは何ですか? また、どのような状況でそれらを使用する必要がありますか?これは別の DIV+CSS レイアウトの問題です。水平に並んだ 3 つの DIV が、幅が不明な DIV 内に配置されます。左と右の DIV の幅は 150 ピクセルに固定され、中央の DIV が残りの幅を埋めます。これらの問題をまだ知らず、数分以内にレイアウトの問題を解決できない場合は、HTML + CSS を十分に理解していないことを意味します。

2 ブラウザはどのようにして Web ページを表示するのでしょうか?

異なるカーネルを持つブラウザでは、Web ページのレンダリング方法が異なります。現在、すべてのブラウザにはクライアントデバッグツールがあります。次の図は、IE9 での Google ホームページの読み込みの詳細を示しています。

image_thumb2

Web パフォーマンスを最適化するときは、ブラウザのレンダリングと詳細をより深く理解する必要があります。さらに役立つ知識があります。ブラウザの並列読み込みの現在の上限は 6 であり、ブラウザの古いバージョンでは異なる場合があります。

3 ウェブページのライフサイクル

ページのライフサイクルは Web フレームワークによって異なる場合がありますが、一般的には同じです。クライアントが GET リクエストを送信し、サーバーが対応するページを返し、クライアントが操作とデータを完了して、それをサーバーに POST します。データ転送の詳細（フロントエンドとバックエンド間、ページ間）を把握する必要があります。

4 DHTML DOM BOM Javascript AJAX

これは Web フロントエンド開発の最も重要な部分であり、ほとんどの時間を私たちが扱っています。注意すべき点がいくつかあります。JavaScript はシングルスレッドプログラミングであり、いわゆる JavaScript 非同期プログラミングは、将来の特定の時点で対応するイベントを実行することを計画するだけです。DOM イベントメカニズムを詳細に理解します。クライアントストレージ (localStorage と sessionStorage は HTML5 で追加されました)。JavaScript はサーバー側言語ほど厳密ではなく、デバッグもあまり便利ではないため、最初から厳密な JavaScript 編集習慣を身に付ける必要があります。JavaScript は非常に強力で柔軟性があるため、短期間で (ましてや習得して) 熟達したり、フレームワークやクラスライブラリをいくつか書いたりすることは考えないでください。初期段階では、使い慣れた成熟したフレームワーク (jquery など) を入門として使用する必要があります。クライアント側のデバッグツールを使いこなす必要があります。

6. サーバーサイド言語開発、PS画像切り出し技術の経験

Web フロントエンド開発は設計と開発の中間に位置するため、両方の側面について少し知っておく必要があります。編集言語は似ています。以前にサーバー言語を書いたことがあると、JavaScript を学ぶのに非常に役立ちます。画像を静的 HTML ページに変換するには、PS カット技術が不可欠です。

5 ブラウザの互換性

歴史的な理由により、ブラウザの互換性は、Web フロントエンドエンジニアにとって常に悩みの種でした。W3 組織があり、いくつかの仕様が策定されており、ブラウザメーカーは仕様の改善と近づきに懸命に取り組んでいますが、実際のネットワーク環境では、さまざまなカーネルとバージョンのブラウザが存在します。ブラウザの互換性の問題を解決するには経験の蓄積が必要ですが、幸いなことに、このトピックに関する情報はオンラインでたくさんあります。 http://www.w3help.org/zh-cn/ これは良い参考ウェブサイトです。

6. 素早い学習能力と積極的に学ぶ意欲

Web フロントエンドは急速に発展しています。この業界で働くには、Web 製品の要件に適応できるように、素早く学習する能力と積極的に学習する意欲が必要です。 Web フロントエンドの分野には絶対的な正解や不正解はありません。問題を解決する方法は数多くありますが、より適切な方法を見つけなければなりません。より適切な方法を見つけるには、経験の蓄積が必要です。つまり、Web フロントエンドを始めるのは簡単ですが、熟達するのは難しく、より積極的な学習意欲が必要です。

7. 優れたコミュニケーション能力

優秀なフロントエンドエンジニアには、優れたコミュニケーションスキルが必要です。なぜなら、フロントエンドエンジニアの仕事は、プロジェクトマネージャー、デザイナー、エンドユーザー、開発エンジニアなど、多くの人々の仕事と密接に関係しているからです。フロントエンドエンジニアは、これらのタイプの人々の交差点にいます。これらの役割の要件を考慮し、これら 4 つのタイプの人々のニーズのバランスを取り、より適切な計画を立てる必要があります。これは、フロントエンドエンジニアにはより高いコミュニケーションスキルが求められることを示しています。

最後に、いくつかの優れた学習教材を紹介します。

1. W3C 学習ウェブサイト (https://www.jb51.net/w3school/)、上記の情報は非常に包括的かつ実用的であり、最高の入門資料です。

2. JavaScript の決定版ガイド

3. 「JavaScript + DOM プログラミングの芸術」

4. 高度な JavaScript プログラミング

以下のブログ記事をお読みください:優秀なフロントエンドエンジニアになる方法について語る Nicholas C. Zakas

昨日、Yahoo!主催の面接活動を担当させていただいたのですが、最も印象に残ったのは、応募者への質問コーナーでした。候補者が尋ねる質問のほとんどに、私はかなりがっかりしたと言わざるを得ません。 Yahoo! に関するフィードバックをお待ちしています。情熱的な質問に取り組みます。昨日の応募者の中で、私が最も良い質問だと思った質問をしたのはたった 1 人でした。その人は私に「優れたフロントエンドエンジニアになるには何が必要だと思いますか?」と尋ねました。この質問を面接室の外で取り上げて議論する必要があると思います。

まず、フロントエンドエンジニアは HTML、CSS、JavaScript を習得する必要があります。 1 つまたは 2 つの言語を知っているだけでは十分ではなく、3 つの言語すべてに精通している必要があります。 3 つの言語すべてに堪能である必要はありませんが、少なくとも他の人に頻繁に助けを求めなくても、ほとんどのタスクを完了できる必要があります。

優秀なフロントエンドエンジニアは、すぐに学習できるはずです。 Web を動かすテクノロジーは止まることはないですよね?これらのテクノロジーはほぼ毎日変化しており、迅速に学習する能力がなければ、Web 開発のペースについていくことはできないと言っても過言ではありません。常に自分自身を改善し、新しいテクノロジーと新しいモデルを学ばなければなりません。今日の知識だけに頼っていては、将来に適応することはできません。明日の Web は今日のものとは大きく異なるものになるでしょう。あなたの仕事は、この根本的な変化を Web アプリケーションを通じてどのように反映するかを考えることです。

コンピュータサイエンスという広いカテゴリに属する多くの分野は、実際には人々の目には科学として認識されています。しかし、私たちがフロントエンドと呼んでいるものは科学ではなく、芸術です。芸術家は生計を立てるための技術を習得するだけでなく、その技術の使い方も知っていなければなりません。同じ問題に対して、ある状況では機能する解決策が、別の状況では機能しない場合があります。 Web アプリケーションのフロントエンドでは、同じ問題に対して多くの解決策が存在することがよくあります。間違った解決策というものはありませんが、他の解決策よりも適切な解決策がいくつかあります。優れたフロントエンドエンジニアは、どのソリューションをいつ使用し、別のソリューションをいつ選択すべきかを把握している必要があります。

優れたフロントエンドエンジニアには、自分の仕事が多くの人の仕事と密接に関係しているため、優れたコミュニケーションスキルが必要です。いずれにしても、フロントエンドエンジニアは少なくとも以下の 4 種類の顧客のニーズを満たす必要があります。

製品マネージャー – アプリケーションの計画を担当する人々です。彼らは、アプリケーションを通じてユーザーのニーズを満たす方法や、設計したモデルを通じて収益を上げる方法を想像することができます (うまくいけば)。一般的に言えば、これらの人々は豊富な機能を求めています。
UI デザイナー – アプリケーションのビジュアルデザインとインタラクションモックアップを担当します。彼らは、ユーザーが何に敏感であるか、インタラクションの一貫性、全体的な使いやすさを重視します。彼らはスムーズで美しいユーザーインターフェースに熱心ですが、それを実現するのは簡単ではありません。
プロジェクトマネージャー – 実際にアプリケーションを実行および保守する担当者です。プロジェクト管理の主な焦点は、稼働時間（アプリケーションが常に利用可能な時間）、パフォーマンス、および期限です。プロジェクトマネージャーの目標は、多くの場合、物事をできるだけシンプルに保ち、アップグレードや更新の際に新たな問題が発生しないようにすることです。
エンドユーザーは、もちろん、アプリケーションの主な消費者です。私たちはエンドユーザーと頻繁にやり取りするわけではありませんが、彼らからのフィードバックは非常に重要です。誰も使いたがらないアプリケーションは価値がありません。エンドユーザーが最も要求するのは、個人的に便利で、競合製品でも利用できる機能です。
では、フロントエンドエンジニアは誰の意見に最も注意を払うべきでしょうか?答えは全部4つです。優秀なフロントエンドエンジニアは、これら 4 種類の人々のニーズと期待のバランスをとる方法を理解し、それに基づいて最適なソリューションを考え出す必要があります。フロントエンドエンジニアは、これら 4 種類の人々とのコミュニケーションの交差点にいるので、コミュニケーションスキルの重要性は自明です。非常に優れた新機能がフロントエンドのパフォーマンスに影響するため簡素化する必要がある場合、それをプロダクトマネージャーにどのように説明しますか?たとえば、デザインを元の計画に戻さないとアプリケーションに悪影響を与える可能性があるとします。UI デザイナーを説得するにはどうすればよいでしょうか?フロントエンドエンジニアとして、各グループの人々のアイデアがどこから来ているのかを理解し、すべての関係者が受け入れられるソリューションを考え出す必要があります。ある意味、優秀なフロントエンドエンジニアは大使のような存在であり、日々の業務に取り組むためには外交官のような精神を常に保たなければなりません。

私が新人のフロントエンドエンジニアに与える最も一般的なアドバイスは、まず評価を行わずにタスクを受け入れないことです。他の人があなたに何を望んでいるのかをまず理解し、「この機能には問題があります」などの漠然とした説明を単純に受け入れないことを常に忘れてはなりません。さらに、この機能やデザインの本当の意図が何であるかを正確に把握する必要があります。「ボタンを追加する」などのタスクでは、必ずしもボタンが追加されるわけではありません。また、製品マネージャーを見つけてボタンの用途を尋ね、次に UI デザイナーを見つけてボタンが最適なインタラクション手段であるかどうかを話し合うことになるかもしれません。この種のコミュニケーションは、優れたフロントエンドエンジニアになるために非常に重要です。

あらゆる意味で、フロントエンドエンジニアはコンピューターサイエンスの専門職の中で最も複雑な仕事だと思います。従来のプログラミングの考え方のほとんどは、もはや適用できません。複数のプラットフォームで使用できるようにするために、さまざまなテクノロジーがソフトサイエンスの知識と概念を多く取り入れています。優れたフロントエンドエンジニアになるために必要な専門スキルは、幅広く複雑な領域に及び、最終的にサービスを提供しなければならないさまざまな関係者の関与により、さらに複雑になります。技術的な専門知識があればフロントエンドエンジニアとして採用される可能性はありますが、その技術を使って作成するアプリケーションと、他の人と協力する能力こそが、あなたを優れた人材にしてくれるのです。