*

MacでSublime Text 2を利用してCoffeeScriptを書く環境の構築

公開日: : 最終更新日:2013/12/10 CoffeeScript ,


スポンサードリンク



以前のWindows環境では、TitaniumもTitanium StudioではなくCLI環境を利用していました。
言語もJavaScriptではなくCoffeeScriptを利用しており、
CoffeeScriptを書くのに「Sublime Text 2」を利用していました。

新環境のMac miniでも同じように「Sublime Text 2」を利用しようと思い、
「Sublime Text 2」を導入しました。
その時の作業をまとめた物が本エントリーとなります。

今回の作業手順は以下のようになります。

  1. Sublime Text 2のインストールする。
  2. Sublime Text 2でCoffeeScriptを書くための設定変更を行う。
  3. Sublime Text 2で簡単なCoffeeScriptを書いてみる。

1 Sublime Text 2のインストールする。

http://www.sublimetext.com/にアクセスし「Download for OS X」をクリックし、ダウンロード後にインストールするだけです。

スクリーンショット 2013-12-10 15.53.01

2 Sublime Text 2でCoffeeScriptを書くための設定変更を行う。

2.1 CoffeeScriptのインストール

Sublime Textの設定とは直接関係はないのですが、CoffeeScriptのインストールを行います。node.jsの環境が作成できている場合は
ターミナルを起動し

を実行するだけでインストールできます。

2.2 Sublime Text 2の設定

2.2.1 Package Controlの有効化
Sublime Text 2のメニューの「View」→「Show Console」をクリックします。
するとコンソール領域が表示されますので、以下の画像の赤枠部分に

以下のコマンドを入力しエンターボタンをクリックします。

以下の画面のように
「Please restart Sublime Text to finish installation」
と表示さればOKですのでSublime Text 2を再起動します。

2.2.2 Packageのインストール

Sublime Text 2のメニューから「Preferences」→「Package Setting」→「Package Contlor」→「Settings User」を選択します。
スクリーンショット 2013-12-10 16.48.59

表示されたファイルを以下の内容に変更し保存します。

PackageControlを呼び出し
スクリーンショット 2013-12-10 16.52.00

「Upgrade/Overwrite All Packages」と入力しエンターボタンを押します。
スクリーンショット 2013-12-10 16.53.12
処理が終了したらSublimeを再起動します。

2.2.3 ファイル保存時のビルド設定

後は、保存時に自動でビルドする設定を行うだけです。
「Performances」→「Packages Settings」→「SublimeOnSaveBuild」→「Setting – User」をクリックします。
スクリーンショット 2013-12-10 16.54.33

開いたファイルを以下の内容変更し保存します。

/Users/ログインユーザ名/Library/Application Support/Sublime Text 2/Packages/CoffeeScript
に存在するCoffeeScript.sublime-buildを以下の内容に変更します。

以上で環境構築は終了です。

3 Sublime Text 2で簡単なCoffeeScriptを書いてみる。

簡単なCoffeeScriptを書いてJavaScriptに変換されることを確認します。

新規CoffeeScriptファイルの作成

Sublime Text 2のメニューの「File」→「New File」をクリックしてください。
スクリーンショット 2013-12-10 16.55.53

新規ファイルを開いた状態になりますので内容を以下のように入力してください。

入力後にファイル名を指定して保存します。
Sublime Text 2のメニューの「File」→「Save As…」をクリックして任意の場所にhello.coffeeのファイル名で保存してください。保存と同時に同じフォルダにhello.jsが作成されるはずです。

作成されたhello.jsの内容は以下の通りです。

 

以上でMacでSublime Text 2を利用してCoffeeScriptを書く環境の構築が完了しました。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Titanium Mobile応用【JasmineとTiShadowでBDD編:数値ボタンの1回押し処理】

前回の続きで、「BDD編その2」です。 BDD編その1をまずはご参照ください。 今後のBDD

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:15桁入力処理】

前回の続きで、「BDD編その3」です。 「BDD編その1」 「BDD編その2」をまずはご参照くだ

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:最大桁入力と閾値テスト】

前回の続きで、「BDD編その4」 「BDD編その1」と 「BDD編その2」 「BDD編その3」

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:対象アプリ説明】

本格的にTitanium Mobile CLIを利用してBDDを行いたいと思います。 まずは、計算

記事を読む

no image

Titanium Mobile応用【JasmineとTiShadowでBDD編:テストが時々失敗する理由】

前回の最後に残った問題点の解決方法が分かりましたので 「BDD編その5」として記載させていただきま

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