基礎ゼロのシャオミンがどうやってフロントエンドエンジニアになれるのか？

この記事では、基礎ゼロのシャオミンがどのようにしてフロントエンドエンジニアになるのかを、フィクションのストーリーを通してゆっくりとお伝えしていきたいと思います。みんなの役に立つように。

あなたが基礎のない混乱した初心者で、フロントエンド エンジニアに転職したいと考えている場合、最初に頭に浮かぶ疑問の 80% はこれでしょう。次は何をしますか? 「フロントエンドエンジニアになる方法」「フロントエンド入門」「フロントエンド転職」「フロントエンド非学部」などのキーワードで検索すると、 ?

それでは私の記事を検索して教えていただければと思います。 [ビデオ チュートリアルの推奨: Web フロントエンド チュートリアル ]

この記事では、架空のストーリーを通じて、フロントエンド エンジニアが知っておくべきことをゆっくりと説明します。何を学ばなければならないかはほぼ同じです。

この記事の目的は、プログラミングの知識がなくても理解できるようにすることです。ストーリーの開発順序は、必ずしもこれらのテクノロジーが現実世界に登場する順序を表しているわけではありません。初心者にとっては、これらのテクノロジーが何をしているのかをよりよく理解できると思います。

さて、始めましょう!

ずっと昔... (本当に昔)

当時、シャオ・ミンは12歳でした。そして小学6年生。私がコンピューターの授業でセンチュリー エンパイアをプレイしていたとき (これをオンにするにはどうすればよいですか?)、先生が突然、学校でクラス Web デザイン コンテストを開催し、優勝者には良い赤ちゃんバッジが 10 個贈られると発表しました。

シャオミンさんは小学 2 年生からコンピューターを使ってきたので、コンピューターの操作には慣れていると考え、Web ページは難しくないと考え、この挑戦​​を受けることにしました。 。そして家に帰ってから、Baidu で検索しました:

[緊急] Web ページを作成するにはどうすればよいですか? 20 点を解決するために、熱心なネチズンは彼に、FrontPage と Dreamweaver という 2 つのキーワードを与え、これら 2 つのソフトウェアは、多くの既製のコンポーネントを提供していることを考えてみましょう。 Word 文書を入力するのと同じように操作できますが、Web ページにのみ表示されるボタン、フォーム、その他のものを追加することもできます。ドラッグ＆ドロップするだけで簡単にWebページを作成できます。

以下に示すように、Web ページがどのようになっているかをすぐに確認できます。

#何が起こっているのかよくわかりませんでしたが、Xiao Ming はこれら 2 つのソフトウェア セットを試したところ、Web サイトを書くのがとても簡単であることがわかりました。ファイルを編集するのと同じように、編集したいテキストを変更するだけで、画像が必要な場合は直接挿入することができます。
Xiao Ming が大人になって初めて、この編集モードが「見たものがそのまま得られる」と呼ばれていることに気づきました。エディターで実際の Web ページがどのように見えるかを確認すると、実際の Web ページは次のようになります。そのように見えます（英語名は WYSIWYG、What You See Is What You Get）。

いくつかの探索の後、Xiao Ming はクラス ネットワークのプロトタイプを完成させました:

彼はまだ小学 6 年生です。あまり厳しくしないでください。

「これは午後 1 日でできます。あと 3 日あれば勝てるはずです。」楽観的なシャオ ミンはそう感じています。彼の未来は明るい、そして今日はそう言いたいのです。 疲れたとき、私は洗濯をして寝ました。
彼は知らなかったのですが、厳しい未来が彼を待っていたということです。

ウェブページ担当者との最初の出会い

次の日の放課後、シャオ・ミンはコンピュータの電源を入れ、引き続き作業を続けたいと考えました。クラスのWebサイトにアクセスしましたが、FrontPageをどうやっても開くことができないことがわかりました。再起動しても再インストールしても役に立ちません。システムを再インストールするだけです。ただし、システムを再インストールするとインスタント メッセージングの履歴がすべて消去され、Xiaome から送信されたメッセージがすべて消えてしまいます。 途方に暮れたシャオ ミンは、昨日 FrontPage を使用して生成されたindex.html を見て、インスピレーションがどこから来たのか分かりませんでした。それを右クリックして [メモ帳で開く] を選択しました。素晴らしい写真:

これは Sublime ではなく、Xiao Ming のメモ帳がより高度であるだけです。

「これは何ですか! 画面全体で、Xiao Ming は中国語しか理解できず、他の言語で何を書いているのかわかりません。」言葉。

当初、シャオミンは窓を閉めたかったのですが、考え直してもう一度見てみたかったのですが、この様子を見ていくつかのパターンを発見したようです。すべてペアで表示されます。 がある場合は、

style が背景色と他のスタイルに関係しているようです。

Afterそのパターンを観察しながら、シャオミンは、そうでなければ変更してどうなるか見てみましょうと思いました。そこで彼は

