WEB系企業 エンジニア 技術知識 一覧

はじめに

WEB系IT企業へ転職するために最低限必要で理解しておかないといけない知識をまとめました。
もし、こちらの記事を読まれてこんな知識も学習しておいたほうが良いなどありましたら教えてください。

目次

• システム開発の流れ
• HTMLとMarkDown記法とは?
• CSV,XML,JSONの特徴と記述方法とは？
• サーバとクライアントの仕組みとブラウザとは？
• HTTPステータスコード
• HTTPリクエストの中身
• BEMとは?どのように使うか?
• viewを作成するときにエンジニアとして意識すること
• デスクトップPCとスマートフォンでは画面のサイズが異なりますが、どのように対応しますか？
• gitとgithubとは?
• gitHub flowとは?
• githubのcloneとforkとは？
• gitrebaceとは？
• gitignoreについて
• ウォーターフォールモデル
• アジャイル開発
• イテレーション
• オブジェクト指向とは？
• クラスとは？
• インスタンスとは?またその特徴とは？
• オブジェクト指向の継承とは？
• スーパークラスとは？
• オーバーライドとは？
• SQLとは?
• SQLでできること
• SQL基本構文
• データベースのトランザクションとは
• トランザクションの特性であるACID特性について
• SQLインジェクション
• データベースの正規化とは
• 部分インデックス、マルチカラムインデックス、ユニークインデックスとは
• Rubyの長所、短所について
• インタプリタ方式
• コンパイラ方式
• MVCの仕組みについて
• Railsバリデーション
• コールバックとは?
• i18nで日本語対応
• Rails処理の流れ
• ORM(オブジェクト/リレーショナルマッピング)とは？
• リダイレクトの設定
• 中間テーブルとは？
• unicornとnginxの違いとそれぞれの役割
• AWSとは?裏側の技術とは?
• エラー解決手順
• ステートレス
• クッキー
• セッション
• ログイン、ログアウトの仕組み
• クッキーとセッションの違い
• 各言語の特徴
• Rubyの長所、短所
• PHPの長所、短所
• pythonの長所、短所

システム開発の流れ

企画・要件定義
設計
プログラミング
テスト
納品
運用・保守

HTMLとMarkDown記法とは?

文書を記述するための軽量マークアップ言語のひとつである。

CSV,XML,JSONの特徴と記述方法とは？

CSV, XML, JSONは、全てシンプルなテキストベースのデータ形式です。
よりわかりやすく言えばデータを記述するためのルールのようなものです。
CSV
’Comma-Separated Values’(コンマ・セパレイテッド・バリューズ)
直感的にデータの中身を把握しやすいです。
また、MicrosoftのExcelやGoogle Spread Sheetと親和性の良いのがこのファイル形式です。
XML
Extensible Markup Language(エクステンシブル・マークアップ・ラングイッジ)
XMLはHTMLの記述方法に似ており、タグと呼ばれるもの(例えば\のようなものです)によってデータを囲み、更にデータを入れて入れ子構造にすることができます。
また、Ajaxと呼ばれる機能が普及したことにより、クライアント側でも処理が容易であるため、XMLでの記述されることは多いです。
JSON
XMLよりもデータの記述量が少ないので、読み込みが速いと言われています。JSON は JavaScript のオブジェクトで構成されているため、そのまま JavaScript で記述したプログラムで扱うことができます。

サーバとクライアントの仕組みとブラウザとは？

サーバーとクライアントとは

server = 何かを提供する人（モノ） or 何かを使える状態にしてくれる人（モノ）
Webサーバ：Webブラウザからコンテンツを閲覧できる状態にしてくれているモノ。
client = 何かを提供される人（モノ） or 何かを利用する側の人（モノ）
Webクライアント：Webブラウザ。IEやChromeやSafariやFirefoxなど。

サーバーとクライアントのやりとりのフロー

