creatersnest112

コーディングのスピードを上げるために使っているツールやアプリまとめ


便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになります。
細かい作業は便利なツールで作業時間の短縮をして効率よくすすめましょう。

作業スピードが上がれば、細かい機能やデバッグにもしっかり時間をとれるようになれるはずですね。
効率化、コーディングのスピードを上げるたのツールやアプリをご紹介します。

 

 

Emmet(Zen-coding)

EmmetはHTMLやCSSをショートカットで簡略化してコーディングができるライブラリです。
例えばよくあるナビゲーションを作成するとして、

これを展開させると

となり、一気にコーディングでき、非常に便利です。
liに*5とついていますが、タグ名の後ろに*数字を入れることで、
そのタグを指定した数字分繰り返すということができます。
Dreamweaverとの連携が可能であったり、ショートカットで展開も可能で、コーディングをする上で、是非使いこなしたいツールです。

 

フォルダ生成

Instant Blueprint

Instant Blueprint
http://instantblueprint.com/

プロジェクト名を入力し、使用するJavaScriptのライブラリなどを選択するだけで、簡単にWebプロジェクトを作成できるWebツールです。
CSS, images, JSなどの主要フォルダやJavaScriptライブラリを含んだフォルダを自動で作成してくれます。

 

 

オンラインスニペット

Code Bank
Code Bank

http://programs.edchipman.ca/applications/code-bank/
簡単に個人でコードを保存、管理できるAdobe AIR製のオープンソース・ソフトウェアのスニペット管理ツール。
HTML、CSS、 JavaScript、XML、 ActionScript、 Flex、 Java、 Perl、 PHP、 SQLなどさまざまな言語に対応したコードが管理できます。

 

CodePad

CodePad

http://codepad.co/
CodePadはコードを保存するには登録(招待制)が必要ですが、コードを見たりダウンロードするのは登録無しでできるオンラインのスニペットツールです。
コーディングに悩んだときに参考になります。

 

Snippet Repo

Snippet Repo
http://snippetrepo.com/

コードやスニペットを共有することができる開発者のためのサイトです。
プログラミング言語ごとにタグで分類されており、
眺めているだけでも勉強になります。

 

CSSPop

CSSPop
http://www.csspop.com/

CSSスニペット集を閲覧したり、自分自身で作成し公開することができます。
人気順、カテゴリ別で検索することもできるので便利です。

 

jsdo.it – Share JavaScript, HTML5 and CSS

jsdo.it – Share JavaScript, HTML5 and CSS
http://jsdo.it/

ソースを管理してブログやjsdoサイト上で公開することもできます。
非公開の設定も可能です。
オンラインエディターも使いやすくプレビューができるので便利なサイトです。
また共有されているコードもあるので勉強になります。

 

CSSプリプロセッサ

 

SCSS

SCSS
http://sass-lang.com/

Ruby環境が必要ですが、従来のCSSにプログラミング的要素を加えた形でCSSファイルを作成出来るので、
作業効率を高め、コーディングスピードを上げることができます。
セレクタのネスト(入れ子)、親セレクターの参照、変数などが使用できます。
条件分岐や繰り返しによる柔軟な制御が可能で、日本語のドキュメントも多いです。

 

CSS 2 SASS/SCSS CONVERTER

CSS 2 SASS/SCSS CONVERTER
http://css2sass.herokuapp.com/

cssをsassに変更できます。
既存のcssをsass/scssで書きたい場合や、一部の箇所をsass/scssに変更するのにとても便利です。
シンプルで使いやすい画面も魅力です。

 

LESS

LESS
http://lesscss.org/

SCSSと同じようなことができますが、非常にシンプルな記法で、
JavaScriptを利用したクライアントサイドでの動的なCSSの生成ができるのが特徴です。
技術的な敷居を感じている場合は、LESSの方が取り組みやすいでしょう。

 

デバッグ・チェック

Web Developer

Web Developer
http://chrispederick.com/work/web-developer/
コーディングに使用しているソフトの関係で、ブラウザで表示確認をしながらコーディングした方が早い場合もあります。
また、各ブラウザで表示確認をし、修正などを加える場合でもブラウザの拡張機能「Web Developer」を使えばより簡単に確認、修正が行えます。
ChromeやSafariではデフォルトでWebインスペクタがついていますが、コーディングにもデバッグを行う上でも「Web Developer」は非常に役に立ちます。
Chiromeの拡張機能になりますが、PerfectPixel by WellDoneCodeも使いやすいです。
ブラウザに画像を重ねてチェックが出来ます。

 

 

ジェネレーター

CSS3 GENERATOR
CSS3 GENERATOR

http://www.css3.me/
角丸、グラデーションを一括作成できます。
簡単に作成できるので、一つ持っていて助かるサイトです。

 

CSS3 Button Generator

CSS3 Button Generator
http://css3button.net/

CSS3 GENERATORでは物足りない場合、CSS3 Button Generatorがお勧めです
テキストシャドウの指定など、少し細かい所までこだわることができます。

 

Sciweavers

Sciweavers
http://www.sciweavers.org/i2style

クリックしたとの動作まで作成してくれるジェネレーターです。
角丸や少し変わったデザインのもの、更にシンボルの選択まででき、
非常に便利なジェネレーターです。

 

CSS3 Generator

CSS3 Generator
http://css3generator.com/

CSS3でどうやって書くのか、ド忘れしてしまった時、さっと調べたい時などに使用できます。
タグの対応ブラウザも書いてあり、便利です。

 

CSS GRADIENT ANIMATOR

CSS GRADIENT ANIMATOR
http://www.gradient-animator.com/

グラデーションをアニメーションさせるジェネレーターです。
このような、少し手間がかかるものを、
さっとジェネレーターなどで作成できれば、効率が上がります。

 

OneClickCSS

OneClickCSS
http://css.miugle.info/

タグにclass、idを振ったhtmlコードを書いた後に
サイトにソースをコピペし、クリックするだけで簡単にCSSを作成してくれます。
sassにも対応しており、

 

その他

 

CodePen

CodePen
http://codepen.io/

ブラウザ上で、すぐにWebプログラミングが可能です。
プレビュー機能で確認できるので便利です。
ブラウザチェックも「PC・スマホ」を対応しています。

 

Cloud9

Cloud9
https://c9.io/

非常にパワフルな高機能エディタ必要となる開発環境をWeb上に構築可能です。
ターミナル機能も搭載されたオールインワン型のエディタと言えます。

 

KOJIKA17

KOJIKA17
http://kojika17.com/2012/06/dummy-text-generate-for-css3.html

ダミーテキストを:beforeで出力する方法を紹介しているサイトです。
このような方法をテンプレにしておけば、
タイプするひと手間が省けます。

 

Dynamic Dummy Image Generator

11111

http://dummyimage.com/
後々変更するダミーの画像を書き出さなくても良くなります。
URLが生成されるので、srcに記述することができます。
画像を変更する場合でも、置換が楽になります。

 

まとめ

コーディングをしていても、以前ほど早くなっていると感じる時こそ、自分の方法を改善、解決する時です。
コーディングスピードが上がれば、空いた時間に勉強したり、もっと作業が進められたり、効率化を図るとこはとても重要ですね。
是非お試しください。

 

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticlePhotoshopで透明もベタ塗りも表現できるオーバーレイとは?どうやって使うの?