アイデアを形にし、新しい価値を生み出すプログラム開発は、とても楽しいものです。仲間たちと「まだ誰も実現していない新しい仕組み」を語り合い、まだスタートすらしていないプロジェクトの売上のシミュレーションをするのは、これから起こる未来への希望が感じられるプロセスです。
成功のポイントは『実現するスピード』にある
ここで鍵となるのは「スピード」です。素早くプロトタイプができてしまえば、1番乗りできるかもしれないし、「誰かがやってた」と、自分たちが気づいてしまう前に、よりいい感じのサービスができてしまうこともあります。
そして、それが新しい分野やテーマであれば、そのジャンルの業界標準になることもあります。このような結果を得るためには、何よりも思いついたことを迅速に形にできる技術を持っていることが大切です。
そこで、今日は「本職エンジニアが日々現場で使っているプログラミングの作業効率を徹底的に上げる方法」を教えます。
ウェブサービス開発をするときに作業効率をあげる4つのポイント
ウェブサービス開発やアプリ開発などのプログラミングをするときに、開発を徹底的に効率化するためには、4つのポイントがあります。
- プログラミング以前の開発環境整備を迅速にする
- フレームワークを利用する
- Zen-Codingでコーディングを効率化する
- エディタに隠されたパワフルな機能を再確認する
【Tips.1】プログラミング以前の環境整備を迅速にする
なにごとも、始めてしまえば前に進むもの。最初の一歩が大切です。プログラミングにすぐに取りかかるため、Webサービス作成で必須となるサーバの準備は迅速に済ませてしまいましょう。
サーバの準備は「ボタン一つで終わらせる」のが理想的です。
ただでさえ開発リソースが少なく、情熱が保てる時間も限れた状況のときに、サーバ環境の準備で何日も使うのは得策ではありません。
サーバ環境構築は徹底的に効率化し、あなたのアイデアを実現する実際のアプリケーション開発に時間と情熱を注ぎましょう。サーバ環境構築でおすすめの方法は、cPanelやPLESKなど、バーチャルサーバーが簡単に作成できる管理パネルのあるレンタルサーバーを使うことです。
プロトタイプ作成用のドメインを取得しておき、「サブドメイン(sub1.domain.com、sub2.domain.comなど)」でアカウントを作る方法が便利です。
この方法を使うと、管理画面からサブドメインを指定して「ボタンを押すだけ」でテストサーバーを作成・公開することができます。
【Tips.2】フレームワークを利用する
「同じ車輪を二度発明しない。」
これはプログラマやエンジニアが日々の仕事を徹底的に効率化するために意識していることで、車輪の再発明と呼ばれています。過去の先人たちが創ってくれた資産はありがたく利用しましょう。
アイザック・ニュートンが述べたように、「巨人の肩に乗ること」がアイデアを実現するためのチカラをあなたに与えてくれます。
現在では、HTML、CSS、JavaScriptなどのフロントエンドの開発や、Perl,PHP,Ruby,Pythonと言ったサーバサイドの開発においても、各種言語におけるフレームワークがたくさんオープンソースで公開されています。
フロントエンドのフレームワークでは、モバイルファースト、レスポンシブWebデザインなど、標準で現在のWeb環境で必須となる技術に対応しているので、ゼロから作るよりも格段に開発効率を高めることができます。
フレームワークにはそれぞれの特徴があり、相応の学習コストがかかりますが、その学習コスト以上に見合う価値があります。
少しだけ学習時間をとってお気に入りのフレームワーク学び、「自分用の開発テンプレート」を作成しておけば、アイデアが思いついた瞬間に実際にコーディングを始めることができるようになります。
開発フレームワークには以下の様なものがありますので、必要に応じて適宜試してみてください。
【おすすめのWebアプリケーション開発フレームワーク】
- 【HTML5&CSS】Bootstrap
- 【HTML5&CSS】Foundation
- 【HTML5&CSS】Pure
- 【JavaScript】AngularJS
- 【JavaScript】Knockout.js
- 【JavaScript】Backbone.js
- 【サーバサイド】Ruby on Rails
- 【サーバサイド】Meteor
【Tips.3】Zen-Codingでコーディングを効率化する
プログラムは楽しい作業ですが、同じようなコードを何度も書かなくてはならないのも事実。
Webアプリケーション開発ならHTMLやCSSを書くこともあります。HTMLやCSSのコーディングに便利で入力の大幅な効率化が図れるのが、「Zen-Coding」です(現在はEmmet)。
これは、
div#contents ul.menu>li*3
と書くと、
<div id="contents">
<ul class="menu">
<li></li>
<li></li>
<li></li>
</ul>
</div>
のように一気にテキストを変換してくれる仕組みです。
多くはエディタのマクロやプラグインとして実現されており、書くべきHTMLが明確な場合は構造的に書けてとても便利です。vimや秀丸エディタをはじめ、多くのテキストエディタがZen-Codingプラグインに対応しています。
また、Zen-Codingは「ちょっとした記述」にも活躍します。たとえば、先にHTML5やCSSフレームワークをいくつか紹介しましたが、
<link rel=・・・>
などというコードを書く必要があるとき、Zen-Codingでは
link:css
と書くだけでボタン一つで
<link rel="stylesheet" type="text/css" href=".css">
に変換できます。
とても小さなことに感じられるかもしれませんが、これが積み重なっていくと大きな違いを生むのです。
Zen-Codingに対応しているエディタとしては、下記のようなものがあります。こちらもお好みに合わせてエディタを選んで下さい。
【Zen-Codingに対応したエディタ】
- Eclipse
- Aptana Studio
- EmEditor
- Dreamweaver
- 秀丸エディタ
- WordPress
- Vim
- Emacs
- Textmate
- Sublime Text
【Tips.4】エディタに隠されたパワフルな機能を再確認する
最後に、いま一度、自分が毎日使っているエディタの機能をもう一度おさらいすることをおすすめします。
エディタ操作の基本となる文字の検索、置換はもちろんですが、言語の文法チェックや、不足する括弧の警告やキーワードごとに色分けするシンタックスハイライトなどテキストエディタにはいろいろな機能があります。
また、「キーボードマクロ」を使えば、キー入力した通りの操作をエディタが記憶してボタン一つでそれを再現できます。さきほどのZen-Codingもエディタのプラグインです。
エディタにはそれぞれの開発者がこめた設計思想が隠されています。きっと、あなたが慣れ親しんだエディタにもまだ気づいていない機能が隠されていますよ、きっと!
少しずつ改善を積み重ねて、アイデアを実現するスピードを高めていきましょう。