• クライアント側がサーバー側に(HTTP)リクエストを投げ
• サーバー側でリクエストを解析・処理してリクエストの答えをつくる
• サーバー側がクライアント側に(HTTP)リクエストを返す ####HTTPとは webサーバーとwebクライアントの送受信に用いられる取り決めのことです。 ####HTTPリクエストの中身 HTTPリクエストの構成は大きく3つに分かれます。
• HTTPリクエスト行
• HTTPヘッダー
• HTTPボディ ###HTTPリクエストヘッダーの役割 端的に言えば、HTTPリクエストの2行目以降の情報のことで、ブラウザの「ユーザエージェント名」や「リファラ」、「クッキー」等の情報をWEBサーバへ伝える役割を果たしています。 ###HTTPステータスコード サーバーからブラウザに返してくるステータスコードには、100番台から500番台まであります。

よく使われるステータスコードとしては、200(正常終了)、301及び302(リダイレクト)、500(内部サーバーエラー)などがあります。　
ネットサーフィンをしていて多く遭遇するエラーは404エラー(該当アドレスページがない、またはサーバーが落ちている)が多いのではないでしょうか。
参考 ステータスコード一覧

BEMとは?どのように使うか?

Block、Element、Modifierの略語です
プログラマーとフロントエンドエンジニアは、お互いのコードに貢献し合える
皆が同じ言語でやりとりできるので、コミュニケーションが取りやすくなる

viewを作成するときにエンジニアとして意識すること

「メンテナンス性」の高いコードを書くように気をつける。具体的には、BEMという方法論を使ってフロントを設計することで可読性、再利用性の高いコードを実現できるように心がけましょう。

デスクトップPCとスマートフォンでは画面のサイズが異なりますが、どのように対応しますか？

メディアクエリを利用し画面のサイズ事に適用するCSSを変化させます。
例えば、CSSを下記のように記述すると画面サイズごとにレイアウトや色を適用することができます。

