Civet は、 TypeScript用の現代的な CoffeeScript の一種として説明されていますが、 CoffeeScript を覚えていると、これは必ずしもお世辞ではありません。ただし、Civet をすぐに使い捨てないでください。Civet はコンパクトで最新のプログラミング言語であり、 ECMAScript言語関数へのアクセスなど、すべての重要な TypeScript 機能をより簡単に、より優れたパフォーマンスで提供することが約束されています。 Civet がごくわずかな労力で提供できる可能性を考えると、驚かれるかもしれません。
ジャコウネコとは何ですか？
Civet は CoffeeScript と比較されることが多いため、まず相違点と類似点を理解することが重要です。
-
TypeScript と同様、 CoffeeScript はJavaScript のスーパーセットであり、JavaScript には多くの欠点があることがよく知られていた時期にリリースされました。 CoffeeScript は、一時しのぎの解決策として、これら (またはその一部) を修正する必要があります。しかし、 JavaScript はさらに発展し、CoffeeScript は最終的には重要ではなくなりました。
-
一方、Civet は、TypeScript (および JavaScript) コードに最新の機能を追加するために継続的に成長および進化する付加価値レイヤーとして設計されています。 Civet の追加構文をテストしたい場合は、Vite や esbuild などを使用して、それをビルド パイプラインに追加するだけです。
Civet 開発者 Erik Demaine 氏が説明しているように、Civet は TypeScript に直接トランスパイルするため、 IDE で強力な開発時サポートを備えています。ファイルの編集中にホバー ヘルプを提供します。」
以下では、Civet 構文の最も重要な機能を見ていきます。
Civet を使用して JSX で反復処理する
Civet はJSX を処理できます。これにより、マークアップ内のタブを閉じるのをスキップし、タグをインデントするとすぐにタブを自動的に閉じることができます。また、いくつかの関連要素が自動的に上位レベルのフラグメントにバンドルされます。 JSX に関する私にとって最大の問題点の 1 つは、リストの反復処理に対処することです。典型的なアプローチは、リスト 1 に示すように、JavaScript をマークアップに直接組み込むことです。
リスト 1
{(item) => {
return (
);
}}
それは私には不必要に不格好に思えます。コレクションを反復処理するだけの場合、それが簡単かつ迅速に実行できれば便利です。リスト 2 は、Civet で作成されたリスト 1 のルーパーを示しています。
リスト 2
(item) =>
このコードは内部化がはるかに簡単です。
ジャコウネコのパイプオペレーター
Civet は、正式になる前に、提案されている TypeScript パイプ演算子を提供します。この機能の基本的な考え方: ネストや流暢なメソッドチェーンを使用しない操作の組み合わせ。かつて JavaScript に対して CoffeeScript が行っていたように、Civet では TypeScript に正式に導入される前にこの機能を使用できるようになりました。
パイプ演算子 ( |> ) を使用すると、連鎖操作を読みやすい方法で記述することができます。いくつかの操作 ( foo 、 bar 、 bazなど) を定義し、それらを一緒に使用して変数を変更したいとします。純粋な JavaScript では、 foo(bar(baz(myVar)))やbaz(myNum).bar().foo()のようなネストされた関数呼び出しが発生する可能性があります。どちらも扱いにくく、複雑さが増すにつれて解読が難しくなります。リスト 3 は、パイプ演算子を使用して Civet で同じロジックを実行する方法を示しています。
リスト 3
let foo = function(){ … }
let bar = function(){ … }
let baz = function(x){ … }
let myVar = "some value";
myVar |> baz |> bar |> foo;
Civet でのパターン マッチング
Civet で早期に導入できるもう 1 つの ECMAScript 機能は、パターン マッチングです。 TC39 提案は、ECMAScript のswitchステートメントの欠点に対処することを目的としており、非常に優れています。現在、提案書には、 switch 「大量のフットガンと曖昧な範囲」が含まれていると記載されている。また、カスタマイズオプションもありません。
match候補では新しいキーワードが導入されていますが、Civet では提案された一致の改善の多くをswitchステートメントに直接適用しています。たとえば、Civet では、リスト 4 に示すように、拡張一致を備えた文字列に切り替えることができます。
リスト 4
let s = [{type:"text", content:"foobar"},'test2'];
switch s
""
console.log "nothing"
/s+/
console.log "whitespace"
"hi"
console.log "greeting"
[{type: "text", content}, ...rest]
console.log("leading text", content)
// outputs "leading text foobar"
Civet のswitchステートメントは非常に強力で、正規表現パターンを追加するだけではありません。
ジャコウネコのループ
Civet は、ループ構文を簡素化する機能を提供します。リスト 5 は、整数の配列をループして、象限を含む新しい配列を作成します。このループは、Civet、プログラムによる JavaScript、および関数型 JavaScript の 3 つのバリアントで実行されます。
リスト 5
const list =[1,2,3,4,5,6,7];
// Civet
squares :=
for item of list
item * item
// programmatic JS
const squares = (() => {
const results = [];
for (const item of list) {
results.push(item * item);
}
return results;
})();
// functional JS
squares = list.map((x) => { return x*x }));
Civet の単一引数関数
Civet には、 (x) => { }を置き換える「単一引数関数の省略記法」が含まれています。リスト 6 は、多数の例と、それらに相当する一般的な JavaScript を示しています。
リスト 6
let x = [{name:'test123'},{name:'Another name'}];
console.log(x.map .name);
console.log(x.map &.name?.slice(0,4));
console.log(x.map((x) => x.name));
console.log(x.map((x) => { return x.name?.slice(0, 4)}));
// output is the same in both groups:
[ "test123", "Another name" ]
[ "test", "Anot" ]
ここでは、括弧や矢印を使用せずに単一の関数の引数を宣言する方法を示します。 2 番目の例のアンパサンド記号を使用すると、引数への参照が可能になります。
Civet の配列と文字列
Civet には、配列と文字列を分割するためのいくつかのショートカットが付属しています。これにより、配列内の関数の引数のように角括弧を使用できるようになります。引数はご想像のとおり、 slice()に渡されます。たとえば、リスト 7 では、文字列に対して複数のスライス操作を実行します。括弧のさらなる利点に注目してください。
リスト 7
let s = "Words are flowing out like endless rain";
console.log(s[10..16]); // outputs "flowing"
// equivalent to console.log(s.slice(10, 1 + 16 || 1 / 0));
console.log(s[-4..]); // output "rain"
// equivalent to console.log(s.slice(-4));
console.log(s[...5]); // outputs "Words"
// equivalent to console.log(s.slice(0, 5));
構成
Civet には、微調整のためのあらゆる構成オプションが含まれています。これは、プロジェクト、特に CoffeeScript を使用するプロジェクトを移行するときに役立ちます。詳細については、 こちらをご覧ください。
ジャコウネコのリソース
この記事では Civet の基本の一部のみを説明しましたが、他にも発見すべきことはたくさんあります。たとえば次のとおりです。
-
ジャコウネコのチェットシート
Civet は主にアイデア ラボとして役立ち、ECMAScript 仕様に提案された新機能を実験するための優れたツールとして役立ちます。 (FM)