当初、これらのスキームはツールに関する推奨事項のリストでしたが、最近、Kamranはそれらを整理し、詳細を追加し、ステップバイステップのアクションプランとして整理することを決定しました。モダンで人気のWebプログラマーになるために。 バックエンド開発スキームとDevOpsの作業は現在も進行中ですが、フロントエンド開発者向けの段階的なアクションプランは既に準備されています。 Kamranはこの記事で彼について話します。
復習
ここで提案されている行動計画のさまざまな部分について話す前に、予約を入れたいと思います。 この計画の目的は、フロントエンド開発の現代の世界で何が起こっているかについての一般的なアイデアを提供し、必要に応じて技術を習得する手順について話すことです。 私の計画の目的は、おそらく最も長くはなく、現在人気のピークを経験している何かを研究するようにあなたに促すことではありません。 場合によっては、特定のツールが他のすべてのツールよりも望ましい理由を理解する必要があります。また、文字通りすべてのコーナーで何かを話す場合、これは必ずしも問題を解決する最良の方法ではないことを忘れないでください。
それでは、ビジネスに取り掛かりましょう。 実際、これは、前に述べたフロントエンド開発者向けの開発計画です。
フロントエンド開発者開発計画
次に、このスキームについて説明します。現代の状況でフロントエンドを開発したいプログラマーがとる必要がある基本的なステップを考えてみましょう。 そのようなプログラマーが最初に学ぶべきことは、HTML、CSS、およびJavaScriptの基本です。
HTMLの基礎を学ぶ
HTMLはWebページを構造化するものです。 それは私たちの体の土台を形成する一種の人間の骨格です。 フロントエンドのプログラマーになりたい人にとって最初にすべきことは、HTML構文とその機能を調べることです。 学習中は、次のことに特別な注意を払う必要があります。
- HTMLの基本と、HTMLコードを記述するためのルール。
- ページをパーツに分割し、DOMを適切に構造化する方法。
▍ジョブ
HTMLの基本を習得したら、少なくとも5つのHTMLページを作成します。 GitHubのプロファイルページやTwitterのログインページなど、任意のWebサイトを選択し、ページ要素の構造に特に注意を払って再作成することをお勧めします。 何が起こるかはそれほど美しくありませんが、まだ心配する必要はありません。 今最も重要なことは構造です。
CSSの基礎を学ぶ
次に、ページスケルトンを作成するためのルールを学習したら、これらのスケルトンのスキンを作成して装飾します。 CSS技術、またはカスケードスタイルシートは、ページを魅力的に見せるために使用されます。 CSSに慣れる際に注意すべき点は次のとおりです。
- CSS構文とプロパティ。
- ブロックモデル、グリッドおよびFlexboxテクノロジーを使用したレイアウトの開発。
- メディアクエリを使用したレスポンシブWebサイト開発。
▍ジョブ
CSSの基本をマスターしたら、以前に作成したページのスタイルを設定します。 たとえば、GitHubでプロファイルページの構造を再作成するためにHTMLを作成した場合、CSSを使用して、開発を実際のプロファイルページのように見せます。 前の手順で作成した5つのページすべてを定型化します。
JavaScriptの基礎を学ぶ
JavaScriptは、HTMLページをインタラクティブにする技術です。 たとえば、JavaScriptを使用して、Webサイトに表示されるスライダー、ポップアップ、通知をすべて作成します。 JSを使用すると、ページ全体をリロードすることなく、ページの一部をリロードできます。 このステップでは、JavaScriptの基本をマスターし、楽しい部分の準備をする必要があります。 JSを学習するときは、次のことに注意してください。
- 構文と基本的な言語構成を学びます。
- JSツールを使用してDOMを操作するテクニックを習得します。たとえば、ページに要素を追加して削除する方法、要素クラスを操作する方法、CSSスタイルを適用する方法を見つけます。
- 基本を習得した後、スコープ、クロージャー、関数の引き上げ、イベントの浮上など、より高度なものに対処します。
- XHRまたはAjaxテクノロジーを使用してJSコードからHTTPリクエストを行う方法を理解します。 Ajaxを使用すると、ページを完全にリロードせずに、通常はページのリロードが必要なアクションを実行できます。
- 次に-ES6 +に登場した言語の新しい機能を探ってください。 ES6は、クラス、変数を宣言するさまざまな方法など、多くの興味深い更新を備えたJavaScriptのバージョンです。 配列の新しいメソッド、文字列を連結する手段などが登場しました。 あなたが出くわすほとんどのES6素材は、言語の新機能を説明するのにBabelを使用します。 Babelはトランスパイラーであり、比較的新しい「JavaScript」コードを「古い」JavaScriptコードに変換します。 これは、新しいコードが古いブラウザーで機能するために必要です。 ただし、当面はバベルを無視してください。 あなたの仕事は、JSの基本を理解し、最新のブラウザーでこの言語を使用する方法を学ぶことです。 以下では、ES6について詳しく説明します。
Webテクノロジーの開発のこの段階では、すでに何かを知っていると感じ、現代のフロントエンドの味を感じ始めるはずです。 さらに、ここでは、HTML、CSS、およびJavaScriptが非常に重要であり、これが他のすべてを構築するベースであり、このベースを習得し、先に進む準備ができているので、ここで祝福できます。
jQueryを学ぶ価値はありますか？
昔、「jQuery」という言葉はみんなの口にありましたが、この状況には十分な理由がありました。 これはJavaScriptに基づいた強力なライブラリであり、さまざまなブラウザの機能を気にすることなく多くの問題を解決できます。 これらの機能はすべて、ライブラリの開発時に考慮されました。 しかし、jQueryの熱狂的な人気の時代は過ぎ去り、このライブラリは新しいプロジェクトにあまり積極的に使用されていませんが、一部の人々はまだそれを使用しています。 jQueryを習得する必要はありませんが、このライブラリを習得することは難しくありません。これを行うことで、あなたに役立つスキルを身に付けることができます。
練習する
私はこれをよく言って、もう一度言います。練習なしでは何も学ぶことができません。 練習なしでは、何かを理解したことを知っていると思うかもしれませんが、そのような感覚は長続きせず、「理解」と「知識」は練習なしにすぐに消えます。 ここで話しているすべてをマスターする過程で、できるだけ練習してみてください。
たとえば、レスポンシブWebサイトを作成し、JavaScriptを使用してインタラクティブ機能を装備できます。 好きなページをコピーして、すでに学んだことをすべて使ってみてください。
十分に練習したら、本物のことをします。 github.comを見て、適切なオープンソースプロジェクトを見つけ、いくつかのプルリクエストを作成して、貢献してください。 以下は、オープンソースに貢献するためのアイデアです。
- インターフェースを改善し、設計し、インタラクティブページを追加します。
- エラーと問題のリストを見て、修正と解決に役立つかどうかを考えてください。
- 改善できるコードを見つけて、リファクタリングします。
何か有用なことを行って、プロジェクトに変更を含めるようにリクエストを送信し、そこにこのリポジトリへのリンクを追加し、勉強していることを知らせてください。
私は初心者の開発者にGitHubを試してみることをお勧めしますが、これにはすべて、Webテクノロジーの知識に加えて、gitを操作する能力が必要です。 さらに、この手順はオプションですが、実行することを決定した場合、多くの有用なことがもたらされることを理解しますが、それについて尋ねると、どれだけの人があなたを助けてくれるか驚くことになります。 多くのgitチュートリアルがあります。たとえば、 このチュートリアルをご覧ください。
上記のすべてをマスターした後、それを祝う権利があります。 HTML、CSS、およびJavaScriptの研究に責任を持ってアプローチした場合は、既に何らかの仕事を見つけることができます。フリーランスになるかもしれませんし、実際の仕事になるかもしれません。 ただし、専門家として成長したい場合は、そこでやめるべきではありません。 先は素晴らしい、面白い方法です。
パッケージマネージャー
これまで、プラグインやウィジェットなどの外部ライブラリを使用していた場合は、JSファイルとCSSファイルを自分でダウンロードしてプロジェクトに追加する必要がありました。 使用したものが新しいバージョンを自分でリリースしたとき、この新しいバージョンをダウンロードする必要がありました。 これはかなり退屈で退屈な作業です。 パッケージマネージャーはこれを保存できます。 プロジェクトに外部ライブラリとプラグインを含めると、開発者が必要なファイルを手動でプロジェクトにコピーしたり、新しいバージョンのリリースを監視したりする必要がなくなります。 特に、パッケージマネージャーのyarnとnpmについて話します。 一般に、それと他の両方は実質的に同じものであり、それらの違いはそれほど大きくなく、あなたはそれらのいずれかを研究することができます。
練習する
パッケージマネージャーの操作の基本を習得したので、HTML、CSS、およびJavaScriptを習得したときに開発したページに外部ライブラリを接続します。 たとえば、ボタンがクリックされたときのポップアップ通知用のプラグインのようなものです。 ライブラリを使用して、フォームに入力されたデータを確認できます。 設定を試して、異なるバージョンのライブラリをインストールする方法を見つけてください。 これを行いながら、 セマンティックバージョニングについて読んでください。
CSSプリプロセッサ
プリプロセッサはCSSの可能性を拡張し、標準の使用では利用できないスタイル機能を提供します。 多くのプリプロセッサがあります：Sass、Less、Stylus、PostCSSなど。 そのうちの1つを選択する必要がある場合は、Sassで停止します。 しかし、最近、PostCSSプリプロセッサは非常に興味深いように見えます。それを処理する能力は間違いなくあなたを傷つけません。CSSのBabelのようなものです。 スタンドアロンまたはSassの上で使用できます。 トレーニングのこの段階では、Sassを習得することをお勧めします。後で時間があれば、PostCSSに対処してください。
CSSフレームワーク
原則として、CSSフレームワークを習得する必要はありませんが、CSSフレームワークの1つを習得する場合は、CSSフレームワークが多数あることに注意してください。 試したことから、ブートストラップ、マテリアライズ、ブルマが一番好きでした。 市場の需要を考慮してフレームワークを選択する場合は、Bootstrapに注意してください。 CSSフレームワークをマスターすることを考えているなら、間違いなく選択します。
CSS組織
Webアプリケーションが成長するにつれて、CSSの量も増加します;スタイルの説明は面倒で管理が難しくなります。 スケーリングのニーズに基づいてCSSを構成する方法は多数あります。 ここでは、OOCSS、SMACSS、SUITCSS、Atomic、BEMに注目できます。 それらの概念を理解し、それらの違いを理解する必要があります。 より深い研究のために、私は同様の状況でBEMを選択したでしょう。
プロジェクトを構築するためのツール
プロジェクトを構築するためのツールは、JSアプリケーションの開発時に役立ちます。特に、アプリケーションリソースをパッケージにパックすることができます。 このカテゴリには、リンター、タスクを完了するためのツール、およびパッケージを作成するためのツールが含まれます。
タスクを実行するためのツールの領域には、npmスクリプト、gulp、gruntなどを含む多くのオプションがあります。 しかし、今日では、通常gulpで解決されたほとんどのタスクがWebpackを使用して解決できる場合、このカテゴリでは、おそらくnpmスクリプトのみに注意を払い、Webpackが実行できないタスクを自動化する必要があります。 gulpを学ぶ必要はありませんが、時間を見つけたら、それを見てみましょう-プロジェクトで役に立つかもしれません。
リンターの分野でも、ESLint、JSLint、JSHint、JSCSという多くのオプションがあります。 ただし、ESLintは現在最も人気がありますので、ご利用いただけます。
パッケージを作成するためのツールの問題では、同じ状況を観察できます。 Parcel、Webpack、Rollup、Browserifyなどがあります。 いずれかを選択する場合は、ためらうことなくWebpackで停止できます。 ロールアップも非常に一般的ですが、主にライブラリに使用することをお勧めします。 Webアプリケーションについて話している場合は、Webpackが必要です。 したがって、マスターWebpack、および必要に応じて、後でロールアップを処理します。
練習する
上記で説明したことをすべてマスターした後、休日の別の理由があります。 実際、あなたは現在、約75％が現代のJS開発者になっています。 実践は非常に重要であるため、すでに学んだことをすべて使用して、ある種のプロジェクトを作成してください。 たぶん-それは、SassとJavaScriptの機能が適用される一種のライブラリになるでしょう。 終了したら、Webpackを使用してSassをCSSに変換し、babelを使用してES6コードを変換します。 そして、すべての準備が整ったら、開発をGitHubに公開してnpmに入れます。
フレームワークの選択
私たちが検討しているスキームの古いバージョンでは、フレームワークを選択するステップは基本の開発の直後でしたが、フレームワークを操作するときにこれらすべてを使用するため、プロジェクトとパッケージマネージャーを構築するためのツールであるSassの後に配置しました。
フレームワークの選択に関して、いくつかのオプションに注意することができますが、最も一般的なものはReact、Vue、およびAngularです。 そして今日、React.jsに対する市場の需要は拡大し続けています。 ただし、リストされているフレームワークのいずれかを選択できます。 たとえば、ReactまたはAngularを選択します。 初心者デベロッパーとして、AngularはReactと比較して簡単に見えるかもしれません。Angularは、彼らが言うように、すぐに使えるように必要なほぼすべてをサポートしているためです。 これは強力な遅延読み込みルーター、スニファー、依存性注入ツール、CSSコンポーネントのカプセル化などをサポートするHTTPクライアントです。 Angularを使用すると、外部ライブラリの選択に関する心配から解放されます。 ただし、Reactはより人気があり、素晴らしいコミュニティが開発されています。Facebookは積極的に開発に取り組んでいます。 ここでは、その「人気」だけに基づいてフレームワークを選択することは価値がないことに注意したいと思います。 最良の方法は、代替オプションを評価し、それらを比較し、プロジェクトのニーズに合わせて「試して」、選択することです。
ここでは、AngularとReactをどのように使用したかについては説明しません。比較しません。 おそらく、これは別の記事のトピックです。 ただし、技術開発について話しているため、AngularとReactの学習曲線を検討します。
以下に示す学習曲線は、開発者が既にTypeScriptとRxJSに精通しているという事実に基づいています。 これらの曲線の機能の説明は独立した資料に値します。ここでは、Angularにデフォルトで存在する標準化と機能のおかげで、それらがまさにそのように見えることに注意してください。 これは、Reactが何らかの形で悪いことを意味するものではありません。 これらのフレームワークには、それぞれ独自の応用分野があります。 だから、これらは曲線です。
ReactおよびAngularの学習曲線
開発用のフレームワークを選択したら、別のものを選択する必要があります。 たとえば、Reactを選択した場合は、アプリケーションの状態を管理するためにReduxまたはMobxを調べる必要があります。 正確に選択するものは、作業するアプリケーションのサイズによって異なります。 Mobxは、小規模から中規模のアプリケーションに適しています。 Reduxは大規模プロジェクトに適しています。 さらに、ReduxもMobxも必要ない場合があり、Reactに存在する標準の状態管理ツールがなくてもアプリケーションを実行できます。
Angularを選択した場合は、TypeScriptを学ぶ必要があります。 TypeScriptなしでAngularプロジェクトを開発できますが、それにもかかわらず、この言語を使用することをお勧めします。 さらに、RxJSを習得する必要があります。これは、Angularアプリケーションを開発するときに非常に役立ちます。 これは、関数型プログラミングにも適した本当に強力なライブラリです。
Vue.jsを選択した場合は、Vuexを学ぶ必要があります。 このライブラリはReduxに非常に似ていますが、Vue用に設計されています。
Redux、Mobx、およびRx.jsは、対応するフレームワークに関連付けられていないことを理解する必要があります。 これらのライブラリは、純粋なJavaScriptで記述されたアプリケーションでも使用できます。 また、Angularを選択した場合は、Angular 1+ではなく、Angular 2+である必要があることに注意してください。
練習する
これで、最新のWebアプリケーションの開発に必要なほとんどすべてのことがわかりました。 練習を忘れずに、選択したフレームワークに基づいて何かを作成してください。 アイデアが必要な場合は、GitHubリポジトリで興味のある
ideas
フォルダを探し、好きなものを選択して開始します。
決定したことを実行したら、パフォーマンスの測定と改善に関する資料をお読みください。 たとえば、インタラクティビティ時間、ページ速度インデックス、灯台スコアなどに注意してください。
プログレッシブWebアプリケーション
これまでに説明したことをすべて習得し、サービスワーカーとプログレッシブWebアプリケーションの作成方法に対処します。
アプリケーションテスト
テストの分野では、さまざまな目標に焦点を当てた多くのツールがあります。 私は主にJest、Mocha、Karma、Enzymeの組み合わせを使用しています。 ただし、テスト用のライブラリを選択する前に、さまざまなタイプのテストを理解し、使用可能なツールを分析して、最適なツールを選択すると便利です。 高度なJSテストツールに関する優れた資料を次に示します。
静的型チェック
静的型チェックツールは、JavaScriptアプリケーションのデータ型の制御に役立ちます。 それらを研究する必要があるとは言えませんが、確かに大きな利点があり、文字通り数時間で習得し、実用レベルに持ち込むことができます。 基本的にTypeScriptとFlowを意味します。 個人的には、TypeScriptを好みますが、両方を試してから、あなたが一番好きなものを決めることをお勧めします。
サーバーレンダリング
あなたが私たちが話したことすべてを勉強したなら、あなたの知識はフロントエンド開発者の地位を得るのに十分でしょう。 ただし、これは停止する理由ではありません。
選択したフレームワークでサーバー側のレンダリングを探索します。 これがどのように見えるかは、フレームワークによって異なります。 たとえば、Reactの分野では、 Next.jsとAfter.jsに特別な注意を払う必要があります 。 Angularの場合、これはUniversalです。 Vueについて話している場合、これはNuxt.jsです。
まとめ
ここに示されているスキームでは、すべてが完全に提供されているとは言えません。 ただし、フロントエンド開発者であると主張する人が必要とするすべてが含まれています。 主なもの-トレーニングの成功は実践に基づいていることを忘れないでください。 練習が多いほど良い。 最初は、習得する必要のある情報の量が怖くなり、何かを理解していない、本質を把握していないように見えるかもしれませんが、これは普通のことであり、時間が経つにつれて、あなたが習得しているビジネスでますます良くなっていることに気付くでしょう。
親愛なる読者！ フロントエンド開発の分野で仕事をしている場合、できることをどのように学んだか、知識とスキルを最新の状態に保つ方法についてお話しください。
