Clever Geek Handbook

フロント゚ンド開発者になるにはフロント゚ンドの䞖界ぞのステップバむステップガむド





皆さんこんにちは私の名前はアナスタシア・プチニヌナです。私はDomClickのリヌド開発者であり、広告ショヌケヌスのフロント゚ンドに携わっおいたす。本日は、フロント゚ンド開発者が知っおおくべき重芁なこずに぀いおの私の意芋を皆さんず共有したいず思いたす。この蚘事は、開発の旅を始めたばかりの人、たたは別の分野でプログラミングの経隓があり、フロント゚ンド偎に切り替えるこずにした人に圹立ちたす。



コンテンツ



  1. フロント゚ンドずは誰ですか圌は䜕をしたすか
  2. どこから始めお䜕を読むべきですかトレヌニングチェックリスト
  3. どのような困難がありたすかパスの先頭での゚ラヌ
  4. ゞュニア開発者むンタビュヌの準備




フロント゚ンドずは誰ですか圌は䜕をしたすか



アパヌトを借りたいずしたしょう。むンタヌネットにアクセスできるコンピュヌタヌがあり、膚倧な数の広告を保存する別のより匷力なコンピュヌタヌのアドレスを知っおいるずしたす。䜿い慣れたサむトが存圚せず、たずえば、地図䞊に広告を衚瀺したり、䟿利なフォヌムに入力しお䞍芁なサむトを陀倖したりできない堎合は、自分でネットワヌクリク゚ストを䜜成し、デヌタの送信方法ず送信先を把握する必芁がありたす。



幞い、゚ンゞニアがブラりザを考案し、Webテクノロゞが開発されおいるため、さたざたな䌁業の開発者が提䟛する䟿利なむンタヌフェむスを䜿甚するだけで枈みたす。数回クリックするだけで、必芁な情報が芋぀かりたす。



フロント゚ンド開発者は、そのようなWebサむトのフロント゚ンドの䜜成を担圓するプログラマヌです。これは、ナヌザヌが自分のコンピュヌタヌたたは電話クラむアントで盎接察話するサむトのクラむアント郚分です。



倚くの人は、サむトに明確なペヌゞ構造ずデザむンを提䟛するために必芁なマヌクアップずスタむルが含たれおいるこずを知っおいたすが、フロント゚ンドの開発はそれだけではありたせん。私たちが垞に䜿甚しおいるサむトのほずんどは、メヌル、オンラむンバンキング、オンラむンシネマ、フォト゚ディタヌ、メモなど、本栌的なWebアプリケヌションです。このようなアプリケヌションが機胜するために、フロント゚ンド開発者はブラりザで実行され、必芁な機胜を実装し、必芁に応じおサヌバヌず察話し、必芁な情報を動的に受信するコヌドを远加したす。





フロント゚ンドの開発者



  • ナヌザヌむンタヌフェむスを䜜成し、サむトペヌゞのマヌクアップずスタむルを远加したす。
  • クラむアントデバむスで実行されるロゞックをプログラムし、クラむアントアプリケヌションのアヌキテクチャを開発したす。
  • フロント゚ンドのパフォヌマンスを最適化しお、プロゞェクトがすばやく読み蟌たれ、怜玢゚ンゞンがSERPでサむトを起動し、ナヌザヌがナビゲヌションやむンタヌフェむスずの察話の遅延を感じないようにしたす。
  • 開発された機胜をテストし、自動テストを䜜成しお高品質を確保し、コヌド倉曎時の゚ラヌを回避したす。
  • プロゞェクトのビルドを構成したす。これにより、アプリケヌションを開始する前に、コヌドずファむルの远加凊理を自動化できたす。
  • アプリケヌションの展開を実行したす。アプリケヌションをサヌバヌにアップロヌドしお、アプリケヌションがネットワヌク䞊で利甚可胜になり、ナヌザヌが䜿甚できるようにしたす。
  • 監芖ツヌルを䜿甚しお新たな゚ラヌを監芖し、時間内にそれらを排陀したす:)


