github 上の最も包括的なリソース チュートリアル - フロントエンドに関係するすべてのナレッジ システム

フロントエンドは間違いなく、2016 年に最もホットなテクノロジーです。

Angular js、vue、react など、さまざまなフロントエンド MVC フレームワークが次々と登場し、フロントエンドコンポーネント開発の概念は人々の心に深く根付いています。フロントエンドの給与はすでにモバイル開発よりも高くなっています。

個人のウェブマスターとして、フロントエンドデザインを学ぶことも必要です。まず、いくつかの小さなデザインの問題を自分で解決し、同時に自分の美しさを改善し、ウェブサイトのUIデザインレベルを向上させることができます。 。

必須の基本スキル

フロントエンドスキルの概要 このプロジェクトでは、フロントエンドエンジニアに関わるあらゆる知識を
詳細に記録します。基礎的なスキルを身につけたら、学習の方向性を見つけてスキルや知識を向上させることができます。

frontend-dev-bookmarks は外国人がまとめたフロントエンド開発リソースです。対象範囲は非常に広いです。さまざまな知識、ツール、テクニックが含まれており、非常に包括的です。

以下は、私が個人的に初心者レベルで習得する必要があると考える基本的なスキルです:

HTML4、HTML5 構文、タグ、セマンティクス
CSS2.1、CSS3仕様、HTMLと組み合わせて様々なレイアウトや効果を実現
Ecma-262で定義されたJavaScriptの言語コア、ネイティブクライアントJavaScript、DOM操作、HTML5の新機能
成熟したクライアントサイド JavaScript ライブラリ、jquery を推奨します
サーバー側の言語: サーバー側の開発経験がある場合は、すでに知っている言語を使用できます。Java に精通している場合は、サーブレットを選択できます。慣れていない場合は、単純なログインおよび登録機能を実装するだけで十分です。ただし、最も基本的な要件は、将来的に学習を続ける必要がある場合があります。 、
HTTP

上記の基本スキルを習得すれば、仕事で必要な技術をすぐに学ぶことができます。

基本的な開発ツール

適切なツールは、学習効率を効果的に向上させ、知識自体に集中し、問題が発生したときに迅速に特定して

解決することができます。私が個人的に必要だと思うフロントエンド開発ツールは次のとおりです。

テキストエディタ
• : Sublime Text が推奨され、さまざまなプラグイン、テーマ、設定をサポートしており、使いやすいです
ブラウザ
• : Google Chrome が推奨されます。更新が速く、さまざまなフロントエンド標準を非常に適切にサポートします
デバッグツール
• : Chrome に付属の Chrome 開発ツールを使用することをお勧めします。DOM 構造とスタイルの表示、コンソールからのデバッグ情報の出力、JavaScript のデバッグ、ネットワークの表示などが簡単に行えます。 補助ツール
: 写真の編集、色の選択、Fireworks でのサイズの測定、AlloyDesigner でのサイズの比較を行う PhotoShop、および上記の Chrome 開発ツール
• FQ ツール
: ランタン、Gecko Walk
• 学習方法と学習目標

方法:

エントリー段階で繰り返し読んでください

古典本の中国語版

、本の中のすべての例を実装し、ブラウザで効果を確認してください
1. ある程度の基礎ができたら、オンラインでさまざまなチュートリアルやデモを検索して、さまざまな機能の実際の使用方法や一般的な機能の実装方法を学ぶことができます
HTML、CSS、JavaScript標準を読んで知識ポイントを包括的に向上させます
フロントエンド専門家のブログや記事を読んで、知識の理解を深める
検索エンジンを上手に活用しましょう
5. 目標:

これまでの知識ポイントの重要な概念を暗記し、学習経験に基づいて独自の理解を深めます

一般的なCSSレイアウト、タブコントロールなどの一般的な機能の実装方法に精通している。
2. 入社までの道のり

以下は入門段階に適した書籍と教材です

1. HTML については、まず「HTML & CSS: Design and Build Websites」の第 1 章から第 9 章を読み、次に「HTML5: The Missing Manual」の第 1 章から第 4 章を読みます。
2. CSS: まず「CSS: The Missing Manual」を読んでから、「CSS Definitive Guide」を読んでください
3. JavaScript については、まず「JavaScript アドバンスト プログラミング」を読んでから、「JavaScript 決定版ガイド」を読んでください
4. HTTPHTTP の決定版ガイドを参照してください
5. HTML、CSS、JavaScript は学習プロセス全体で相互に組み合わせる必要がある箇所が多くあり、これは実際の作業でも同様であり、単純な機能モジュールを実装する必要があります。
6. 実践は学習の重要な部分です。書籍では知識ポイントの説明に重点が置かれているため、サンプルだけでは不十分な場合があります。そのため、検索エンジンを使用して簡単なチュートリアルを見つけ、そのチュートリアルに従って機能を実装する必要があります。ここにいくつかのより良いチュートリアルの URL があります
   • 大手企業のフロントエンドキャンパス採用筆記試験の面接質問を練習問題や他人がまとめたフロントエンド面接の質問、個人がまとめた面接質問（参考回答付き）を検索できます
   • http://code.tutsplus.comにはさまざまなチュートリアルがあります
   • MDN には多くのチュートリアルもあり、さらに重要なことに、特定の機能を見つける必要がある場合は、Google で検索してください: xxx site:https://developer.mozilla.org
   。
   • http://www.html5rocks.com/zh/ にも高品質のチュートリアルが多数あります
   • http://www.sitepoint.com/
   • http://alistapart.com/
7. ネイティブ JavaScript は習得する必要があるスキルです。ネイティブ JavaScript を習得するためには、実際の仕事で非常に役立つ jQuery に習熟することをお勧めします。この分野の書籍には、「Learning jQuery」が含まれます。 jQuery公式サイト
8. https://github.com/ アカウントを作成して、普段勉強しているさまざまなコードやプロジェクトを保存します。
9. ある程度の基礎ができたら、個人ブログを開設して、学習プロセス中に発生した問題と解決策を記録することができます。これは、自分自身が確認するのに便利であり、他の人にも役立ちます。 http://www.cnblogs.com/ または http://www.csdn.net/ にアクセスしてアカウントを登録することもできます。これは便利で実用的です
10. 英語の情報を検索するために Google をよく使用する場合は、http://stackoverflow.com/ から質の高い回答を見つけることができます。元気があれば、ここで直接検索してください。他の人の質問に答えることで、私生活の能力も大幅に向上します。
11. 古典的な本に慣れたら、前の重要な基本スキルのセクションへのリンクを開くことができます。対応する規格をよく読み、知識を完全にマスターしてください

改善を続けます

前の基礎ができたら、基本的にフロントエンドを開始します。この時点では、誰もが学習の方向性を念頭に置いているかもしれません。
前の必須スキルのセクションで説明した 2 つのプロジェクトを参照し、開発と学習のためにその中からいくつかを選択できます。ここにいくつかの良い点があります:

