ラベル aptana の投稿を表示しています。 すべての投稿を表示
ラベル aptana の投稿を表示しています。 すべての投稿を表示

2009年10月6日火曜日

Aptana で関数名を補完するときに、関数の説明を表示 – JavaScript でコードアシスト

1. JavaScript で関数名を補完してほしい

Aptana のような IDE を使っていた、一番助かる機能は、関数名を覚えておかなくて済むこと。

091006-002

JavaScript や Ruby のような動的な型付けの言語を、シンプルなテキストエディタ一本でガシガシと書く人もいる。自分は、そんなことはとても無理。メジャーな関数名ですら、すぐに忘れてしまう。 (+_+) IDE から入った世代なので、IDE のサポートなしではコードを書けない。

Aptana で関数名を補完してくれる機能を、コードアシストと呼ぶ。

Aptanaの使い方解説 によると、

コードアシスト機能によって、コードの入力中にポップアップウインドウが表示され、入力を補完してくれます。…

コードアシストで自分のコードを利用するには、AptanaのScriptDocツールに記録される必要があります。

 

2. 自分で定義した関数もコードアシストしてくれる

自分で定義した関数名を補完してもらうには、関数の説明の冒頭に、

/**

を記述する。アスタリスクを一つ余分に書くと覚えておく。

Setting up Code Assist using ScriptDoc – AptanaDocumenting your code using ScriptDoc によると、

Enclose each documentation block within a slash-asterisk-asterisk (/**) and asterisk-slash (*/) comment set.

詳細は、以下を参照。

 

関数を記述する例

例えば、引数を加算する関数の場合なら、

/**
 * 引数を加算した結果を返す
 * @param {Number} a 
 * @param {Number} b
 * @return {Number}
 */
var add = function(a, b){
    return a + b;
};

これにより、以下のように補完してくれる。

091006-004

 

まとめ

