WebエンジニアになるためのDeveloper roadmap

#はじめに
最近、何を学べば良いのか分からず迷走していたところ、「[Developer roadmap 2019](https://github.com/kamranahmedse/developer-roadmap)」が参考になったので、簡単に紹介したいと思います。

#Developer roadmapとは

Kamran Ahmedse氏（ドバイのオンライン旅行予約サービス「tajawal」のリードエンジニア）が作成しているWebエンジニアのためのロードマップです。
その年によって、最新の技術や廃れてしまった技術が変わっていきますが、毎年更新されていてるので、最新のトレンドだったり、次に何を学べばいいのかの指針になります。

#対象読者
- エンジニアになりたいけど、何に手をつけたら良いか分からない方
- 実務未経験からエンジニアを目指している方

#つまり、何について書いた記事か
ロードマップは、Required for any path（必須知識）、フロントエンド（FE）、バックエンド（BE）、DevOps（システム開発）を網羅したものですが、流石に全部をピックアップすることは無理なので、本記事では必須知識について紹介します。

とはいえ、プログラミング初学者の筆者が自分なりに調べてまとめた内容なので、間違っている点あるかもしれませんが温かくご査収いただければ幸いです。

#Required for any path

FE/BE/DevOpsに関わらず、求められる必須知識・スキルは以下（図の左側）の通りとされています。

<img src="https://camo.qiitausercontent.com/19a12f2474ea3480f04adfb9dd2334fdeb1a3572/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3135383632312f33316636326464302d636335662d656436322d363332622d3066346634326366663866362e706e67">


##Git - Version Control

<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/w/watass/20141020/20141020203524.png" width=20%>

Gitは、<b>プログラムのソースコードの変更記録と履歴を管理するバージョン管理システム</b>のことです。

Gitを使うと誰が・いつ・どのファイルの・どこを・どのように変更したかが分かります。また、いつでもその状態に戻ることができるようになります。

なぜ、Gitを学ぶ必要があるのか？結論としては今やプロダクト開発に欠かせないツールとされているからです。
何が言いたいかと言うと、プロダクトは通常複数人で開発しますが、大掛かりなものは当然1日で全てが完成するものではなく、中長期間に渡って開発する為、ファイルの作成・更新・削除を果てしなく繰り返します。これをGitのようなバージョン管理ツール無しでやろうとすると大変ですよね。でも、Gitはこれを解決してくれます。

ちなみに、Gitはイギリス英語のスラングで「愚か者」とかそう言う意味なんだとか。
Gitの生みの親であり、オープンソースOSの代表格であるLinuxの開発者でもあるリーナス・トーバルズが名付け親。

>Linus Torvalds has quipped about the name git, which is Irish/British slang for a child born out of wedlock, and these days commonly British English slang for a stupid or unpleasant person. 
http://en.wikipedia.org/wiki/Git_(software)

<b>記事</b>

- [サルでも分かるGit入門](https://backlog.com/ja/git-tutorial/intro/intro1_1.html)
- [まずはGitの仕組みを理解することから](https://qiita.com/_ha1f/items/2dca1047c57d4f0bd465)

<b>オンライン学習ツール</b>

- [git入門 (全22回) - プログラミングならドットインストール](https://dotinstall.com/lessons/basic_git)

<b>書籍</b>

- [Git独習](https://www.amazon.co.jp/%E7%8B%AC%E7%BF%92Git-%E3%83%AA%E3%83%83%E3%82%AF%E3%83%BB%E3%82%A6%E3%83%9E%E3%83%AA-ebook/dp/B01C2TRNUG/ref=sr_1_12?ie=UTF8&qid=1549849947&sr=8-12&keywords=Git)

##Basic Terminal Usage
ターミナルは、<b>キーボードからコマンドと呼ばれる命令文を打ち込んでコンピュータに命令をするアプリケーション</b>のことです。

なぜ、ターミナルについて学ぶ必要があるか?結論としては、環境構築、サーバー接続といったシステム環境設定では出来ないような操作を行うことが可能で、エンジニアには欠かせないツールと言えるからです。

ターミナルの名前の由来は、コンピューターがケーブルの終端に位置していたことが由来なんだとか。
>
昔のコンピュータは「スクリーン/キーボード」つまり「端末」と、ホストコンピュータは遠隔接続されていた。つまり、ホストコンピュータからケーブルを伸ばして「スクリーン/キーボード」につなげていた。
で、ケーブルの終端 (terminal end) に位置していたため、端末(terminal)と呼ばれるようになったらしい。
https://plaza.rakuten.co.jp/bluearth/diary/201001180002/

<b>記事</b>

- [【保存版】Macでターミナルで使える基本のコマンド８選](https://qiita.com/kenju/items/77a2dc1b6a60697b1133)

<b>書籍</b>

- [これから学ぶmacOSターミナル] (https://www.amazon.co.jp/exec/obidos/ASIN/B01NBK3TCY/gushernobin0f-22/)

##Data Structures & Algorithms
<b>データを格納する形式「データ構造」（ex.配列、リスト）と、問題を解くための手順「アルゴリズム」（ex.while、if）</b>のことです。

もう少し分かりやすく例えるとすれば、自動車部品の名前とその量＝データ、組み立ての手順＝アルゴリズムです。（あくまでイメージです）

なぜ、データ構造とアルゴリズムを学ぶ必要があるのか？結論としては、高い処理効率を実現するためのプログラムを書くために必要だからです。例えば、同じような処理結果を求めるプログラムでも、ユーザー視点やコンピュータ・サーバーへの負担を鑑みると処理効率が優れている方が良いですよね。

正直名前からして取っ付きにくいですが、多分これが理解できているのと出来ていないのでは大きな差があると思うので、時間をかけてしっかり理解したいと思います。

<b>記事</b>

- [残業したくないあなたに：データ構造とアルゴリズム](https://qiita.com/GushiSnow/items/70765a7cae52c0a1b2b8)

<b>書籍</b>

- [アルゴリズムを、はじめよう](https://www.amazon.co.jp/gp/product/4844332015/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4844332015&linkCode=as2&tag=yabaiwebya0b7-22&linkId=16c18529e0a5531ddc1282cb85fb5d10)

##SOLID, KISS, YAGNI
SOLID, KISS,YAGNIは、<b>プログラミングの３原則</b>とされているものです。

初めて見た時は、何これ？と思いました。SOLIDなんかは、結構小難しいことが書いてあるので、まずはこう言う概念があると言うことだけ抑えておけば良いと思います。（個人的見解）

<b>SOILD</b>

>
S - 単一責任の原則 (Single Responsibility Principle)
O - 開放・閉鎖原則 (Open/closed principle)
L - リスコフ置換原則 (Liskov substitution principle)
I - インタフェース分離の原則 (Interface segregation principle)
D - 依存性逆転の原則 (Dependency inversion principle)

1つのクラスや複数間、親子間のクラスを作る上での指針となる５つの原則集です。

<b>KISS</b>
>Keep It Simple,Stupid
シンプルにしておけ、愚か者よ

コードはシンプルさを保ちなさい。複雑さはバグやコントロール不能なものを生み出しますと言うこと。

<b>YAGNI</b>
>You Aren't Going to Need it.
それはきっと必要にならない

コードは必要最低限にしなさい。要らない、使わない機能を作る必要はないと言うこと。

<b>記事</b>

- [新人プログラマが知るべきプログラミングの原則６選！](https://qiita.com/ryotanatsume/items/018cae5c5be8faba367a)
- [オブジェクト指向プログラミングの五つ原則 - S.O.L.I.D (S編)](http://developer.wonderpla.net/entry/blog/engineer/oop_solid_s/)

##GitHub

<img src="http://ryuta-komori.com/wp-content/uploads/2017/04/github-718x266.png" width=30%>

Githubは、<b>Gitの仕組みを利用したウェブサービス</b>のことです。
Gitとの違いについて超ざっくり言うと、Gitがツールであるのに対して、GithubはGitを利用したサービスです。（他にもあります）

Githubには、大きく分けると次の5つの機能があります。

| # | 機能 | 詳細 |
|:--:|:--:|:--:|
| 1 | 閲覧・公開 | ソースコードを閲覧・公開できる |
| 2 | Fork | 他人のプログラムを丸ごとアカウント上にコピーできる |
| 3 | Clone | 他人のプログラムを自分のPC上にコピーできる |
| 4 | Pull request | Cloneしたプログラムに対して、修正を加えられる |
| 5 | Merger | 誰かから来たPull requestを受け入れて反映させされる |


なぜ、Githubを学ぶ必要があるのか？結論としては、Gitと同様に開発に欠かせないだけでなく、採用の過程でGithub上のソースコードを1つの判断材料としたり、他人のコードを見て勉強したりと、エンジニアにとって非常にリーズナブルなサービスであるからと考えます。

ちなみに、Github社が開発したGitHubですが、18年にマイクロソフト社により買収（７５億円規模）されました。
猫みたいなキャラクターは、OctCatと呼ばれ、正式には「モナリサ」と言うんだとか。

>
原文：Once upon a time, there was a cat who's name was Monalisa. Monalisa and her owner went to the beach. When Monalisa got to the beach, her owner Kelly gave her goggles so Monalisa could swim and see what was in the ocean. When Monalisa went in the water she found lots of fish. When Monalisa was swimming she was so exited she opened her mouth and swouloed a coral that made you grow legs like a octapus but keep your normal face. So Monalisa grew legs and became Mrs. Monalisa octocat.
訳：むかしむかし、モナリサという猫がいました。モナリサと飼い主は、ある日ビーチに行きました。ビーチに到着すると、飼い主のKellyが海の中を泳いで見られるようにと、モナリサにゴーグルを渡しました。モナリサが水の中に潜ると、たくさんの魚が見えました。モナリサはとても興奮し口を開けると、サンゴが口の中に入ってしまいました。すると、サンゴが口の中に入った瞬間、まるでタコのように足が伸びました。しかし、顔はそのままでした。だからモナリサは、足が伸びた「Mrs. Monalisa octocat」（モナリサ・タコネコ）になったのです。
http://nlab.itmedia.co.jp/nl/articles/1506/09/news113.html


<b>記事</b>

- [【GitHub超初心者入門】この前初めてGitHubを使い始めたエンジニア見習いが書くGitHubの使い方と実践～とりあえず一緒に動かしてみようぜ！～](https://qiita.com/nnahito/items/565f8755e70c51532459)

<b>書籍</b>

- [Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール Web制作者のための教科書シリーズ](https://www.amazon.co.jp/gp/product/B00QPSXY1I?ie=UTF8&camp=1207&creative=8411&creativeASIN=B00QPSXY1I&linkCode=shr&tag=harashun-22&)

##Licenses
ライセンスは、<b>権利</b>です。Wikipedia先生では次のように定義されています。

>
ライセンス（米: license、英: licence）は、それが存在しなければ違法となる行為をすることを許可すること、あるいはその許可を証する書面のことをいう。訳語は免許、認可、許可、鑑札など。

例えば、ユーザーがベンダーから「ソフトウエアを購入する」といったときに、多くのケースでは、ソフトウエアの購入は「使用権を購入している」ことを意味しています。つまり、ソフトウエア自体の所有権はあくまでベンダー側にあって、ユーザー側が購入したのは、使う権利（ライセンス）のみとなります。

なぜ、ライセンスを学ぶ必要があるのか？結論としては、ライセンスを疎かにすると、知らない間に著作権に違反していたり、重大なコンプライアンスの問題につながり、ソフトウェア開発における大きなリスクになりかねいからです。


<b>記事</b>

- [エンジニアは間違いなく知るべきOSSのきほんのき](https://www.1915keke.com/entry/2018/09/03/200000)
- [OSSのライセンスを理解する（「使用」と「利用」の違い、知っていますか？）](https://qiita.com/bremen/items/c5aa9446e73aa4bc1de0)

##Semantic Versioning
Semantic Versioning(セマンティックバージョニング）は、<b>ソフトウェアのバージョン番号の付け方のルール</b>のことです

直訳すると、意味的なバージョン管理という意味です。例えば、abc1.2.3というソフトウェアがあるとして、左から順番にメジャー、マイナー、パッチバージョンというものを表しています。
使い分けとしては、以下の通りです。

>
APIの変更に互換性のない場合はメジャーバージョンを、
後方互換性があり機能性を追加した場合はマイナーバージョンを、
後方互換性を伴うバグ修正をした場合はパッチバージョンを上げます。
https://semver.org/lang/ja/


なぜ、Semantic Versioningを学ぶ必要があるのか？結論としては、自身が公開しているライブラリやパッケージのコードを何かしら修正したら、それに伴いバージョンを上げるのが一般的とされているからです。

<b>記事</b>

- [SemVer（セマンティックバージョニング）：Dev Basics／Keyword - ＠IT](http://www.atmarkit.co.jp/ait/articles/1612/06/news012.html)
- [「セマンティック バージョニング」を読んだのでバージョニングについてまとめた](https://qiita.com/soyanchu/items/72095a7c9fdb7f71b2c3)

##SSH
SSHは、<b>Secure Shell（セキュアシェル）の略で、安全な通信方法</b>のことです。

直訳すると安全なシェルと言う意味で、シェルというのはOSが理解できるプログラム言語みたいなもので、コンピュータに出す指示だと思って下さい。何が安全かと言うと、やりとりするデータ（情報）を暗号化してくれるから、盗視とかの心配がなくなって良いということらしい。

なぜ、SSHを学ぶ必要があるのか？結論としてはインターネットを経由してデータ（情報）のやり取りを行う場合、悪意のある第三者に情報を盗み見される危険性がある為、これを防ぐ必要があるからです。個人情報が漏れるようなサービス使いたく無いですよね。

<b>記事</b>

- [SSHの仕組み!ぼんやりとした理解だったものをすっきりさせようの会](http://nigohiroki.hatenablog.com/entry/2013/08/18/221434)
- [インフラエンジニアじゃなくても押さえておきたいSSHの基礎知識](https://qiita.com/tag1216/items/5d06bad7468f731f590e)

##HTTP/HTTPS and APIs
HTTP(Hyper Text Transfer Protocol)は、<b>通信プロトコル（通信規約・手順）</b>のことです。

HTTPS(Hypertext Transfer Protocol Secure)は、<b>HTTPにセキュリティ機能を追加したもの</b>のことです。

>URLは一般的にhttpからはじまりますが、ショッピングフォームやお問い合わせフォームを利用しているときは、多くのサイトがhttpsからはじまります。

API(Application Programming Interface)は、<b>どのアプリーケーションでも共通で使える機能を提供する仕組み</b>のことです。

たとえば、GoogleカレンダーをWebサイトに表示させたい場合、GoogleのAPIを使ってWebサイトと連携させることができます。

なぜ、HTTP/HTTPS/APIを学ぶ必要があるのか？結論としては、HTTP/HTTPSはネットワークプロトコルとWebセキュリティの基本であること、APIが使えるようになると開発の幅を広げることができるからです。

<b>記事</b>

- [http・httpsとは？仕組みと安全なWEB利用のための6ヶ条](https://blogs.mcafee.jp/http-https-difference-and-system)
- [Webセキュリティ覚書 : "HTTPS" 編 [ 初学者向け ]](https://qiita.com/Tsutou/items/cea87dbab0f3d0080422)
- [WebAPIについての説明](https://qiita.com/busyoumono99/items/9b5ffd35dd521bafce47)

<b>オンライン学習ツール</b>
- [Google Maps API入門（全17回）- プログラミングならドットインストール](https://dotinstall.com/lessons/basic_google_maps_v2)

##Design Patterns
デザインパターンは、JavaやRubyと言ったオブジェクト指向言語でよく使われる、<b>プログラミングでよく経験する問題の解決法にわかりやすい名前を付けて、カタログ化（虎の巻化）したもの</b>です。

>
ソフトウェア開発におけるデザインパターン（型紙（かたがみ）または設計パターン、英: design pattern）とは、過去のソフトウェア設計者が発見し編み出した設計ノウハウを蓄積し、名前をつけ、再利用しやすいように特定の規約に従ってカタログ化したものである。
https://ja.wikipedia.org/wiki/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2)

デザインパターンの概念はGoF（Gang of Four(ギャング・オブ・フォー)と呼ばれる四天王的な人たち）が最初に提唱してから、開発の現場にとって欠かせないものとなっています。

なぜ、デザインパターンを学ぶ必要があるのか？結論としては、コンサルのフレームワーク的な感じで再現性があり、自分でプログラムの設計を考えるときの指針にもなり、設計力向上につながる為です

<b>記事</b>

- [サルでも分かる逆引きデザインパターン](http://www.nulab.co.jp/designPatterns/designPatterns1/designPatterns1-1.html)

- [ぼくにもわかるデザインパターン　第2章 GoFパターン大カタログ ～パターンがみるみる頭にしみこむ～]
(https://www.ulsystems.co.jp/topics/028)

<b>書籍</b>

- [増補改訂版Java言語で学ぶデザインパターン入門](https://www.amazon.co.jp/%E5%A2%97%E8%A3%9C%E6%94%B9%E8%A8%82%E7%89%88Java%E8%A8%80%E8%AA%9E%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E5%85%A5%E9%96%80-%E7%B5%90%E5%9F%8E-%E6%B5%A9/dp/4797327030/ref=sr_1_1?s=books&ie=UTF8&qid=1549870259&sr=1-1&keywords=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3)

##Character Encodings
文字コードを意味するのか、文字エンコーディングを意味するのか迷ったので、両方について触れると、<b>文字コードは文字に割り当てられた「数字」のことで、文字エンコーディングは文字と数字をマッピングする（関連づける）「方式」のこと</b>です。ネット記事を見るに、この2つは異なるものとされています。

例えば、ネットサーフィンだったりメールで誰もが遭遇したことがあるであろう「文字化け」、これも文字コードが関係しています。文字コードには、Shift_JIS、EUC-JP、UTF-8などと言ったものがありますが、例えば、Shift_JISで保存されたHTMLファイルを、ブラウザがUTF-8だと勘違いして表示してしまうと文字化けが発生するというものです。

なぜ、文字コード/文字エンコーディグを学ぶ必要があるのか？結論としては、これらに関する知識が身についていると、文字化けに遭遇したときでも落ち着いて素早く解決できるからです。

<b>記事</b>

- [新人さんに知ってほしい「文字コードのお話」](https://qiita.com/yuji38kwmt/items/b3a7820b4d3b544da4ff)

<b>書籍</b>

- [文字コード「超」研究　改訂第2版](https://www.amazon.co.jp/exec/obidos/ASIN/4899772939/junic05-22/)
- [[改訂新版]プログラマのための文字コード技術入門 (WEB+DB PRESS plusシリーズ)](https://www.amazon.co.jp/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88-%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E6%96%87%E5%AD%97%E3%82%B3%E3%83%BC%E3%83%89%E6%8A%80%E8%A1%93%E5%85%A5%E9%96%80-WEB-PRESS-plus%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4297102919/ref=sr_1_1?ie=UTF8&qid=1549871245&sr=8-1&keywords=%E6%96%87%E5%AD%97%E3%82%B3%E3%83%BC%E3%83%89)

#総論
必須知識だけでも覚えることは山ほどありますが、何を学ぶべきか全体像を掴むことが出来ました。これから、スケジュールを組んで一つ一つしっかりとマスターしていきたいと思います。

正直、結構骨の折れる作業だったので、FE/BE/DevOSについては、機会があれば別の記事で触れたいと思います。