改めて開発環境を整理しなおしたい

開発を始めてからこっち、いろんな記事を参考にあれを導入してみたり、これをやってみたりとまとまりがなかったこともあり、何から手をつけたものだかわかりにくくなり、開発効率まで下がっている気がする。

新しいMacBookProを購入したこともあり、今理解している範囲で開発環境を整理しなおしてみようと思い至った。

趣味と実益を兼ねた個人開発とはいえ、仕事とか育児とかもあるし、時間は限られている。一方でやりたい開発はWebアプリからWordPressのカスタマイズまで、指折りたくさんある。開発スピードを上げていきたい。タスクランナーなどの便利（そう）な技術をきちんと導入しきれていないこともあり、その辺もきちんと理解しなおして入れていきたい。

以下整理が足りてないメモ……

やりたいこと

• フロントエンドからバックエンドまで、一人開発で一通りのWebアプリ開発、WordPressなどCMSのカスタマイズができる。
• WordPress、はてなブログなど、ブログの更新ができる。
• デザイン、UI設計についても、素人なりのことができる
• 可能な限り自動化、効率化を進める。ツールを集約し、ノウハウを蓄積する

機材とツール

• 主にMacBookPro 2018、たまにWindows
• さくらインターネットのレンタルサーバー
• 成果物
  • ブログ
    • WordPress 記事、テーマ
    • はてなブログ 記事
  • Webアプリ
    • 個人用
    • 公開アプリ
• 言語
  • PHP
    • Laravel
  • JavaScript, Vue.js
  • CSS, SASS
  • MySQL
• ソフトウェア
  • PhpStorm（IDE）
  • Visual Studio Code （コードエディタ）
  • Ulysses （ライティング）
  • Photoshop
  • XD
  • Illustrator
  • Chrome
  • iTrerm2
• 不採用
  • DreamWeaver
  • Brackets
• 導入したいツール
  • Xdebug
  • タスクランナー Gulp, Webpack, npm-scripts
  • Vagrant

ディレクトリ、ファイル構成

• ソースコードのディレクトリをDropbox内に作成
• ディレクトリの内容をレンタルサーバーにアップロード
• 企画ディレクトリ：開発ドキュメント、デザインアイテムなど。MasteryProgrammingLanguageディレクトリ内

開発手順

• 企画
• 画面遷移図、ワイヤーフレーム
• カンプ作成またはプロトタイプ制作
• コーディング

一気に開発するというよりは中断、間隔が空いてから開発することが多いので、中断前提の開発を考えてみたい。ドキュメントとか仕様をきちんと……ってことだろうか。しかしそれってますます遅くなるような。

企画

画面遷移図

ワイヤーフレーム

カンプ作成

プロトタイプ制作

コーディング

再開フェーズに必要なものは何か

詳細な仕様書かなやっぱり…