【Web】知っておきたいWebエンジニアリング各分野の基礎知見80
この記事は？
それぞれが専門にしている領域に関わらず、Webエンジニアリングの基礎知識として知っておきたいと思う事を対話形式でまとめていく。知識はインプットだけではなく、技術面接や現場では、専門用語の正しい理解をもとにした使用が必要なので、専門がなんであれ理解できるようなシンプルな回答を目指したものになっています。解答の正しさはこれまでの実務と各分野の専門書をベースに確認してはいますが、著者は各技術の全領域の専門家ではなく100%の正しさを保証して提供しているものではないので、そこはご認識いただき、出てきたキーワードの理解が怪しい場合各自でも調べ直すくらいの温度感を期待しています。なお、本記事で書いている私の回答が間違っている箇所があったりした場合、気軽にコメント欄などで指摘いただけるとありがたいです。
Webエンジニアリングの基礎
この記事でカバーしている領域は、以下のような領域です。Web開発組織各社の採用技術を見つつ、共通で必要になることが多いと思われる事項を著者の基準でピックアップしています。
★フロント: UX、Peformance, Atomic Design、HTML•CSS•JS•TS＋React/Vue/Angularから一つ
☆デザイン(Optional): 画面設計、UI/UX作成、Figma/XD、アクセシビリティ
☆バックエンド: API作成、認証・認可、オブジェクト指向、Java/Goなどから一つ
☆インフラ: Docker、k8s、スケラビリティ、負荷分散、CDN、オブザビリティ
☆クラウド(インフラ応用): AWS/GCP, Amplify/ Firebase などから1つ
☆ネットワーク: TCP/IP - HTTP、Rest/GraphQL
☆セキリティ: 機密性/可用性/完全性/真正性/信頼性/責任追跡性/否認防止
☆データベース: RDB(SQL、DB設計、正規化、インデックス、トランザクション)/ NoSQL(各NoSQLのベストプラクティス)どっちか
☆テスト: 単体テスト、統合テスト、負荷テスト、テスト設計など
☆メソドロジー: ガジェット選定、アルゴリズム、Git•GitHub、CI•CD、ウォータフォール/アジャイル、教育、組織運営、マネジメント、工数管理
基本情報技術者試験ではダメなの？
著者も基本情報技術者試験は受け、Web開発だけにとどまらない、エンジニアリングの広範な分野の基礎を勉強できる良い試験だと思いました。ただ、フロントエンド、デザイン、モダンインフラ(Dockerやクラウドなど)の内容に欠け、その他Webエンジニアリングに特化した知見に関してはノータッチの印象で、基本情報を勉強するだけではこれらの分野の基礎をゴッソリ落としてしまうので、基本情報試験をベースとしつつ足りない分野を補っていくのが良い方法だと思っています。
Webエンジニアリングの基礎はどう身につけるのか？
多くのSI企業では十分な研修を行い、Web含め全分野の基礎を定着する機会があると聞きますが、一部大手企業を除く多くの中小Web系組織でそんな余裕はなく、また新人教育に割くリソースも少ないこと(また、Web系の人間には自分の力で勝ち上がってきた人が多く教育に知見がある人も少ない印象)もあり、分野問わない基礎を身につけられるかどうかは各々の意識と、独学の能力に大きく左右されます。リモートワークの普及も個人依存を促進しており、個人が意識しないと現場で担当している領域以外の基礎を身につけるのは難しいです。Web系企業は山ほどあり、レベル感もピンキリですが、この記事では著者が今まで5,6社程度現場に入ってきた中で、共通して最低限必要だと思った基礎をまとめました。TCP/IPといった古典的な内容から、基本情報試験では学べないWeb系寄りのDOMレンダリングやパフォーマンス測定などフロント領域、デザインの基礎知識、またWeb開発の現場で広くデフォルトスタンダードになりつつあるGit、CI/CD、Docker、Kubernetes、GraphQL、AWS、BFF、マイクロサービス等も基礎(もしくは教養)とみなし記載しています。
基礎知見の重要性について
SQLなどの古典技術はもちろん50年近い前変わらず存在し、一番流行が激しいとされるモダンフロントエンドの分野でさえReactは10年くらい前から登場しており使われ続けています。新しい技術ができるとしても、まったくのゼロから何か新規のものが生まれることは考えにくく、どちらかというと今までの技術基礎をベースに新規のものがでてくるはずなので、基礎を身につければ今後どんな技術が出ても、比較的すぐキャッチアップもできそうだという認識です。(新卒時代、当時から5年くらい前にフロントエンドをやっていた先輩のバックエンドエンジニアが、1、2日程度で難なくReact開発に入っていたのを見て実体験ベースでもそういったことは感じる次第です。)
フロントエンド
JavaScriptではシングルスレッドで動き、非同期でのタスク実行をイベントループが可能にする。ブラウザでイベントループが起こる仕組みを説明せよ。
関数は次々に呼び出され、コールスタックに追加されるが、実行が終わると一つ一つ取り出されている。ところが、たとえば一定時間後に関数を発火するAPIであるsetTimeoutを考えると、スタックに追加されるとすぐに時間計測を開始するととともに取り出される。一定時間の計測後、setTimeoutの関数はキューに入れられる。キューに入れられた関数は現在実行中のタスクが終わるとすぐに取り出され実行される。この仕組みをイベントループといい、非同期処理を行なっている。
TypeScriptが解決することを説明せよ。
解決ポイント①: コンパイルエラーによってJavaScriptではフォローできない、スクリプト実行前の未然検知を可能にする。解決ポイント②: VSCodeなどのIDEと組み合わせることによって、型補完やエラーを表示させ開発体験を向上させることができる。
☆ブラウザレンダリングの仕組みを説明せよ。
レンダリングは以下の大まかな４工程で行われる(フレーム)。
①Loading(リソース読み込み)
1.リソースの取得
まず、URLに含まれるホスト名をDNSが解決しIPアドレスに変換する。次に、TCP(HTTPSであればTLS)接続の確立が行われ、HTTPリクエストの送信とHTTPレスポンスの受け取りが行われる。
2.リソースの読み取り
HTLM/CSS/JavaSript/画像などのリソースを読み込む。HTMLはDOMツリーに、CSSの場合はCSSOMツリーに変換が行われ、それ以外のリソースもレンダリングエンジンの実装に従った内部表現に変換される。
②Scripting(JavaScriptの実行)
JavaScriptの字句解析、構文解析、コンパイルを経たコードが実行される。
③レイアウトツリー構築
スタイルの計算を行い、DOMツリー内の全てのノードの視覚的な情報の計算を行う。
④Painting(レンダリング結果の描写)
ピクセル化された情報を合成し、最終的なレンダリング結果を表示する。
※ 初期読み込みが終わって描画が終わってからも、ユーザーやブラウザの何らかのアクションや、JavaScriptのコード実行、イベントによってレンダリングは引き起こされる(再レンダリング)
クリティカルレンダリングパスとは何か？
Webページの初回の描画に必ず必要な工程を、クリティカルレンダリングパスという。Googleの開発者、Llya Grigorikによると1000ミリ秒以下に抑えることが望ましい。
Webパフォーマンスの指標となる「RAIL」について説明せよ。
「RAIL」はGoogleの開発者が提唱した、WEBサイトのパフォーマンスモデルの指標を指す。人間が感じる「速さ」の目安を、WEBサイトのパフォーマンス指標に落とし込んだもの。
・Response(応答): ユーザーのサイト上でのアクションに対して、WEBサイトが応答するまでの時間。100ms未満が望ましいとされている。
・Animation(アニメーション): アニメーションのフレーム処理(JavaScriptの実行、DOMのレイアウト計算
、DOMの描画)を、16ms以内で簡潔させること。対策として、JavaScriptの処理はシングルスレッドを避け、非同期関数(requestAnimationFrameなど)を使用する。JavaScriptに依存せずに、CSSを活用してパフォーマンスを向上させるなどの方法。
・Idle(アイドル処理): RAILのIdleでは、アイドル状態で実行されるJavaScriptの処理時間を50ms未満に抑えるように定義している。アイドル状態とは、Response、Animation、Loadが一度終了し、ユーザーのアクションを待っている状態のことを指す。
・Load(読み込み): Loadは、WEBサイトのコンテンツの読み込みにかかる時間を指す。
RAILではこのLoad処理を1000ms未満で完結させるように定めている。つまり、Loading→Scripting→Rendering→Paintingのプロセスを1000ms未満で完結させることが必要。
コアウェブバイタルズとは何か、説明せよ。
UX（ユーザーがサイトを通じて得る体験）の質を計測するための指標のこと。LCP、FID、CLSという3つの指標で構成されており、主にサイトの使い勝手を重要視している。同じような内容・質のページが複数あった場合、コアウェブバイタルが優れたものが検索上位に表示される。
・LCP(Largest Contentful Paint): ページの読み込み速度を表す。ページ内における最も大きなコンテンツ（画像や動画など）が表示されるまでの時間を評価するもので、読み込み開始から最大コンテンツが表示されるまでが2.5秒未満であることが望ましいとされる。
・FID(First Input Delay): サイトの反応速度を評価。「初回入力遅延」を意味する。初回入力とは、ユーザーがページを訪れてから最初に行う操作（ボタンクリックやタップなど）のことでFIDは、その操作を行ってから応答が発生するまでの遅延時間を指す。理想的な遅延時間は100ミリ秒未満。
・CLS(Cumulative Layout Shift): ページの読み込み中に起こるレイアウトのずれを測定している。急にレイアウトがずれたりして、ユーザーに不便とならないかどうかを確認している。スコアは0（移動なし）～1（画面における最大の移動量）で表され、0.1未満が理想的とされている。
SPA、SSG、SSRの違いを説明せよ。
SPAでは、通信の結果必要となった差分情報を得てブラウザでHTMLを更新する。一方、SSRでは、通信の結果サーバーがHTMLを返し、ブラウザで表示する。また、SSGは、アプリをビルドするタイミングでレンダリングを行い、各ページのHTMLを表示させる。
CORSとは何か？なぜCORSを設定しないといけないか答えよ。
CORSはオリジン間リソース共有を指す。ブラウザーは、スクリプトによって開始されるオリジン間HTTPリクエストを制限しており、例えば、 XMLHttpRequestやFetch APIは同一オリジンのポリシーに従う。これらの API を使用するウェブアプリケーションは、そのアプリケーションが読み込まれたのと同じオリジンに対してのみリクエストを行うことができ、それ以外のオリジンからの場合は正しいCORSヘッダーを含んでいることが必要である。これは、開発者が意図していないオリジン先にいるアタッカーからのリクエストによる攻撃を防ぐためである。
☆セキリティの観点からフォーム実装で気をつけるべきことを述べよ。
・入力値のサニタイジング(エスケープ処理)を行う。
・reCAPTCHAを使い機械的な自動送信を防ぐ。
・input要素に type="password"を付け入力値を隠す。
☆フロントでのパフォーマンスの測定方法/改善手法について説明せよ。
Lighthouse/ Chrome DevToolsなどのツールを活用して、パフォーマンスを落とすボトルネックとなっている部分を特定する。不要なレンダリングの除去、キャッシュ活用、API最適化などボトルネックに応じた改善を行い、再びツールを用いて良くなったか確認する。
☆Webアクセシビリティとは何か？アクセシビリティを高める方法を説明せよ。
「視覚・聴覚機能などに障がいのある方や、加齢で機能が低下している高齢者などを含む全ての人が、Webで提供されている情報にアクセスし利用できること」をWebアクセシビリティと呼ぶ。JISが定めており、
・ページの内容が分かるページタイトルを記述する
・読み上げ機能が使えるように、画像の代替テキストを用意する
・エラーメッセージではエラー箇所と修正方法を明示する
・テキストリンクは、リンク先が分かる文言にする
など含め１０項目がアクセシビリティ確保に最低限必要な処置としてあげられる。
div要素にonClickをつけないほうがいい理由はなにか？
・タブキーでのフォーカスを当てられない
・エンタキー/スペースでボタンのアクションを実行できない
・スクリーンリーダーが適切に読み上げてくれない
などの問題があるので、button要素にonClickをつけるようにする。
フロントプロジェクトでエラートラッキングを行うにはどんな方法があるか？
Reactの場合、内部エラーをErrorBoundaryでキャッチするだけでなく、非同期処理でのエラーはSuspenseの機能を用いてキャッチできる。また、キャッチしたエラーはSentryなどのエラー解析ツールと適切に連携し、バグ修正に役立てることができる。
仮想DOMとは何か？仮想DOMは何を解決しているか？
ReactはUIをブラウザへ表示するために必要なDOMを得るために、木構造で構成されるツリーをインメモリに展開する。この仕組みを仮想DOMと呼び、ライブラリが備えている差分検知アルゴリズムがコンポーネントの更新時に差分を検知し、変更のあった差分のみを実DOMに転写し変更を反映させる。今までjQueryで命令的に要素を変更しなければいけなかった所が宣言的に実装することが可能となり、現実的なパフォーマンスを維持しつつ宣言的UIでの実装を可能にしてくれる。
Listを表示するときにkeyを指定しなくてはならない理由は何か？また、indexをkey属性に指定するべきではない理由を説明せよ
keyをつけないとListに項目が追加されたとき、差分検知アルゴリズムが、すべての項目に更新を加え、パフォーマンスに悪影響になる。また、indexをkeyに指定し、リストの中間項目で削除や追加を行う場合、例えば新規追加ではkeyが0のものが追加され、Reactがそれぞれの項目を正しく追えず挙動が変になることがあるため、そういったことを避けるために連番の値は入れないようにする。
React/Vue/Angularはコンポーネント志向のフレームワークライブラリである。コンポーネント志向であることによって、解決できることを説明しなさい。
コンポーネント指向では、ロジックとマークアップ双方を含む疎結合のコンポーネントという単位を組み合わせてアプリを構成する。コンポーネント指向であることによってそれぞれのコンポーネントが疎結合で依存しなくなるので捨てやすく、変更が容易で、すぐに代替可能になる。こうした特性から、スピード感を持って開発をしつつ継続的に変更しながらも、障害やバグを生みにくい堅牢性の高い状態を保つことが可能になる。
Fluxとは何か説明せよ。Fluxは、どういった問題を解決しているか？
FluxではStoreで状態を管理し、Dispatcherがストアに向けてActionによる更新指示を行う。単方向のデータフローになっており、従来のアプリだとデータ層とビュー層がそれぞれ互いに複雑に絡み合っていたものが、Fluxはそうではなくコンポーネント間がより疎結合になり、一部の修正が他のコンポーネントに影響しなくなるなど状態管理がスムーズになった。
単方向バインディング/双方向バインディングの違いは何か？
共通点として、データが変更されると、その変更はView に自動的に反映される。単方向(React)では、ビューの変更をデータに反映させるにはイベントハンドラが必要で、双方向(Vue)ではその必要がなく自動でデータに反映されるといった違いになっている。
デザイン
☆デザインの４原則について説明せよ。
・近接
互いに関連する項目は、近づけてグループ化する。
理由: 組織化。関連要素を近づけてグループ化するだけで、情報を組織化できる。
・整列
ページ上では、すべてを意図的に配置する。
理由: ページの一体化と組織化のため。
・反復
デザインの視覚的要素を作品全体を通して繰り返す。
理由: 一体化と視覚的な面白さを加えるため。
・コントラスト
要素が同一でないなら、はっきりと異ならせる。
理由: ページに面白みを作り出し、情報の組織化を支援するため。
視線誘導の原理と活用の例は？
視線誘導とは、ユーザーの視線の流れを意図的にコントロールするために使われる手法の1つで、チラシなど紙媒体では目は上から下、左から右に動きやすいと言われている。グーテンベルク・ダイヤグラムでは、左上に一番重要な情報を載せることで見る人の視線を誘導するようにしている。
☆アトミックデザインとは何か？説明せよ。
小さな素材を組み合わせることでWebページを作っていくUIデザインシステムで、デザインに統一感を持たせたり、あちこちで部品を再利用ができるメリットがある。
バックエンド & データベース
オブジェクトとは？カプセル化とは？
オブジェクト: データとメソッドを一体化したもの。
カプセル化: オブジェクト内にあるデータとメソッドを、オブジェクトの外部から隠蔽すること。
継承とポリモーフィズムの違いを説明せよ。
継承: スーパークラスのデータとメソッドをサブクラスに引き継ぐ。
ポリモフィズム: 同一のメッセージを送っても、インスタンスで特有の処理が可能。
☆正規化の手順を説明せよ。
・第一正規化: 繰り返し項目を別の表に分割する。
・第二正規化: 主キーを構成している一部の項目によって決定される項目を別の表に分割する。
・第三正規化:
①主キー以外の項目によって決定される項目を別の表に分割する。
②計算でもとまる項目を削除する。
トランザクションとは何か？ACID特性について説明せよ。
データベースに対して行われる複数の処理をまとめた元をトランザクションという。SQLは1文ずつ実行することができるが、連続して複数のデータ追加や更新の必要がある場合は1つのアクションとして実行するように1つの処理を束ねることができる。また、トランザクション処理が成功したあと、その結果をデータベースに反映させることをコミットという。
ACID特性
A(原子性): トランザクションに含まれる処理が全て実行されるかすべて実行されないのどちらかになる。
C(一貫性): あらかじめ設定された条件を満たし、データの整合性を保証する。
I(独立性): 処理の途中経過が隠蔽され、外部からは結果だけ見ることができる。処理の実行途中の状態で、他の処理に影響を与えない。
D(永続性): トランザクションが完了したら、その効果が失われることはない。
ロールバックとは何か？
トランザクション内の処理で問題が発生したときに、処理を取り消してトランザクション開始時点の状態まで戻すことをロールバックと呼ぶ。結果としてトランザクション内の処理は何も行われないので、データベース上での変化は起こらない。
デッドロックとは何か？どう対策すれば良いか？
複数のトランザクション処理が同時に同じデータを操作することで互いに相手の処理状態を待つ状態となり、次の処理へと進めなくなってしまうことをデッドロックと呼ぶ。デッドロックが起こってしまった場合はロールバックでどちらかの処理を終了させる必要がある。対策としてトランザクション内の処理時間を短くしたり、トランザクションからアクセスするデータの順番を統一するなどしてそもそもデッドロックが起こらないように気をつける。
N+1問題とは何か？
はじめの1回のSQLでモデルを取得し、そのモデルに対するデータ数分(N回)のSQLが実行されてしまう状態のことをN+1問題といい、何回もSQLを発行するのでパフォーマンスを下げてしまうため、監視し、関連するテーブルのデータを事前にすべて取得して利用するなどして対策できる。
インデックスとは何か？
インデックス（索引）とは、データベースの性能を向上させる方法の一つである。インデックスは「探すレコードを識別するデータの項目」「対象レコードの格納位置を示すポインタ」で構成されており、これを利用してデータの格納位置を特定し、その位置を直接アクセスする事で、表の検索速度を上げることができる。一方、インデックスが設定されていない場合の検索では、テーブルの最初から順番に1件ずつ探すため、時間がかかってしまう。
フロントでバリデーションをした上で、バックエンドでもバリデーションを行う理由はなぜか？
フロントでバリデーションを行なっても、curlやその他HTTPクライアントを用いて不正な値を直接バックエンドに送信される可能性を防ぐために、バックエンドでもバリデーションを行う。
APIのバージョン管理はなぜ必要か？
既存機能は残してそのまま使い続けつつ、APIを使うエンジニアに対して変更内容を周知した上で徐々にプログラムを変更して新APIに移行できるメリットを享受したいから。
インフラ & ネットワーク
☆OSが担う機能には何があるか?
入力・出力の判別、ハードウェアの管理、ファイル管理、タスク管理、メモリ管理など
CPU、メモリ、ストレージについてそれぞれ何か説明せよ。
CPU: 制御や演算を行いパソコンの動作の命令を出す部品
メモリ: CPUに渡すデータを保存するための一時保管場所
ストレージ: データを恒久的に保存しておくための保管場所
サーバーや個人使用のPCにおいて、システム全体のレスポンスを下げる要因となる主要なボトルネック要素を4つ答えよ。
- CPU使用率
- メモリ使用率
- ディスクI/O
- TCPコネクション数
☆Web上のフォームで、データをサーバーに送信する。データを送信し、レスポンスが返ってくるまでの各層でのプロトコル名と担う役割を答えよ。
①アプリケーション層: HTTP
アプリケーション層はアプリケーションで扱うデータのフォーマットや手順を決める役割を担う。
②トランスポート層: TCP/UDP
送信元と通信相手との通信の信頼性を決める役割を担う。TCPは信頼性を重視しており、相手との通信を保証する。UDPは信頼性は弱いが、高速なデータ転送を提供するので動画送信に向いている。
③インターネット層: IP
複数のネットワーク間のデータ転送を行う役割をもち、IPはネットワークのノード間のパケットをやりとりをしている。
④ネットワークインタフェース層: 無線LAN
同一のネットワーク内でのデータ送信を担う。
☆DockerとVMなどの仮想化技術との違いは？Dockerは何を解決するのか？
従来の仮想マシンは、アプリケーション、ミドルウェア、ゲストOSで構成される。一方、Dockerコンテナではアプリケーション、ミドルウェア、OSライブラリーで構成される。 Dockerコンテナは完全なOSを含んではおらず、OSの機能のいくつかをホストである物理的なマシンに託している。
・解決ポイント1.
コンテナを一度作ってしまえばそれを何も変更しないで違う環境に載せ替えて実行することができる。従来型のようにアプリケーションを動かすために必要なハードやOSやミドルウェアを苦労して個別に用意する必要はなく、Dockerエンジンさえ動いていれば、どの環境でもすぐに動かせる。
・解決ポイント2.
仮想マシンはOSレベルから個別に構築されるため、どうしてもメモリ、CPU、ディスクなどのサーバーのリソースを多く消費する。そのために、安定してパフォーマンスを出すためには高価なリソースが必要だったが、Dockerを使えばそのリソースを大幅に削減することが可能。
・解決ポイント3.
仮想マシンのイメージは大きくなりがちで、異なる環境にコピーするのも時間がかかる。その点、コンテナイメージは軽い場合が多いので簡単にコピーや移行、バックアップが可能。
Kubernetesとは何か？Kubernetesは何を解決するのか？
Dockerができることはアプリケーションを各コンテナに分離することにとどまっていたが、Kubernetesを使うと各コンテナを管理することができる。管理対象が大きくなってDockerコンテナが増えた場合には、Kubernetesを活用することで複数のDockerホストを管理する手間が減り、コストの削減につながる。また、コンテナのスケジューリングやオートスケーリング、データの管理など、Dockerだけでは実現しにくい問題をKubernetesは解決してくれる。
☆保存場所に着目し、クッキー、セッション、キャッシュの違いを説明せよ。
クッキー: HTTPはステートレスなプロトコルであるため、WebブラウザとWebサーバーの一連のやり取りにおいて、状態を保持し管理する仕組みがない。そのため、Webサーバーへ接続してきたWebブラウザに対してコンテンツなどと一緒にWebブラウザに保存してもらいたい情報をクッキーとして送る。
セッション: WebブラウザとWebサーバーの一連のやり取りにおいて、一連の関連性のある処理の流れをセッションと呼ぶ。セッション管理において、Webブラウザを識別するための情報をセッションIDと呼び、セッションIDはWebサーバーで生成され、クッキーに含めてWebブラウザに送信される。セッションIDを持つWebブラウザは、クッキーにセッションIDを含めて処理を行うことでWebサーバーとのセッションを維持できる。
キャッシュ: 一時的にデータを保持する仕組みをキャッシュという。Webサイトを読み込む時間を短縮でき、データ通信量を節約できるメリットがある。ブラウザキャッシュは、Webサイトにアクセスしたブラウザがサーバーから受け取ったデータを記憶するキャッシュを指す。一方サーバーキャッシュは、キャッシュサーバーがブラウザからのリクエストに対するレスポンスを記憶しておき、記憶しているのと同じリクエストが来たときにはWebサーバーの代わりにレスポンスを返し、Webサーバーに掛かるコンテンツ読み込みやデータ検索などの負担を減らす。
☆HTTPSとHTTPの違いは何か？HTTPSが安全を確保する仕組みを説明せよ。
HTTPSとはHTTP over SSL/TLSの略で、HTTPの通信において暗号化方式であるSSLとTLSを利用することで実現できる。
Webサイトの安全性を確保する仕組みには以下の3つがある。
① 盗聴防止(暗号化通信)
サーバーとの通信時、万が一傍受されても内容を解読させないためにデータを暗号化して送ることにより、第三者からの盗聴を防ぐ。
② 改ざん防止
メッセージダイジェストを行い、あるデータから一意の短いデータ(ハッシュ値)を取り出す計算を行いデータの送受信時にハッシュ値を比較して改ざんを検知できる。
③ なりすまし防止(Webサイト運用元の確認)
WebサーバーにSSLサーバー証明書と呼ばれる電子証明書を配置しておき、接続時に検証することにより、Webサイトを運営する会社の身元を確認できる。SSLサーバー証明書は発行を認められた認証局による運営元の認証を通過する必要があり、信頼できない発行元のSSLサーバー証明書が利用されている場合はWebブラウザ上に警告画面が表示される。
DMZとは何か？
企業はファイアウォールを設定することで、信頼できない外部ネットワークからのアクセスを遮断できる。しかし、この状態では内部ネットワークからインターネットへのアクセスができず、Webサイトの外部公開やメール管理もできない。そこで、ファイアウォールと外部ネットワーク間に、DMZセグメントという緩衝地帯を設ける。外部とのアクセスを必要とする「Webサーバー」、「メールサーバー」、「DNSサーバー」などの公開サーバー、プロキシサーバーがDMZセグメントに置かれ、これにより、外部ネットワークとアクセスを行っている一方、内部ネットワークへの接続はセキュリティ対策を施したうえで行われており、外部攻撃による被害拡散を防いでいる。
プロキシとは何か？リバースプロキシとは何か？CDNとは何か？
プロキシ（proxy）は、内部のネットワークとインターネットなど別々のネットワークの境界で両者を中継する。これによって、プロキシはネットワーク間の通信中継、通信データのキャッシュ、通信内容の監視など行う。
リバースプロキシは、プロキシが多くの場合、内部のネットワークからインターネットなど外部のネットワークへの通信を中継するのに対して、外部のネットワークから内部のネットワークへの通信を中継している。つまり、一般的なプロキシとは逆方向（リバース）に働くためリバースプロキシと呼ばれる。リバースプロキシは外部ネットワークとアクセスされるサーバーの間に設置し、複数のサーバー間で負荷分散、キャッシュ保持などを行う。
CDNはContent Delivery Networkの略で、DNS、キャッシュサーバ、オリジンサーバからなる。ユーザーはDNSを経由してキャッシュサーバーにリクエストを出すが、はじめキャッシュサーバーは何もデータを持っていないので、オリジンサーバーまで取りに行く。次回以降、キャッシュサーバーがオリジンサーバーの代わりにデータを配信するようになる。キャッシュサーバーは世界各国に配置されており、リクエストを出したユーザーのもとまで最速でデータを配信できるキャッシュサーバーを経由してユーザーにレスポンスを届けることができる。
ロードバランサーとは何か？負荷分散の観点でロードバランサーとCDNを比較したとき、CDNの方が優れている点は何か？
ロードバランサーとは負荷分散装置を指し、アクセスさせたいサーバーの手前にロードバランサーを設置することで負荷の分散を行うことができる。それだけでなくロードバランサーは、負荷分散と同じように大切な役割として「サーバーに障害が発生したときに、自動で検知して他のサーバーへ振り分ける」役割も担っている。
しかし、サーバーをロードバランサー配下に並べた場合、ロードバランサーからのトラフィック(回線容量)がボトルネックとなるケースがあり、所謂回線不足に陥る可能性がある。一方、CDNは複数台のキャッシュサーバーで構成され、それぞれのキャッシュサーバーに対して上位ネットワークが複数存在することから、回線不足に陥りにくい。
また、ロードバランサー自体が障害となった場合、配下にあるサーバーは全てアクセスができなくなってしまうので、実質ロードバランサーの冗長化も行わなければいけないが、CDNは定期的にヘルスチェックを行い障害のあるキャッシュサーバーを切り離す。ロードバランサーを使ってサーバーを横並びにする場合、それぞれのサーバーにデーターが収納する必要があるが、CDNではオリジンサーバーのファイルをつかって負荷分散が実現できる。
スケーラビリティとは何か？
ソフトウェアやミドルなどの拡張性、拡張可能性を指す。システムの利用や負荷の増大、用途の拡大などに応じて、どれだけ柔軟に性能や機能を向上、拡張できるかを示す言葉。
DNSが名前解決を行う仕組みを説明せよ。
・ユーザーがブラウザにURLを入力するとDNSに対し名前解決要求を行う
・クライアントが要求したURLに対応したIPアドレスが返却される
・クライアントはIPアドレスをもとにURLの運営サーバーにアクセスできる
BFFとは何か？BFFが解決する問題を答えよ。
クライアントとバックエンドの中間に位置し、双方の複雑な処理を緩和するために作られたサーバーを指す。多数のサービスがあると各APIにアクセスを行うため、クライアント・サーバー間の通信量が増加するが、BFFがあるとBFFのみとの通信となる。また、開発の進捗に応じて作成されたAPIの粒度やデータの内容に修正が発生した場合、各クライアントでの対応で生じていた負担を減少できる。
☆マイクロサービスとは何か？メリットは？
マイクロサービスとは疎結合され、それぞれが独立した複数サービスで構成される1つのアプリケーションであり、従来の密結合なモノリシックとは対をなすアーキテクト手法を指す。
メリット① コードの更新が簡単で、アプリケーション全体に触れることなく新機能を追加できる。
メリット② さまざまなコンポーネントに異なるスタックやプログラミング言語を使用できる。
メリット③ 各コンポーネントは互いに独立してスケーリングできる。単一のサービスが過負荷に直面しているという理由でアプリ全体を拡大する必要があった際の無駄とコストが削減される。
インフラをコード化するメリットは何か？
・自動化によるインフラ作業の工数削減
・コード再利用による構築作業の効率化
・自動化による人員ミスや属人化の予防
などのメリットが考えられる。
以下クラウドに関する内容。採用例が多いAWSに関して記述します。
[AWS]☆IAMとはどんなサービスか？ 最小権限の原則とは何か？
IAMはAWSへの認証、AWSリソースへの認可を制御するサービス。認証とはAWSにログインするユーザーが正しいかを判断する機能。認可とはAWSリソースへの操作権限を管理する機能を指す。権利を無限に与えると、アプリケーションを実行するインスタンスや開発者の端末に万が一侵入された場合に、いくらでも認証情報を取得し放題になる。そこで最小権限付与を徹底することで、そうなったときにも被害を最小限に防ぐことができる。
[AWS]S3とCloudFrontでAWS上にサイトをホストしたい。S3とCloudFrontはそれぞれどんな機能を持つか？組み合わせて使う利点は？
S3: 静的ウェブサイトのホスティングを担い、簡単にWebサーバーにすることができる。
CloudFront: CDN。キャッシュした内容を直接サーバーではなくCDNを介して配信する。
メリット①キャッシュによる表示速度の高速化
メリット②独自ドメインの SSL 対応
S3 のみで独自ドメインを利用する場合SSL証明書を配置する場所がなく、 SSL/TSL 経由での配信ができない。そこでCloudFrontを利用すれば、ACM(SSL/TLS証明書を管理する機能を持つ)で作成した証明書をディストリビューションに設定することができるので、独自ドメインで SSL/TSL経由での配信が可能になる。
メリット③S３ヘの直接のアクセスを減らせるため、コスト削減につながる
[AWS]AWS lambda/Fargateを比較し、それぞれのユースケースについて答えよ。
Lambdaは必要な時だけ起動して料金が発生するので、コストを抑えて使うことができる。Fargateは常に稼働しているのでコストがかかるが、AutoScalingを利用して削減できる。
セキリティ
☆情報セキリティの３要素は何か？
1. 機密性
・情報に対するアクセス権限を徹底して保護・管理すること。
2. 完全性
・改ざんや過不足のない正確な情報が保持されている状態を指す。
3. 可用性
・認可されたものが情報をいつでも使える状態を保持すること。
情報セキリティ３要素の他に、加えられることのある４要素は何か？
4. 真正性
・偽装やなりすましでなく、主張する通りの本物であると言う特性。
5. 信頼性
・意図した通りの結果が得られると言う特性。
6. 責任追求性
・誰が関与したかを追跡できるような特性。
7. 否認防止
・後で「私じゃない」と否定されないようにする特性。
アプリの脆弱性を突く攻撃手法を3つ説明し、各対策を述べよ。
1. SQLインジェクション
脆弱性のあるWebアプリケーションの入力領域に、悪意のある問い合わせや操作を行う命令文を注入することで、管理者の意図していないSQL文を実行させる。
対策①: 特殊文字の入力に対してエスケープ処理を行い、無害な文字列に置き換える。
対策②: WAF(Web Application Firewall)を使う。通常のファイアフォールがIPアドレスやポード番号などのヘッダを見てアクセス制御しているのに対し、WAFはデータの内容も見て判断し、攻撃と見做されるパターンを検知した時に当該アクセスを遮断する。
2. XSS(クロスサイトスクリプティング)
利用者の入力データをそのまま画面に表示する脆弱なWebサイトに対して、悪意のあるスクリプトを埋め込んだ入力データを送ることで利用者のブラウザで実行させる攻撃。
対策: 特殊文字へのエスケープ処理を行う。WAFを使用すること。
3. CSRF(クロスサイトリクエストフォージェリ)
CSRFは、ユーザーが悪意のあるURLにアクセスしてしまった場合に、意図しないリクエストを特定のWebサービスに送られてしまう攻撃。例えば、ログイン中のユーザーに攻撃者からのCSRFが行われると、そのユーザーが意図しないような掲示板やSNSへの書き込みが行われるリスクがある。
対策: ①WAFの導入。②入力フォームの中にトークンを埋め込み、それをセッションに格納したトークンと比較して正常なリクエストか不正なリクエストかを判断する方法がある。
パスワードクラックとは何か？その対策は？
パスワードを割り出し、解析すること。
対策①: パスワードの入力試行回数に制限をかける。
対策②: 複数のサイトで同一のIDとパスワードを使いまわさない。
対策③: パスワードを長く複雑なものにして特定を困難にする。
Dos攻撃とは何か？その対策は？
特定のサーバに大量のリクエストを送り付けることで想定以上の負荷を与え、サーバーの機能を停止させる攻撃。
対策:
①IDS(不正な通信を検知して管理者に通報するシステム。Intrusion Detection System)の導入
②IPS(検知だけでなく遮断まで行うシステム。Intrusion Prevention System)の導入
セッションハイジャックとは何か？その対策は？
他人のセッションIDを推測あるいは盗聴して取得し、そのセッションを乗っ取ってしまう手法。
対策①: URLにIDを含めない。②セッション管理を行うプラットフォームに管理を任せる。
IPS/IDS/WAF/ファイアウォールの違いは何か？
IPS/IDSはパケットの中身を調べて不正なアクセスを検知する手法で、IPSはIDSと比べてより多くの攻撃を検出でき実際に防御も行う。IDS/IPSはOSやミドルウェアに対する保護を提供しているが、WAFは、個別に開発されたアプリケーションの脆弱性を保護する違いがある。ファイアウォールはポートとIPアドレス間で働き、個人PCもしくはネットワーク全体への保護を行なっている。
☆エンジニアが使用する開発PCで設定できるセキュリティ対策の例を挙げよ。
① ディスク暗号化の有効化
② エンドポイントセキュリティソフトの導入
③ スクリーンロック設定
④ 各(Slackなどすべて)クラウドサービスで二段階認証を設定
☆VPNとは何か？その仕組みを説明しなさい。
VPNとはVirtual Private Networkの略称で、仮想的な専用回線のことを指す。VPNを用いると安全な通信経路を構築し、セキュアなデータのやり取りを実現することができる。まず、インターネット回線上に拠点間を繋ぐ仮想的な通信経路を構築して、双方の拠点を接続する。次に、トンネリング経路で通信するデータは、L2TPやPPTPなどの通信プロトコルでカプセル化される。この際に、IPsecのような暗号化できるプロトコル化を用いることで通信経路が暗号化できる。
BASIC認証とは何か？その仕組みを説明せよ。
HTTP自体に定義されている仕組みで、ユーザーがBasic認証でアクセス制限されたコンテンツにリクエストを送ると、サーバ側は401というエラーを返す。これはユーザーのIDとパスワードの送信を要求するエラーで、ユーザーはその後ブラウザ上でIDとパスワードの入力フォームに、設定したIDとパスワードを入力してサーバー側へと送信する。すると、サーバー側は保存された情報とID・パスワードを照合してアクセスを許可もしくは拒否するという仕組み。BASIC認証は簡易的なセキリティ対策なので、本格的に脆弱性を防ぐものではない。
テスト
テスト戦略として、テストの各工程に割く工数のベストプラクティスを述べよ。
テストピラミッド: 単体テスト、統合テスト、総合テストの順に工数を減らす戦略。
テスティングトロフィー: 単体テストだけではなく、統合テストに力点を置く戦略。
主要なシステムテストの手法についてそれぞれ説明せよ。
・確認テスト
リグレッション: 今まで使えていた機能が、コード変更後も問題なく使えるかの確認テスト。使えなくなっている機能がある場合の品質後退した状態を「デグレ」と呼ぶことがある。
・評価テスト
セキュリティテスト:不正アクセスや情報漏えいなど、セキュリティに関連要件を満たしているか。
ユーザビリティテスト: ユーザー側の視点に立って視認性や使いやすさを検証する。
障害許容性テスト:障害発生時に必要最低限の機能を維持して稼働できるか検証。
・負荷テスト
性能テスト: 仕様を満たす処理能力を発揮できるか？
ロングランテスト: 長時間の稼働に耐えられるか？
ストレステスト: 想定以上の負荷をかけるとどうなるか？
ロードテスト: 通常時・高負荷時を想定してシステムを稼働させるとどうなるか？
キャパシティテスト: データ量や同時アクセス数の増大にシステムがどのような挙動を示すか？
メソドロジー
☆基本設計の流れを説明せよ。
まず、以下のようなプロジェクト全体の設計を行う。
プラットフォーム設計(インフラの決定)
アプリケーション•アーキテクト設計(アプリ全体の構造決定)
開発方式•テスト方式設計(使用技術•テスト方式の決定)
次に、機能を実現させるために必要な機能について設計を行う。
・機能要件
ビジネスロジック設計(データ処理周り)
データベース設計(RDBもしくはNoSQL)
画面設計(作るアプリのUIの設計)
また、機能要件を実現させるために必要な非機能部分の設計を行う。
・非機能要件
性能•保守性設計
セキリティ設計
移行/運用設計
非機能要件とは何か？JUASもしくはIPAの定義に従い、主要な非機能要件についてそれぞれの項目について説明せよ。
- 可用性: システムがいつ使えるか？いつ止まるか？
- 性能•拡張性: レスポンスの時間が速く、大量のアクセス負荷にも耐えれるか？
- 運用•保守性: システムの保守がしやすいか？
- 移行性: システムを移行する場合、データは何をどう移行するか？
- セキュリティ: システムのセキュリティはどうか？
- システム環境•エコロジー: システムを設置する環境とエコロジはどうか？
ビルドとコンパイルの違いは何か述べよ。
ビルドはソースコードの静的解析を行い、問題なければコンパイラーがコードを低水準語に翻訳し、最後にすべての成果物をまとめて実行ファイルができるまでの過程を指し、コンパイルはコードをより低水準なコードに変換することをいう。
静的型付け言語と動的型付け言語の違いを述べよ。
動的型付け言語: 実行時に変数の型が定まる言語。型にまつわる問題は、プログラムを実行してみないと発覚しない。
静的型付け言語: 実行する前のコンパイル時に変数の型が定まる言語。型にまつわる問題は、プログラムを実行しなくても発見できる。
☆同期処理と非同期処理の違いは何か？
同期処理は、複数のタスクを実行する際に一つずつ順番に処理が実行される方式。非同期処理は、タスク実行が終わるのを待たずに次の処理を実行する方式。
☆git mergeとgit rebaseはどう違うか？
git mergeでは、作業ブランチのコミット内容に新たに取り込みたいブランチのコミット内容を統合し、２つが合わさった新しいコミットを作る。一方git rebaseでは、作業ブランチに対して取り込みたい機能があるブランチを新たな作業ブランチのベースブランチに指定して、そこに作業ブランチのコミット履歴を繋ぐ。結果的に、ベースブランチは古いものから最新のものに切り替わり、新機能が取り込まれる。git mergeと比較するとrebaseではコミット履歴は一直線になり見やすくなる。
git-flowでの開発フローを説明せよ。
まずmainブランチを用意し、開発を行うにあたってはmainからdevelopブランチを切る。次に、各機能ごとにdevelopブランチからfeatureブランチを切り開発が終わったらdevelopにマージする。リリースに必要な機能が出揃ったら、developからreleaseを切りreleaseブランチをリリースに用いる。リリースが完了したらタグ打ちを行い、releaseブランチからmainとdevelopブランチへマージを行う。緊急対応ではmainからhotfixブランチを切って開発し、リリースが完了したらmainとdevにそれぞれマージする。ブランチごとの責務が明快であり、全体での運用状況を把握しやすい。
☆密結合、疎結合が指すところの意味を答えよ。
密結合ではシステムの構成要素間の結びつきや互いの依存関係、関連性などが弱く、各々の独立性が高い。逆に、要素間の結びつきが強く独立性が低い状態のことは疎結合という。密結合では、各システムやモジュールが強く繋がっていて、その中の一つに修正を加えると、他の部分に影響が出てくる可能性が高い。また、何か加えると、他の部分と繋がっているため、技術選択の自由度が低くなることもある。疎結合では、それぞれのシステムはお互いに基本的に別々で、自由度が高く、一つの部分を変えても全体に影響しにくい利点がある。
ランダウのO記法で表される計算量O(f(N))はどう決まるか？
あるアルゴリズムの計算時間が、入力サイズNが大きくなるほどおおむねf(N)に比例して大きくなるとき、そのアルゴリズムの計算量はO(f(N))であるという。
☆DRY、KISS、YAGNIが指すそれぞれの意味を答えよ。
DRY: 同じコードを重複して書かない。
理由: コードの可読性が下がり、修正が難しくなる。また、テストがない。
KISS: コードを書く時、最優先の価値を「単純性」「簡潔性」に置く。
理由: コードは自然に任せて修正していくと、無秩序になり複雑になる。シンプルなコードは、構成する各要素がシンプルで、各要素が担う責務が最小限に抑えられている。各要素の関連もシンプルになる。よって、リーダビリティが高くなり、修正が容易かつ、テストをしやすいメリットがある。
YAGNI: コードは本当に必要になった時、必要最低限で書いていく。
理由: 予め色々な事態に備えてコードを盛り込んでも使われないことが多く、単に複雑性が増す。
☆CI/CDとは何か？
CI: 継続的インテグレーション
コードの変更をリポジトリに頻繁にマージし、かつ定期的・自動的にビルド・テストを行うという手法を「継続的インテグレーション」という。
CD: 継続的デリバリー
ビルド・テストを通したコードのリリース作業の自動化を行う手法。
☆開発環境、テスト環境、ステージング環境、本番環境はそれぞれどんな環境か？
開発環境: 開発担当者がはじめにローカル環境を利用して開発する環境を指す。ここで問題がなければ、テスト環境での検証段階に入る。
テスト環境: 開発した内容に問題がないかを検証するための環境を指す。不具合がある場合は、issueとしてチケット化され修正対応をする。
ステージング環境: 本番とほぼ同じで、リバースプロキシ、SSL設定、ロードバランサなど含めて本番環境と同じ構成にしている。テスト環境でOKに出たものをアップし動作など問題がないか最終確認をするが、テスト環境とはサーバー構成が異なり、テスト環境でissueにならなくてもステージング環境では問題が出、その場合本番でもissueになる可能性が高いため、リリース前の最終確認の環境としてステージング環境を用いる。
本番環境: ステージング環境でチェックが通ったものを本番環境にリリースする。
心理的安全性とは何を指すか？
組織や集団の中で、非難や拒絶の不安がなく発言できる環境のことを心理的安全性という。
WBSとガントチャートの違いは何か？
WBSはプロジェクトのタスクを細分化して表で示す手法を指す。一方ガントチャートとは、プロジェクトの進捗を管理するためのスケジュール表を指す。WBSはタスクを細分化したリスト、ガントチャートはそれに基づいて作られるスケジュール表という違いがある。
ロードマップとは何か？メリットは？
ロードマップは、プロジェクトのおおまかな計画を立てる時に使用する工程表を指す。ロードマップのメリットは、チーム内でロードマップを共有すると、プロジェクトを全体的に見ることができ、メンバ－全員が成功までの道筋をイメージしやすくなること。
バックログとは何か？メリットは？
プロダクト・バックログは、機能や技術的改善要素を優先順位を付けて記述したリストで、ステークホルダ全員が参照し、現在のプロダクトの状況を把握できるようにする。
主なリファレンス
全般
フロントエンド
デザイン
バックエンド・データベース
インフラ
セキリティ
テスト・メソドロジー
Discussion
良記事ですが、いくつか気になった点があります。
SQLインジェクションの対策1のエスケープ処理の説明がXSS対策のものになっています。
リグレッションとデグレテストの説明を分けていますが、ここら辺は微妙ですね。基礎知識というのであれば、同じとしてしまっても良い気がします。
Gitとアジャイルの設問が抜けちゃってます。
パスワードクラック対策として、一定以上の複雑性のあるパスワードに強制するのも必要かと。
ありがとうございます！1,2,4ちょっと考え直してみます。
3はそうですね。Gitとアジャイルあたりも何か考えてみます。
気になった点
すごい細かい所ですが「比例して大きくなる」という表現はこの文脈においては相応しくないと思いました。相応しくない、の具体的程度としては
・仮にエンジニアのスキルチェックという文脈でこの答えが来たら掘り下げた質問をしたくなる
という感じです。
辞書的な定義だと比例は 「y = ax 」であり、オーダー記法的には 「O(n)」が対応します。オーダー記法という指標を持ち出す意義性としては
「同じ n に対する単調増加でも、 O(logn)と O(n) と O(n^n)じゃ全然インフラに与える影響度が違う」
という意味合いなので、「比例」と言うよりは「単調増加する n に対する関数」と言う表現でしょうか。
厳密には関数そのものではなくて、計算量を示す純粋な関数から、「非支配的な要素を取り除いて簡略化する」というプロセスがオーダー記法で表現する時のもう一つの肝だと思いますが、その辺はWebエンジニアの世界では「逐一定義を説明して話すと長くなるから便宜的にO(なんちゃら)と表現している」位のノリがちょうどいい気がします。笑
setTimeOut→setTimeout2箇所が気になりました！git-flow は、release ブランチをリリースするのではなく、release から main ブランチにマージしてからリリース＋mainにタグ打ちをするイメージでした。
誤字の訂正です。
の
がHTMLではなくHTLMになっています
この文で説明されている「密結合」と「疎結合」の説明は逆だと思います。