フロントエンドのモダンな開発環境を作るために調べていること（追記あり）

開発環境を「モダン環境」にしたいなーと思いつつ知識がなさすぎて足踏みしていました。「ないならば、つけてしまおう知識ギス」というこでとにもかくにも調べ始めています。はい。

【目次】

Web開発環境まとめ
qiita.com

フロント開発環境全体

どんな物が必要なのか。どんな流れで使うのか、など。

Vue.jsの拡張フレームワークNuxt.js。VueのコンポーネントElementUI。コードフォーマッターPrettier。構文チェックESLint、などを知る。

※参考：モダンなフロントエンド開発環境を目指して導入したあれこれ - Qiita

Vuex（VueのV以外の部分を補完するFlux）、Vue-Router（エコシステム）など、Vueをやり始めてるのでここら辺のキーワードは気になる。

※参考：モダンフロントエンド開発環境からVue.js環境までひと通り作ってみた - Qiita

2017年だが海外の5000人からのアンケート。

※参考：5000人調査でわかった！世界のフロントエンド開発者が使うツールはこれだ - WPJ

2018年版！5000人アンケート（※2019/08/16追記）

※参考：5000人に聞いた、2018年最先端のフロントエンド開発者が使ってるツールはこれだ - Qiita

2019年版！3000人アンケート（※2020/02/05追記）

※参考：3000人に聞いた、2019年最先端のフロントエンド開発者が使ってるツールはこれだ - Qiita

これもフロントエンド開発全般の流れがまとまっている。

※参考：【2019年】Web開発トレンド総まとめ – フロントエンド開発編 – Ryosuke's Blog

フロントエンドエンジニア個人としてのロードマップだが、開発環境についても触れられている（※2019/08/16追記）

※参考：2018年の最先端フロントエンドエンジニアになろう - Qiita

で、フロントエンドやること多すぎない？

※参考：フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜

ああ、2016年だからな。いや、2019か。

※参考：2016年にJavaScriptを学ぶとこんな感じ - Medium Japan - Medium

いやいや、逃げちゃダメだ。共感はできるけどw、逃げちゃダメだ！

エディタ

職場はデザイン部署でAdobe CCが入ってるのでその流れでDreamweaverを使っている。ライブビューなど使わず普通のエディタ機能しか使ってないのでDWにこだわりはない。

だいたい目につくのはこの4つ。Sublime Text、ATOM、DW、Brackets。

※参考：作業を効率良く！フロントエンドエンジニアにおすすめエディタ4選｜IT・Web業界の転職準備【ウェブスタッフ 転職ガイド】

ピクセルグリッドの方が一人一人どんなエディタを使っているかがわかる。

※参考：ピクセルグリッドの開発環境サーベイ 2017 - エディタとおすすめツール編 | CodeGrid

基本はATOMでTypeScript使うときはVS Code使い分ける場面がありそう。

※参考：最近のフロントエンドのエディタ事情 - mizchi's blog

ちなみに、この記事を書いている頃にTwitterでとったアンケート、1位はダントツでVS Codeだった。

フロントエンドエンジニアの方に質問！エディタは何を使われていますか？

WebデザイナーでCC使ってるとその流れでDWだったりする。フロントエンド エンジニアはどうなのかなと。
あとエディタじゃなくてVS CodeなどのIDE使ってるよって人がどれくらいなのかなと思い。

— イイダリョウ@うぇぶでざいなあ (@idr_zz) 2019年7月9日

VS Codeが気になる。

※参考：フロントエンドでも快適に使える！ Visual Studio Code のあれこれ - Qiita

いろいろ拡張ができそう。

※参考：VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選（2019年版） - ICS MEDIA

IDE（統合開発環境）

エディタじゃなくてIDE使うよって人も結構いるみたい。

※参考：統合開発環境（IDE）について徹底解説！そもそもの内容から言語別のおすすめ開発環境まで幅広くご紹介します！ | Geekly Media

Visual Studio CommunityとVS Codeとの違い

※参考：【初心者必見！】Visual Studio Communityについてわかりやすく解説！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

ブラウザ完結でVS Codeを使えるクラウドIDE、Coder

