クモのようにコツコツと

Webデザイナー イイダリョウのブログ。略称「クモコツ」

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

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

【目次】

フロント開発環境全体

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

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

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

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

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

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

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

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

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

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

※参考:フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜

ああ、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だった。

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環境を構築する必要がありそう。

※参考:ゼロから始めるnode.js - Qiita

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を始めて大変だった・めっちゃ良かった話

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

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

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

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

Gitでよく使うコマンド。

※参考:[初心者向]よく使いそうなgitコマンドまとめ | DevelopersIO

テスト(TDD)

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

TDD考え方の記事。

※参考:フロントエンドでTDDを実践する(理論編) - Qiita

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

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

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

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

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

ローカル環境(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サービス比較 2019.05 - Qiita

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

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

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

※参考:予想外の料金の回避 - AWS 請求情報とコスト管理

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

mBaaS(Firabaseなど)

mBaaSとはなんぞや。

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

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

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

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

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

Vue.jsとの連携。

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

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

最後に

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

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

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

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