Help us understand the problem. What is going on with this article?

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

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

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

デベロッパーツール

いつもお世話になっているデベロッパーツール。デベロッパーツール上で直接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もインストールしてHello worldしてみる。

※参考:初めてのRuby:インストール確認、REPL、Hello worldまで

データベース

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する

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もあるでよ)

サーバ、クラウド、AWS

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

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

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

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

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

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

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

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

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

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

デザイン〜設計ツール

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

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

Googleアナリティクス

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

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

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

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

スマホ、タブレット

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

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

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

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

i-ryo
フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。ブログも書いてます。 Webづくり やりたい時が 始め時!
https://www.i-ryo.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away