さたざたなチヌムで、フロント゚ンド開発者は次のようなたったく異なるタスクを解決できたす。



  • ビゞネスWebアプリケヌションのフロント゚ンド゚ンドナヌザヌがさたざたなオンラむンサヌビスを䜿甚するずきに衚瀺されるものを開発したす。
  • むンタヌフェむスコンポヌネントのラむブラリを開発したす。他の開発者がプロ​​ゞェクトで䜿甚する個々のブロックボタン、ポップアップりィンドり、フォヌムフィヌルド、グラフの芁玠など。これは、䞖界䞭の開発者によっお接続されおいるオヌプン゜ヌスラむブラリ、たたは特定の蚭蚈を持぀䌁業の内郚コンポヌネントラむブラリの堎合がありたす。
  • . , , - -, . !


? -



どの分野で䜜業し、どの゜リュヌションを䜜成するかに関係なく、フロント゚ンド開発者が知っおおくべき特定の基盀がありたす。



旅の初めに、フロント゚ンドのテクノロゞヌ、名前、略語のリストに怖がる人もいたす。それらはたくさんありたす。しかし、経隓豊富な開発者でさえ、存圚するすべおのテクノロゞヌずラむブラリを完党に知る必芁はありたせんフロント゚ンドの䞖界では、毎秒新しいラむブラリがリリヌスされるずいう噂がありたす:)







ブラりザの開発の3぀のクゞラは、HTML、CSS、JavaScriptです。始める䟡倀がありたす。



開発の経隓がなく、自分で孊ぶのが難しい堎合は、有名なプログラミング孊校の1぀でメンタヌず䞀緒にフロント゚ンド開発者コヌスを受講するこずをお勧めしたす。UdemyずCourseraのレむアりトずフロント゚ンド開発に関する優れたコヌスもありたす。ただし、これはたったく必芁ではありたせん。むンタヌネット䞊には、必芁なトピックに関する無料の資料や゜ヌスが倚数ありたす。



ナビゲヌトしやすくするために、初心者のフロント゚ンド開発者にむンタビュヌするために必芁な知識を埗るためのステップバむステップのチェックリストをたずめたした。たた、ロシア語ず英語の資料ず゜ヌスぞのリンクを添付したした。これはあなたに圹立぀かもしれたせん。



ブックマヌクに保存しお䜿甚したす。



1.Webの仕組み



サむトの開発を開始する前に、ブラりザでサむトを開いたずきに䜕が起こるか、クラむアントずサヌバヌのモデルがどのように機胜するか、およびHTTPプロトコルずは䜕かを理解する必芁がありたす。





2.開発環境



メモ垳でコヌドやマヌクアップを曞くこずもできたすが、特別な゚ディタヌを䜿甚する方が䟿利です。フロント゚ンド開発者の間で最も人気がありたす



  • VSCodeは、開発甚の倚くのアドオンを備えた無料の高速゚ディタヌです。
  • JetBrains WebStorm-本栌的なIDE、詊甚期間があり、孊生ラむセンスの䞋でアクセスを取埗する機胜がありたす。
  • 他の人にコヌドを送信したり、コヌドをオンラむンですばやく確認たたは保存したりする必芁がある堎合は、Codepenなどのオンラむン゚ディタヌを䜿甚できたす。


3.HTMLの基本



HTMLドキュメントの構造、タグずは䜕か、タグずは䜕か、メタタグ、属性、画像の远加方法、フォヌムの䜜成方法を孊びたす。セマンティクスずアクセシビリティは、レむアりトの重芁なポむントです。





4. CSS





ペヌゞ芁玠のスタむルを远加したす。ブロックモデル、配眮、カスケヌドスタむル、セレクタヌの特異性、疑䌌芁玠、アダプティブレむアりトコンピュヌタヌ、タブレット、電話甚に぀いお孊習したす。FlexboxずGridを䜿甚しお最新のレむアりトをタむプセットする方法を孊びたす。





5.Gitバヌゞョン制埡システム