とりあえず、最低限覚えておくことは以下の通り。

  1. コメントの最初を /** で始める
  2. はじめは全体の説明
  3. 書き方の形式
    • タグ名 {型} 仮引数 説明
  4. タグの種類
    • @param : 引数の説明
    • @return : 返り値

2009年10月3日土曜日

Eclipse で正規表現によるテキストの置換 – Meadow と比較して

コメントアウトするとき

Meadow (Emacs) で指定した範囲を正規表現で置換したい場合、

  1. 範囲の選択
  2. M-x replace-regexp

により、やや癖のある正規表現を入力をして置換。コードをコメントアウトしたいときにこの操作を多用。

Eclipse をベースにした IDE を使っていると、コードをコメントアウトする操作は、

  1. 範囲の選択
  2. Ctrl + /

Meadow をカスタマイズして使いこなせないので、Eclipse は楽だなと感じる。

 

Eclipse の検索と置換で正規表現を利用

なぜかわからないけれど、Meadow ではちょっとした修正でも replace-regexp を使って置換しようという気になる。これに対して、Eclipse ではちょっとした修正なら手動でチョコチョコと手直しするのが習慣化していた。しかも、それに疑問も感じずに。。 (+_+)

さすがに面倒になってきたので、Eclipse でも正規表現でテキストの修正ができるように、操作を手に馴染ませることにした。

例えば、以下のコードの 2 ~ 4 行目を

                    with (_area.style) {
                        cssFloat = "right";
                        width = "35%";
                        padding = "10px";
                    }

次のように変換したいとする。

                    area.style.cssFloat = "right";
                    area.style.width = "35%";
                    area.style.padding = "10px";
方法

091003-005.pngまずは、Ctrl + F で 検索と置換のダイアログを表示させる。

正規表現で置換をするために、Options > Regular expressions をチェック。ただし、マウスは使いたくないので、Regular expressions の下線のある文字に注目して、Alt + x でチェック。手が思考に対応して自然に動いてくれるようにしたいので、なるべくキーボード操作で終えるように試みる。

選択した範囲のみ置換がされるために、Scope > Selected Lines もチェック。

ショートカットを覚えるのには、例えば Regular expressions なら、頭の中で発音するときに `エクスプレッション’ の太文字のところを強調していれば、そのうち慣れるかも。

正規表現モードにすると、Find と Replace With フィールドで Ctrl + Space で正規表現の候補を表示してくれる。候補を閉じたい場合は Esc 。もしくは Find フィールドから Replace With フィールドに移りたいなら、候補が表示されていても Alt + e でフォーカスを移動できる。

 

後は正規表現。

  • Find : (^\s*)(.+)
  • Replace With: $1area.style.$2

Find なら Alt + n, 置換しながら検索するなら Alt + d

Meadow の replace-regexp と違い、素直に正規表現を書けるのがうれしい。 ^^ 細かな正規表現のルールを覚えなくても、グループ化と後方参照でそこそこなんとかなりそう。

 

Meadow (Emacs) の場合

上例を Meadow でするなら `\’ の入力は、

replace-regexpでは,グループ化やバックスラッシュそのものの入力は

"\( \)"
\\
(Emacsの正規表現,re-builderとreplace-regexpの違い - yaottiの日記 - Emacsグループ より)

後方参照は、GNU Emacsマニュアル: 探索と置換 によると、

newstringの中の`\d'(dは数字)は、 regexpの中のd番目の括弧のグループ化部分に一致した部分を表します。置き換えるテキスト内に`\'を含めるには、 `\\'と入力する必要があります。

よって、次のように入力する。

  1. replace-regexp
  2. \(^ *\)\(.+\)
  3. \1_area.\2

グループ化の括弧を \ でエスケープしたり、後方参照が $1 ではなくて \1 のように書くことに注意と。

 

関連記事

2009年9月27日日曜日

行頭のタブを空白(スペース)に変換 - サクラエディタ, Notepad++, Eclipse, Emacs での使い方

1. ソースコードのインデントには タブ or 空白 ?

ソースコードにはタブよりも、空白を使う方が適している。

ただし、インデントはタブかホワイトスペースか? という議論がある。

[ThinkIT] 第5回:フォーマットに関するコーディング規約 (3/4) によると、

インデントにタブを使っていると、エディタの設定によって見た目が異なり、可読性が落ちる場合がありますので、タブのかわりに空白文字を使うとよいでしょう。この場合の空白文字の個数ですが、4文字にすると見やすくなります。

 

a. タブのほうが適切だという意見

これに対して、mieki256's diary - Rubyコーディング規約 には、空白よりもタブ派という意見が 2 つ引用されている。

_ インデント - ただのにっき (2003-02-13) :

はっきりいって、空白を使った固定インデントにはどうしても馴染めないのだよ。インデント幅なんて、見る人がいちばん気持ちがいい値に合わせられた方がいいに決まってるじゃないか。

_最速インターフェース研究会 :: タブとスペースと萌ディタの話

タブの幅を自分好みにしたいっていうと解決策は色々あるんだろうけど、一番手っ取り早いのはタブを使うことなんじゃないの?タブを使ってインデントしてればエディタの設定だけでファイルの内容に手を加えずに見た目だけ変えられるから楽。

コメント: もうやらなくていい昔のコーディングテクニックあれこれ – スラッシュドット・ジャパン には、

ソースコードにおけるインデントとは、プログラムの文書構造を視覚的に表現するための手段です。視覚的に表現できれば何でも良いのでタブでも空白4 文字でも8文字でも本来であれば問題ありません。しかしながら多くの場合、繰り返し流用や保守作業を続けていくと、空白で表現されたインデントは崩れやすく、コードブロックの判別が難しくなる傾向があります。6文字や7文字といった切りの悪い数の空白のインデントが散在し始めると、どこまでを一つのブロックと判断してよいのか分からなくなり、可読性を大きく損ないます。

タブの場合は、一文字でインデント一つを表現できるので保守性が向上します。また、タブが一文字削除されるとインデント一つ分大きく変動するので異常を即座に見つけやすいという利点もあります。

 

b. タブが問題となるのはパッチ

タブの問題点について言及している。

皆さんの多くがタブを使いがちなのは知っていますが、 実際問題、分散開発環境においては、cvs コミットメッセージがメーリングリストに送られるとき、 タブを使った場合、ほとんど読めないという事があるのです。

http://www.ingrid.org/jajakarta/cactus/xdoc/coding_conventions.xml  より)

404 Blog Not Found:タブのスペース化はタブ幅よりも重要である

君たちは、patchのことをきれいさぱーり忘れている。

人のコードを直したり、人にコードを直してもらったりしなくてもいいというのであれば、君たちのいい分ももっともだ。しかし、人とコードをやりとりする時にpatchをやりとりする場合、tabは頭が痛い以外の何者でもない。

 

2. サクラエディでタブを空白に変換

ブログにソースコードを貼るとき、タブを空白に変換する必要がある。

サクラエディタでは、

  • メニューより「変換 > TAB→空白

を選択する。

 

3. Notepad++ でタブを空白に変換。デフォルトでタブを空白に。

a. 既存のタブを空白へ変換する

Notepad++ で、既に作成してある文書内のタブを空白に変換したい場合は、変換したい部分を選択した後、

  • メニューより、TextFX > TextFX Edit > Leading space to tabs or to spaces

を選択する。

090927-002.png

 

b. 新規に作成する文書のための環境設定

新たに文章を作成したときに、タブを入力したら、空白を入力して欲しい場合、

  • メニューより、設定 > 環境設定 > エディット画面 > Tab Setting

Replace by space にチェックを付ける。

090927-001.png

追記 (2010.2.26) : 上記の「エディット画面」に Tab Setting がない場合、

  • 言語メニュー」のタブ設定

の「スペース置換」にチェックを入れる。

img07-02-2010[1]

 

4. Eclipse, Aptana でタブを空白に設定

Eclipse, Aptana の場合、

  1. メニューより Window > Preferences...
  2. Aptana > Editors > General > Tab Insertion

において、Use spaces を選択する。

091005-001

 

5. Emacs, Meadow, xyzzy でタブを空白に変換

  1. 変換したい範囲を選択する。
    • 変換したい範囲の先頭 で Ctrl + Space
    • 変換したい範囲の最後までカーソルを移動する
  2. M-x untabify

逆に空白をタブにしたい場合は、範囲を選択しておいて M-x tabify 。

 

参考

2008年5月1日木曜日

JavaScript の開発環境を整える

JavaScrip の開発環境を整えようと思う。エディタ + ブラウザでもいいけれど、できれば便利な IDE を利用したい。

 

様々なツール

ブラウザ上

JavaScrip をお手軽に実行する環境として、学習するのに最適。

Firefox のアドオン

JavaScript のデバッグもできる。既存のサイトの分析をするのにも便利。

Eclipse ベース

 

aptana のインストール

今回は、 前回インストールした PDT に、 Eclipse プラグインとして aptana をインストールすることにした。

  1. http://www.aptana.com/studio/download より、 Eclipse Plugin を選択し、Download ボタンを押す。
  2. インストールの方法が表示されるので、それに従う。
  3. Eclipse において、Help > Software Updates > Find and Install 。
  4. Search for new fiatures to install を選択。
  5. New Remote Site ボタンを押し、表示されるダイアログの Name に適当な名前 (aptana にした) 、 URL に、先ほど Download ボタンを押した後に表示された URL (http://update.aptana.com/update/3.2/) を入力。

後は、 Eclipse の指示に従って、インストールを進める。

 

参考