アドレス帳

を何度かコピーして別のテキストに変更し、本文側の背景も #666666 に変更しました。

次に、それをアーカイブし、メモ帳の代わりに Web ページで開いたところ、次のようなシーンが見られました。 Xiao Ming が手動で変更した Web ページ

「わお！実際に変更されていました!」

Xiao Ming が後で本を調べに本屋に行って初めて、そのことに気づきました。 Web ページを開いた人は、実際にはメモ帳のテキスト ファイルを使用して Web ページを開いた人であり、FrontPage が行っていることはこれらのテキストを自動的に生成しているだけであることに気付きました。これらのペアを タグと呼び、異なるタグには異なる用途があります。
たとえば、

はリスト項目を意味し、タグ内に配置されるのはコンテンツです。スタイルに関しては、その名前が示すように、スタイルに関連するすべての操作を管理します。背景は背景であり、色はテキストの色です。

これらのタグとコンテンツを HTML (HyperText Markup Language) と呼び、これらのスタイルを CSS (Cascading Style Sheets) と呼びます。これらは、Web ページを構成する 2 つの最も基本的な要素です。 [関連ビデオの推奨事項:

HTML チュートリアル

、

CSS チュートリアル

]

Web ページはもともとテキストで構成されており、必ずしも準備完了の状態で記述する必要はないことを理解した後、ソフトウェアを作成しました。Xiao Ming そこで私は、FrontPage を放棄し、本屋に行って Web ページの入門書を何冊か購入し、基本から学ぶことにしました。 彼は半月も経たないうちに、テキスト エディタだけを使って Web ページ全体を作成できるようになりました。

豪華でクールなイベントも欲しいです

誇り高きシャオミンは、この年齢でこれほど真剣にこのイベントに参加する人はいないと感じました。彼がそうだったように、1位を獲得するのは簡単なことのようだ。そんな無邪気なシャオミンは、隣のクラスのシャオファがコンピューターの先生にウェブページについて質問しているのを偶然見かけたので、見に行きました。 見なくても大丈夫ですが、見たら2,400万人が衝撃を受けました。 まず、Web ページには、この質問にアクセスした訪問者数を表示できるカウンターがあります。次に、マウスの近くにテキストの円が表示され、マウスを動かした場所にテキストが表示されます。物理的なマーキーと同様に、クラスの発表を継続的にローテーションする Web マーキーもあります。

元気のいいシャオミンはその瞬間、言葉を失い、自分はただの井の中の蛙で、外の世界がどれほど大きいのか全く分かっていないと深く感じました。時間をかけて自分の精神状態を整えた後、シャオミンは勇気を出して次の授業でシャオホアにこう尋ねました。ウェブサイト上に宝箱を作成してください。それはまさに宝箱で、欲しいものは何でも手に入るのです。これは基本的に Web デザイナーのドラえもんです。」

家に帰った後、Xiao Ming はそれに倣い、あらゆる種類のクールな機能と効果で満たされた新しい世界を発見しました。テキストをコピーして貼り付けるだけです。 Web ページに追加すると機能します。 Xiao Ming は、クールだと思う効果をいくつか選択し、クラス ネットワークを変更しました:

Web ページの宝箱を作成していただきありがとうございます。QQ

に接続できませんが、コピーするだけでは Xiaohua に勝つことはできません。包囲を突破して学校の審査教師を驚かせる前に、これらの特殊効果に基づいて自分でカスタマイズして変更する必要があります。

Xiao Ming は、この決意のもと、Web ページに掲載されたテキストを注意深く調べ、いくつかの手がかりを見つけようとしました。

マウスを動かすと、マウスが動きます。動く特殊効果

何をしているのかよく理解できませんでしたが、Xiao Ming は「これはプログラムを書いているはずだ」と思いました。コードを使用して HTML 上の要素を制御し、振動を生成しました。 . 絵の効果。

インターネットで情報を検索した結果、Xiao Ming は、このプログラミング言語が JavaScript と呼ばれるものであることを発見しました。これは、Web ページ上のものを操作することができ、それが見える限り、それを使用して操作することができます。したがって、理想的には、やりたいことは何でもできます。

上記の画像振動関数を例として、JavaScript を使用して次のコードを記述します。

1. マウスが画像上を移動すると、振動が開始されます (振動の原理: 常に位置が変化します)

3. マウスが離れると、振動が停止し、位置が元に戻ります。

JavaScript を使用してこれほど素晴らしいことができると知ったら、これをよく学ばない理由はありません。そこで、Xiao Ming は本屋に行き、最も基本的な変数、ループ、判定から始めて関連する本を数冊探し、いつか自分でプログラム コードを書けるようになりたいと考えました。

2 週間後、Xiao Ming は次の機能の実装に成功しました:

