フロントエンドエンジニアとは
フロントエンドエンジニアは、インターネット時代のソフトウェア製品開発において不可欠な専門的な研究開発の役割です。狭義には、フロントエンド エンジニアは、HTML、CSS、JavaScript、およびその他の専門的なスキルとツールを使用して、製品の UI デザインのドラフトを Web サイト製品に実装し、ユーザーの PC およびモバイル Web ページをカバーし、ビジュアルおよびインタラクティブな問題。大まかに言うと、ユーザー端末製品のビジョンやインタラクションに関連するすべての部分は、フロントエンド エンジニアの専門分野です。
2005 年、ほとんどの Web ページは次のようになっていました:
現在の Web ページは大まかに次のようになります:
フロントエンド エンジニアの開発パスと展望は何ですか?
フロントエンドは比較的新しい業界です。インターネットの発展初期 (1995 ～ 2005 年) には、専門のフロントエンド エンジニアは存在しませんでした。 2005年頃からインターネットの発展に伴い、正式なフロントエンドエンジニアの役割が業界に認知され、2010年にはインターネットが本格的にモバイル時代に入り、フロントエンドエンジニアの地位はますます高まりました。フロントエンド分野の技術開発もますます重要になり、さまざまな新しいアイデア、デザインパターン、ツール、プラットフォームが急速に発展しており、フロントエンドエンジニアに求められるスキルはますます高くなっています。
フロントエンド業界の急速な発展を示すデータがいくつかあります。
● 2010 年以降に最も人気のある新しいプログラミング言語のかなりの数は、Dart、Clojure、CoffeeScript、TypeScript など、フロントエンドに関連しています。
● 最も重要なフロントエンド プログラミング言語として、JavaScript は近年、コード量と注目度の点で Github プラットフォームの人気プログラミング言語のリストにしっかりと載っています。
● 業界におけるフロントエンドの需要は増加し続けており、フロントエンドプログラマーの給与は業界でトップクラスの地位にあります。
近年最も人気のあるプログラミング言語の多くはJavaScriptの代替言語です
JavaScriptは最もホットなプログラミング言語のトップ10に入っています
近年のインターネット企業 フロントエンドチームは毎年2倍
JavaScriptエンジニアの平均給与はプログラミング言語エンジニアの中でトップ10に入る
どんな知識やフロントエンドエンジニアに必要なスキルは？
フロントエンドエンジニアの技術スタックはこんな感じだと言う人もいます:
他の人はこう言います:
実際、フロントエンド エンジニアの中核となるスキルは次のとおりです:
典型的なインターネット企業の製品開発プロセスでは、フロントエンド エンジニアと他の役割の関係はおおよそ次のとおりです。
フロントエンドは製品や設計に最も近いエンジニアであり、製品と技術をつなぐ役割を担います。フロントエンドはユーザーの目に見える部分を担当するため、ユーザーに最も近いエンジニアでもあります。
マルチ端末時代において、製品が PC とモバイル端末の両方をサポートする場合、フロントエンド エンジニアはより多くの役割を担う必要があります:
JavaScriptはフロントエンドにとって最も重要なスキルであるため、優秀なフロントエンドエンジニアは確実な基本的なJavaScriptスキルを持っている必要があります。 JavaScript プログラミング言語は、今日では Web の開発に使用されるだけでなく、プログラミングの分野でも人気があります。 (JavaScriptビデオチュートリアル)
JavaScriptは、「Raspberry Pi」などのスマートハードウェアチップの開発に使用できます
フロントエンドエンジニアはソフトウェアエンジニアでもあるため、ソフトウェアエンジニアの基礎知識も非常に重要です:
●数学
●コンピュータシステム
● オペレーティング システム
● データ構造とアルゴリズム
● 編集原則
HTML と CSS は、フロントエンド エンジニアにとっても非常に重要な基本スキルです。特にコードを書くのが好きな学生はマークアップ言語を無視する傾向があります。実際、ML も UI 関連の分野では非常に重要な内容なので、避けるべきです。無視される。
●HTML: The Living Standard（HTMLビデオチュートリアル）
● HTML と CSS (CSS ビデオチュートリアル)
クラスメートは、「フロントエンドの仕事には多くの要求があり、常に変更と変更があります。実際の技術的なポイントはそれほど多くありません。ビジネスロジックを決定するのは製品です。基盤となる基本サービスに取り組むのは、より困難であり、困難になるのでしょうか？」と尋ねました。より良いキャリアの将来は？」
実際、ビジネスレベルと製品レベルの作業に近づくほど、要件の違いが大きくなり、変更の頻度が高くなる可能性があります。何度も変更されるのはフロントエンドだけではなく、PHP サーバー上でビジネスを行う学生もこの問題に直面しており、ビジネス ロジックも何度も変更されます。レベルが低いほど汎用性が高く、変更は比較的少ないです。
ただし、すべてには 2 つの側面があります。まず、基礎となる基本サービスの市場が大きいか、インターネット ビジネスや製品の市場が大きいかを考えることができます。第二に、基本サービスの汎用性は実現しやすいが、ビジネス主導の製品開発において、それを製品レベルでどのように汎用化し、エンジニアリングやツールをどのように活用して開発効率を向上させるかは、実は難しい問題である。リッチ インターネット製品は変化し、私たちの生活を変えていますが、製品の作成者として、エンジニアがどのように自分自身を向上させることができるかは、研究する価値のある分野です。
さらに、実際の技術的なポイントがそれほど多くないとは思わないでください。ここでは、曲線と曲面アニメーションの実装、マップの最短経路の計算、gif 画像と同様のローカルな動きを png 静止画に実行させる、宝くじゲームなどの例をいくつか示します。 、物理的効果を備えた HTML5 ゲーム、3D チャート、拡張現実 WebGL ビデオ ストリーム処理など、これらはすべてフロントエンド分野で遭遇する実際的な問題です。
JavaScript に関する限り、実際のプロジェクトで現実世界の問題を効率的に解決するために最も適切なモデルを設計すること自体が非常に困難です。 JavaScript は代表的な新世代プログラミング言語であり、機能が豊富で、柔軟に使用でき、パフォーマンスも優れています。オブジェクト指向、関数型プログラミング、さまざまなデザイン パターン、MVC および MVVM は、それ自体で十分に魅力的です。
フロントエンドはインターフェイスとインタラクションの問題を解決する必要があります。実際、UI は常に変化するため、UI レベルの問題は常に困難な問題です。さまざまなブラウザのバージョン、Web 標準、モバイル デバイス、および複数端末への対応の互換性は、フロントエンド エンジニアに大きな課題を与え、フロントエンド エンジニアの能力にも高い要求を与えています。多くの UI 問題には複数の解決策があり、フロントエンドは豊かな創造性と想像力を必要とするエンジニアの中でも非常にクリエイティブな集団です。
フロントエンド エンジニアは Web 標準の設定者、実践者、推進者でもあり、現在の W3C 標準にはブラウザに限定されず、さまざまなハンドヘルド スマート デバイス、車載デバイス、スマート ホームなどが含まれています。将来の Internet of Everything の時代では、フロントエンド エンジニアは Web ページのエンジニアだけでなく、人間とコンピュータのインタラクションのあらゆる分野のエンジニアになるでしょう。
フロントエンドエンジニアの学びと成長
フロントエンド分野は急速に発展しており、さまざまな新しい技術やアイデアが次々と生まれています。これは良い現象です。ただし、フロントエンドの急速な発展にはいくつかの問題も伴います。たとえば、クラスメートから、Angular.js、React、Node.js、ES6、ES7、CoffeeScript、について具体的に何を学べばよいのかと尋ねられました。 TypeScript... 学ばなければならないことが常に多すぎて、完全に理解される前に他の新しいテクノロジに置き換えられて「時代遅れ」になってしまうものもあるようです。
実は今でも同じ文章ですが、 フロントエンドエンジニアはまずソフトウェアエンジニアであり、基礎が最も重要です 基礎がしっかりしていないと、アプリケーションスキルはすべて「雲」になってしまいます。フロントエンドの基礎は何ですか? HTML、CSS、JavaScriptの基本スキル、数学、アルゴリズム、データ構造、オペレーティングシステム、コンパイル原則の基本スキル。
優秀なフロントエンドエンジニアは、自分の得意分野を持っていて、それを十分に深く掘り下げていると同時に、ビジョンを持ち、「越境」できる必要があります。フロントエンドをキャリアとして捉えることもできますが、自分のスキルをフロントエンドの分野に限定しないでください。フロントエンドの外に立たなければ、より明確かつ徹底的に見えないことがたくさんあるからです。
何かを学ぶときに盲目的にトレンドを追ってはいけません。皆が AngularJS について話しているとき、すぐにそれを学びに走ります。数日後には皆が React について話しているので、AngularJS をやめて React を学び始めます。フロントエンド分野には多くの知識ポイントがあり、学ぶ価値のあることがたくさんあります。賢い学生は、体系的な知識を習得する方法を知っており、それを十分に深く学習します。そうすることでのみ、ルールを要約し、方法論を形成することができるからです。学習の価値を最大化するために。
知識の正しい使い方 - ある分野の達人は、別の同様の分野では決して新人ではありません
面接中に、フロントエンドのパフォーマンスを最適化する方法を尋ねられた学生の中には、静的リソースを圧縮するためのツールの使用を繰り返し強調していましたが、ブログの nginx サービスを使用して明確に答えることができた学生もいました。ビルドでは gzip が有効になりませんでした。静的リソースをマージして HTTP リクエストを削減する必要があることは誰もが知っていますが、なぜ HTTP リクエストを削減する必要があるのでしょうか?また、リクエストを削減するとどの程度のメリットが得られるのでしょうか?これらの問題を理解する必要があるほか、HTTP プロトコル自体についても深く理解する必要があります。
もっと興味深い質問があります。HTML を書くための鍵はセマンティクスであると誰もが言いますが、セマンティクスとは正確には何ですか?この問題は多くの学生を困惑させた。ラベルはセマンティクスに準拠する必要があります。この答えは単純で標準的なように思えますが、どのようなラベルがセマンティクスに準拠しているのでしょうか。 bではなく強を使うことを重視しますか？では、宇宙文明が存在し、彼らの言語で「strong」が地球の「bold」に相当し、「bold」が地球の「strong」に相当する場合、彼らはstrongまたはbを使用する必要があるでしょうか? i タグはイタリック体を意味すると言われていますが、なぜ fontawesome.io はそれをアイコンのフォント タグとして使用するのですか。これは「反セマンティック」なのでしょうか?
かつて、地方には布を染めるための染料を作る一種の民俗染色工房が各地にありました。この種の染色室には大きな鉄の槽があり、通常、非常に力強い作業員が長い鉄の棒を持って染料槽の中で強く叩きます。ノックの音が大きいほど、より濃い色の染料が生成されます。 鉄バットを強く叩くと、なぜ染料が良くなるのですか？染屋の人たちは、これは代々受け継がれてきた経験だと言いますが、実際、本物の染料の色はノックの強さに大きく関係しています。ある日、化学を勉強しに村へ出た大学生が、染料と鉄含有酸化物との間に化学反応を起こして染料を作るには、適切な割合の鉄やすりを染料に加えるだけでよいことに気づきました。より鮮やかに。世代から世代へと受け継がれてきた「儀式」も、現実の原則の前では、実は一種の信仰や宗教にすぎないことが分かります。同様に、テクノロジーの性質を理解せず、その応用にとどまるなら、私たちは単なるテクノロジー宗教の信奉者に過ぎません。したがって、「Li Yanhui Javascript Video Tutorial」 では、コンピューター言語は僧侶の手にある魔法の杖のようなものであると言われています。魔法の杖が変わっても、僧侶は僧侶であり、世界も変わりません。頭を山のようにたたきます。司祭たちは神と交信する方法を習得していましたが、世界は杖しか見ていませんでした。
興味に応じてフロントエンドを選択してください
私が初めてプログラミングを学んだとき、この本全体は、Hello World やその他のさまざまな文字を黒いコンソールに出力する方法、またはキーボードで何かを入力しても文字を出力する方法を教えてくれただけではありません。他には何もありません。しばらく勉強した後、これは自分が思っていたものと違うと感じて、しばらく心が折れました。あまりにも多くの知識を学んだ後、私はC言語を「学んだ」かどうかわかりませんでした。 my これらのカラフルなオペレーティング システムやさまざまなアプリケーション ソフトウェアとブラック ホール コンソールの間には、明らかに大きなギャップがあるようです。
今にして思えば、当時の私の考えはもちろん素朴でばかばかしいものでした。当時はプログラミング言語と実行環境の違いも知りませんでしたし、オペレーティング システム、ユーザー API、ハードウェア インターフェイスなどについても何も知りませんでした。ネットワークサービスなどしかし、C 言語のチュートリアルではこれを一言で教えてくれるわけではなく、C 言語の文法を学んだ後、次に何を学べばよいのかわかりません。
比較的、私にとって Web 開発のほうが魅力的です。なぜなら、環境をインストールする必要がなく、テキスト エディターに文字を入力して保存し、ブラウザを開くだけで、すぐに豊かな視覚効果を確認できるからです。これはフロントエンドの利点です。
Web 開発は、厳密な入力と出力に比べて、目に見えるインターフェイスの層がはるかにカラフルで、そこに魅力を感じるのであれば、あなたはフロントエンドを学ぶのに適しています。
キャリアとしてフロントエンドを選択する前に、フロントエンド開発に本当に興味があるかどうかを明確に判断する必要があります。フロントエンドになることを選択するのは、仕事ではなく、フロントエンドが好きで、フロントエンドに適していることを確認する必要があります。それはまともに見えますし、給料も良いです。カラフルなインターフェイスを構築したり、さまざまなインタラクション ロジックを処理したりすることに興味がない、または飽きている場合、最も賢明な選択は、フロントエンド エンジニアになるという考えを放棄することです。退職が本当に悲しいことになるまで、それを何十年も好きで我慢することはできません。
学校の生徒のどのような能力を重視しますか?
学生の中には、フロントエンドの学生には実務経験が必要かという質問もありましたが、私は「いいえ」と答えます。
学生にとって、面接官は次のことをより懸念しています:
● 基礎: 数学、アルゴリズム、データ構造、およびコンピューター関連の基本の習得を含みます。
● 学習能力と学習方法：フロントエンドをどのように学習したか、どれくらいの期間学習したか、どの程度まで学習したか、どのような問題に遭遇したか、そしてそれらの問題をどのように解決しようとしたか。
● 関心: フロントエンドに対する関心の度合いは、さまざまな詳細に反映されます。一般的によくある否定的な例として、最近どのような新しいフロントエンドの知識に注目しているかを尋ねます。しかし、私がもう一度尋ねると、何人かの生徒は「何に注目しているか」と答えます。彼が注意を払っている限り、実際にはこの新しい知識にほとんど時間を費やしていないことがわかります。興味のある問題に時間を費やさない場合、フロントエンドでの「興味」をどうやって証明できますか。
●問題解決能力：難しい問題をどのように解決するか、これまで遭遇したことのない問題をどのように考えて最終的に解決するか。ここから、学生がフロントエンド思考を持っているかどうかを判断できます。これらの質問に対する標準的な答えはありません。私たちは特定の「公式のアイデア」を追求せず、結果よりもプロセスを重視します。
履歴書に関しては、多くの企業が学生にNode.jsとReactを学んでほしいと考えているようですが、自分ではどうすればいいのか分かりません、と何人かの学生が言っていました。
私が言いたいのは、学生にこれらの知識を要求するものではないということです。それどころか、私は学生たちに、しっかりとした基礎を築くために時間を使うことを個人的に勧めています。あなたが本当に得意なことを履歴書に書いてください。Node.js や React が履歴書に記載されていないからといって無視されることはありません。フロントエンドが本当に好きで、注意深く学んでいれば、フロントエンドの基本で私を感動させる方法を理解できるはずです。実際、履歴書に語彙を積み上げることを好む学生もいますが、これは必ずしも良いことではありません。なぜなら、自分が少ししか知らないことを書いて、最終的に面接を受けることになると、間違いなくマイナス評価を受けるからです。
テクノロジー自体は奥深いものです。学生 A は、「React のことは知っていますが、それを使ったことはありません」と言い、学生 B は、「AngularJS を使って小さな個人プロジェクトをいくつか書いたことがあります。」と言いました。という考えで先月ブログを書いたのですが、Android バージョン 4.1 の Webkit ブラウザに表示バグが発生してしまい、最終的にはこんな感じで解決しました。学生A、B、Cの3人のうち誰を選ぶと思いますか?
面接は相互コミュニケーションのプロセスであり、特に知識が安価なインターネット時代においては、フロントエンド分野における皆さんの能力と可能性を見極めることができれば幸いです。生徒たちは暗記のように暗記するのではなく、本当に心を込めて勉強する必要があります。私たちの大学では、知識を教えるだけでなく、実際に学び、研究する方法も教えていますよね。
フロントエンドに本当に興味があり、可能性がある場合は、少し注意してフロントエンドを学ぶ方法を知っておく必要があります。
最後に、皆さんが優秀なフロントエンドエンジニアになってほしいと願っています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
