ArkTS 宣言的パラダイムの概要

HarmonyOS Next のアプリケーション開発において、ArkTS は宣言的な構文を通じてユーザーインターフェースを定義します。このアプローチにより、開発者は状態と UI の関係を明確に記述し、効率的に画面構成を組み立てることが可能になります。本稿では、コンポーネントの实例化、属性の付与、イベントハンドリング、そしてネスト構造の構築について技術的な観点から解説します。

コンポーネントの实例化

UI コンポーネントの生成は、コンストラクタの引数要件に応じて記述方法が異なります。

引数なしの实例化

必須の构造パラメータを持たないコンポーネントの場合、括弧内は空のまま使用します。例えば、区切り線を示す Divider コンポーネントは以下の通り記述できます。

Column() {
  Text('Data Row A')
  Divider()
  Text('Data Row B')
}

引数ありの实例化

构造パラメータが必要な場合、括弧内に適切な値を渡す必要があります。Image コンポーネントの src や、Text コンポーネントの content などが該当します。値の渡し方には複数のパターンがあります。

1. 文字列の直接指定
   Image('https://example.com/logo.png')
Text('Welcome Message')
2. リソース参照（$r）の利用
   多言語対応やリソース管理に適しています。
   Text($r('app.string.main_title'))
3. 引数の省略
   後続のメソッドで内容を設定する場合などに使用します。
   Text()
4. 変数および式の評価
   変数：Image(this.resourceUrl)
   式：Text(`Count: ${this.visitCount}`)

属性の連鎖設定

システムコンポーネントのスタイルや動作特性は、ドット記法によるメソッドチェーンで設定します。可読性を高めるため、各属性メソッドは改行して記述することが推奨されます。

1. 単一属性の設定
   文字サイズの変更：Text('Sample').fontSize(16)
2. 複数属性の連続設定
   Image('icon.png').alt('icon').width(80).height(80)
3. 動的な値の適用
   変数：Text('Info').fontSize(this.textSize)
   条件式：Image('pic.jpg').width(this.index % 2 === 0 ? 50 : 100)
4. 列挙型の利用
   色やフォントの太さなどは枚举型で指定可能です。
   Text('Highlight').fontColor(Color.Green).fontWeight(FontWeight.Medium)

イベントハンドリング

ユーザー操作への反応は、イベントメソッドをチェーンして定義します。this のバインド問題に注意し、適切な関数形式を選択する必要があります。

1. アロー関数の直接記述
   Button('Submit').onClick(() => { this.status = 'Submitted'; })
2. 計算を含むアロー関数
   Button('Increment').onClick(() => { this.visitCount++; })
3. クラスメソッドの利用（bind 必要）
   メソッド定義：handlePress(): void { this.visitCount++; }
   绑定：Button('Add').onClick(this.handlePress.bind(this))
   ※this の境界が曖昧になる可能性があるため、推奨されない場合があります。
4. クラスプロパティとしてのアロー関数
   定義：private logCount = () => { console.info(this.visitCount); }
   绑定：Button('Log').onClick(this.logCount)
   ※this の lexical scope が保持されるため、bind 不要で安全に使用できます。

なお、ArkTS では匿名関数内の this 解決が制限されるため、明確なスコープを持つアロー関数の使用が推奨されます。

子コンポーネントとネスト構造

Container コンポーネント（Column, Row, Stack, List など）は、 trailing closure（末尾の閉じ括弧ブロック）内に子要素の UI 記述を受け入れます。

単一コンテナの構成

Column() {
  Text('Header Title')
   .fontSize(32)
  Divider()
  Text(this.displayMessage)
   .fontSize(24)
   .fontColor(Color.Blue)
}

複数階層のネスト

レイアウト组件を組み合わせることで、複雑な画面構造を構築できます。

Column() {
  Row() {
    Image($r('app.media.thumbnail'))
     .width(120)
     .height(120)
    Button('Register')
     .onClick(() => {
        console.info('Registration started');
      })
  }
}