序文
この記事の著者は、Ali Tao部門のフロントエンドユーザー成長チームの "Yi Xun"で、18年間で、二重の非学部生として、レベルごとの試験に合格しました。プロジェクト経験中に答える方法。
「私は6年間Webフロントエンド開発に携わってきた古いプログラマーです（私のWeChat：web-xxq）。今年の初めに、私は1か月を費やして、2019年の自習に最適なWebフロントエンドトレーニングコースの完全なセットを終えました（ビデオ+ソースコード+ノート+プロジェクトコンバット）、最も基本的なHTML + CSS + JSからモバイルHTML5まで、さまざまなフレームワークと新しいテクノロジーが編成され、各フロントエンドパートナーにパッケージ化されています。ここにフロントエンド学習者の集まりの場所があります。 、初心者から上級者へようこそ（すべてのフロントエンドチュートリアルは、WeChatの公開番号に従います。Webフロントエンドラーニングサークルに従い、返信 "2020"に従ってください）。
インタビューと言えば
採用面接と言えば、誰もがいつもパニックを感じています。多分それは自信ではないかもしれません、多分それは準備ができていないという気持ちの多くです。履歴書を提出して上映に合格したので、気にしないでください。最初に知っておくべきことは、インタビュアーがあなたを採用するという考えを持っているということです。あなたの特定の状況についてもっと知りたいだけです。面接担当者は時間をかけてあなたと話そうとするので、彼がまだ能力があり、派手であるという引火点があることを証明します。それで、善良で有罪なのは、勇敢で自信を持ってください。
STAR法
履歴書や面接を書く過程で、仕事の経験や個人的な経験を説明する必要があります。優れた面接担当者は、STARルールを使用して個人的なイベントを確立することがよくあります。これにより、面接担当者は、過去の経験を通じて個人の能力と可能性をより適切に判断できます。
STARルールの4つの要素を再確認します。
- 状況：どのような背景の下で、どのような状況で事態が発生したか。
- タスク：タスクをどのように明確にしますか。
- 行動：そのような状況分析によれば、どの行動方法を採用し、どのような業務内容をしましたか。
- 結果：結果は何か、それがもたらす価値は何か、プロセス全体で何を学んだか、どのような新しい経験をしたか。
多くの場合、ほとんどの生徒は自分がやったことと、実現したらすぐに実現のプロセスを直接紹介します。構造は比較的明確で、内容は非常に専門的です。しかし、多くの学生は状況と結果、つまり背景と結果を簡単に無視できます。あるいは、インタビュアーが質問の詳細をさらに理解すると、パニックに陥りやすくなります。これらの理由は、面接前の面接には未来がなく、要約が包括的で詳細ではないという事実が原因であることがよくあります。
例：たとえば、一部の学生は、XXXプロジェクト中にWebpackプラグインXXXが実装されたと述べましたが、このプラグインの機能はXXXXであり、Githubのオープンソースです。実装プロセス全体とアイデアは比較的明確であり、面接担当者は非常に興味を持ってそれを聞き、青年期の特定の夜にWebpackプラグインを勉強するために残業していた若々しい時間さえ思い出しました。
それにもかかわらず、インタビュアーはその時点でのプロジェクトの背景も理解したいと考えています。他のツールの代わりにWebpackプラグインを実行することによってそれを解決しようと思った理由、およびこのプラグインがプロジェクトにもたらす価値（パフォーマンスなどですか？） ）。背景と結果は、面接担当者にとって非常に重要です。面接担当者を説得するには、十分な理由と価値を考え出す必要があります。そうでない場合は、このプロジェクトに十分なエネルギーを投資しましたが、面接評価にポイントを追加しませんでした。これは非常に重要です。それは残念です。
現時点では、一部の学生も考えています：私のプロジェクトは個人的な/学校の実践的なプロジェクトであり、プロジェクトの結果は非常に目を引くものとは思えません。次に、この時点で、プロジェクトで学んだことについて話したいと思うかもしれません。たとえば、このWebpackプラグインの例では、次のように言うことができます。
- コンパイラとコンパイル、およびそれらの違い。
- Webpackはどのようにしてプラグイン間の関係を実現し、プラグインの順序を保証しますか。
- プラグインを開発するときは、現在の構成が他のプラグインを使用しているかどうかに基づいて、次の決定を行う必要があります。
- プラグインを開発する過程で、他のプラグインのアイデアを借りましたが、このプラグインのソースコードについての私の理解。
- 待って、待って。
上記のほとんどは、Webpackプラグインの実際の開発中に発生します。これらの問題は、レコードと要約がある場合、結果として使用できます。
インタビューシーン復旧
次のオーサーシーンは、インタビューを受けるプロジェクトのプロセスを復元します。STARルールを使用して、ブラウザーAPI互換性チェッカーを実行するプロセスを簡単に紹介します（ディクテーションを通じてインタビューで明確に説明することも非常に重要です。以下はすべて重要です。ディクテーションのため、画像はありません）。
インタビュアー：
履歴書に、ブラウザAPIの互換性をチェックするツールを実装したとのことですが、それについて教えていただけますか？
私：
（状況）さて、当時の状況は、実際にはページが空白/開かれていないというオンラインユーザーの世論フィードバックでした。JSErrorログを調査したところ、IntersectionObserverと同様のログが多数定義されていないことが最近判明しました。最新リリースのモジュールの公開要件のタイムラインはほぼ同じであるため、互換性の問題を考慮せずにブラウザーのIntersectionObserver APIを使用してDOM公開を行うことがすぐにわかりました。
インタビュアー：
問題は解決しましたか？
私：
はい、問題を特定した後、ポリフィルを追加することで問題はすぐに解決されました。（タスク）後で、私はこの問題を考慮しましたが、実際には、オペレーティングシステムとブラウザーが更新されているため、JS /ブラウザーの新機能がますますサポートされています。フロントエンド開発に利便性をもたらす一方で、いくつかの避けられない互換性の問題ももたらします。互換性のあるコード（ポリフィル）を知らないと、予期しない問題が発生しやすくなります。しかし、互換性の問題を手動でチェックするために開発者のみに依存することが最も洗練されたソリューションではない場合、結局のところ、手動は必然的に見落とされます。したがって、既存の互換性チェックルールを統合してこのプロセスを自動化するツールを開発することは可能でしょうか。
インタビュアー：
はい、具体的なプロセスを詳しくご紹介します。
私：
（アクション）さて、アイデアが生まれた後、私は一般的に使用されているフロントエンドの互換性チェックサイトを理解しました。CaniuseとMDNは私の最も一般的に使用されている2つです。後で、これら2つのWebサイトの検査データは、実際にはGithubで静的検査ルール（caniuse-dbおよびmdn-browser-compat-data）を維持していることがわかりました。これらのデータは特定の構造を持つJSONファイルですが、ブラウザサポートの程度を説明する2つの方法は同じではありませんが、互換性データを取得するための基本的な要件をすでに満たしています。次のステップは、コードを分析し、コードをこれらのルールと比較することです。このプロセスでは、コードの文法論理分析が必要なので、特定の走査のためにコードをAST構文ツリーに変換するためにBabelを使用することを考えました。同時に、通常のAPIの呼び出しメソッドを整理しましたが、NewExpression（構築式）やCallExpression（呼び出し式）など、いくつかしかありませんでした。情報が明確であれば、この問題は技術的に実現可能だと思います。
インタビュアー：
ええと、このプロセスで問題が発生しましたか？どのように解決しましたか？
私：
（アクション）はい、CaniuseとMDNによって維持される静的JSONデータについて説明しました。実装プロセス中に、2つのデータを補完し、その後の検査と比較を容易にするために、2つのデータを統合しました。最終的に、実際には9wデータに近づきました。これを直接比較すると、効率に影響するので、その時点でbrowserlistを使用して、このレイヤーを介して、指定されたターゲットチェック（iOS Safari 9以上など）のブラウザー範囲を構成し、範囲内でフィルター処理できます。互換性の問題に関するデータはありません。これにより、比較が削減され、効率が向上し、開発者に柔軟な構成機能が提供されます。2番目の問題は、チェックのパフォーマンスの最適化でもあります。これは、isReferencedIdentifierを使用して、識別子が実際に参照されているかどうかを検出します。
最後に、このツールとリリースプロセスの制御へのアクセス方法会社のリリースプロセスはクラウドで構築されたアプローチを使用しているため、リリース前にツールをチェックし、チェックの結果を含むメッセージ通知とメールシステムを開きました。 、（結果）は、リリース前にプロジェクトコードのブラウザAPI互換性チェックレポートを他のユーザーが取得できるようにし、そのような問題の再発を回避します。この経験は、バベルとASTへの理解を深めるのに役立ちました。
インタビュアー：
バベル解析ASTのプロセスを理解していますか？
私：
ASTに解析するプロセスには、字句解析と文法解析の2つの段階があります。
- 字句解析ステージ：文字列形式のコードはトークンのストリームに変換されます。これはASTのノードに似ています。
- 構文解析ステージ：トークンストリームをASTの形式に変換し、トークン内の情報をASTの式構造に変換します。
インタビュアー：
プロジェクトでのASTトラバーサルのプロセスについて詳しく教えてください。
私：
ノードを処理するとき、Babelはノード情報を取得し、関連する操作をビジターの形で実行します。このメソッドは、さまざまなノードのアクセス関数を定義するVisitorオブジェクトを通じて実行されるため、さまざまなノードに対してさまざまな処理を実行できます。たとえば、プロジェクトプロセスでは、ノードとノードの親ノードと子ノードへのパスパラメーターを介して、および、Balabalaを判断してフィルター処理するために、主にNewExpressionとCallExpressionを扱います。
まとめる
インタビュアーの「ルーティン」
面接で尋ねられる質問は、基本的に2つのタイプに分かれます。比喩的な質問と未解決の質問です。
具体的な質問は、主に基本的なリテラシー、技術的な深さ、および可能性を理解するために、実務経験を参照してSTARルールに従って基本的に実行されます。
未解決の問題は基本的に、思考を分岐させる能力を調べること、特定の分野の深さと幅を調べること、基本的には技術的な質問と組み合わせて、または作業の内容と組み合わせて尋ねられます。
例：nテクノロジーを実装する方法？ある技術の実現原理？何と比較して長所と短所は何ですか？このテクノロジーについてどう思いますか？
インタビュアーの「対処」
- 事前に準備する際は、実態に答え、分岐し、考え、要約する。この作品は自分で用意できるおまけです。
- 発散問題は主に自分の蓄積に依存します。まず、基本的な知識がしっかりしていると同時に、最新の技術開発を理解する必要があります。このような問題に直面した場合、質問に答えることができず、トピックから外れることを忘れないでください。
