LoginSignup
49
76

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

Last updated at Posted at 2019-10-23

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

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

デベロッパーツール

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

※参考:Chromeデベロッパーツール事始め!HTML、CSS、JSを直感的に修正しよう

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

※参考:【デベロッパーツール】JSコードのデバッグ(前編:コード特定編)

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

※参考:【デベロッパーツール 】JSコードのデバッグ(中編:ブレークポイント設定編)

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

※参考:【デベロッパーツール 】JSコードのデバッグ(後編:ステップ実行編)

ターミナル(黒い画面)

初めての黒い画面

※参考:初めてのPython(インストール〜Hello world)と初めての黒い画面

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

※参考:黒い画面だけでWebページを作成する - 前編:ファイル、フォルダの作成

※参考:黒い画面だけでWebページを作成-後編:viエディタでコーディング!

フロントエンド開発環境

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

※参考:フロントエンドのモダンな開発環境を作るために調べていること

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

※参考:【Gulpかnpm-scriptsか】メタ言語のコンパイル方法を調査・検討した

Gulpインストールに苦戦、Nodeとnpmのバージョンが古い?(※2019/11/20追加!)

※参考:Gulpのインストールが5分で出来なかった話(苦戦中)

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

※参考:Gulpインストールでけった〜!!(package.json作り忘れてた。。)

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

※参考:【メタ言語】HTMLテンプレートエンジン、AltCSS、AltJSのまとめ(随時更新)

BabelでES6〜をES5にコンパイルする。(2020/01/11追加!)

※参考:【JS】BabelでESをコンパイルする

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

 ※参考:webpackを理解するために調べたこと(Webデザイナー→フロントエンドエンジニアへの脱皮)

Webpackで複数のJSファイルをバンドル化(2020/01/13追加!)

※参考:webpackでJSのモジュールファイルをバンドルする

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

Prettierでコード整形(2020/01/25追加!)

※参考:【コードフォーマッター】PrettierでHTML、CSS、JSのコードを整形してみた

HTMLHintでHTMLを構文チェック(2020/02/06追加!)

※参考:【HTML】HTMLHintで構文チェックを事始める

StyleLintでCCSを構文チェック(2020/02/05追加!)

※参考:【CSS】StyleLintで構文チェックを事始める

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

※参考:【CSS】そうだ Autoprefixerで 自動ベンプレ付けよう(Gulpで動かす)

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

※参考:【CSS】CSS Declaration Sorterでプロパティ順をソートする

ESLintでJSを構文チェック(2020/01/22追加!)

※参考:【JS】ESLintで構文チェックを事始める

Jestでテスト駆動開発(2020/01/28/追加!)

※参考:【JS】Jestでテストを事始める(TDD:テスト駆動開発)

バックエンド開発環境

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

REST APIとは何かを調べまくったらようやくイメージができてきたのでまとめた

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

※参考:Node.js / Expressを習得するためにやったことまとめ(随時更新)

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

※参考:ネイティブPHPいろいろやってみたシリーズまとめ(随時更新)

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

※参考:初めてのPython(インストール〜Hello world)と初めての黒い画面

Pythonの基本書式

※参考:Pythonの基本を理解するためにJSと比較する

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

※参考:Ryby/Ruby on Railsを習得するためにやったこと まとめ(随時更新)

GitHub

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

※参考:ぎっとはぶ(GitHub)、始めてました。

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

※参考:ブラウザ上だけでお手軽GitHub体験(リポジトリの作成と変更)

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

※参考:GitHubとSourcetreeでGitHub Pagesとローカルファイルを同期させる

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

※参考:ローカル→Sourcetree→GitHub→Herokuに同期する方法(黒い画面不要!)

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

※参考:【GitHub】Gitコマンド事始め(ローカルにクローン→GitHubにプッシュ→GitHub Pages連携)

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

※参考:【GitHub】Gitコマンドでブランチ作成→プルリク→マージ→ブランチ削除の記録(Issueもあるでよ)

データベース

Local by FlywheelからAdminerを触ってみる(phpMyAdminライク!)

※参考:SQL文はLocal by FlywheelのAdminerから慣れよう(WordPressのDB操作:その1)

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

※参考:AdminerからSQL文で「我輩は猫である」を「犬」にしてみる(WordPressのDB操作:その2)

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

※参考:【SQL】ターミナルからMAMPのMySQLにCRUDする

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

※参考:【擬似NoSQL】ターミナルからAPIモックのJSON ServerにCRUDする

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

※参考:【NoSQL】ターミナルからMongoDBにCRUDする(JS & JSONライク!)

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

※参考:【SQL】ターミナルからHerokuのPostgreSQLに接続する

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

※参考:【SQL】ターミナルからHerokuのPostgreSQLにCRUDする

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

※参考:【Firebase】Realtime Databaseにブラウザから直接CRUD操作する

サーバ、クラウド

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

※参考:Webサービスを公開するためのサーバ仕様比較(VPSとクラウドサービス)

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

※参考:AWSを理解するために調べたこと(Webサイトホスティング編)

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

※参考:AWSを理解するために調べたこと(EC2 、Lightsail、EBS、RDS、ELB、S3)

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

※参考:GlideならPWAを5分で作れるというのでBeatles DBというアプリを作ってみた

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

※参考:【GAS】スプレッドシートのデータをGASで読み込んでWebページを作る(CSS、JS設定も)

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

※参考:Firebaseを事始めるためにドキュメントを読み始める(プロジェクト作成も)

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

※参考:【Firebase】アプリを追加してFirebase CLIでFirebase Hostingにデプロイする

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

※参考:【Firebase】Authenticationでログイン設定を作る(メール/パスワードによるユーザー認証)

デザイン〜設計ツール

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

※参考:Figmaで完結する!Webサイト設計の流れ

Googleアナリティクス

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

※参考:【Googleアナリティクス】ユーザー分析の基本(ユーザー、セッション、PV)

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

※参考:【Googleアナリティクス】主なメニューからユーザー層をイメージする

スマホ、タブレット

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

※参考:【iPad】ソフトウェアキーボード(QWERTY、フリック、グライド)と物理キーボード比較

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

※参考:【Textastic】もしかしてだけどスマホで技術ブログかけちゃうんじゃないの?

49
76
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
49
76