Edited at

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

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

※2019/11/06追記デザイン・設計フェーズ


デザイン・設計フェーズ

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

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


Chromeのデベロッパーツール

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

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


Googleアナリティクス

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

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

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

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


スマホ、タブレットでのプログラミング

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

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

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

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


フロントエンド開発環境

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

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

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

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

メタ言語(HTMLテンプレートエンジン、AltCSS、AltJS)開発環境、

タスクランナー(Gulp、npm scriptsなど)によるコンパイルなど。

※参考:こちらに別途まとめています

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


ローカル環境(Python、Ruby、Node.js)

ターミナル(黒い画面)に苦手意識があるWebデザイナーは多い。はじめての黒い画面体験。PythonをインストールしてHello worldしてみる。

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

RubyもインストールしてHello worldしてみる。

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

Node.jsをインストールしてHelloWorldしてみる。Node.jsはフロントエンド開発環境として重要。

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

※PHPは下記の「GitHub」の項を参照


ターミナル(黒い画面)

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

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

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


GitHub

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

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

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

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

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

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

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

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


サーバ、クラウド、AWS

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

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

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

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

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

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


PWA

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

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