フロントエンドの概念 II

ジュニアレベル

1. 質問: CSS グリッドとは何ですか? 回答: CSS グリッドは、Web 上で 2 次元のレイアウトを作成できるレイアウト システムです。ページを行と列に分割し、要素を配置しやすくします。例えば：

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. 質問: 「DOMContentLoaded」イベントとは何ですか? 回答: DOMContentLoaded イベントは、最初の HTML ドキュメントが完全にロードおよび解析されたときに、スタイルシート、画像、およびサブフレームのロードが完了するのを待たずに発生します。 DOM の準備ができたら、スクリプトを実行するのに便利です。

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. 質問: CSS の「z-index」プロパティとは何ですか? 答え: z-index プロパティは、要素の積み重ね順序を制御します。より高い Z インデックスを持つ要素は、より低い Z インデックスを持つ要素の前に表示されます。例えば：

   .box1 {
       position: relative;
       z-index: 1;
   }
   .box2 {
       position: relative;
       z-index: 2; /* box2 será exibido na frente de box1 */
   }

1. 質問: JavaScript の「this」とは何ですか? 答え: JavaScript では、これは現在の実行コンテキストを指します。この値は、関数の呼び出し方法に応じて変化する可能性があります。例えば：

   const obj = {
       name: "John",
       greet: function() {
           console.log("Hello, " + this.name);
       }
   };
   obj.greet(); // "Hello, John"

1. 質問: CSS セレクターとは何ですか? 答え: CSS セレクターは、スタイルを設定する要素を選択するために使用されるパターンです。セレクターには、クラス、ID、タイプ セレクターなど、いくつかの種類があります。例えば：

   .className { /* Seleciona todos os elementos com a classe "className" */
       color: blue;
   }
   #idName { /* Seleciona o elemento com o ID "idName" */
       font-size: 20px;
   }

1. 質問: JavaScript の「localStorage」とは何ですか? 回答: localStorage は、ユーザーのブラウザにデータを永続的に保存できる API です。 localStorage に保存されたデータは期限切れにならず、ブラウザを閉じた後も残ります。例えば：

   localStorage.setItem("key", "value");
   const value = localStorage.getItem("key"); // "value"

1. 質問: 「イベント バブリング」とは何ですか?
   
   答え: 「イベント バブリング」は、イベントが最も内側の要素で開始され、外側の要素に伝播するイベント伝播メカニズムです。たとえば、

   内のボタンがをクリックすると、クリック イベントが最初にボタンで発生し、次に

   で発生します。

2. 質問: 「コールバック関数」とは何ですか?
   
   回答: 「コールバック関数」とは、別の関数に引数として渡され、後で呼び出すことができる関数です。例:
   

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. 質問: 「レスポンシブ デザイン」とは何ですか? 回答: 「レスポンシブ デザイン」は、さまざまな画面サイズやデバイスに適応するページを作成することを目的とした Web デザインのアプローチです。これは多くの場合、CSS のメディア クエリを使用して実現されます。例えば：

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. 質問: 「フェッチ API」とは何ですか?
   
   答え: フェッチ API は、JavaScript で HTTP リクエストを作成するための最新のインターフェイスです。リクエストの応答を解決する Promise を返します。例:
   

      .box1 {
          position: relative;
          z-index: 1;
      }
      .box2 {
          position: relative;
          z-index: 2; /* box2 será exibido na frente de box1 */
      }
   

フルレベル

1. 質問: 「CORS」とは何ですか?
   
   回答: CORS (Cross-Origin Resource Sharing) は、Web ページ上の制限されたリソースを、そのページを提供したドメインとは異なるドメインから要求できるようにするセキュリティ メカニズムです。これはユーザーデータを保護するために重要です。

2. 質問: React の「仮想 DOM」とは何ですか?
   
   答え: 「仮想 DOM」は、実際の DOM を軽量に表現したものです。 React は仮想 DOM を使用して DOM の更新を最適化し、仮想 DOM を実際の DOM と比較して必要な変更のみを適用することで、より効率的に変更を加えることができます。

3. 質問: React の「props」とは何ですか?
   
   回答: 「Props」は、React のコンポーネント間でデータを受け渡すためのメカニズムです。これにより、親コンポーネントから子コンポーネントにデータを渡すことができます。例:
   

      const obj = {
          name: "John",
          greet: function() {
              console.log("Hello, " + this.name);
          }
      };
      obj.greet(); // "Hello, John"
   

4. 質問: React の「状態」とは何ですか?
   
   答え: 「状態」は、アプリケーションの変更可能な部分を表すオブジェクトです。コンポーネントのレンダリングに影響を与えるデータを保存するために使用されます。例:
   

      .className { /* Seleciona todos os elementos com a classe "className" */
          color: blue;
      }
      #idName { /* Seleciona o elemento com o ID "idName" */
          font-size: 20px;
      }
   

5. 質問: 「React Router」とは何ですか?
   
   回答: React Router は、React アプリケーション内のさまざまなコンポーネント間のナビゲーションを可能にし、シングル ページ アプリケーション (SPA) の作成を容易にするライブラリです。これにより、ルートを定義し、URL に基づいてコンポーネントをレンダリングできます。