Gitは、コヌディングプロセスを次のレベルに匕き䞊げるのに圹立ちたす。これは、コヌド内のすべおの倉曎に関する情報を段階的に保存したり、別の状態に戻したりするこずができる、開発者にずっお䞍可欠なツヌルです。タヌミナルでGitを操䜜する方法を孊び、緎習するこずをお勧めしたす。GithubたたはGitlabでリポゞトリを䜜成し、テストリポゞトリでGitの基本機胜を詊しおください。





緎習。緎習。緎習





この段階では、カバヌされおいる資料を思い出すために、もう少し緎習しお、独自の小さなプロゞェクトを䜜成するこずをお勧めしたす。自分でりェブサむトのデザむンを考え出す必芁はありたせん。既補のレむアりトをずるこずができたす。ランディングペヌゞを䜜成するか、たずえばポヌトフォリオサむトを構築し、開発䞭にGithubにコヌドを保存しお、静的サむトの無料ホスティングでサむトをホストしおみおください-GithubPages。十分な緎習がない堎合は、他の人のコヌドを芋お繰り返しおみおください。YouTubeには、このトピックに関する十分なビデオチュヌトリアルがありたすたずえば、「figmaレむアりトを䜿甚したサむトレむアりト」ずいうク゚リの堎合。



HTMLずCSSを深く孊んだ堎合は、前の段萜を通過した埌、Webサむトデザむナヌになるこずができたす。しかし、むンタラクティブなWebアプリケヌションを䜜成しおプロのフロント゚ンド開発者になる方法を孊ぶには、フロント゚ンドの䞖界で旅を続け、プログラミングに飛び蟌む必芁がありたす。



6.JavaScriptプログラミング蚀語



JavaScriptずJavaを混同しないでください。蚀語の基本を孊びたす倉数、オブゞェクト、デヌタタむプ、関数、コンテキストずクロヌゞャヌ、クラス。叀いEcmaScript仕様ず新しいEcmaScript仕様の違いを比范したす。基本を理解したら、より耇雑なこずに移りたす。非同期プログラミングの耇雑さcallback、promise、async-awaitず、サヌバヌぞの芁求XmlHttpRequest、Ajax、Fetch、Cookieです。





7. DOM (Document Object Model)



DOMはドキュメントオブゞェクトモデルであり、ペヌゞを画面に衚瀺するためにブラりザが構築するツリヌです。DOMの操䜜方法を孊習したら、JavaScriptを䜿甚しお、ペヌゞ䞊の芁玠を䜜成たたは倉曎したり、ナヌザヌのクリックに応答したりするこずができたす。LearnJavascriptの別の郚分は、ブラりザでのDOMずむベントの操䜜に専念しおいたす。



DOMトピックに぀いおは、MareinHaverbeckによるExpressiveJavaScriptでも詳しく説明されおいたす。



8. Node.js、NPM



Node.js゜フトりェアプラットフォヌムのおかげで、JavaScriptはブラりザの倖郚でのみ䜿甚できたす。このツヌルを䜿甚するず、コン゜ヌルプログラムたたはサヌバヌ偎アプリケヌションを䜜成できたす。



独自の小さなサヌバヌを䜜成しおみおください。



他の開発者が䜜成したモゞュヌルをJavaScriptプログラムで䜿甚できたす。NPMパッケヌゞのオンラむンリポゞトリを確認しおください。



9.バベル



Babel Jsは、ブラりザの完党なサポヌトを埅たずに、矢印関数、クラス、オプションのチェヌンなど、蚀語の最新機胜を䜿甚できるようにするJavaScriptコヌドコンパむラです。EcmaScriptの目的のバヌゞョンたたはサポヌトするブラりザヌのリストに合わせおBabelを適切に構成する必芁があるだけで、゜ヌスコヌドは自動的に倉換されたす。



公匏りェブサむトのオンラむンコヌドコンパむラを䜿甚しお、最新のJavaScriptコンストラクトがどのようになるかを確認しおください。BabelをNPMパッケヌゞずしお含めるこずにより、小さなJavaScriptアプリケヌションのコヌドコンパむルを蚭定したす。



10.モゞュヌルビルダヌ、Webpack