※参考：ブラウザでVS codeが使えるクラウド IDEの大本命「Coder」 - Qiita

AWSに付属するブラウザ完結のIDE、Cloud9

※参考：プログラミングの開発環境に便利！Cloud9の使い方 | TechAcademyマガジン

トランスパイル、モジュール化など

テンプレートエンジン、AltCSS、AltCSSなど。SCSS、TypeScriptなど。CodePenで記法自体は気軽に体験できる。

※参考：HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ（3記事） - クモのようにコツコツと

自力でトランスパイルもできるようなりたい。ついでにモジュール化やコードチェックも。以前かいたWebPackを始めとるすツールたちを検討中。

※参考：webpackを理解するために調べたこと（Webデザイナー→フロントエンドエンジニアへの脱皮） - クモのようにコツコツと

なお、webpackは銀の弾丸ではないっ！

※参考：Webpack の考え方について - mizchi's blog

動かすにはNode.jsのnpm環境を構築する必要がありそう。

※参考：https://qiita.com/Yoshipe/items/f89449b716968a59e57d

フロントエンドのモジュール管理にはBowerがいいらしい。そしてサーバサイドもフロントエンドも橋渡すBrowserifyの時代へ？（※2019/08/16追記）

※参考：npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita

※参考：JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack) | tsuchikazu blog

モジュール管理はESからもたらされた。（※2019/08/16追記）

※参考：ブラウザで覚えるES Modules入門 - JavaScriptでモジュールを使う時代 - ICS MEDIA

たくさんある。それぞれの違いや位置づけを理解したい。（※2019/08/16追記）

※参考：【保存版】gulp, webpack, parcel...増え続けるタスクランナーの特徴を理解して最適なものを選択しよう | WEBA

Git （バージョン管理）

Gitしないとチーム作業がしにくい。「修正したのでダウンロードお願いしまーす」「あっ、先祖返りしてる！」とか。

バックアップもディレクトリごと複製して日付付けてとか修正点がわかりにくいしファイルサイズが増えていく。差分管理したい。

有名なのはもちろんGitHub。商用利用の場合のGitHub以外の手段を検討中。Bitbucket、GitLab、CloudForge、tracpathとか。

※参考：無料で使える! Gitのホスティングサービス5つ | tracpath:Works

Gitlabの費用、果てしなく0円てすごい！

※参考：GitHub.com・BitBucket.org・GitLab.comの月額料金比較 + α - Qiita

GUIはSourceTreeでええのんか？系の記事。

※参考：WebデザイナーがGitを始めて大変だった・めっちゃ良かった話｜TechRacho（テックラッチョ）〜エンジニアの「？」を「！」に〜｜BPS株式会社

※参考：最強のGitフロントエンドはForkかもしれない - たけぞう瀕死ブログ

※参考：Git GUI フロントエンドをたずねて三千里 — しっぽのさきっちょ | text.Baldanders.info

GUIに依存せずCUIでコマンドを打つ！の記事。

※参考：Gitの脱GUIをめざす！CUIで見やすく、サクサク操作の「tigコマンド」を使ってみた | 東京のWeb制作会社LIG

Gitでよく使うコマンド。

※参考：[初心者向]よく使いそうなgitコマンドまとめ ｜ Developers.IO

構文チェック（2020/01/21追記）

JSの構文をチェックしてくれるツール

JSLint、JSHint、ESLintなど色々あるけども

※参考：JavaScript の静的解析ツールの比較 (JSLint, JSHint, ESLint) | まくまくJavaScriptノート

ES LIintが良さげ。

※参考：JavaScriptで開発をしているならESLintは使った方がいい - Fact of Life

Prettierはチェックだけでなくフォーマット（書き換え）もしてくれる！

※参考：Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita

ChromeデベロッパーツールでのJSデバッグ、もっと使いこなしたい。ブレークポイントとか。

※参考：ChromeのデベロッパーツールでJSをデバッグする方法（2019年版） - ICS MEDIA

テスト（TDD）

TDD（テスト駆動開発）の導入が必要か、不要か。

TDD考え方の記事。

※参考：フロントエンドでTDDを実践する（理論編） - Qiita