• Grunt: 作業効率を向上させるフロントエンド自動化ツール
• CSS なし: 優れた CSS プリプロセッサ
• ブートストラップ: 優れた CSS フレームワーク、デザイナーのいないチームに非常に適しており、少ないものと組み合わせると完璧です
• requirejs: AMD 標準モジュールローダー、フロントエンドのモジュール化トレンドに不可欠なツール
• Node.js: JavaScript はバックエンドとしても使用でき、フロントエンド エンジニアをより高いレベルに引き上げます
• AngularJS: シングルページアプリケーションに適したツール
• モバイル Web 開発: スマートフォンの普及により、モバイル トラフィックが PC トラフィックに徐々に追いつきつつあります
• JavaScript メモリ管理: SPA の長期運用ではメモリ リークに注意する必要があります
• 高性能JavaScript(より高速なWebアプリケーションインターフェイスの構築)
• Web サイトを高速化するためのベスト プラクティス: 重要なスキル

個人的な経験

LingyuCoder の学習体験

上記のマスターがかなり要約しているので、ここではいくつかのナンセンスを述べます

####ツール

• Chrome 開発ツール: フロントエンドの開発とデバッグのための強力なツールで、いくつかの機能に重点を置いています。
  • コンソール(ナンセンス)
  • 要素: 要素のスタイル調整、非常によく使用されます
  • ソース: コードにブレークポイントを追加し、シングルステップ デバッグし、シングルステップ デバッグ中にメモリ内のオブジェクトを表示します。
    • 式を監視: 式を通じて現在のメモリ内の値を表示します
    • 呼び出しスタック: 呼び出しスタックを表示し、非同期をオンにすると、非同期呼び出しスタックを確認できます (これは、特に ajax をデバッグするときに非常に便利です)
    • スコープ変数: スコープチェーン上の変数、非常に便利です
  • ネットワーク: 各リクエストを表示するためにパケットをキャプチャします。非常に重要で、フロントエンドとバックエンドの共同デバッグに必要です
  • タイムライン: レンダリング、JS 実行、その他のステージを分析し、パフォーマンスを最適化するための強力なツールです
  • エミュレーション: モバイルページ開発に不可欠なモバイル環境をシミュレートします
  • いくつかのプラグイン:
    • liveload: ページの変更後に自動的に更新され、F5 を押す必要はありません
    • 寸法: ページ上で直接測定できる強力なツール
    • ライブスタイル: CSS スタイルは変更後に自動的に有効になり、更新する必要がなく、要素の変更もコードと同期できます
    • 画像ツール: 測定、色選択
    • UC QRコード:モバイル端末でのデバッグとスキャンに必須
    • pagespeed、YSlow: ページパフォーマンス分析および最適化プラグイン
    • Mark Feixiang: 優れたオンライン マークダウン エディター、週次レポートをすばやく作成し、メモを取る
• sublime text2: 便利なコーディング、多くのプラグイン、高速、優れたパフォーマンス
  • emmet: HTML エンコード速度を向上させるために不可欠
  • sublimelinter + lint とさまざまな言語のヒント: コードエラー修正
  • 一部のスニペット: 開発効率を向上させるための自動補完
• Intellij IDEA と WebStorm: さまざまな機能を統合した統合開発環境、開発は Sublime よりも便利ですが、パフォーマンスは高くなります
• Mark Men: 測定、色選択、マーキングのための強力なツール。ビジュアル ドラフトを取得した後に最初に開くソフトウェアです
• GFW ファッカー: 私は可能であれば、Hongxing を使用して、はしごとして使用する仮想サーバーを購入します。
iHosts: 非常に優れたホスト管理ソフトウェアで、ホストの変更が簡単で、開発とデバッグに不可欠です
Charles: Mac プラットフォームで最高のパケット キャプチャおよび分析ツール
Rythem: AlloyTeam が作成したプロキシ パケット キャプチャ ソフトウェアは非常に軽量で、インストールが簡単で、モバイル端末 (実機) の開発とデバッグに使いやすいです
Wunderlist: 非常に優れたTodoリストで、タスクやニーズが多い場合に管理するのに非常に便利です

####スキル

実際、JavaScript (NodeJS を含む)、HTML、CSS 以外にもフロントエンド スキルはたくさんあります。実際、フロントエンドのスキル ツリーは非常に大きく、ここでは私が開発中に見たものの一部のみをリストします
#####言語の基本
JavaScript:

スコープチェーン、クロージャ、ランタイムコンテキスト、これ
プロトタイプチェーン、継承
NodeJS の基本と共通 API

CSS:

セレクター
ブラウザの互換性と一般的なハック
CSS レイアウトの方法と原則 (ボックス モデル、BFC、IFC など)
CSS 3、アニメーション、グラデーションなど

HTML:

セマンティックタグ

#####上級

JavaScript:

非同期制御(Promise、ES6ジェネレーター、Async)
モジュール型開発手法（AMD、CMD、KMDなど）
JavaScript インタープリターに関する知識
• 非同期IOの実装
  ガベージコレクション
  イベントキュー
一般的に使用されるフレームワークとその原則
• jQuery: セレクターに基づいたフレームワークですが、個人的にはフレームワークとは言えないと思いますが、モジュールのロード機構がなく、ソースコードは読書や学習に非常に適しているため、ツールライブラリと考えるべきです
  AngularJS/Avalon およびその他の MVVM フレームワーク: MVVM パターン自体の概念と双方向バインディングの実装、およびそれを分離する方法の理解に焦点を当てます
  アンダースコア: 優れたツール ライブラリ、一般的なツール コード スニペットの実装を理解しやすい
  ポリマー/React: コンポーネント開発、未来に直面し、コンポーネント開発の原則を理解する

CSS と HTML: 主に CSS3 と HTML5 の機能、およびブラウザーの処理プロセスと描画原理について説明します

DOMツリー、CSSOMツリー、レンダリングツリー構築プロセスとページレンダリングプロセス
HTML、CSS、JavaScriptの解析時に発生するブロック
HTML5関連
• SVG とベクター グラフィックスの原則
  キャンバスの開発とアニメーションの原則（フレームアニメーション）
  ビデオとオーディオ
フレックスボックスのレイアウト方法
アイコンフォントの使用

一般的に使用される NodeJs パッケージ:

コア
急行
アンダースコア
非同期
ゴクゴク
うなり声
接続
リクエスト

いくつかのアイデア:

レスポンシブウェブ
エレガントな劣化、漸進的な強化
ドン
• t make me think

Webページの使いやすさ、アクセシビリティ、意味
SEO 検索エンジンの最適化、検索エンジンの原理を理解する
SPAの利点と問題点

パフォーマンスの最適化:

• リクエスト数を減らす(スプライト、コンボ)
• キャッシュを上手に活用しましょう（アプリケーションキャッシュ、httpキャッシュ、CDN、ローカルストレージ、セッションストレージ、メモモード）
• セレクターの消費を削減（右から左）、DOM 操作を削減（DOM と JavaScript インタープリターの分離）
• CSSのリフローと再描画

#####プロジェクト

• バージョン管理: Git を使用したことがあれば、SVN を再度使用する必要はありません。
  • Git: ローカルバージョン管理のメカニズム
  • SVN: リモートセンターのバージョン管理メカニズム
• 自動構築: 主にless、テンプレート、コーヒーなどの前処理と、コードの圧縮とマージ
  • Gulp: フローに基づいて構築され、高速で優れたモジュール品質
  • グラント: 独立したタスクの構築、遅い速度、面倒な構成、高い柔軟性
• 前処理とテンプレートエンジン
  • less: 構文はシンプルですが、機能は制限されています
  • jade、ejs、Velocity、その他のテンプレート エンジンには、それぞれ独自の強みがあります
  • コーヒー: Pythonエンジニアのお気に入りですが、私は使ったことはありません
• 環境構築: 主にオンラインコードをローカルにマッピングし、ローカルでデモサーバーを起動します。 シミュレートされたデータのモックについては、人によって意見が異なります。
  • ローカルプロキシ: ihosts
• 自動テスト: ビジネスが比較的安定している場合は、自動テストを使用してテスト インシデントを減らすことができますが、需要が高い場合はテスト ケースの維持コストが高くなり、自動テストは逆効果になる可能性があります。
  • ジャスミン
  • モカ
• 生態系
  • npm
  • 弓
  • spm
• 自分のブログを構築する
  • git ページ
  • ヘクソ
  • ジキル

#####未来

• Web コンポーネント: 未来志向のコンポーネント開発アプローチ
  • HTMLテンプレート
  • シャドウ DOM
  • カスタム要素
  • HTMLインポート
• モバイル端末のネイティブ開発: これも理解する必要があります。今後、フロントエンドエンジニアは WebView を扱うことが多くなり、ネイティブ開発についても理解する必要があります。

#####その他

インターンシップに参加して感じた、コードを入力するだけでは解決できないこともありました

• ビジネスについて考える: 私は個人的にこの側面が非常に欠けているので、それを一番上に置き、コードを入力する前にビジネスについてもっと考えます
コミュニケーションとコミュニケーションスキル: これは非常に重要です。フロントエンドはプロジェクトマネージャー、プロダクト、インタラクション、バックエンドに同時に対処する必要があります。コミュニケーションが不十分だと、多くの無駄な労力が発生し、プロジェクトが遅れてしまいます。
• 知識管理、時間管理: インプットとアウトプットのバランス、アウトプットが最良のインプットです。上手に共有し、コミュニティに参加し、上手にコミュニケーションし、記録を残す方法
• 新しい技術への欲求と挑戦する勇気
####はじめに

本を読むことから始めることもできますが、本を読みながら、テクノロジーの新しい発展にも注意を払い続ける必要があります。私が良いと思う本をいくつかご紹介します

「Advanced JavaScript Programming」: 入門書としても使えますが、基礎をすぐに吸収でき、上達したらもう一度読むこともできます

。
• 「JavaScript の決定版ガイド」: 入門には適していませんが、必要です。わからないことがあれば、読んでみてください。非常に役立ちます。
「保守可能な JavaScript の作成」および:
「Node.js 開発ガイド」: Nodejs の優れた入門書です
「Node.js徹底解説」：Nodejs上級者必携の本
「JavaScript 非同期プログラミング」: JS 非同期プログラミングの概念を理解する
「JavaScript パターン」と「JavaScript デザイン パターン」: JavaScript コード パターンとデザイン パターン、開発思考を JavaScript に変える、非常に良い本です
「JavaScript フレームワークの設計」: ホイールを使用しながら、フレームワークの各部分の実装をソース コード レベルから詳しく説明しています。 、たくさんのことを学ぶことができます

考えさせられない》: Web デザインのコンセプトとユーザーの行動の理解はとても良いです