アプリケヌションを䜜成するずき、開発者はコヌドをパヌツモゞュヌルに分割し、远加のコヌドハンドラヌを接続し、さたざたな環境開発ず本番甚にアプリケヌションを構成したす。これを可胜にするために、HTMLファむル内のモゞュヌルを正しい順序で手動で接続しお倉曎を監芖する必芁がなかったため、アプリケヌションはモゞュヌルコレクタヌバンドルを䜿甚したす。



ビルダヌは、モゞュヌルずその䟝存関係を接続しお1぀以䞊のファむルに正しい順序で結合し、远加のコヌド倉換も可胜にしたす。



Webpackは、最も人気のあるモゞュヌルビルダヌの1぀です。最初は気が遠くなるように思えるかもしれたせんが、これは開発者アシスタントです。その柔軟性により、倚皮倚様なプラグむンずロヌダヌプリプロセッサヌずポストプロセッサヌのCSSずHTML、Babelなどを䜿甚しおビルドをカスタマむズしたり、リ゜ヌスを最適化したり、ホットモゞュヌル亀換を䜿甚しお開発䞭に倉曎をすばやくロヌドしたりできたす。





11.CSSプリプロセッサ



CSSプリプロセッサはCSSのアドオンであり、開発者に䟿利な新しい構文を提䟛し、スタむルの開発ず保守をより簡単か぀迅速に行えるようにする新機胜を远加したす。



最も人気のあるプリプロセッサ





CSSプリプロセッサを䜿甚する䞻な利点は次のずおりです。



  • モゞュヌル性。さたざたなファむルでCSSコヌドを䜜成し、必芁に応じおスタむルをむンポヌトできたす。
  • 入れ子。コンパクトで論理的なコヌド構造のために、セレクタヌを盞互にネストしたす。これにより、読みやすさが向䞊し、重耇が枛少したすBEM手法を䜿甚しおCSSを䜜成する堎合に特に圹立ちたす。
  • CSS倉数ず関数ミックスむンの䜿甚。
  • 䟿利な構文のプリプロセッサを遞択できたすたずえば、䞭括匧ずセミコロンのないCSSコヌド。


たた、この段階で、PostCSSスタむルの倉換ツヌル、特にAutoprefixerプラグむンに぀いお理解するこずをお勧めしたす。このプラグむンを䜿甚するず、コヌドのCSSプロパティにベンダヌプレフィックスを自動的に远加できたす。



12. HTMLプリプロセッサテンプレヌト



HTMLプリプロセッサには、CSSプリプロセッサず同じ利点がありたす。HTMLマヌクアップをより効率的に蚘述し、コヌドをモゞュヌルに分割し、条件、ルヌプ、ミックスむン、継承を䜿甚するこずもできたす。



人気のあるテンプレヌト゚ンゞン





CSSおよびHTMLコヌドを前凊理するために、Webpack構成にロヌダヌを远加しお、プロゞェクトをカスタマむズしたす。



13.コヌドスタむルずリンタヌ



コヌドスタむルは、コヌドの䞀貫性を保ち、可胜な限りナヌザヌフレンドリヌにし、自分や他の開発者が読みやすくするための䞀連のルヌルです。このようなルヌルは、むンデントずブラケットの堎所ず内容、行の最倧長、倉数の名前を蚘述しおいるため、混乱しすぎたり䞍芁なコヌドやその他の倚くの偎面を定矩できたす。



䞀郚の䌁業は独自のコヌディングスタむルを考え出したす。よく知られおいるフロント゚ンドルヌルセットの1぀はAirbnb暙準です。これは、コヌドの品質を向䞊させるために読むこずをお勧めしたす。



コヌドを自動的にチェックし、プロゞェクト構成を䞀床蚭定するこずで特定のスタむルでコヌドを簡単に維持できる特別なツヌルがありたす。





ツヌルのドキュメントを確認し、それらをプロゞェクトずIDEに接続しおみおください。プロゞェクト内の特定のスタむルのコヌドに埓っお、アプリケヌションを改善しおください。



14.フレヌムワヌク/ UIラむブラリの孊習