※参考：フロントエンドのテストに真面目に向き合う - Qiita

※参考：フロントエンドのテストについて - Speaker Deck

フロントエンドとTDDはマッチしないかも系の記事。

※参考：フロントエンドの負債と向き合う - mizchi's blog

※参考：Webサイト制作におけるテスト工程の難しさを考えます | 東京のWeb制作会社LIG

Jestというツールが一番良さそう（2020/01/21追記）

※参考:ワイのテスト駆動開発〜偶数ハロー株式会社〜 - Qiita

ローカル環境（Dockerなど）

Dockerの導入が必要か。これまで通りMAMPでええのんか。

Dockerの導入方法

※参考：前編【コマンド不要】XAMMPもMAMPも使わない！ローカル開発環境はdockerで構築してみよう！ | ヤッテモータース

Dockerなにそれおいしいの？

※参考：Docker？なにそれおいしいの？ for フロントエンド（だけやる）エンジニア - console.lealog();

Dockerが必要か不要か。

※参考：フロントエンドの開発環境に Docker は不要(少なくともMacでは) - mizchi's blog

ステージング環境（AWSなど）

本番サーバ環境と同じ環境を再現して検証するステージング環境。これまでは自社サイトの下層ディレクトリにあげたりして全然ステージングできてないw

ステージング環境とは何か。

※参考：ステージング環境とは結局なんなのか。 - Qiita

ステージング環境にAWSの構築が必要か。

※参考：フロントエンドエンジニアのAWSとの付き合い方について - daikiojm’s diary

AWSのメインの用途はステージング環境でEC2

※参考：【インスタンスって何??】AWSでよく聞く単語まとめてみた - Qiita

AWS以外の仮想サーバとの比較

※参考：AWS/Azure/GCPサービス比較 2020.01 - Qiita

AWS自体が多機能すぎてわかりにくい上、高額請求みたいな話を聞くとどうしてもASWこわい。アラートがあれば大丈夫？

※参考：AWSの料金体系とコストの確認方法について | PINTO!

※参考：AWSで請求アラートを設定する - Qiita

※参考：https://docs.aws.amazon.com/ja_jp/awsaccountbilling/latest/aboutv2/checklistforunwantedcharges.html

※参考：コストを下げろと言われたら~AWSでまずやること~ - Qiita

mBaaS（Firabaseなど）（※2019/07/11追記）

mBaaSとはなんぞや。

※参考：MBaaS（エムバース）とは | メリット・デメリット - モバイルアプリ開発サービスの特徴 - 開発 | ボクシルマガジン

mBaaSはなんといってもGoogleが提供するFireBaseが気になる。

※参考：【第1回】 Google の mBaaS 「 Firebase 」とは？【はじめてみよう Firebase】 | 株式会社トップゲート

フロントエンドとの相性は良さそう。

※参考：フロントエンジニアが今話題のFirebaseについて語りたい - Qiita

Vue.jsとの連携。

※参考：Vue.jsのバックエンドとしてのFirebase - ABEJA Tech Blog

※参考：Nuxt.jsとFirebaseを使って簡単なWebサービスを作る＜導入編＞｜東京のShopify制作会社｜non-standard world株式会社

Reactとの連携（2020/02/07追記）

※参考：Reactで作成したアプリをfirebaseでデプロイする方法 | ウェブ系ウシジマくんのテックブログ

Node.js、expressとの連携（2020/02/07追記）

※参考：Firebaseで動的なサイト(Node.js+Express)をデプロイするまで。 - Qiita

最後に

私の環境はいわゆる典型的な「レガシー環境」。ローカルサーバはMAMP、本番公開はFTPで直接上書きアップ。ステージング環境もなくて本番サーバや自社サイトサーバの下層にアップです。

個人作業ならともかくチーム作業する上で不便に感じることご増えてきてます。もうちょっと便利に安全に作りたい。

わーーっと調べてるけど正直、何から手をつけるべきかロードマップ的なイメージかまだない。重要、かつ早く導入できそうなものから手を付けていこうと思います。

導入過程は引き続き記事にしていきます。それではまた！

---

※参考：Web開発環境の記事まとめ
qiita.com