6. 質問: React の「フック」とは何ですか?
   
   回答: フックは、機能コンポーネントで状態やその他の React リソースを使用できるようにする関数です。 useState と useEffect はフックの例です。例:
   

      .grid-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 10px;
      }
   

7. 質問:「Webpack」とは何ですか?
   
   答え: Webpack は、JavaScript アプリケーションのモジュール ラッパーです。 JavaScript、CSS、その他のリソース ファイルを 1 つのファイルまたは運用環境に最適化された複数のファイルにバンドルできます。

8. 質問:「バベル」とは何ですか?
   
   回答: Babel は、最新の JavaScript コード (ES6) を作成し、それを古いブラウザと互換性のあるバージョンに変換できるトランスパイラーです。 Webpack と組み合わせてよく使用されます。

9. 質問: 「SASS」とは何ですか?
   
   回答: SASS (Syntactical Awesome Style Sheets) は、変数、ネスト、関数の使用を可能にする CSS プリプロセッサであり、CSS をより動的にし、保守を容易にします。例:
   

      document.addEventListener("DOMContentLoaded", function() {
          console.log("DOM completamente carregado e analisado");
      });
   

10. 質問:「AJAX」とは何ですか?
    
    回答: AJAX (非同期 JavaScript および XML) は、ページをリロードせずにサーバーに対して非同期リクエストを行うことができる技術です。これは、Web ページの一部を動的に更新するためによく使用されます。

上級レベル

1. 質問: 「マイクロサービス アーキテクチャ」とは何ですか?
   
   回答: マイクロサービス アーキテクチャは、相互に通信する小さな独立したサービスのセットとしてアプリケーションを構築するアーキテクチャ スタイルです。これにより、さまざまなチームがアプリケーションのさまざまな部分でより効率的に作業できるようになります。

2. 質問: 「SSR」(サーバーサイド レンダリング) とは何ですか?
   
   回答: SSR は、Web アプリケーションのレンダリングがクライアントではなくサーバーで行われる技術です。これにより、コンテンツがすでにレンダリングされたクライアントに送信されるため、パフォーマンスと SEO が向上します。

3. 質問: 「CSR」(クライアントサイド レンダリング) とは何ですか?
   
   回答: CSR は、通常 JavaScript を使用して、Web アプリケーションのレンダリングがクライアント上で実行される手法です。これにより、よりインタラクティブなユーザー エクスペリエンスが可能になりますが、正しく実装されないと SEO に悪影響を及ぼす可能性があります。

4. 質問:「Redux Saga」とは何ですか?
   
   回答: Redux Saga は、Redux アプリケーションの副作用の管理を容易にするライブラリです。ジェネレーターを使用して、API 呼び出しなどの非同期操作を、より読みやすく整理された方法で処理します。

5. 質問: React の「Context API」とは何ですか?
   
   回答: Context API は、各レベルで props を手動で渡すことなく、コンポーネント ツリーを通じてデータを渡す方法です。これは、テーマやユーザー情報などのグローバル データを共有する場合に役立ちます。

6. 質問: 「TypeScript」とは何ですか?
   
   回答: TypeScript は、コードに静的型付けを追加する JavaScript のスーパーセットです。これにより、変数、関数、オブジェクトの型を定義できるようになり、実行時エラーの回避に役立ちます。

7. 質問: 「プログレッシブ Web アプリ」(PWA) とは何ですか?
   
   回答: PWA は、オフライン サポート、プッシュ通知、ホーム画面のインストールなど、ネイティブ アプリのようなエクスペリエンスを提供する Web アプリケーションです。これらは標準の Web テクノロジーを使用して構築されています。

8. 質問: 「GraphQL」とは何ですか?
   
   回答: GraphQL は、クライアントが必要なデータを正確にリクエストできるようにする API のクエリ言語です。これは、クライアントが必要以上のデータを受信する可能性がある REST API とは対照的です。

9. 質問: 「Web アクセシビリティ」とは何ですか?
   
   回答: Web アクセシビリティとは、障害を持つ人々が Web アプリケーションを使用できるようにする実践を指します。これには、セマンティック タグ、ARIA 属性の使用、およびコンテンツがキーボードでナビゲート可能であることの確認が含まれます。

10. 質問: 「Service Worker」とは何ですか?
    
    回答: Service Worker は、ブラウザが Web ページとは別にバックグラウンドで実行するスクリプトで、キャッシュ、プッシュ通知、バックグラウンド同期などの機能を有効にします。 PWA の構築には不可欠です。

参考文献

提示された情報は、以下を含むいくつかの信頼できる情報源から抽出され、調整されています。

1. Glassdoor - 人々が面接の経験やよくある質問を共有するサイトです。

   • ガラスドア

2. MDN Web Docs - HTML、CSS、JavaScript に関する包括的なドキュメント。

   • MDN ウェブ ドキュメント

3. JavaScript.info - JavaScript の最新ガイド。基礎から高度なトピックまですべてをカバーしています。

   • JavaScript.info

4. React Documentation - ライブラリに関する詳細情報を提供する公式 React ドキュメント。

   • React ドキュメント

5. CSS-Tricks - CSS とフロントエンド開発に関するヒントとチュートリアルが記載された Web サイト。

   • CSS のトリック

これらのソースは Web 開発コミュニティで広く知られており、フロントエンドの知識を深めるための優れたリソースです。