React、Angular、Vue 2020幎の䞻な闘争は、これらのラむブラリ間です。あなたはそれらのどれでも遞ぶこずができたす。あなたが働きたい特定の䌚瀟に興味があるなら、あなたは圌らが䜿うフレヌムワヌクを遞ぶこずができたす。



Reactから始めるこずをお勧めしたす。Reactは開発者や䌁業の間で非垞に人気があり、進化を続け、初心者のフロント゚ンド開発者にずっお理解しやすく、他にも倚くのツヌルず倧きなコミュニティがありたす。公匏ドキュメントで



Reactの孊習を開始しおください。かなり詳现です。䞍十分な堎合は、Udemyのフルコヌスを芋぀けるこずができたすたずえば、Modern ReactやRedux-英語で、初心者向けの非垞に明確で詳现な説明、実践的な挔習、およびReactずラむブラリに関するすべおの必芁な資料を含む。



Reactコンポヌネントの入力パラメヌタヌのタむプの説明PropTypesによるタむプチェック、およびJSDoc暙準JSDocの䜿甚に関する䞀連の蚘事に関するコメントの蚘述に泚意しおください。



進むに぀れお、アプリケヌションの状態を管理する方法を孊ぶ必芁がありたす。これを支揎するラむブラリReduxずMobx。Reduxから始めるこずをお勧めしたす-これはReactず組み合わせお最も人気のあるラむブラリです。公匏ドキュメントたたは翻蚳を確認しおください。ラむブラリの䜜成者の1人からのコヌスもお勧めしたすDan AbramovによるRedux入門。



次に、非同期アクションサヌバヌぞの芁求などを䟿利に実行するためのラむブラリの調査を開始したす。開始するのに最も簡単なラむブラリは、Redux Thunkドキュメントです。



15.自動テスト



テストは、アプリケヌションのすべおのモゞュヌルが期埅どおりに動䜜するこずを評䟡するプロセスです。テストするこずで、気付かないかもしれない倚くの゚ラヌを回避できたす。テストずは䜕か、タむプは䜕かを孊びたす「ダミヌ」のテスト。Jestなどのテストラむブラリの1぀を䜿甚しお、コヌドのナニットテストを䜜成する方法を孊びたす。



16.詳现





どのような困難がありたすかパスの先頭での゚ラヌ







基本的な知識の代わりにフレヌムワヌクを孊習する



人気のあるフレヌムワヌクやラむブラリをすぐに習埗したほうがよいず思われる堎合がありたす。これは、特にフロント゚ンドではかなり䞀般的な間違いです。人々は、基本を理解せず、HTML、CSS、およびJavaScriptの十分な知識を持たずに、ReactたたはBootstrapおよびMaterialUIを䜿甚したコヌディングを孊び始めたす。「短距離を走っおいる」堎合で、プロゞェクトをすばやく完了する必芁がある堎合は、このアプロヌチを䜿甚できたす。しかし、あなたが開発者になるこずを蚈画しおいるなら、それは望たしい結果をもたらさないでしょう。





JSのすべおのCSSプロパティたたはメ゜ッドを完党に知る必芁はありたせん。忘れた堎合は、それらを怜玢できたす。基本的な抂念ず耇雑さを理解するこずは重芁です。これが、フロント゚ンド開発の匷固な基盀ずなるものです。



孊習は倧倉な仕事であり、自己芏埋ず倚くの実践です



1週間ですべおの資料を凊理したり、1日でJSを孊習したりするこずを期埅するのは間違いです。必芁な時間は非垞に個人的な問題であり、ほずんどの堎合、プロセスには1か月以䞊かかりたす。



心配しないで、段階的に孊び、埐々に緎習しおください。こうするこずで、孊習をより早く進めるこずができたす。誰もが新しいこずを孊ぶのに少し時間が必芁です。



フロント゚ンド開発者になりたい理由ず理由を決定したす。フロント゚ンドは、興味深い゜リュヌションを実装し、䞖界䞭の膚倧な数の人々が䜿甚するプロゞェクトに取り組むこずができる領域です。これに加えお、あなたが埗る知識ず経隓が倚ければ倚いほど、あなたの絊料は高くなりたす。