@media screen and (min-width:480px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
p { color:#fff;}
}

gitとgithubとは?

Gitはアプリケーションやソースコードなどの変更履歴を記録・追跡するためのをバージョン管理してくれるシステムで、GitHubはそのGitの仕組みを用いて簡単に複数人での開発ができるようにしてくれるツールです。

gitHub flowとは?

1.masterブランチのものは何であれデプロイ可能である
2.新しい何かに取り組む際は、説明的な名前のブランチをmasterから作成する（例: new-oauth2-scopes）
3.作成したブランチにローカルでコミットし、サーバー上の同じ名前のブランチにも定期的に作業内容をpushする
4.フィードバックや助言が欲しい時、ブランチをマージしてもよいと思ったときは、 プルリクエスト を作成する
5.他の誰かがレビューをして機能にOKを出してくれたら、あなたはコードをmasterへマージすることができる
6.マージをしてmasterへpushしたら、直ちにデプロイをする
参考 github-flow.ja.md

githubのcloneとforkとは？

clone = リモートリポジトリをローカルリポジトリに複製する
fork = 自分以外のGithubユーザーが公開しているリポジトリをコピーして、自分のGithub上に新しいリポジトリを作成する
結論 = cloneは子供でforkは兄弟になるってこと。forkしてcloneすると甥っ子になるということ。　

gitrebaceとは？

gitignoreについて

.gitignoreを使うと無視する（Gitのトラッキングの対象外とする）ファイル or ディレクトリを指定できる。
.gitignoreが無視するファイルは、まだインデックスに登録されていないものだけである。
その場合は再び無視するコマンドを打たなければならない。
参考 [Git] .gitignoreの仕様詳解

ウォーターフォールモデル

上流工程から下流工程へ順次移行していく開発手法。
1.要求定義
2.外部設計（概要設計）
3.内部設計（詳細設計）
4.開発（プログラミング）
5.テスト
6.運用
スケジュール管理がしやすく、大規模なシステム開発に向いている。
実際に動くものを触るまでは時間がかかる。

アジャイル開発

素早い開発のため、スタートアップに向いている。
顧客の要望に臨機応変に対応できる。
イテレーションで、すばやく繰り返すことで変更に強い開発手法を実現できる。
全体像を把握しにくく、スケジュール管理が難しい。

イテレーション

仕様と要求を決めたら、「計画」→「設計」→「実装」→「テスト」というサイクルを繰り返して開発をおこないます。
イテレーションは1週間～2週間ごとが一般的、イテレーションごとに毎回機能をリリースします。

オブジェクト指向とは？

オブジェクト指向とは現実世界を正しく捉えることで、プログラムの動作をある特徴(属性値とメソッド)を持ったパーツの組み合わせで実現するという考え方。

クラスとは何か？

設計図。またはある実体を生成するために定義された概念みたいなもの。

インスタンスとは?またその特徴とは？

クラス(設計書)から実体を生成すること。
インスタンスは、それぞれ違う特徴を持ちます。

オブジェクト指向の継承とは？

オブジェクト指向を構成する概念の一つである。具体的には、クラス定義の共通部分を別クラスにまとめる仕組みのこと。
既存のクラスから、新しく作ったクラスに「変数定義」や「メソッド」などを引き継ぐことです。

スーパークラスとは？

あるクラスの仕様を継承して新しいクラスを作成する際に、元となるクラスのこと。(親クラス)
新しいクラスのことは「サブクラス」（subclass）、「派生クラス」（derived class）、「子クラス」（child class）などと呼ぶ。

オーバーライドとは？

クラスを継承する時に、スーパークラスのメソッドをサブクラスにおいて同じメソッド名で定義し直すことを言います。オーバーライドする際には、メソッド名を同じにする必要があるのに加えて、メソッドの引数は同じ数、同じ順番にする必要があります。
再利用できて、書く記述量を減らすことができる。

SQLとは?

structured query languageの略。
リレーショナルデータベース(RDBMS)のデータを操作したり定義するためのプログラム言語。

SQLでできること

1.データベースやテーブルの「作成/更新/削除」ができる
2.データの「取得/登録/更新/削除」や条件検索ができる

SQL基本構文

データ取得 SELECT
データ登録 INSERT
データ更新 UPDATE
データ削除 DELETE
テーブル作成 CREATE
テーブル削除 DROP
テーブル定義変更 ALTER

データベースのトランザクションとは

トランザクションとは簡単にいえば「データベースに対して行われる1つ以上の更新処理」のまとまりことです。

トランザクションの特性であるACID特性について

ACIDとはトランザクションシステムがもっとこうですよって特性のことです。

A は atomicity(原子性)

トランザクションが終わった時に、そこに含まれていた更新処理は全て実行されるか、全て実行されない状態で終わることを保証する性質です。
COMMITで更新が確定されるか、ROLLBACKで元に戻されるかの二択というイメージ。

C は consistency(一貫性)

トランザクションに含まれる処理はそれぞれの制約を満たすという性質。
トランザクションの途中で制約違反の処理があった場合、処理を中断してトランザクション実行前に戻すことでデータの一貫性が保たれる。そのため、あるデータは更新されているが、その他のデータは更新されないというような状態を持たないということ。

I は isolation(独立性)

あるトランザクションが実行中の場合、もう一方のその他のトランザクションの影響を受けないという性質。
トランザクション実行中に、その他のトランザクションがデータの更新を行ったとしても実行中のトランザクションはその更新結果の影響を受けないというイメージ。

D は durability(永続性)

トランザクションが完了した後、そのデータ状態が保存され失われることは無いという性質。
この性質の保証のために、一般的にはトランザクションのログを記録しておき、障害が起きた場合はログを使用して障害発生前の状態に復旧する。

SQLインジェクション

アプリケーションのSQLの呼び出し方においてセキュリティ上の不備を意図的に利用し、データベースシステムを不正に操作する攻撃方法のことです。
SQLインジェクションとは外部からの入力により、アプリケーションが想定しないSQL文を実行することによって、認証を突破したり情報を盗んだりする攻撃手法のことである。
SQLインジェクションを防ぐには、SQL文中で意味をもつ「`」や「/」のエスケープやバインド機構を用いることが必要である。

データベースの正規化とは

データの重複をなくし整合的にデータを取り扱えるようにデータベースを設計することを正規化と言います。
1. 非正規形
2. 第1正規形
3. 第2正規形
4. 第3正規形

インデックスとは

データの並び順序のことです。初期状態では主キーに対してインデックスが割り当てられている。

部分インデックス、マルチカラムインデックス、ユニークインデックスとは

部分インデックス

特定の条件に適合する行だけを含むものを指す。インデックスの対象となるテーブルに多くの行が含まれていても、インデックスに含むキーを絞り込むことで、インデックスのサイズを小さく抑えられる利点がある。

マルチカラム(複合)インデックス

複数の並び替え条件でインデックスを作ることです。

UNIQUE制約

データベースの項目に付与する「他の行の値と重複しちゃダメ制約」です。
具体的にいうとデータベースの項目に付ける制限（制約）のひとつであり、「この項目に入れる値は他の行に入っている同じ項目の値と重複してはダメです。入れようとした値が既に入っている値と同じだったらエラーにします」ということです。

Rubyの長所、短所について

オブジェクト指向を採用しており、保守、運用に秀でており、インタプリタ方式なのでデバッグも容易です。また、動的型付け言語かつシンプルな構文が多いので記述量少なくあらゆる実装を行うことができます。
一方、処理速度は他の言語に比べ遅いので、大規模アプリや処理速度が重要なサービスには向いていないといえます。

インタプリタ方式

プログラミング言語の命令を一つずつ，機械語に解釈しながら実行する方式
インタプリタはコンパイラのように機械語に翻訳するにとどまりません。実際に実行するところまでを管理してくれます。
インタプリタのメリットは、実行が上手くいかなかった時点で、すぐにデバッグに取り掛かれるということです。

コンパイラ方式

ソースプログラムをいったん機械語に翻訳し，その機械語になったプログラムを実行する方式です。
実行速度が速い。

MVCの仕組みについて

Webアプリケーションを動かすために必要な処理の一部を分類し分けることで、保守性、可読性の高いコードを維持できます。
M、V、C の役割分担によりプログラムの独立性が高くなり、仕様変更に柔軟対応出来る。
M:Model = ビジネスロジックを定義します。
V:View = 実際にクライアント側に表示される見た目の部分です。
C:Controller = クライアントからのリクエストに対して適切なレスポンスを返すことや、そのレスポンスに必要なデータの用意を行う。

Railsバリデーション

オブジェクトがDBに保存される前に、そのデータが正しいかどうかを検証する仕組み。

コールバックとは?

オブジェクトの状態が変わるとき、すなわちオブジェクトが生成、更新、破壊されるときや、バリデーションを実行するときの前後に共通の処理を追加する仕組みである。これはモデル層で指定でき、処理を共通化することによって、モデルの一貫性を保て、またコード量を減らすことができる。
参考 Railsのコールバック

i18nで日本語対応

i18nは、デフォルトの言語を日本語に設定すること。
gemをインストールするかロケールディレクトリ内のファイルを編集する
参考 あなたはいくつ知っている？Rails I18nの便利機能大全！

Rails処理の流れ

HTTPサーバー:リクエストを元にレスポンスを返す
ルーター:HTTPサーバーからのリクエストを元にコントローラーへ誘導
コントローラー:モデルに命令を出し、ビューにデータを渡す
モデル:コントローラの命令を元にSQLを発行し、レコード操作を行う
DB:レコードが保存されている場所
ビュー:見た目の部分を生成する
ざっくり流れは下記のようになります。
HTTPサーバ→ルータ→コントローラ→モデル→DB/コントローラ→ビュー→コントローラ→HTTPサーバ

ORM(オブジェクト/リレーショナルマッピング)とは？

ORMを用いると、SQL文を直接書く代りにわずかなアクセスコードを書くだけで、アプリケーションにおけるオブジェクトの属性やリレーションシップをデータベースに保存することもデータベースから読み出すこともできるようになります。

リダイレクトの設定

redirect_toメソッドを使い、指定したURLにリダイレクトすることができる。

中間テーブルとは？

多対多をデータベースで表現するために必要。

AWSとは?裏側の技術とは?

Amazon Web Servicesの略。Amazonが提供するクラウド型Webサービス。Webエンジニアが利用する代表的なものはEC2。EC2はクラウドサーバといって、自社にサーバ本体を置く必要がなくなります。

unicornとnginxの違いとそれぞれの役割

エラー解決手順

まずターミナルのlogを見るまたはlog/develop.rb→仮説を立てる→検索する

ステートレス

サーバが現在の状態を保持せず、ユーザの入力の内容のみによって出力が決定される状態のことです。

クッキー

Webの仕組みにはHTTPクッキー（Cookie）という技術があります。
1. 同じブラウザから何回アクセスされたか分かる
2. 前回入力したユーザー名がわかる
3. 前回のアクセス時にECサイトなどのカートに入れた商品の一覧がわかる
4. ログイン / ログアウトの仕組みが作れる
クッキーとはwebブラウザに文字列データを保存したり、保存したデータを取得したりする機能です。

セッション

セッションはログイン情報を保持するためによく使用されます。
複数回に渡るリクエストにおいて、クライアントを特定するための仕組みです。具体的には、クライアントは初回のリクエストで自身を識別させるIDをサーバーに渡します。以降、サーバーはそのIDを持ってクライアントを認識します。

ログイン、ログアウトの仕組み

認証にメールアドレスとパスワードを利用する場合、ログインはユーザ情報を保存しているテーブルからユーザが入力したメールアドレスとパスワードがマッチするデータがあるかどうかを判定します。
ログインするとセッションに既定のデータが保存されるので、ログアウト時にはそのセッションデータを削除することでログイン状態を解除するという仕組みです。

クッキーとセッションの違い

主にステートフルな通信を実現するためにそれぞれ利用され、クッキーはサーバーからクライアント側に付与する情報（セッションID）の仕組みで、セッションはサーバー側に保存される一連の操作や通信のことです。

各言語の特徴

Rubyの長所、短所

WEBサイト、ゲーム、アプリ、API、クローラーなどの開発ができ汎用性が高い。
オブジェクト指向を採用しており、保守、運用に秀でており、インタプリタ方式なのでデバッグも容易です。また、動的型付け言語かつシンプルな構文が多いので記述量少なくあらゆる実装を行うことができます。
一方、処理速度は他の言語に比べ遅いので、大規模アプリや処理速度が重要なサービスには向いていないといえます。

PHPの長所、短所

スクリプト言語なので、コンパイルの手間を取らずにすぐに動作を確認出来る。PHPは「CakePHP」や「Laravel」、「symfony」などフレームワークが豊富であり、開発の内容(もしくは好み)などに合わせて最も適したものを選ぶことが出来る。デメリットは、WEBアプリ・サービス以外のものはほぼ作れないことやフレームワークの選定の際に学習コストの高さがあげられる。

pythonの長所、短所

文のブロックがインデントであり、記述量が少なく見やすい。
pythonはオブジェクト指向言語のため、継承、ポリモーフィズム、カプセル化を最大限に活用して、見通しが良く、保守性が高いプログラムを記述することができるということです。
webアプリ開発の他、データ解析、自然言語処理、ゲーム、デスクトップアプリなどの開発に使用することができ汎用性が高い。
また、手軽に他のC/C++のライブラリと連携することができます。C/C++は非常に実行速度が速いので、こうした言語を呼び出すライブラリを利用することで、インタプリタ系の言語にありがちな、実効速度が遅いという問題を解決しています。

おまけ

Dockerとは

Docker社が提供する「コンテナ型仮想化技術」 を実現するプロダクト