1. 右ボタンをブロックする (原則: マウスの右ボタンが検出された場合は意図的に何もしない)

2. カレンダーを表示する (原則: プログラム コードに依存して現在時刻を取得して表示します)

3. ウェルカム テキストを表示します (原則: Web サイトがロードされるとウィンドウが表示されます)

Xiao Ming によるこれらの手書き機能により、彼はクラス ネットワーク レビューの教師から満場一致の賞賛を得ることができ、クラス ネットワーク コンテストで 1 位を獲得し、簡単に 10 個の良い赤ちゃんスタンプをポケットに入れることができました。

シャオミンは、最初は謙虚ではありませんでしたが、優勝した後はさらに傲慢になりました。

ハッ！ Web ページはまさにこのようなもので、コンテンツは HTML、スタイルは CSS、プログラミングは JavaScript この 3 つを知っていれば、とても簡単です。

そう、実はWebページは今でもこのように、この3つを中心に開発されているのです。しかし、ネイティブなものがフロントエンドの進化に追いつけない場合は、効率を高めるために、まずサードパーティのツールに依存する必要があります。 [ビデオ チュートリアルの推奨:

JavaScript チュートリアル

]

だから私は大人になったとき、 クラスのネット コンテストで優勝しました。その後、Xiao Ming は自分が本当に Web デザインに興味があることに気づき、家に帰ったとき、彼が手に持っていたのはもはや GBA ではなく、「入門」でした。はじめて』、『100の「クールなJavaScript Webページ特殊効果」』など関連書籍多数。

高校に入学した後も、彼は懸命に働き、余暇には Web デザインを勉強し、Web の三銃士 (HTML、CSS、JavaScript) の習得がますます向上しました。傲慢なシャオ。ミンさんは、自分は世界のトップレベルになれるはずだ、外の世界へ冒険に出てみる時が来た、と言いたかったのです。事件を引き受けたいと両親に言い、友達に聞いてほしいと頼んだのです。適切なケースがあった。

プロのスタジオに事件を引き渡すよりも、高校生に事件を引き渡す方が良いでしょう。確かに前者は非常に強力かもしれませんが、企業の観点からは、依然として事件を引き渡す傾向があります。結局のところ、事件を受け入れるということは単に「プログラムを書く」ということだけではなく、会議、議論、引用などのプロセスも必要となります。

しかし、黄天さんは努力の甲斐あって、ついに中学2年生の時に人生初の事件を手に入れた。

このケースは、企業の公式 Web サイトの構築です。Xiao Ming は、Web ページの作成と、JavaScript を使用した特殊効果の実装のみを担当します。

Xiao Ming はまだ 3 年生にすぎませんが、自分をスーパー ジュニアだと考えています。2 週間かけてレイアウトをカットし、それを会社に持ち込んで相手とデモしました。クライアントは最初は非常に満足していましたが、Xiao Ming が思いつかなかった質問をしました。

この Web サイトを他のブラウザで閲覧したことがありますか? IE、FireFox、または Safari の古いバージョンですか?

いいえ、Xiao Ming は、世界にこれほど多くのブラウザがあることさえ知らなかったとは考えもしませんでした。クライアントは自信を持って作成した作品をその場で他のブラウザで開きました。最初のバージョンでは警告が表示され、3 番目のバージョンでは JavaScript エラーが表示されました。

この事件はシャオミンに大きな影響を与えました。

その瞬間から、彼は世界が自分が想像していたよりもはるかに大きいことに気づきました。自分のコンピュータで実行できるからといって、他の人のコンピュータでも実行できるわけではありません。 Web ページを作成するときは、自分が読めるだけで十分ではなく、他の人も自分と同じように閲覧できるようにする必要があります。

巨人の肩の上に立って家に帰ってさまざまなブラウザをテストした後、Xiao Ming は、多くの CSS とプログラム コードを処理する必要があることに気付きました。たとえば、Safari では、適切に実行するために特別なプレフィックスを追加する必要がある場合があります。

同様のことが JavaScript にも当てはまります。ブラウザごとに関数名が異なる場合があり、ブラウザごとに異なるコードを記述する必要があります。

CSS の問題に関しては、Xiao Ming は調整するプロパティが少数しかないことがわかり、すぐに調整できましたが、JavaScript の場合は、これが非常に面倒で、数が多すぎることがわかりました。追加するものを追加すると、コードが非常にわかりにくくなります。

彼が苦労している間、すでにこの業界で働いている一部のネチズンが彼にこう言いました:

jQuery を使用できます!

このキーワードを入手した後、シャオミンはすぐにそれがどのようなものか調べ始めました。ああ、ところで、彼がこれらのネチズンとどのように出会ったのか知りたいなら、彼らはプログラミングクラブとブルーショップで知り合ったそうです。 [ビデオ チュートリアルの推奨: 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 サイトの関連チュートリアルのコラムに注目してください。 ！ ！