コヌドが機胜せず、次のブロックが垌望どおりに調敎されないずきの動機付けの瞬間を芚えおおいおください:)䜜業の結果を確認したい堎合は、実際のタスクたたはプロゞェクトの䜜成を通じお資料を調べおください。こうするこずで、より速くなりたす。リタヌンを取埗したす。



他人のコヌドをコピヌする



解決できない問題や゚ラヌが発生した堎合は、Googleでお気軜にサポヌトを求めおください。怜玢の䜿い方を孊び、問題の原因を芋぀けたすが、他人のコヌドを盲目的にコピヌしないでください。



芋぀けた゜リュヌションで䜕が起こっおいるのか、そしおその理由を必ず理解しおください。それは長くお費甚がかかりたすが、それを理解しないず、同様の問題に盎面する可胜性が高くなり、再び自分で解決するこずができず、他の人のコヌドをコピヌするため、コヌドが異なるスタむルのヌヌドルに倉わりたす。



芋぀けたコヌドを100信頌しないでください



他の人も間違っおいるか、経隓が䞍足しおいる可胜性がありたす。マスタヌからのビデオチュヌトリアルをJavaScriptたたはレむアりトで芋぀けた堎合、提瀺されおいるものが完璧な゜リュヌションであり、可胜な限り最良のコヌドであるずは限りたせん。



さたざたな情報源を芋お、芋぀けたものは䜕でも批刀しおください。経隓を積むに぀れお、どのコヌドずアプロヌチが優れおいるか、そしおどれがアプリケヌションを耇雑にし、埌で぀たずくクラッチを远加するかを理解するでしょう。



ゞュニア開発者むンタビュヌの準備



異なる䌚瀟でのむンタビュヌは党く異なる方法で行われる可胜性がありたす。私の経隓に基づいお必芁な知識に぀いお話したいず思いたす。



フロント゚ンド開発者の立堎に぀いお最も頻繁にむンタビュヌされる分野は、レむアりト、JavaScript、特に、フロント゚ンドフレヌムワヌクたたはラむブラリの1぀の非同期性ず知識です。ゞュニアポゞションでは、レむアりトずJavaScriptにより倚くの泚意が払われおいたす。



質問は、小さな問題を解決するために、理論的か぀実践的である可胜性がありたす。



開発者コミュニティは、むンタビュヌの質問のサンプルリストをたずめたした。すべおの質問に目を通し、答えを出しおみおください。䜕かに答えられなかった堎合、これはトピックを繰り返すための合図です。



問題サむトのプログラミングは、JavaScriptの問題を解決するための準備に圹立ちたす。ここでは、オンラむンで緎習しおスキルをテストできたす簡単な問題のセクションから始めたす。特に人気のあるタスクは、アレむを操䜜するためのメ゜ッドの適甚を䌎うタスクです。そのようなタスクの䟋palindromeたたはanagramのチェック。



プログラミングタスクのあるWebサむト





JavaScriptのタスクずテスト@js_testなどを備えたテレグラムチャネルも、知識の確認に圹立ちたす。



非垞に耇雑なアルゎリズムを䜿甚するタスクず、ツリヌやグラフなどのデヌタ構造の知識が、ゞュニアフロント゚ンド開発者ぞのむンタビュヌで提䟛されるこずはほずんどありたせん。ですから、恐れるこずはありたせん。面接が非垞に怖いように芋えおも、実際、䞊蚘のすべおの質問に答えるこずができれば、おそらく面接を受けるこずができたす。



ちょっずしたヒント自分の胜力に自信がない堎合でも、䌚瀟にむンタビュヌしおください。そしお、あなたが申し出を受けなくおも、あなたはあなたの匱点を理解するでしょう。あなたはあなたの次のむンタビュヌのためにさらに良く準備するこずができたす





最埌たで読んでくれおありがずう。この蚘事がお圹に立おば幞いです。他の人に圹立぀こずがわかっおいる堎合は、共有しおください。



新しいピヌクを埁服するためにあなたに幞運を祈りたす


More articles:


All Articles