組み込み系からWeb系へのスキルチェンジ【随時更新】

#はじめに
組み込みの開発しかほぼしたことしかない中で、Web系のスキルを身に着けるためにやったことをメモっておきます。

現状のWeb系のスキル。

- Perl/PHP/javascript/HTML5:ちょっと使えるレベル
- github/Slack：プライベートで少し使ってるレベル


#書籍
##Web系
| No|タイトル| メモや所感|  
|:-:|:------|:------|
| 1| [TECHNICAL MASTER はじめてのPHPプロフェッショナル開発 PHP7対応](https://www.amazon.co.jp/dp/product/479804749X/ref=as_li_tf_tl?camp=247&creative=1211&creativeASIN=479804749X&ie=UTF8&linkCode=as2&tag=bookmeter_book_middle_detail_pc_login-22) |チーム開発に即した形(もちろん会社やプロジェクトにもよるだろうけど)で書かれてたので、PLをやるのに役立ちそうだったので購入。推奨動作環境はMacOSで書かれています。|
|2|[PHPフレームワーク Laravel入門 第2版](https://www.amazon.co.jp/dp/4798060992/ref=sspa_dk_detail_0?psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUEySTZLNzdVQURFS0pCJmVuY3J5cHRlZElkPUExMDM4NDk5M1JNQlVPSFZVT0s3NCZlbmNyeXB0ZWRBZElkPUEzSFY3TTBFTExTWDhKJndpZGdldE5hbWU9c3BfZGV0YWlsJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ==) |Laravel6ベースです|
|3| JavaScript本格入門　～モダンスタイルによる基礎からAjax・jQueryまで|昔買ったもの再勉強。現在は[改訂版](https://www.amazon.co.jp/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88JavaScript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80-%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%88%E3%82%8B%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E7%8F%BE%E5%A0%B4%E3%81%A7%E3%81%AE%E5%BF%9C%E7%94%A8%E3%81%BE%E3%81%A7-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/dp/477418411X)が出てます。|
|4|[これからはじめるVue.js実践入門](https://www.amazon.co.jp/%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8BVue-js%E5%AE%9F%E8%B7%B5%E5%85%A5%E9%96%80-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B-ebook/dp/B07WVXRNH3)|3.と同じ執筆者のもの|
|5|[速習 TypeScript 第2版 速習シリーズ Kindle版](https://www.amazon.co.jp/dp/B086JKVGPB/?coliid=I2CNOLNVMIMP8X&colid=1YXKD7OL2OB0Z&psc=0&ref_=lv_ov_lig_dp_it)|Kindle Unlimitedの対象。3.と同じ執筆者のもの|
|6|[いまから始めるWebフロントエンド開発 Kindle版](https://www.amazon.co.jp/dp/B01IEKIW7U/?coliid=I1Y0ZKRYU8AGOG&colid=1YXKD7OL2OB0Z&psc=0&ref_=lv_ov_lig_dp_it)|Kindle Unlimitedの対象。2016年初版で10年くらいのWeb開発の流れが書かれている。他の本によく出てくる言葉の説明とかもあるので、初めに読んどくといいかも。|
|7|[これ1冊でゼロから学べる Webプログラミング超入門　ーHTML,CSS,JavaScript,PHPをまるごとマスター Kindle版](https://www.amazon.co.jp/dp/B01K3QZRIU/?coliid=IEAHNZMZBJCB9&colid=1YXKD7OL2OB0Z&psc=0&ref_=lv_ov_lig_dp_it)|Kindle Unlimitedの対象。広く浅く書かれている。2.と同じ執筆者のもの。流し読み|
|8|[速習webpack 速習シリーズ Kindle版](https://www.amazon.co.jp/dp/B07CQLGGP9/?coliid=I3V5DY1U4B2UQ6&colid=1YXKD7OL2OB0Z&psc=0&ref_=lv_ov_lig_dp_it)|Kindle Unlimitedの対象。3.と同じ執筆者のもの。流し読み|

##ツール系
| No|タイトル| メモや所感|  
|:-:|:------|:------|
|A|[サルでもわかるGit入門 Kindle版](https://www.amazon.co.jp/dp/B07HHRGHKJ/?coliid=I2RFO9VKZM69KY&colid=1YXKD7OL2OB0Z&psc=0&ref_=lv_ov_lig_dp_it)|Kindle Unlimitedの対象。 SourceTreeの操作主体で書かれている。付録でコマンドライン操作あり|
|B|[Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール Web制作者のための教科書シリーズ Kindle版](https://www.amazon.co.jp/dp/B00QPSXY1I/?coliid=I3PNB767PMW1AQ&colid=1YXKD7OL2OB0Z&psc=0&ref_=lv_ov_lig_dp_it)|Kindle Unlimitedの対象。SourceTreeの操作主体で書かれている。流し読み|

##マネージメント系
| No|タイトル| メモや所感|  
|:-:|:------|:------|
|あ|[SCRUM BOOT CAMP THE BOOK【増補改訂版】 スクラムチームではじめるアジャイル開発](https://www.amazon.co.jp/SCRUM-BOOT-CAMP-BOOK%E3%80%90%E5%A2%97%E8%A3%9C%E6%94%B9%E8%A8%82%E7%89%88%E3%80%91-%E3%82%B9%E3%82%AF%E3%83%A9%E3%83%A0%E3%83%81%E3%83%BC%E3%83%A0%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%82%A2%E3%82%B8%E3%83%A3%E3%82%A4%E3%83%AB%E9%96%8B%E7%99%BA/dp/4798163686/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=)|2020/5/20に改訂版が出ています|

##デザイン系
| No|タイトル| メモや所感|  
|:-:|:------|:------|
|ア|[UXと理論で作る Webデザイン: デザイナーでなくてもわかる Kindle版](https://www.amazon.co.jp/UX%E3%81%A8%E7%90%86%E8%AB%96%E3%81%A7%E4%BD%9C%E3%82%8B-Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%81%A7%E3%81%AA%E3%81%8F%E3%81%A6%E3%82%82%E3%82%8F%E3%81%8B%E3%82%8B-%E5%B7%9D%E5%90%88-%E4%BF%8A%E8%BC%94-ebook/dp/B077D8NN3L/ref=pd_ybh_a_5?_encoding=UTF8&psc=1&refRID=Z23HV1HZHFED5J7JB0AX)|Kindle Unlimitedの対象。読みやすい構成だった。|


#Web学習
1. [paizaラーニング(PHP系)](https://paiza.jp/works/search_courses/2000) 
2. [paizaラーニング(HTML/CSS入門編)](https://paiza.jp/works/html/primer)：Bootstrap勉強向け
3. [paizaラーニング(Git入門編)](https://paiza.jp/works/git/primer):初歩だけ
4. [paizaラーニング(Java入門編)](https://paiza.jp/works/java/primer)：思い出す！
5. [Udemy JavaSE8　インタフェース　ラムダ式　ストリーム　集中コース](https://www.udemy.com/course/javase8-h/)

#環境構築
手持ちがWindows10 homeしかなくDockerを入れれないので、VirtualBox+Ubuntuベースで環境構築しました。

##Windows10にVirtualBoxとUbuntuをインストール
[Windows10にVirtualBoxとUbuntuをインストール](https://qiita.com/pyon_kiti_jp/items/0be8ac17439abf418e48)を参考にしました。
Ubuntuのバージョンは2020/3/22時点で最新のLSTの「Ubuntu 18.04.4 LTS」を使用しましたが、手順はほぼ一緒です。

###設定変更
- VirtualBoxの[設定]-[一般]-[高度]-[クリップボードの共有]と[ドラッグ&ドロップ]を「双方向」に
- [VirtualBox上のUbuntu 18.04の画面サイズを自動で切り替えられるようにする](https://qiita.com/shu65/items/08c37bc086709e088560)
- ubuntsの右クリックで新規ファイルを作成できるようにする：
[Ubuntu 18.04の右クリックメニューから「空のドキュメント」を作成する](https://sicklylife.hatenablog.com/entry/2018/07/15/232709)
- ランチャのアイコンサイズの変更：[設定]-[Dock] - [アイコンサイズ]

###Ubuntuに割り当てたHDD容量を変更
- [Windows上でVirtualBoxのUbuntuに割り当てた固定サイズ容量を変更する方法](https://wireless-network.net/windows-virtualbox-resize/)

##Docker
[VirtualBox に Ubuntu 18.04 と Docker をインストールしたメモ](http://s-edword.hatenablog.com/entry/2019/04/14/101501)を参考にインストール。バージョンは19.03.8。

追加でdocker-composeをインストール

``` sh
$ sudo apt install docker-compose
```

##PHP
一旦、書籍1.に合わせてPHP7.2を入れる。
[Ubuntu 16.04 で PHP 7.2 を使う手順](https://laboradian.com/use-php72-with-ubuntu1604/)


##MySQL
[UbuntuにMySQLをインストール](https://qiita.com/houtarou/items/a44ce783d09201fc28f5)を参考にインストール。
バージョンは14.14。

```sh
$ sudo apt install mysql-server mysql-client
//rootユーザ設定
$ sudo mysql_secure_installation
```
##SQLite
```console
$ sudo apt-get install -y sqlite3
$ sqlite3 -version
3.22.0 2018-01-22 18:45:57 0c55d179733b46d8d0ba4d88e01a25e10677046ee3da1d5b1581e86726f2alt1
$ sudo apt-get install sqlitebrowser
$ sudo apt-get install php7.2-sqlite3
```

##Laravel
[UbuntuにLaravelをインストールし起動](https://qiita.com/MR_ROBOT/items/7614650f41d2ab6d1dff) を参考にインストール。 PHP拡張パッケージは以下も追加でインストール

```sh
$ sudo apt-get install php7.2-json
```

## Visual Studio Code
[簡単にUbuntuにVSCode (Visual Studio Code) をインストールする方法](https://www.karelie.net/install-vscode-ubuntu/)を参考にインストール。
バージョンは1.43.2。

###日本語化
[Visual Studio Code のユーザーインタフェイス(UI) 表示を日本語にする](https://www.ipentec.com/document/visual-studio-code-install-japanese-language-pack)

###PHP IntelliSense
以下を参考に導入。

- [Visual Studio Code で快適な PHP コーディングを行う](https://www.elp.co.jp/staffblog/?p=5620)
- [PHPプログラミングも快適に！ VS Codeの二大拡張機能](https://www.atmarkit.co.jp/ait/articles/1809/11/news028.html)

setting.jsonの設定は、LinuxのPHPのインストール先に合わせて以下になります。

``` ~/.config/Code/User/setting.json
{
  "php.validate.enable": false,
  "php.suggest.basic": false,
  "php.executablePath": "/usr/bin/php"
}
``` 

###PHP Intelephense
PHP IntelliSenseより使い勝手がいいかも。HTML部分も補完してくれる。

###Git関連
- [Git History](https://qiita.com/y-tsutsu/items/2ba96b16b220fb5913be)
- [GitLens](https://qiita.com/Mount/items/afe0c414edb5bf3473b5)

###設定
- エクスプローラーのフォルダ階層のインデント幅変更：Workbench > Tree: Indent
- [定義へ移動]などで、常に別タブで開くようにする：Workbench > Editor:Enabel Preview：→OFF

#やったこと
## PHP+Dockerの環境構築
書籍1.を見ながら、環境構築。

### うまくいかなかったとこ
#### Dcokerでdocker-entrypoint-initdb.dをマウントするときにPermission deniedエラーがでる。
docker-compose.ymlに以下を追加したら、エラーがでるようになった。(全文は書籍の内容なので割愛します。)

```docker-compose.yml
    volumes:
      - ./Docker/mysql/sqls:/docker-entrypoint-initdb.d
```

```sh
$ docker-compose up
Creating network "phpbookapp_default" with the default driver
Creating php-book-app-db ... 
Creating php-book-app-db ... done
Attaching to php-book-app-db
php-book-app-db | 2020-03-29 01:19:13+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.29-1debian10 started.
php-book-app-db | 2020-03-29 01:19:13+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
php-book-app-db | 2020-03-29 01:19:13+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.29-1debian10 started.
php-book-app-db | ls: cannot open directory '/docker-entrypoint-initdb.d/': Permission denied
php-book-app-db exited with code 2
```

#####解決策
ホスト側のディレクトリにgroupとotherの読み取り・実行権限がなかったのが原因でした。。。

## LaravelでPHPとPythonの連携
別記事にしました。
[ゼロから作るPHPとPythonの連携 on Laravel](https://qiita.com/SwitchBlade/items/96ed4ea425ef2d758f71)

## VueとTypeScriptの導入
別記事にしました。
[ゼロから作るPHPとPythonの連携 on Laravel + Vue + TypeScript](https://qiita.com/SwitchBlade/items/4ac15856f7309f9e082c)
TypeScriptはC#やってた人間からすると、たいぶ扱いやすいですね。さずがMS。