Web開発環境についてのまとめ（随時更新）

Web開発環境について調べたこと、試したことをまとめています。WebデザイナーのWeb制作レガシー環境からWebエンジニアのWeb開発モダン環境への脱皮の過程になるはず…（随時更新中）

**※2021/01/22追加**：[Firebase Authenticationでユーザー認証設定](#サーバクラウド)

# デベロッパーツール 

いつもお世話になっているデベロッパーツール。デベロッパーツール上で直接HTML、CSS、JSを打ち直して修正を検証する方法。

※参考：[Chromeデベロッパーツール事始め！HTML、CSS、JSを直感的に修正しよう](https://www.i-ryo.com/entry/2018/11/12/223337)

デベロッパーツールでJS処理の該当コードを調べる方法（2020/05/06追加！）

※参考：[【デベロッパーツール】JSコードのデバッグ（前編：コード特定編）](https://www.i-ryo.com/entry/2020/05/06/192103)

ブレークポイントを設定して、処理を止める（2020/05/07追加！）

※参考：[【デベロッパーツール 】JSコードのデバッグ（中編：ブレークポイント設定編）](https://www.i-ryo.com/entry/2020/05/07/201154)

ステップ実行で処理の途中の状態を調べる（2020/05/09追加！）

※参考：[【デベロッパーツール 】JSコードのデバッグ（後編：ステップ実行編）](https://www.i-ryo.com/entry/2020/05/09/095259)

# ターミナル（黒い画面）

初めての黒い画面

※参考：[初めてのPython（インストール〜Hello world）と初めての黒い画面](https://www.i-ryo.com/entry/2018/11/19/200217)

ターミナルになれるために、ターミナルだけでWebページを作ってみる。

※参考：[黒い画面だけでWebページを作成する - 前編：ファイル、フォルダの作成](https://www.i-ryo.com/entry/2018/11/22/221507)

※参考：[黒い画面だけでWebページを作成-後編：viエディタでコーディング！](https://www.i-ryo.com/entry/2018/11/27/010415)

# フロントエンド開発環境

フロントエンドの開発環境について調べるとわからない単語の数珠つなぎw 一つずつ調べる。

※参考：[フロントエンドのモダンな開発環境を作るために調べていること](https://www.i-ryo.com/entry/2019/07/10/085442)

タスクランナーいっぱいあるがGulpが主流。一方脱Gulpの主流npm-scriptsも知る。

※参考：[【Gulpかnpm-scriptsか】メタ言語のコンパイル方法を調査・検討した](https://www.i-ryo.com/entry/2019/11/14/061740)

Gulpインストールに苦戦、Nodeとnpmのバージョンが古い？（※2019/11/20追加！）

※参考：[Gulpのインストールが5分で出来なかった話（苦戦中）](https://www.i-ryo.com/entry/2019/11/20/070503)

Gulpインストールでけた！package.json入れ忘れてた。。（2019/11/21追加）

※参考：[Gulpインストールでけった〜！！（package.json作り忘れてた。。）](https://www.i-ryo.com/entry/2019/11/21/070737)

メタ言語（HTMLテンプレートエンジン、AltCSS、AltJS）コンパイルはこちらを参照

※参考：[【メタ言語】HTMLテンプレートエンジン、AltCSS、AltJSのまとめ（随時更新）](https://qiita.com/i-ryo/items/fa8383432fedb5dfc764)

BabelでES6〜をES5にコンパイルする。（2020/01/11追加！）

※参考：[【JS】BabelでESをコンパイルする](https://www.i-ryo.com/entry/2020/01/11/211504)

WebPackについて調べたら心トキメいた（後に銀の弾丸ではないことを知る…）

　※参考：[webpackを理解するために調べたこと（Webデザイナー→フロントエンドエンジニアへの脱皮）](https://www.i-ryo.com/entry/2019/06/27/012241)

Webpackで複数のJSファイルをバンドル化（2020/01/13追加！）

※参考：[webpackでJSのモジュールファイルをバンドルする](https://www.i-ryo.com/entry/2020/01/13/231734)

# フロントエンドデバッグ環境

Prettierでコード整形（2020/01/25追加！）

※参考：[【コードフォーマッター】PrettierでHTML、CSS、JSのコードを整形してみた](https://www.i-ryo.com/entry/2020/01/25/213351)

HTMLHintでHTMLを構文チェック（2020/02/06追加！）

※参考：[【HTML】HTMLHintで構文チェックを事始める](https://www.i-ryo.com/entry/2020/02/06/061443)

StyleLintでCCSを構文チェック（2020/02/05追加！）

※参考：[【CSS】StyleLintで構文チェックを事始める](https://www.i-ryo.com/entry/2020/02/05/055952)

Autoprefixerでベンダープレフィックスを自動付与（2020/02/16追加）

※参考：[【CSS】そうだ Autoprefixerで 自動ベンプレ付けよう（Gulpで動かす）](https://www.i-ryo.com/entry/2020/02/16/110719)

CSS Declaration SorterでCSSのプロパティ順をソートする（2020/02/25追加）

※参考：[【CSS】CSS Declaration Sorterでプロパティ順をソートする](https://www.i-ryo.com/entry/2020/02/25/073942)

ESLintでJSを構文チェック（2020/01/22追加！）

※参考：[【JS】ESLintで構文チェックを事始める](https://www.i-ryo.com/entry/2020/01/22/233920)

Jestでテスト駆動開発（2020/01/28/追加！）

※参考：[【JS】Jestでテストを事始める（TDD：テスト駆動開発）](https://www.i-ryo.com/entry/2020/01/28/080831)

# バックエンド開発環境

REST APIによるフロントエンドとバックエンドの疎結合化（2020/02/04追加！）

[REST APIとは何かを調べまくったらようやくイメージができてきたのでまとめた](https://www.i-ryo.com/entry/2020/02/04/083542)

バックエンドをJSで実行！Node.jsについてはこちらを参照（2020/03/12分離）

※参考：[Node.js / Expressを習得するためにやったことまとめ（随時更新）](https://qiita.com/i-ryo/items/d7416e0c4a6035c30288)

PHPについてはこちらを参照

※参考：[ネイティブPHPいろいろやってみたシリーズまとめ（随時更新）](https://qiita.com/i-ryo/items/f202ef81980932905732)

PythonをインストールしてHello worldしてみる。

※参考：[初めてのPython（インストール〜Hello world）と初めての黒い画面](https://www.i-ryo.com/entry/2018/11/19/200217)

Pythonの基本書式

※参考：[Pythonの基本を理解するためにJSと比較する](https://www.i-ryo.com/entry/2018/12/19/001500)

Rubyについてはこちらを参照

※参考：[Ryby/Ruby on Railsを習得するためにやったこと まとめ（随時更新）](https://qiita.com/i-ryo/items/ded74cfd8d175e6cd6e3)

# GitHub

バージョン管理がどんな物かを体験したく、GitHubのアカウントを作ろうとしたら、もう始めていた、という話w

※参考：[ぎっとはぶ（GitHub）、始めてました。](https://www.i-ryo.com/entry/2017/02/13/015514)

ターミナル（黒い画面）を使わずに、ブラウザだけでどこまでのことがやれるか検証。

※参考：[ブラウザ上だけでお手軽GitHub体験（リポジトリの作成と変更）](https://www.i-ryo.com/entry/2018/11/28/221938)

ローカルの静的ページをターミナル（黒い画面）を使わずにSourceTree（GUIツール）を使ってGitHubにプッシュし、さらにGitHub Pagesにデプロイさせる。

※参考：[GitHubとSourcetreeでGitHub Pagesとローカルファイルを同期させる](https://www.i-ryo.com/entry/2018/12/26/215536)

MAMP環境のPHPファイルをSourceTreeを使ってGitHubにプッシュし、さらにHerokuにデプロイする。

※参考：[ローカル→Sourcetree→GitHub→Herokuに同期する方法（黒い画面不要！）](https://www.i-ryo.com/entry/2019/01/20/220031)

Gitコマンド事始め〜GitHub Pagesとの連携まで（2020/07/22追加）

※参考：[【GitHub】Gitコマンド事始め（ローカルにクローン→GitHubにプッシュ→GitHub Pages連携）](https://www.i-ryo.com/entry/2020/07/22/204933)

Gitコマンドでブランチ作成→プルリク→マージ→ブランチ削除(2020/07/24追加)

※参考：[【GitHub】Gitコマンドでブランチ作成→プルリク→マージ→ブランチ削除の記録（Issueもあるでよ）](https://www.i-ryo.com/entry/2020/07/24/223510)

# データベース

Local by FlywheelからAdminerを触ってみる（phpMyAdminライク！）

※参考：[SQL文はLocal by FlywheelのAdminerから慣れよう（WordPressのDB操作：その1）](https://www.i-ryo.com/entry/2018/10/23/233644)

AdminerからMySQLのデータベースをSQL文で操作してみる

※参考：[AdminerからSQL文で「我輩は猫である」を「犬」にしてみる（WordPressのDB操作：その2）](https://www.i-ryo.com/entry/2018/10/25/072958)

ターミナルからMAMPのMySQLをCRUDしてみる（2020/08/02追加）

※参考：[【SQL】ターミナルからMAMPのMySQLにCRUDする](https://www.i-ryo.com/entry/2020/08/02/191316)

ターミナルからJSON ServerをCRUDしてみる（2020/08/04追加）

※参考：[【擬似NoSQL】ターミナルからAPIモックのJSON ServerにCRUDする](https://www.i-ryo.com/entry/2020/08/04/192859)

ターミナルからMongoDBをCRUDしてみる（2020/08/06追加）

※参考：[【NoSQL】ターミナルからMongoDBにCRUDする（JS & JSONライク！）](https://www.i-ryo.com/entry/2020/08/06/081452 )

ターミナルからHerokuのPostgreSQLに接続（2020/10/20追加）

※参考：[【SQL】ターミナルからHerokuのPostgreSQLに接続する](https://www.i-ryo.com/entry/2020/10/20/081654)

ターミナルからHerokuのPostgreSQLにCRUDする（2020/10/25追加）

※参考：[【SQL】ターミナルからHerokuのPostgreSQLにCRUDする](https://www.i-ryo.com/entry/2020/10/25/173932)

FirebaseのRealtime Databaseにブラウザから直接CRUD（2021/01/08追加）

※参考：[【Firebase】Realtime Databaseにブラウザから直接CRUD操作する](https://www.i-ryo.com/entry/2021/01/08/064437)



# サーバ、クラウド

VPSサーバとクラウドサービスの違いを理解する。

※参考：[Webサービスを公開するためのサーバ仕様比較（VPSとクラウドサービス）](https://www.i-ryo.com/entry/2019/01/07/003000)

AWSホスティングの大枠の理解

※参考：[AWSを理解するために調べたこと（Webサイトホスティング編）](https://www.i-ryo.com/entry/2019/07/24/224026)

AWSの基本的なキーワードもわからない単語多すぎるので、理解

※参考：[AWSを理解するために調べたこと（EC2 、Lightsail、EBS、RDS、ELB、S3）](https://www.i-ryo.com/entry/2019/07/27/164058)

Glideというサービスを使ったらほんとに5分でPWAを作れた！

※参考：[GlideならPWAを5分で作れるというのでBeatles DBというアプリを作ってみた](https://www.i-ryo.com/entry/2019/06/18/222028)

スプレッドシートのデータをGASで読み込んでWebページを作る（2020/11/13追加）

※参考：[【GAS】スプレッドシートのデータをGASで読み込んでWebページを作る（CSS、JS設定も）](https://www.i-ryo.com/entry/2020/11/13/073010)

Firebaseを事始め、プロジェクト作成（2020/12/25追加）

※参考：[Firebaseを事始めるためにドキュメントを読み始める（プロジェクト作成も）](https://www.i-ryo.com/entry/2020/12/25/073610)

アプリを追加、Firebase CLIでFirebase Hostingにデプロイ（2020/12/30追加）

※参考：[【Firebase】アプリを追加してFirebase CLIでFirebase Hostingにデプロイする](https://www.i-ryo.com/entry/2020/12/30/180509)

Firebase Authenticationでユーザー認証設定（**2021/01/22追加**）

※参考：[【Firebase】Authenticationでログイン設定を作る（メール/パスワードによるユーザー認証）](https://www.i-ryo.com/entry/2021/01/22/055042)

# デザイン〜設計ツール

Figmaならブラウザ完結でチーム作業で進められる！（※2019/11/06追記！）

※参考：[Figmaで完結する！Webサイト設計の流れ](https://www.i-ryo.com/entry/2019/11/06/084941)

# Googleアナリティクス 

GAの基本、ユーザー、セッション、PVの理解。

※参考：[【Googleアナリティクス】ユーザー分析の基本（ユーザー、セッション、PV）](https://www.i-ryo.com/entry/2018/11/15/223910)

GAからイメージできるユーザー層

※参考：[【Googleアナリティクス】主なメニューからユーザー層をイメージする](https://www.i-ryo.com/entry/2019/10/23/084637)

# スマホ、タブレット

プログラミング＝PCというイメージだがタブレットのソフトウェアキーボードでどこまでできるのか検証

※参考：[【iPad】ソフトウェアキーボード（QWERTY、フリック、グライド）と物理キーボード比較](https://www.i-ryo.com/entry/2018/09/30/213650)

次に、スマホだけでプログラミングができるか検証

※参考：[【Textastic】もしかしてだけどスマホで技術ブログかけちゃうんじゃないの？](https://www.i-ryo.com/entry/2018/10/04/021242)