• Webデザインの考え方やデザイン上の注意点も伝える不朽の作品『CSS Zen Garden』《Don
「ハイパフォーマンス JavaScript」と「ハイパフォーマンス HTML5」: パフォーマンスを重視した書籍。パフォーマンスの最適化だけでなく、原理レベルでも学ぶべき内容が多く含まれています
「HTML5 Canvas Core Technology」: 私が読んでいる本は、Canvas の使用、アニメーションの実装、アニメーション フレームワークの開発に非常に役立ちます
「HTTP 権威ガイド」: フロントエンドの開発やデバッグに関わることの多い、HTTP プロトコルに関する必須知識
「レスポンシブWebデザイン」：技術自体は難しいものではなく、重要なのはレスポンシブWebページのデザインコンセプトとモバイルファーストの考え方です
「JavaScript 言語の本質」: JavaScript 開発の考え方を広めるのに最適な本です。
####いくつかの良いウェブサイト
• • github: 言うことはありません。他の人のソース コードをもっと読み、自分のソース コードをもっとアップロードし、世界中の専門家から学んでください
  • codepen: フロントエンドの美しさを体験するには必須の場所です。クールなエフェクトや優れたプラグインがたくさんあります
  • echojs: 新しいjs情報がすぐにわかるサイト
  • スタックオーバーフローとセグメントフォールト: 基本的にあらゆる種類の質問に答えることができます
  • Google ウェブの基礎: どの記事も注意深く読むのに適しています
  • 静的ファイル: オープン CDN、使いやすい
  • iconfont: Alibaba のベクター アイコン ライブラリ、非常に優れており、CDN をサポートし、プロジェクトをサポートします
  • html5 ロック: 多くの新しいブラウザー機能や最先端の​​テクノロジーに関する記事を見つけることができる優れた Web サイト
  • css のコツ: CSS を最大限に活用する方法と CSS の新機能について学ぶ方法、ここであなたを満足させることができます
  • JavaScript Secret Garden JavaScript 初心者必読、非常に良い本です
  • w3cplus: フロントエンド学習 Web サイト、その記事の品質は非常に優れています
  • node school: 優れたノード学習 Web サイト
  • Learn git Branch: 優れたインタラクションを備えた Git 学習 Web サイト
  • Front-end Stew: フロントエンド記事を共有するためのコミュニティであり、優れた記事が多数あります
  • 正規表現: 正規表現に関する入門チュートリアル。非常に見る価値があります
  • Ruan Yifeng のブログと Zhang Xinxu のブログ: 特定の知識をすぐに理解するための近道ですが、より深く掘り下げる必要がある場合は、他のリソースが必要です
  • さまざまな専門家によるブログ: 多すぎるため、Zhihu には完全なリストがあります
  。
  • 様々な規定がある公式サイト、規定の読み方が分からない

  ####プロセス
  私は Java SSH をやっていて、途中からフロントエンド開発者になったので、スキルが比較的弱く、問題が増えました。基本的には、W3C School の書籍やチュートリアル、さらには Uncle Tom のブログなどのフロントエンド ブログを読むことから始めることができます。以前は jQuery ばかり使っていて、ネイティブ js についてはあまり勉強していませんでしたが、その後、経験者による言語の本質など、動物の本を少しずつ読むようになりました。私はこれらの本から言語レベルの知識をたくさん学びました。しかし、これでは明らかに十分ではないので、私はよくコミュニティに行ってみんなが何を話しているのかを確認し、興味があればさらに情報を調べたり、デモを書いたりします。これが CSS を学ぶ主な方法です。その後、さまざまな専門家のブログや比較的深い書籍、新しい知識やフレームワークに注目するようになり、github にコードを投稿する練習を続けたので、知識も多く学びました。インターンシップでは実際のプロジェクト開発に自ら参加し、学校では学べない多くの概念や考え方を学ぶことができ、それもとても役に立ちました。もう話すのはやめて、レンガを動かしてオファーを求めるつもりです...

  MrRaindrop の学習体験

  Qiu God の招待に応えて、フロントエンドの知識システムのアーキテクチャについてはここでは要約しませんが、マスターの要約はすでに整っています。皆さんが勉強して勉強するのに役立つと思うリンクがいくつかあります。それでは、これから始めようとしている FE 初心者に役立つのであれば、主にフロントエンドの学習プロセス中に遭遇した問題と学んだ教訓を共有します。これがこの記事の読者層であると仮定します)。回り道を避け、一歩ごとに次の方向性を知ることが最善です。マスターの概要と共有については、Qiu God が主催する FE-learning を参照してください。

  まず言っておきますが、フロントエンドについては人それぞれの方法で学ぶことができます。この記事は参考用ですので、読んでいただければ大丈夫です。

  起源

  私は偶然、ゲームを作る方向に進み、Unity や Unreal などのゲーム エンジンを試し、いくつかのゲーム プロトタイプをいじってきました。 , 研究員として研究室に入ってすぐに、チューターから直接jsを書くように指示されましたが、チューターからはBaidu Map APIをベースにしたデータ表示ページを書く時間を半月与えられました。これまでjsを書いたことはあまりなかったのですが、地図APIの使い方が分からなかったので、研究室の先人たちが残した「コード」を参考にしながら「JavaScript権威ガイド」（Rhinoceros Book）を読みました。 、最後にすべての関数を書き出しました。そのページは私の js 入門とみなされ、私のフロントエンド学習ルートの始まりでもあります。

  今考えてみると、フロントエンドを任されたものの、自分の興味を頼りにやり続けるしかないのは当然ですが、フロントエンドは面白い技術分野ですし、コミュニティもとても充実しています。毎日「忙しい」。

  プロジェクト、次のプロジェクト

  フロントエンド学習の初期段階では、書籍から完全に脱却してプロジェクト駆動になることができると個人的に思います。私は個人的には『Rhinoceros』から読み始めましたが、時間がなかったり、分厚い本を読むのが退屈だと感じている人は、私のようにならないでください。もちろん、本を読むことにした場合は、その本のすべての例に従うのが最善です。大学院に進学するまでjsに触れたことはなかったのですが、学校が始まる前の4月にチューターからBaidu Map APIのプロジェクトについて直接教えてもらい、その後、いろいろなERPや地図データの表示について、いろいろな意味で違いはありましたが。同じではありませんでしたが、基本的にはすべてフロントエンドの仕事をしており、研究室全体で私だけがフロントエンドを書いていると信じられますか?リッチクライアントSPAの時代のバックエンドはRestfulなインターフェースで、コード量は基本的にフロントエンドにあるのですが、どうしたらそんなにうまく書けるでしょうか... この間、メンターに従って起業を経験し、毎日午後7時から10時まで働いていたため、急速な成長期を迎えたと考えられます。

  テクノロジーをマスターするには、まずその大枠をマスターし、実現可能なアイデアを考え、実行可能なデモを作成し、その後、そのデモを完成させて読むと、テクノロジーを感覚的に理解できるようになります。もう一度本を読むと、さらに多くのことを得ることができます。最初はnative jsからjquery、そしてextjs、そしてangularjsと、講師指定の技術から自分で選んだ技術まで、まるでモンスターと戦ってアップグレードするかのように、次々とプロジェクトを練習していきました。もちろん、プロジェクトがなくても、自分でプロジェクトを作り、自分のアイデアを実現することは楽しくてやりがいがあります。

  依存症の収集と知識管理

  フロントエンドの学習は断片的・分散的なものが多く、自分で整理・要約・要約する必要があるという特徴があります。 Weibo や Zhihu で多くの偉大な達人をフォローすることは、単なるゴシップを聞くためではありません。時には、偉大な達人たちの言葉がいつまでも後味を残すことがあります。うっかり言及した言葉が次の学習目標になる可能性が非常に高いです。 これらの情報を収集し、Googleを活用し、質問し、考えてください。 ゲーム内の収集要素と同様に、フロントエンド学習も収集要素が満載の「ゲーム」ですが、在庫や倉庫として機能するナレッジ管理ツールが必要です。私が知っている大手企業は全員、ナレッジ管理ツールを使用しています。 。 ヘビーユーザー。以前はoneNoteを使っていましたが、その時はクラウドストレージに縛られず、今は基本的にevernoteを使っており、ノートが1,200枚以上溜まっています。タグで管理しているのでブックマークにはdeliciousを使おうとずっと思っていたのですが、一度も使ったことはありません。もちろん、これらのツールに焦点を当てているわけではありませんが、便利なツールは学習効率を向上させることができます。もちろん、最も重要なことは、常に学習したいという強い意欲を維持することです。あなたの目標は、フロントエンドに関するすべてを理解することです (もちろん、すべてをマスターする必要があるわけではありません。結局のところ、現実的に言えば、あなたのエネルギーは限られているからです)。 、これは考えられません）。 神に従いなさい

  これはあまり制御できないようです...これについては上司にはあまり言いませんが、ある程度は運に左右されます。そうは言っても、周囲の専門家ともっとコミュニケーションをとることが重要です。この専門家はそれほど高いレベルである必要はありませんが、テクノロジーに対して情熱を持っている必要があります。大学院1年生の時、毎日7時に研究室のドアに入ろうと意気込んでいたら、自分より早く着いている奴がいた。後で分かったのですが、この人は午前中に出発して午後に戻ってきましたが、インストラクターは慣れていたようで、徹夜でコードを書き、朝になるとまた寝ていたことが分かりました。その後、この神様とよく相談しましたが、その度に自分の経験値がどんどん上がっていくのを感じました。そして、研究室にはもう一人の神がいて、目の前の徹夜神からは「ほんの少し離れていて、いつも追いかけていて、決して追いつかない」と評されていた。 C/C++ から vc/mfc、UNIX ネットワーク プログラミングまで、しばらくの間読書計画を立てました。最終的には、Java コア テクノロジと C# プログラミング ガイドを読みました。 MSDN で神と会話することができました。

  つまり、この 2 人の神は私を穴に引き込んだか、ある穴から別の穴に飛び移ったのです。2 人の神はどちらもフロントエンドに携わっていませんが、テクノロジーの間には常に類似点があります。

  読書

  読んで、もっと読んで、良い本を読んでください。 Liu Weipeng さんのブログで公式を見ました、

  あなたの最初の月の給料は、あなたが以前に購入した（読んだ）専門書の価格の合計に等しい

  （ここで言及されている技術書は、古典的で優れた書籍と認められているものを指します）。この公式の正しさを議論するのは無意味に思えますが、その合理性には疑いの余地がありません。つまり、古典的な専門書をもっと読んでください。最も極端な例では、Google の Xu You が私の大学で、図書館の TP312 本棚全体を掃除したと言いました...フロントエンドの古典的な本については、私が収集したフロントエンドの本のリストがあります (不足しているものがあれば)フロントエンドの古典、それでいいです）本を教えてください）可能であれば、これらの本を読み終わるまでの時間を探しています。前に述べたように、フロントエンドの知識ポイントは緩く、分散した知識ポイントを収集したり、ブログからすばやく学習したりするなど、フロントエンド学習の 1 つの側面にすぎません。知識システムを深く理解したい場合は、その知識システムを徹底的に理解する必要があります。 、そしてそれを体系的に理解するためには、古典的な本を読むことが依然として不可欠です。

  Rhinoceros の本を最初から読み終えて、その後、フロントエンドとはあまり関係のない他の古典的な技術書を読み始めました。その後、研究室プロジェクトやいくつかの小さなプロジェクトを通じて、徐々に詳しくなっていきました。フロントエンド分野については、「JavaScript パターン」、「JavaScript デザイン パターン」、および「保守可能な JavaScript の作成」を読み、その後、ノードについて学び、それを使用していくつかのガジェットを作成するようになりました。また、「NodeJS を起動して実行する」も読みました。 " と "Mongodb Authoritative Guide". " があるのですが、前者はちょっと罠な気がします。当時、プー・リンさんの著書『詳説・平易解説』がまだ出版されていなかったので、図書館に借りに行って読んでみたところ、なかなかいい本だと感じました。しかし、私はあまりにも読んだことが少なすぎると感じたので、まだ続ける必要があります（上記の書籍リストを参照）。

  フロントエンドの位置付け

  フロントエンドの位置付けは、どのような種類の知識やスキルを吸収する必要があるかに関係しており、技術の世界で特に何に敏感である必要があるかを決定します。フロントエンドがページを切り取ってインタラクションと視覚的な要件を実現することだけを目的としていると考えている場合、フロントエンドの理解はまだ初期段階にあります。アリババとの最終面接で、私は試験官に次の質問をしました。フロントエンド技術は日を追うごとに変化し、範囲はますます広がり、標準はますます豊かになってきています。どんな触手でも遠くまで届くようです。 。フロントエンドに適切な位置を与えるにはどうすればよいでしょうか?試験官は私のためにそれを長い間分析し、それを一文で要約しました。それはユーザーとウェブサイトの間のコネクタであり、ユーザーエクスペリエンスの創造者です（これは元の言葉ではありませんが、一般的な意味です）。つまり、フロントエンドの最終的な目標は、実際には、ユーザーエクスペリエンスを中心に、ユーザーエクスペリエンスを創造し、ユーザーエクスペリエンスを向上させることです。インタラクションデザインから始めても、パフォーマンスの最適化から始めても、ワークフローの効率を向上させるためのワークフローの改善から始めても、最終的にはユーザーエクスペリエンスの創造と改善がすべてであり、最終的にはユーザーエクスペリエンスに反映される必要があります。このまとめは非常に合理的だと思います（もちろん、「ユーザーエクスペリエンス」という用語は広すぎるので、フロントエンドエンジニアだけの範疇ではありません。たとえば、バックエンドを開発する場合、データ処理プロセスを最適化すると全体のパフォーマンスが向上します）これはユーザーにとっても良いことです)。

  現在、フロントエンドエンジニアは、特定の段階で、ページのカット、ビジュアル要件の実装、インタラクションの実装などよりも、フロントエンドの自動化、画像プログラミング、パフォーマンスの最適化、など、もう少し後ろに進むと、PHP /JSP/ASP/nodeJs になります。以前は、バックエンド テンプレートは一般的にバックエンド カテゴリに属していましたが、フロントエンド アーキテクチャの進化により、次のような疑問が生じるかもしれません。バックエンド言語 (PHP/Java/C# など) の使用を必要とするバックエンド テンプレート コードを記述する)、これはいわゆる ビッグ フロントエンド (ただし、これは矛盾するものではありません)フロントエンドの位置付けについては、依然としてユーザーと接触する部分を扱い、ユーザーエクスペリエンスの最適化を行っています。)おそらく最も一般的または話題になっているのはノードです。実際、BAT 企業 3 社の中で、Baidu はより多くの PHP を使用しており、Alibaba はより多くのノードを使用していると言われています。

  ユウおじさんはブログで、いわゆるフルエンドは水平で、フルスタックは垂直であると述べました。 フルエンド つまり、すべての端末はユーザーエクスペリエンスに関係しており、ユーザーと直接接触しているため、すべての端末はフロントエンドです。マルチターミナル開発に適応するには、Web フロントエンドに基づいて Android 開発と iOS 開発の知識を広げる必要があります。幸いなことに、ハイブリッド開発手法の人気により、ネイティブ言語開発を使用するスキルはそれほど高くありません。 -深さ。 。

  フルスタックは、大きく言えばフロントエンドからバックエンド、開発から運用保守までを指すと考えられます。この種のことについては、おそらく、この方向で開発したい、その意味でフルスタックの開発者になりたいのであれば、私の記事を読む必要はないかもしれません。狭義のスタックとは、特に、フロントエンドからノード J 上の構築までを JS 言語を使用して記述することを指します。フロントエンドとバックエンドは、統一された言語、統一されたプログラミング モデルを持ち、さらには同じコード セットを共有します。 。フルスタック開発について詳しくは、フルスタック エンジニアに関する Yu Bo の記事をご覧ください。

  上記はフロントエンドとそこから派生する技術的ルートについての私の表面的な理解です。 分野を学び、その全体的な方向性と傾向を把握することは非常に重要です。さらに、フロントエンドの学習方向とキャリア成長の道筋を全体的に理解したい場合は、Ba Chi がまとめたこのフロントエンド開発の講演を読むことをお勧めします。

  ついに

  フロントエンドの学習とインタビューに役立ついくつかのリンクを提供します:

  • フロントエンド開発者インタビューの質問集
  • フロントエンドスキルまとめ(JacksonTian)
  • 別のフロントエンドスキルの概要画像
  • フロントエンドに関すること（書籍リスト）

  byr フォーラムの yiyizym からの提案

  Gruntと比較して、gulpの学習は簡単になります

  SPAを作りたいならbackbone.jsとbackbone.marionette.jsがおすすめです

  FQ 気にしないで、10 元出して 1 か月分の紅杏を買ってください。

  しっかりとした基礎を築いた後でこれらのことを学ぶのは問題ありません。

  html あまり言うことはありません。時間があるときに HTML5 を学習してください。

  Css 中国の資料は異なる意見が多く、読みすぎると混乱するため、できるだけドキュメントを読んでください。

  各種ブラウザでのhtml/cssタグや属性の対応状況を確認できるサイトがあってとても便利です。

  javascript JavaScript の高度なプログラミングを見てください。でも、あんな分厚い本を読んだら忘れてしまいます。これは、JavaScript の中心となる概念 (オブジェクト/プロトタイプ チェーン/コンストラクター/実行コンテキスト/スコープ チェーン/クロージャ/this) を説明する優れた記事です。

  時間があれば、来年 6 月にリリースされる予定の ecmascript 6 をご覧ください。 Ruan Yifeng の Web サイトに紹介情報があります。

  jquery には多くの API があり、この Web サイトで簡単に見つけることができます。 jquery deferred の使用法を理解する時間をとってください。

  コードエラーのチェック、新しいディレクトリファイルの作成、コードの整理など、Sublimetext 用のプラグインをさらにインストールします。

  総合カテゴリー

  総合カテゴリ	住所
  フロントエンドナレッジシステム	http://www.cnblogs.com/sb19871023/p/3894452.html
  フロントエンドの知識構造	https://github.com/JacksonTian/fks
  Webフロントエンド開発部門の概要	https://github.com/unruledboy/WebFrontEndStack
  Webフロントエンド開発部概要 - 中国語版	http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html
  Web フロントエンド スタック v2.2	Web フロントエンド スタック v2.2
  無料プログラミング中国語書籍インデックス	https://github.com/justjavac/free-programming-books-zh_CN
  フロントエンドブック	https://github.com/dypsilon/frontend-dev-bookmarks
  フロントエンドの無料書籍の包括的なコレクション	https://github.com/vhf/free-programming-books
  フロントエンドナレッジシステム	http://www.cnblogs.com/sb19871023/p/3894452.html
  無料プログラミング中国語書籍インデックス	https://github.com/justjavac/free-programming-books-zh_CN
  インテリジェント社会 - JavaScript開発に精通しています	http://study.163.com/course/introduction/224014.htm
  JavaScriptの再紹介(JSチュートリアル)	https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript
  MIT オープンコース: コンピューターサイエンスとプログラミング入門	http://v.163.com/special/opencourse/bianchengdaolun.html
  JavaScript でのこのトラップの最も完全なコレクション - 最高のコレクションの 1 つ	http://segmentfault.com/a/1190000002640298
  JS関数プログラミングガイド	https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html
  JavaScriptのお約束ミニブック（中国語版）	http://liubin.github.io/promises-book
  Tencent モバイル Web フロントエンド ナレッジベース	https://github.com/AlloyTeam/Mars
  フロントエンド開発ガイドフロントエンド開発ガイド	https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide
  フロントエンド開発ノート	https://li-xinyang.gitbooks.io/frontend-notebook/content
  大きなフロントエンドツールセット - Nie Weidong	https://github.com/nieweidong/fetool
  フロントエンド開発者マニュアル	https://dwqs.gitbooks.io/frontenddevhandbook/content

  エントリークラス

  エントリークラス	アドレス
  フロントエンド入門チュートリアル	http://www.cnblogs.com/jikey/p/3613082.html
  Xuefeng の Javascript チュートリアル	http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
  jQueryの基本チュートリアル	http://www.imooc.com/view/11
  フロントエンドエンジニアに必須の PS スキル - 画像のカッティング	http://www.imooc.com/view/506
  個人的な経験に基づいたフロントエンドエントリー方法のまとめ	https://github.com/qiu-deqing/FE-learning

  ツール

  ツール	アドレス
  フロントエンド人々のクラブ	http://f2er.club/ あなたのお気に入りを本当に解放できます
  Sublime Text をエレガントに使用する方法	http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/#
  新しいコーディングアーティファクト Atom の使用時間数	http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/
  CSSスプライト作成	http://www.imooc.com/learn/93
  バージョン管理を始める - Github への移行	http://www.imooc.com/learn/390
  Grunt 初心者向けフロントエンド自動化ツール	http://www.imooc.com/learn/30
  IntelliJ IDEA 簡体字中国語特別チュートリアル	https://github.com/judasn/IntelliJ-IDEA-チュートリアル
  ウェブストーム、InterllIdea、Phpstorm	http://t.cn/8kZZ1Uy
  崇高なテキスト	https://github.com/jikeytang/sublime-text
  アトム	https://atom.io
  ビジュアルスタジオコード	https://code.visualstudio.com

  総合的なエフェクト検索プラットフォーム

  総合効果検索プラットフォーム	アドレス
  JavaScriptリソースコレクション中国語版	https://github.com/jobbole/awesome-javascript-cn
  100 以上の非常に包括的な Web 開発ツールとリソース	https://xituqu.com/170.html
  zoommyapp.com	http://zoommyapp.com/ 高画質画像ギャラリー
  unsplash.com	https://unsplash.com/ 高画質画像ギャラリー
  www.pinterest.com	https://www.pinterest.com/ ギャラリー
  新古品	http://nos.twnsnd.co レトロスタイルギャラリー
  エフェクトネットワーク	http://www.jq22.com
  Petals.com	http://huaban.com/
  美しい写真	http://www.topit.me/
  コードペン	http://codepen.io/
  フォトネットワーク	http://699pic.com/
  一般的に使用される JavaScript コードスニペット	http://microjs.com

  チームブログ|週次レポート

  週刊ニュースレター	アドレス
  秋烏ウィークリー	http://old.75team.com/weekly/
  コーダーウィークリー	http://weekly.manong.io
  WEBフロントエンド開発	http://www.css88.com
  1日あたりJSチップ!	http://www.jstips.co
  テンセント合金チーム	http://www.alloyteam.com/webdevelop/
  平安科技モバイル開発チーム 2 技術週報	https://github.com/PaicHyperionDev/MobileDev Weekly

  開発センター

  )

  開発センター	住所
  mozilla js リファレンス	https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
  Chrome Development Center (ChromeのコアがBlinkに切り替わりました)	https://developer.chrome.com/extensions/api_index.html
  サファリ開発センター	https://developer.apple.com/library/safari/navigation
  Microsoft JS リファレンス	https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94.aspx
  js秘密の花園	http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html
  js秘密の花園	http://bonsaiden.github.io/JavaScript-Garden/zh
  w3ヘルプ	http://www.w3help.org 総合バグ収集 Web サイト

  Nodejs

  Nodejs	アドレス
  nodejs はかなり大きいです	http://liuqing.pw
  Node.js には教育は含まれますが、スキルは含まれません	https://github.com/alotang/node-lessons
  長さは比較的小さいです	http://www.rainweb.cn/article/category/Nodejs
  node Express 入門チュートリアル	http://www.w3cfuns.com/article-5598538-1-1.html
  nodejsのスケジュールされたタスク	http://my.oschina.net/u/568264/blog/193773
  nodejs ブログ	http://60sky.com
  【NodeJS学習記04】ニュースリリースシステム	http://www.cnblogs.com/yexiaochai/p/3536547.html
  旧正月の 7 日間おめでとうございます。nodejs を学ぶのも楽しいです	http://www.cnblogs.com/qqloving/p/3541099.html
  7 日間で NodeJS を学ぶ	https://github.com/nqdeng/7-days-nodejs
  Nodejs学習記(2)---イベントモジュール	http://www.cnblogs.com/zhongweiv/p/nodejs_events.html
  nodejs を始めましょう	http://www.cnblogs.com/liusuqi/p/3735491.html
  angularjs ノードjs	https://github.com/zensh/jsgen
  nodejsをゼロから始めるためのシリーズ記事	http://blog.fens.me/series-nodejs
  nodejsを理解する	http://debuggable.com/posts/ Understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb
  nodejs イベントポーリング	http://blog.mixu.net/2011/02/01/ Understanding-the-node-js-event-loop
  ノードを始める	http://www.nodebeginner.org/index-zh-cn.html
  nodejs cms	http://ourjs.com/detail/53e1f281c5910a9806000001
  包括的な NodeJS チュートリアルである Node の入門	http://ourjs.com/detail/529ca5950cb6498814000005
  NodeJS のコードのデバッグとパフォーマンスのチューニング	http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line

  包括的なAPI

  総合API	アドレス
  JavaScript	http://www.javascripting.com
  さまざまな人気の図書館検索	http://microjs.com
  runoob.com - さまざまな API コレクションが含まれています	http://www.runoob.com
  オープンソース中国オンラインAPIドキュメントコレクション	http://tool.oschina.net/apidocs
  開発ドキュメント	http://devdocs.io 英語総合APIサイト

  Ecmascript

  Ecmascript	アドレス
  ECMAScript 6 を理解する - Nicholas C. Zakas	https://leanpub.com/ Understandinges6/read
  ES6 の探索	https://leanpub.com/exploring-es6/read
  ES6 翻訳の探索	https://github.com/es6-org/exploring-es6
  exploring-es6 翻訳プレビュー	http://es6-org.github.io/exploring-es6
  阮一峰es6	http://es6.ruanyifeng.com
  Ruan Yifeng Javascript	http://javascript.ruanyifeng.com
  ECMA-262、第5版	http://yanhaijing.com/es5
  es5	http://es5.github.io

  Jsテンプレート

  Jsテンプレート	アドレス
  テンプレート選択	http://garann.github.io/template-chooser
  アートテンプレート	https://github.com/aui/artTemplate
  tomdjs	https://github.com/aui/tmodjs/blob/master/README.md
  淘宝網テンプレートジューサーテンプレート	http://juicer.name/docs/docs_zh_cn.html
  Fxtpl v1.0 Starry フロントエンド テンプレート エンジン	http://koen301.github.io/fxtpl
  laytpl	http://laytpl.layui.com
  mozilla - ヌンジャク	https://github.com/mozilla/nunjucks
  ジューサー	https://github.com/PaulGuo/Juicer
  ダストjs	http://akdubya.github.io/dustjs
  etpl	http://ecomfe.github.io/etpl

  HTML5(HTML)

  HTML(HTML5)	アドレス
  HTML5タグについての深い理解	https://segmentfault.com/a/1190000002695791
  効率的な​​HTMLの書き方	https://segmentfault.com/a/1190000002680822
  HTMLメタタグの概要と属性の使い方の紹介	https://segmentfault.com/a/1190000004279791
  HTML5についての冗談	http://www.cnblogs.com/dojo-lzz/p/5059316.html

  CSS3(CSS)

  http://www.alloyteam.com/2015/10/8536ブラウザハックhttp://browserhacks.com

  Angularjs

  CSS	アドレス
  CSS構文リファレンス	http://tympanus.net/codrops/css_reference
  メンテナンス可能なCSSの書き方	https://github.com/chadluo/CSS-guideline/blob/master/README.md
  CSS3アニメーションマニュアル	http://isux.tencent.com/css3/index.html
  Tencent CSS3アニメーション制作ツール	http://isux.tencent.com/css3/tools.html
  Zhiye CSS ガジェットコレクション	http://linxz.github.io/tianyizone
  css3 js モバイルのごった煮	http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb
  bouncejsタッチライブラリ	http://bouncejs.com
  css3ボタンアニメーション	http://fian.my.id/Waves
  animate.css	http://daneden.github.io/animate.css
  グローバルCSSの終わり

  Angularjs	アドレス
  Angular.js の学習リソース	https://github.com/dolymood/AngularLearning
  angularjs 中国語コミュニティ	http://angularjs.cn
  Angularjsソースコード学習	http://www.cnblogs.com/xuwenmin888/p/3739096.html
  Angularjsソースコード学習	http://www.ifeenan.com/?c=AngularJS
  ブートストラップのangularカプセル化	http://angular-ui.github.io/bootstrap
  angularjs + nodejs	https://cnodejs.org/topic/51404e0f069911196d2e3923
  Lv Dabao Angularjs	http://www.cnblogs.com/lvdabao/tag/AngularJs
  AngularJS のベストプラクティス	http://www.infoq.com/cn/news/2013/02/angular-web-app
  Angular のいくつかの拡張ディレクティブ	http://www.lovelucy.info/angularjs-best-practices.html
  Angular データ バインディングの原則	https://github.com/Pasvaz/bindonce
  いくつかの拡張 Angular UI コンポーネント	https://github.com/angular-ui
  EmberとAngularJSのパフォーマンステスト	http://voidcanvas.com/emberjs-vs-angularjs-performance-testing
  AngularJS にもっと近づく - 基本機能の紹介	http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html
  Angularjs 開発ガイド	http://angular.duapp.com/docs/guide
  Angularjsの学習	http://www.cnblogs.com/amosli/p/3710648.html
  jQuery を念頭に置いて AngularJS を学習しないでください	http://www.rainweb.cn/article/angularjs-jquery.html
  angularjsの勉強メモ	http://wangjiatao.diandian.com/?tag=angularjs
  angularjs 開発ガイド	http://www.angularjs.cn/T008
  angularjs英語情報	https://github.com/jmcunningham/AngularJS-Learning
  角度ブートストラップ	http://angular-ui.github.io/bootstrap
  angular jqモバイル	https://github.com/opitzconsulting/jquery-mobile-angular-adapter
  角張ったUI	http://mgcrea.github.io/angular-strap
  jQuery Mobile + AngularJS の統合経験	http://www.tuicool.com/articles/7ZZVr2
  jQuery の背景を踏まえた、AngularJS プログラミングのアイデアの使用方法	http://blog.jobbole.com/46589/
  AngularJS オンライン チュートリアル	http://each.sinaapp.com/angular
  角度の勉強ノート	http://www.zouyesheng.com/angular.html

  反応する

  反応	アドレス
  react.js 中国語フォーラム	http://www.react-china.org
  react.js 公式ウェブサイト	https://facebook.github.io/react/index.html
  react.js 公式ドキュメント	https://facebook.github.io/react/docs/getting-started.html
  react.js マテリアル UI	http://material-ui.com/#
  react.js TouchstoneJS UI	http://touchstonejs.io
  react.js アメウイ UI	http://amazeui.org/react
  React 入門サンプルチュートリアル - Ruan Yifeng	http://www.ruanyifeng.com/blog/2015/03/react.html
  React Native 中国語バージョン	http://wiki.jikexueyuan.com/project/react-native
  Webpack と React Little Book - フロントエンド シチュー	http://www.html-js.com/article/Fakefish%203053
  Webpack と React Little Book - gitbook	https://fakefish.github.io/react-webpack-cookbook
  ウェブパック	https://github.com/webpack/webpack
  Webpack、101エントリー体験	http://html-js.com/article/3009
  Webpack 入門チュートリアル	http://html-js.com/article/3113
  Webpack に基づくフロントエンド エンジニアリング ソリューションの探索	http://segmentfault.com/a/1190000003499526
  Reactオリジナルの実践的なビデオチュートリアル	http://www.piliyu.com

  ビュー

  vue	アドレス
  ビュー	http://cn.vuejs.org
  Vue フォーラム	http://forum.vuejs.org
  Vue スタートガイド	http://www.cnblogs.com/aaronjs/p/3660102.html
  Vueのいくつかのリソースインデックス	http://segmentfault.com/a/1190000000411057
  素晴らしいビュー	https://github.com/vuejs/awesome-vue

  モバイルAPI

  モバイルAPI	アドレス
  99モバイル知識コレクション	https://github.com/jtyjty99999/mobileTech
  モバイル フロントエンド開発ナレッジ ベース	https://github.com/AlloyTeam/Mars
  モバイルフロントエンドのいくつかの落とし穴と解決策（外観とパフォーマンス）	http://caibaojian.com/mobile-web-bug.html
  【オリジナル】モバイルウェブリソース編成	http://www.cnblogs.com/PeunZhang/p/3407453.html
  zepto 1.0 中国語マニュアル	http://mweb.baidu.com/zeptoapi
  zepto 1.0 中国語マニュアル	http://www.html-5.cn/Manual/Zepto
  ゼプト 1.1.2	http://www.css88.com/doc/zeptojs_api
  ゼプト中国語注釈	http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html
  jqmobileマニュアル	http://app-framework-software.intel.com/api.php
  モバイルブラウザ開発コレクション	https://github.com/maxzhang/maxzhang.github.com/issues
  モバイル開発のごった煮	https://github.com/hoosin/mobile-web-favorites

  jQuery

  jQuery	アドレス
  jQuery API 中国語ドキュメント	http://www.jquery123.com
  ヘミンオンライン版	http://hemin.cn/jq
  css88 jq API	http://www.css88.com/jqapi-1.9/on
  css88 jqui API	http://www.css88.com/jquery-ui-api
  jQueryを学ぶ	http://learn.jquery.com
  jqueryソースコード検索	http://james.padolsey.com/jquery
  Webフロントエンドリソースの概要(jQuery、Js、Css3など)	http://www.cnblogs.com/jihua/p/webfront.html

  D3

  D3	住所
  d3 チュートリアル	https://github.com/mbostock/d3/wiki/Tutorials
  ギャラリー	https://github.com/mbostock/d3/wiki/Gallery
  ロフター	http://datavisual.lofter.com/post/40cf3a_188e535
  イトアイ	http://alanland.iteye.com/blog/1878595
  ルアニフォン	http://javascript.ruanyifeng.com/library/d3.html

  リクエスト

  リクエスト	アドレス
  JavaScriptモジュラープログラミング(1):モジュールの書き方	http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
  JavaScript モジュラー プログラミング (2): AMD 仕様	http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_writing.html
  JavaScriptモジュラープログラミング(3):require.jsの使い方	http://www.ruanyifeng.com/blog/2012/11/require_js.html
  RequireJS を始める (1)	http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html
  RequireJS を始める (2)	http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html
  RequireJS Advanced (3)	http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html
  ソースコードの学習が必要	http://www.cnblogs.com/yexiaochai/p/3632580.html
  スタートガイドが必要	http://www.oschina.net/translate/getting-started-with-the-requirejs-library
  requrieJSの勉強メモ	http://www.cnblogs.com/yexiaochai/p/3214926.html
  1つ必要です	http://cyj.me/why-seajs/requirejs/
  バックボーンの組み合わせが必要です	http://www.cnblogs.com/yexiaochai/p/3221081.html

  シージス

  Seajs	住所
  シージス	http://seajs.org
  seajs中国語マニュアル	http://cyj.me/why-seajs/zh

  もっと少なく、生意気な

  レス、サス	アドレス
  ササ	http://www.w3cplus.com/sassguide
  sass チュートリアル-sass 中国	http://www.sass.hk
  Sass 中国語ドキュメント	http://sass.bootcss.com
  少ない	http://less.bootcss.com

  マークダウン

  ）

  値下げ	アドレス
  Markdown構文の説明（簡体字中国語版	http://wowubuntu.com/markdown
  Markdown 入門リファレンス	https://github.com/LearnShare/Learning-Markdown/blob/master/README.md
  ギットブック	https://www.gitbook.com 海外のオンラインマークダウンを書籍に編集できます
  m編集者	https://www.zybuluo.com/mdeditor 国内オンラインマークダウンエディタ
  スタック編集	https://stackedit.io 強力な機能とクラウドディスク同期を備えた海外のオンラインマークダウンエディタ
  mditor	http://bh-lay.github.io/mditor 軽量のマークダウンエディタ
  lepture編集者	https://github.com/lepture/editor
  マークダウンエディタ	https://github.com/jbt/markdown-editor
  宿題ブログ	https://www.zybuluo.com には、強力な機能、スムーズな速度、すべてのプラットフォーム間での同期があります

  互換性

  互換性	アドレス
  エスマ互換性リスト	http://kangax.github.io/compat-table/es6
  W3C CSS 検証サービス	http://jigsaw.w3.org/css-validator/validator.html.zh-cn
  カニウス	http://caniuse.com/#index
  CSクリエイター	http://csscreator.com/properties
  マイクロソフト