1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

子供の想像力を伸ばしアイデアを形にする小学生向けプログラミング教室「プロスタキッズ」

JavaScriptをもっとシンプルに!CoffeeScriptを使ってみよう

Pocket

はじめに

JavaScriptは使いやすいですか?

中にはJavaScriptに問題を感じている方もいるでしょう。
JavaScriptは、その生い立ちからいくつかの問題を抱えており、それを解決するためにAltJS言語が生み出されました。
現在ではAltJS言語は複数ありますが、今回は「CoffeeScript」を紹介します。

この記事では、JavaScriptプログラマーの方のためにCoffeeScriptについてお伝えしていきます。
JavaScriptに問題を感じているなら、ぜひCoffeeScriptを使ってみてください。

CoffeeScriptってどんな言語なの?

CoffeeScriptは、AltJS言語のひとつで最終的にJavaScriptにコンパイル(変換)して実行します。

つまり、JavaScriptを別の言語で記述できるというわけです。

CoffeeScriptの大きな特徴は、その構文にあります。
JavaScriptでは波括弧を使ってブロックを表しますが、CoffeeScriptではインデントを使います。
波括弧のために余計な行を使う必要がなく、これだけでもコードがかなりスッキリします。

また、行末のセミコロンも不要です。
自動的に行末が終わりと判断されます。
なお、一行に複数行をまとめたい場合には従来通りセミコロンを使うことが可能です。

CoffeeScriptの構文はJavaScriptとかなり異なっており、初めてみた方はまったく別の言語だという印象を受けるでしょう。
どちらかというと関数型言語寄りの構文になっており、長ったらしいfunctionキーワードも短いアロー演算子(->)に置き換えられています。

JavaScriptと比べてコード量を3分の1程度に抑えられるとしており、かなりのコード量を削減できることが期待できるでしょう。
既存のJavaScriptライブラリなどと共存できるため、移行もスムーズに行なえます。

CoffeeScriptの特徴的な機能

変数の自動宣言

CoffeeScriptでは未割り当ての変数に代入するだけで、対象の変数の宣言を自動的に行ってくれます。
このため、いちいちvarキーワードで変数を宣言する必要はありません。
もちろん、関数スコープに従って適切な位置で宣言してくれるので、変数スコープに起因するバグの心配もいりません。

if文の拡張

CoffeeScriptのif文は後置ifもサポートしており、単文であれば1行でシンプルにかけます。
また、3項演算子(?:)のシンタックスシュガーとしてif文を使うこともできます。

カッコの省略

構文上の解釈に問題がない場所であれば、カッコ(())が省略できます。
たとえば、関数呼出し時の引数を囲うカッコなどです。
関数名に続けてカッコなしで引数を記述できます。
複数の引数がある場合には通常通りカンマで区切ります。

ただし、引数がない場合や関数をネストする場合はうまく解釈できなくなってしまうため、カッコを省略できません。

クラス

今ではJavaScriptもクラス構文をサポートしていますが、クロスブラウザの都合上使用できない場合もあります。

その点、CoffeeScriptであれば、クラスを使ってもクラス構文を使わないJavaScriptにコンパイルできるため、クロスブラウザ問題も起きません。

プロトタイプアクセス

JavaScriptでは、クラスを拡張するためにプロトタイプ(prototype)にアクセスする場合があります。
このプロパティ名は長いため、頻繁に記述するのは面倒です。

CoffeeScriptでは、クラス名の後に「::」をつけるだけでプロトタイプにアクセスできます。

複数代入

CoffeeScriptでは、1行の代入文で複数の変数に代入することができます。
たとえば、配列の要素を別々の変数に割り当てることがひとつの代入文で可能です。
これはオブジェクトにも適用できますので、オブジェクトの要素を複数の変数に代入することも1行でできます。

この他にもCoffeeScriptにはたくさんの機能がありますので、公式ページをチェックしてみましょう。

すぐ試したいならオンラインエディターがオススメ!

CoffeeScriptの公式サイトには、すぐにCoffeeScriptが試せるオンラインエディターが備えられています。
記述したCoffeeScriptをリアルタイムにJavaScriptにコンパイルして表示してくれるため、最終的にどのようなJavaScriptが実行されるのかが簡単にわかります。
CoffeeScriptの学習にも役立ちますよ。

公式サイト:http://coffeescript.org/

まとめ

CoffeeScriptを使えば、ごちゃごちゃしたJavaScriptもすっきりシンプルになります。
CoffeeScript独自の機能を使えば、コード行数も削減でき、わかりやすいコードを記述できるでしょう。
すべてをCoffeeScriptにする必要はなく、これまで使ってきたJavaScriptと相互運用できますので、過去の資産も有効活用できます。

まずは、手っ取り早く試せるオンラインエディターでCoffeeScriptを試してみましょう。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

プログラミングで挫折しそうなら、現役エンジニアにマンツーマンで相談してみませんか?オンラインのプログラミングスクール「TechAcademy」のメンターが対応。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る