このキーワードを入手した後、シャオミンはすぐにそれがどのようなものか調べ始めました。ああ、ところで、彼がこれらのネチズンとどのように出会ったのか知りたいなら、彼らはプログラミングクラブとブルーショップで知り合ったそうです。 [ビデオ チュートリアルの推奨: jQuery チュートリアル]
Xiao Ming は、2 日間の調査の後、jQuery は一般にライブラリとして知られているが、この分野ではライブラリとして翻訳されないことを発見しました。ただし、「 関数ライブラリ」とは、既製の関数が多数提供されているという意味です。実装方法を知らなくても、それらを使用するだけで済みます。
これはブラウザの互換性と何の関係がありますか?以前は、さまざまなブラウザーと互換性を持たせるために 30 行のコードを記述する必要がありましたが、現在は 1 行のコードを使用するだけで、最下位のレイヤーが互換性を実現します。 。
さらに、構文も簡素化され、よく使用される関数が最初に書かれています。 jQuery のよく知られた機能は $ 記号で、これには便利な関数がたくさん含まれています。
下の図は、jQuery とネイティブ JavaScript (バニラ js とも呼ばれます) の比較です。巨人の肩の上に立つと、記述できるコードは大幅に減ります。
ブラウザの互換性の問題を正常に解決した後、ケースの所有者は喜んでケースをクローズしました。人生で初めて収入を得たシャオミンは、それ以来事件を引き受けるようになった。
同じことを繰り返さないでください
ますます多くのケースが寄せられる中、Xiao Ming は CSS という非常に厄介な問題を抱えています。ご存知のとおり、Cyclops は、多くのクライアントが要件を前後に変えるのを好むことを知っています。午前中には Web サイトのメインカラーを青にすると言い、午後には緑にすると言いました。夕方、彼らは赤を試してもいいか尋ねました。
そして、色だけでなく、Webページの余白や幅も、要するに、変更し続けるのは本当に面倒ですし、間違いを犯すことも多いです。
なぜ間違いを訂正するのでしょうか? Web ページの背景、ボタン、記事の背景はすべてメインカラーとして赤を使用している可能性があるため、最も早い方法は明らかにすべてを赤に置き換えることです。ただし、一部の色は赤ですが、Web ページのメインの色が赤であるためではなく、エラー プロンプトのテキストなど、赤である必要があるためです。これは元に戻す必要があります。そうしないと、非常に奇妙になってしまいます。
したがって、Xiao Ming は常に次のような変更を行います。間違ったものを見つけて置換し、元に戻します。
簡単なデモンストレーション。Recordit を使用して記録します。心からお願いします。このアプリをお勧めします
何度も変化する過程で、Xiao Ming はこの分野の有名な文章を思い出しました。「同じことを繰り返すな」。繰り返しのことを続けないでください。今のようなやり方はよくありません。この非常に不便なプロセスに永遠に屈しなければなりません。
CSSにプログラムの概念を導入することは可能でしょうか？例えば変数とか？このように、変数を使用してハードコードされた色を置き換えることもでき、変更も非常に便利です。
JavaScript 変数 CSS
を 1 か所変更するだけです。 Xiao Ming のアイデアを聞いた業界の先輩たちは、次のように言いました。
これは CSS プリプロセッサではないでしょうか?
CSS プリプロセッサは、中国語に翻訳すると CSS プリプロセッサと呼ばれます。簡単に言うと、このプリプロセッサを先に作成すると、標準 CSS に準拠するようになります。
もっとわかりやすく言うと、まず中国語で書いて、それをGoogle翻訳で日本語に訳して、日本人が理解できるようにするということです。違いは、Google 翻訳は正確に翻訳できない可能性がありますが、CSS プリプロセッサは非常に正確に翻訳できるため、標準 CSS であることが保証されます。
プリプロセッサを使用すると、CSS に変数を適用したり、ループや関数を使用したりすることもできます。つまり、プリプロセッサを使用すると、CSS を書く感覚がプログラムを書くことにもっと似てきます。簡単な例を次に示します。
最も一般的に使用されるものは次のとおりです。いくつかのプリプロセッサ: SCSS/SASS、Less、Stylus は非常に似ています。基本的に、1 つを選択して学習するだけで十分です。他のものに切り替えるのは難しくありません。プリプロセッサを使用すると、CSS をより効率的に作成できます。
しかし、プリプロセッサを使用しない場合、Web ページを作成できますか?もちろん！ただ、オーナーに毎回色を変えろと言われるとイライラしてしまうかもしれません。
以前、さまざまなブラウザに合わせて CSS を調整する必要があると述べたことを覚えていますか?一部の機能には接頭辞を付ける必要があります。これは、ミックスインと呼ばれるものを使用すると簡単に解決できます。これを関数として考えるだけです。
本来は、これらのさまざまな属性を繰り返し記述する必要があります。これをミックスインにラップしてインクルードするだけです。
しかし、Xiao Ming さんには質問があります:
この属性にはプレフィックスを付ける必要があることは誰もが知っているのですから、プログラムが自動的に追加できるようにしてはどうでしょうか?
はい、いいですか?まさにこれを行う PostCSS と呼ばれるものがあります。 (実際、PostCSS には多くのプラグインが含まれており、ここで説明するプラグインは Autoprefixer と呼ばれるものです)
ここで、PostCSS と CSS プリプロセッサの違いを知る必要があります。前者の入力は CSS で、出力は CSS です。プレフィックスを追加した後の CSS です。後者の入力は SCSS (またはその他)、出力は CSS です。この 2 つを一緒に使用することもできます。
は単なる例です。実際、border-radius は基本的に接頭辞を追加する必要はありません。
これらを使用する利点は次のとおりです。 SCSS を作成するときは、PostCSS が自動的にプレフィックスを行うため、プレフィックスについて心配する必要はありません。
これら 2 つの魔法の武器を使えば、Xiao Ming は CSS を書く際に大きな問題を起こすことなく、クライアントのニーズが日々変化する場合でも、これらのツールを利用して迅速に変更を加えることができます。そして、長年プロジェクトを担当していると、自分のプログラムコードが蓄積されており、基本的なページはすぐに構築できます。
シャオミンは事件を引き受け続けるうちに徐々に成長し、あっという間に新入生になった。 Xiao Ming は成長し、フロントエンドの世界もゆっくりと成長し、Xiao Ming が予想していなかったものになりました。
月に頼る詩人のように、海に頼るイルカのように
大学入学後、シャオ・ミンは次のことに挑戦し始めました。大きな案件をどんどん引き受ける 大規模プロジェクトということは、単なる企業イメージの美しい Web サイトではなく、ショッピング Web サイトや CMS システムなど、より複雑で多機能な Web サイトへと移行し始めていることを意味します。
プログラマーとして、これまで実装されていない新しい機能を見つけたとき、最初に行うことは、オンラインにアクセスして、誰かがその機能を実装しているかどうかを確認することです。誰かがすでにホイールを作成している場合、ほとんどの場合、自分で再作成する必要はありません。
そこで、Xiao Ming は、jQuery に加えて、他のライブラリを使用して、他の人が書いた関数を直接使用して問題を解決し始めました。しかし、Xiao Ming は使用後、ライブラリ メカニズムの導入に問題があることに気づきました。
現在のメカニズムは何ですか?使用したい各ライブラリを直接インポートして、それを直接使用するだけです。
スクリプト タグを使用して
をインポートするのは合理的だと思われますが、いくつか疑問があります。 。
まず、A.js が VERSION という変数を定義し、B.js も VERSION という変数を定義すると、変数名が競合し、2 つのライブラリが相互に干渉します。
2 番目に、実際には、各ライブラリ自体も他のライブラリを使用する可能性があります。A が Popular というライブラリを使用し、B も Popular を使用するとします。ここでは、実際には Popular を 2 回参照します (A と B の両方が使用されているため)。 、AとBを1回ずつ紹介します）。
つまり、汚染グローバル変数とライブラリ間の依存関係の問題により、Xiao Mingdou ページは非常に苦痛になり、どう見ても非常に不快になります。理想的には、Xiao Ming は、これらのライブラリを Python などの他のプログラミング言語と同じように使用する必要があると感じています。
Python の import
の簡単なデモは、シンプルでクリーンできちんとしています。任意のライブラリを使用したい場合は、import を使用して、使用したいものを導入するだけです。また、別のエイリアスを使用してライブラリを導入することもできます。プログラム コード、または特定の機能を導入するだけです。 
こんなふうに使えればいいのですが、JavaScriptがサポートされていないのでどうすればよいでしょうか？ ＃＃＃＃＃＃はぁ？既視感はありますか？
CSS で変数を使用できれば素晴らしいのですが、CSS は変数をサポートしていません...
ネイティブでサポートされていない場合、解決策は非常に簡単です。サポートがあるかのように見せかけ、ツールを使用してネイティブ コードに変換するだけです。 SCSS ではこれが起こります。いずれにしても、変換後はネイティブ CSS であるため、サポートする必要があります。
そこで、JavaScript がこのインポート メカニズムをサポートできるようにするライブラリが誕生しました:
<script></script> タグを使用する代わりに、プログラム コードに直接 var A = require('libraryA') を記述してライブラリを導入できるようになりました。 。その背後にある原則は、require 関数の実装を支援し、その背後にある依存関係の問題に自動的に対処できるよう、browserify に依存することです。
require 機構を使用すると、JavaScript を記述するときに複数のファイルに分割して記述し、最終的には browserify を通じてプログラム コードを組み立てることができます。
導入するには require を使用します。使用するモジュール
最後に、browserify を通じて、bundle.js が生成されます。その名前が示すように、実際に導入する必要があるものはこれにパッケージ化されています。 HTML のファイル内。
これも変わらなきゃ、あれも変わらなきゃ、私はスーパーチェンジャーになるべきでしょうか？
browserify は Xiao Ming の問題を解決することに成功しましたが、新たな問題が発生しました。これまで、SCSS を作成し、命令を使用して SCSS を CSS に変換してきました。次に、JavaScript のモジュールを喜んで使用し、browserify を使用して Bundle.js をパッケージ化しました。
小さな変更を加えただけの場合でも、最終結果を確認するには、2 つの異なるコマンドを入力して変換を実行する必要があります。言うまでもなく、このプロジェクトをオンラインに公開する前に、CSS と JavaScript を難読化して圧縮し、コードを文字化けのようなものにする必要があります。
これらのプロセスは、需要が増えるにつれてますます複雑になるだけです。どうすればよいでしょうか?おそらく 1 年後には、プロジェクトで実行する命令が 12 個以上になるでしょう。これを処理できる便利なツールはありますか? Xiao Ming さんは再び業界の友人たちに相談し、最終的に Gulp というキーワードを思いつきました。
Gulp はプログラム コードを使用してワークフローを管理できます。次の図に示すように、多くのタスクを定義し、各タスクが何を行うのかを明確に説明して、そのタスクを実行するだけです。
最初に html というタスクを定義して pug ファイルを html に変換します。2 番目のタスクは css を使用して変換し、3 番目のタスクは minify します。 jsからソースマップを生成することです。 gulp コマンドを入力すると、上記の 3 つのタスクが自動的に実行されます。 gulp を使用すると、馴染みのないプロジェクトを取得したときに gulpfile.js を直接見ることができ、プロジェクトの実行の開始方法や、内部に記述されているすべてのタスクの方法がわかります。 以前は、複数の命令を手動で入力する必要がありましたが、現在は gulp を使用して 1 行の命令で、SCSS を使用して CSS に変換し、ブラウザ化してパッケージ化することができます。これは、bundle.js に組み込まれます。これは非常に便利です。 現在、Xiao Ming は、HTML、CSS、JavaScript だけを使ってクラス Web サイトを作成していた Xiao Ming ではなく、SCSS、PostCSS、browserify、Gulp、jQuery などのツールを使用しています。 。非常に多くのツールの助けを借りて、Web ページの開発速度が大幅に速くなります。各ツールの目的は作業の効率を下げることではなく、作業の効率を高めることだからです。 この瞬間、Xiao Ming はエキサイティングなニュースを目にしました。ES6 と呼ばれる新世代の JavaScript 構文 (厳密には ECMAScript) が登場しました。この新しい構文には、Xiao Ming が期待しているものがたくさんあります。いくつかの新機能。
サポートされていない場合はどうすればよいですか?ご存知ですか??#これは新しい構文であるため、古いブラウザではサポートされていないはずです。 Xiao Ming はフロントエンドの開発をずっと追い続けており、おそらくフロントエンドのルーチンを理解しています。フロントエンドルーチンとは何ですか?
ブラウザがサポートしていないものを使用したい場合は、それを変換するツールを開発してください SCSS についても同様であり、同様のことが当てはまります。ブラウザ化用。 Xiao Ming は、ES6 がリリースされたとき、それがすでに第三者のニュースになっていたことを知っていたため、誰かがすでにこのツールを作成しているに違いないと確信し、オンラインで検索して Bingo! を見つけました。
このツールは babel と呼ばれ、その公式 Web サイトにはその機能が簡単に記載されています:
簡単に言うと、新しい世代を作成できます。 (ブラウザがまだサポートしていない場合でも) JavaScript を作成し、babel を通じてブラウザでサポートされている構文にコンパイルします。この概念は CSS プリプロセッサと似ていますが、最大の違いは、SCSS の構文が「次世代の CSS」ではないため、ブラウザーは将来これらの構文をサポートせず、新世代の JavaScript はサポートされないことです。ブラウザは「まだ」ですが、いつか必ずやります。
その日が来たら、babel を完全に捨てることができますが、プロジェクトは引き続き正常に実行できます (ただし、その日が来るまでには長い時間がかかる可能性があります)。
babel を使用した後は、クールでトレンディーな構文を使用できますが、ブラウザーで実行する前に、追加のプロシージャ層を用意し、babel を使用してコンパイルする必要があります。しかし、それは問題ではありません。すでに gulp があるので、gulp にもう 1 つの Babel タスクを追加するだけです。
CSS はもはや問題ではありません。JavaScript にもモジュール化と新世代の構文が備わっています。さらに進化できるものはありますか?
北に、本当にあります。
すべてのリソースをカバーしました
前に、require を使用して JavaScript を導入できるようにする、browserify について説明しました。これでは十分ではないと感じた人もいて、次のような突飛なアイデアを思いつきました。
なぜ JavaScript だけなのか?すべてをリソースとして扱ってみませんか? JavaScript をインポートするだけでなく、CSS や画像もインポートできます。
全員を平等に扱い、すべてをリソースとして扱うという考えが、webpack の中心的な概念です。 require('A.js') だけでなく、require('style.css')、require('bg.png')
外部リソースであれば、すべてインポートします。
Webpack は実際には、browserify と使用方法が非常に似ています。違いは、前者はより多くのものをリソースとして扱うため、記述されたコードは次のようになります。リソースとしてのさまざまなもの
さらに、webpack は、プラグインを介したパッケージ化中にこれらのリソースを使用して何かを行うこともできます。どうしたの？たとえば、babel-plugin を使用して ES6 を JavaScript に変換します。または、scss-plugin を使用して SCSS コードを CSS に変換します。 
つまり、コードを記述するときに style.scss を直接インポートすることもでき、インポート時に webpack が自動的に CSS に変換します。いいね！
webpack が有名になって以来、browserify を使用する人は徐々に減っていきました。webpack はより多くのことを実行でき、実際に gulp の多くのタスク (コンパイルなど) を webpack に置き換えることができるからです。
ただし、webpack は単なるモジュール バンドラーであり、gulp のようなタスク マネージャーではないことに注意してください。実際、以前 gulp のタスクとして browserify を使用したのと同じように、この 2 つを一緒に使用できます。 webpack もタスクとして考えてください。
「ああ、フロントエンドにこれだけ多くのツールがあるのなら、これで十分でしょう!」 シャオ・ミンは、ますますツールが増えていくプロジェクトを見ながらため息をつきました。
はい、ツールはほぼ揃っていますが、私たちがこれまで焦点を当ててきたのは、新世代の構文とモジュール化メカニズムであり、フロントエンドが複雑になった場合の最も困難な問題の 1 つを完全に無視しています。
UI とプログラムの内部状態を同期するにはどうすればよいですか?
現在 Todo リスト アプリをお持ちの場合、プログラム内に todo_list という配列があると仮定すると、配列の外観はインターフェイスの外観と同じになるはずです。これは同期と呼ばれます。 UI とプログラムの内部状態。 ＃＃＃＃＃＃難しい？一見すると、それほど難しいことではありません。
# というコードを書くことで、todo の操作時に UI とプログラムの内部状態を同時に操作できます。 ##とはいえ、プロジェクトのサイズが小さい場合は問題ありませんが、プロジェクトが非常に大きい場合は、この 2 つの同期を常に確保する必要があるため、非常に困難になります。現在の方法では、状態の変更を忘れる関数があると問題が発生し、その後の状態が同期されなくなります。 この問題に対する Google の解決策は次のとおりです。状態を変更すると UI が変更され、UI を変更すると状態も変更されます。これは素晴らしいことだと思いませんか。そこで Angular フレームワークがあります (私は Angular についてあまり詳しくないので、ここをクリックしただけです)。 
そして、この問題に対する Facebook の解決策は、非常に、非常に、非常に直感的で、概念的な観点から見ると、最もシンプルな解決策だと思います。状態が変化するたびに UI を再レンダリングするのは良いことではありませんか?
Todo を削除したい場合は、Web 上のコンポーネントに関係なく、状態の Todo を直接削除できます。ページ。新しいものを追加する場合も同様で、状態が変わるとすぐに UI 全体が変更されるため、画面上のことをまったく気にする必要はありません。この概念を実装すると、おそらく次のようになります:
これは非常に単純ですか?それを持っている！ 状態を UI と一致させるにはどうすればよいですか?プログラマが状態に注意を払い、毎回状態を変更するだけで、変更されるたびに現在の状態に応じて UI 全体を再描画する限り、この 2 つがまったく同じであることを保証することは可能ではないでしょうか。
非常に合理的に聞こえるのですが、なぜ昔の人はそれを思いつかなかったのでしょうか?なぜなら、実際に「毎回再描画」すると、実際には一部のみを再描画する必要があるため、実際にはパフォーマンスの問題が発生するからです。しかし要するに、React はこの問題を解決し、あたかもすべてを再描画しているかのように使用できるようにしますが、実際には必要な部分だけを再描画しているだけです。
React を学ぶ前に、React の中心となる概念を覚えておいてほしいと思います。状態を変更するだけで、それに応じて UI が自動的に変更されます。
この複雑なフロントエンドの問題を解決した後、Xiao Ming のフロントエンドの習熟度はより高いレベルに達しました。
駆け出し
#話はこうなります。シャオ・ミンは大学を卒業し、兵役を終えた翌日です。除隊したとき、彼はとても喜んでいて、私は履歴書を提出し、数日後に最初の面接の機会を得ました。もちろん、応募した職種はフロントエンドエンジニアだった。
面接プロセス全体は非常に良かったです。面接官は、Xiao Ming がこの年齢でフロントエンドについてこれほど理解でき、知っておくべきことをすべて知っていたことに驚きました。インタビューの最後に、面接官は次の質問をしました:「ツールがたくさんあるのは面倒だと思いませんか?どうやってそれらすべてを学びましたか?」
Xiao Ming が次のように答えたのを見ました。
いいえ、問題が発生した場合は解決する必要があるのではないでしょうか?特に何かを学んだわけではなく、これらのツールを使えば問題が解決するかもしれないと感じただけです。
そう言って面接は終了し、シャオミンさんは翌日の午後に内定をもらいました。 「上司は、あなたがこのプログラムについて良いアイデアを持っているので、できるだけ早くオファーを送るよう私に勧めました。」これが人事部が彼に言ったことです。
結論
フロントエンドはなぜ初心者にとってこれほど複雑で、学ぶべきツールがたくさんあるのでしょうか?彼らは、これまでにこれほど多くのことが起こったことを知らないため、この進化の時期を経験していないため、なぜこれらのツールを使用するのかがわかりません。 ツールの登場は問題を複雑にすることではなく、単純にすることです。ツールの導入によって効率が低下したと感じた場合は、ツールが役に立たないことを責めるのではなく、そのツールがまったく必要ないかどうかをよく考えるべきです。 記事を読んだ後、うまく書けば、HTML、CSS、JavaScript、SCSS (CSS プリプロセッサ)、PostCSS、jQuery、Gulp、Babel、Webpack、および React が何をしているのかを理解できるはずです。は、現代のフロントエンド エンジニアに必要なスキル セットです (React は Angular または Vue に置き換えることができます)。 Xiao Ming は、これまでフロントエンドの仕事をしてきた人間として、あらゆるツールが登場するたびに解決しなければならない問題を知っています。しかし、2018 年にフロントエンドだけに触れたいと考えている人は、なぜフロントエンドにこれほど多くのツールがあり、これほど複雑なのか不思議に思うでしょう。しかし、実際にはそうではありません。Xiao Ming に何が起こったのかを誰かが教えてくれれば、これらのツールについてよりよく理解できるはずです。 なぜ、なぜ、なぜ！私は、常に理由を問う必要があり、これらのツールがなぜ作成されるのかを知る必要があることを繰り返し強調してきました。その背後にあるコンテキストを理解すると、そのツールが邪魔をするのではなく、実際に役立つことがわかります。これらのツールの出現が必要であることがわかり、これらのツールをよく学ぶためのより良い理由が得られるでしょう。 この記事が、初心者がなぜ今これらのツールを学ぶ必要があるのかを理解するのに役立つことを願っています。間違い等ございましたら、お気軽にご指摘くださいますよう、よろしくお願いいたします。 以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！
上記の画像振動関数を例として、JavaScript を使用して次のコードを記述します。 
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
