QA@IT

フロントエンド開発で使用するツールや手法の標準は?

3369 PV

ブラウザ上で動作するWebアプリ、Webページの開発を行う際、Web系、オープン系と呼ばれ/名乗り/分類されるエンジニアの方々はWebオーサリングソフトはあまり使われないのでしょうか?

というのも
Web上(ブログやGithub)でコードを公開していたり、仕事だけでなく個人レベルでWebサービスやアプリを公開しているプログラムが書けるようなレベルの人達はネット上でエディタ(Vim、Emacs)について言及することは目にしますが、WebオーサリングソフトやIDEについては議題としてそもそも挙がらないか極端な人ではIDEやオーサリングソフトを指して「あんな重いものは使わない」と一蹴してしまっている例も目にしました。
開発はエディタで十分でWebオーサリングソフトなんかいらないという風にとれますが、そういう方々はフロントエンドデザインの調整はブラウザで表示してエディタで修正してを繰り返して行なって開発しているんでしょうか?
ブラウザによって用意されている開発者用ツール(ChromeのDeveloper Toolsなど)とエディタだけで事足りるということなのでしょうか?

当然、Webオーサリングソフト(例えばDreamweaver)を使ってWeb開発している方々が多数いるのもわかりますが、
Dreamweaverを使っていて、同時にVimやEmacsを使って開発している人をあまり見かけないですし住み分けというか業界としてどういうのがスタンダードなのか混乱しています。

私は業務でも基幹系システム開発(WindowsForm)が中心でWeb系の開発経験が無く、個人学習のレベルでもIDEを利用した開発の経験しかなく、経験上ロジック部分はエディタだけでも事足りるかもしれませんがフロントエンドデザイン部分の調整はIDEのデザイナ機能を日常的に利用していますし必須だと感じています。
確かにIDEは重たいですが、全く使わないというのは非現実的だと思っています。

質問内容がとてもフワッとしていて、「一つの答えや一般論はなく要求される内容によって三者三様だろ」と云われてしまうかもしれませんがあまり議論されている例がなかったので意見が聞きたいと思い質問させてもらいました。

回答

まず個人的にはWebオーサリングツールはあまり使いません。DreamWeaverとかGoLiveとか軽く勉強した時期はありましたけど使わないですね。デザイナに任せる事が増えたせいもありますが。
ただプロト作成だったりWEBデザイナが利用する分には使って構わないと思っています。というか使たければ使えばよいと思います。最終的に(HTMLソースなどの)スタイルなどを綺麗にしておいてくれてくれれば。

WinFormsなどはコントロールが出来上がっていてそれを配置してプロパティを設定していくだけですが、Webアプリケーションの場合は配置した後でタグをJSやCSSでコントロールに仕立て上げていくという側面があるように思います。

たとえばリスト要素をテーブルやプルダウンメニューなどにしたり元々とは大きく違うものにできたりします。さらにそういったスタイルを適用する上ではタグの並びなどの条件が重要になることもあり(特にフレームワークを利用している場合)、オーサリングツールがタグを勝手に挿入する事や、position設定(絶対位置/相対位置)を勝手に設定される事、style属性が使われる事など弊害が起こる可能性があります。

簡単なHTMLの場合も、記述するのはタグとidとクラス名程度ですので

  • アイテムをドロップし、
  • マウスでプロパティウィンドウからIDプロパティを選んでidをキーボードで入力
  • マウスでプロパティウィンドウからClass Nameプロパティを選んでclass名をキーボードで入力

などとマウスとキーボードを行ったり来たりするぐらいならタグを手打ちしたほうが速いということが多々あります。さらには採用しているUIフレームワークやMVCフレームワークによっては結局タグの属性を手で編集しなければならずオーサリングツールを使う旨みが無い事も。

調整時に関しては、Sublime Text 2やWebStormなど保存したらブラウザをリロードさせてくれる機能やプラグインを持つエディタもありますので余り困らないですね。

あまりまとまっていない私見ではありますが参考までに。

編集 履歴 (0)
  • ご意見ありがとうございます。ふわっとした質問にもかかわらず回答頂けてとても嬉しいです。
    記述いただいた経験がある方からの意見はとても参考になります。今まで自分の狭い見識で多分そうなのだろうと思っていた部分がだいぶ明確になりました。これから自分でも手を動かして色々試してみます。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。