【動画レポ】TypeScriptでUI5開発を始めよう〜【SAP Inside Track Tokyo 2024】Week5 | Dev & Automation
今回はSAPさんのユーザーコミュニティであるChillSAPさんの年次イベント「SAP Inside Track Tokyo 2024」のアーカイブ動画「【SAP Inside Track Tokyo 2024】Week5 | Dev & Automation」からセッションを取り上げて勉強してみます。
セッション講師
安竹 みおさん
役割 BTP S/4HANAなどの技術調査、プロジェクト支援
TypeScriptとは
JavaScriptにTypes（静的な型付け）を加えたもの
〜存在しないメソッドやプロパティを使うとコーディング時点でエラー
・型の定義と型の指定がある
・TypeScriptをサポートするエディタを使う
オートコンプリート／チェック
UI5でのTypeScript開発
SAP UI5
・Version1.116.0からサポートスタート
SAP S/4HANA2023(SP91)〜
SAP Build Work Zoneはすでに対応
・TypeScript版のウォークスルー（チュートリアル）も登場
サポートされるといううことは
・型の定義が提供される
・TypeScriptをJavaScriptに変換する仕組みが提供される
これまでと変わること
ES6に対応した書き方
TypeScript二よるチェックに対応した書き方
・メソッドの引数は型を指定しないとエラーになる
・メソッドの返り値は型を指定してから利用しないとエラーになることがある
get系メソッドで実施にどのメソッドが返ってくるか知ることができない
⇒開発者が具体的な方を指定する必要
TypeScript開発の始め方
ステップ１：TypeScriptによるチェックに対応する
〜これまでの書き方ではエラーが出る箇所が多数出る
・メソッドの引数の型指定
・メソッドの返り値の型指定
受動的にTypeScriptが指摘してくる問題に対処
ステップ２：型をもっと活用する（オプション）
・独自に定義した型の利用
〜TypeScriptがチェックできる範囲が拡大
デモ
ステップ１：TypeScriptによるチェックに対応する
JavaScriptで書かれたアプリをTypeScript変換する
実際の動作を確認
・入力した内容がリアルタイムに表示
・Helloボタンでメッセージボックスに表示
TypeScriptプロジェクトの作り方
・SAP Fioriのアプリケーションジェネレーターを開く
・Basicのテンプレートを選択
・データーソースを選択
・TypeScriptを有効にするために設定
Enable TypeScriptをYesにする
実際に作成されたTypeScriptのソース
TypeScriptのコーディング
・JavaScriptと同様に書いてエラーになるところを直す
・提案に従いながら型を指定していく
・変換後のアプリを実際に動かす⇒問題なく再現
・TypeScriptのままデバッグできる
ステップ２：型をもっと活用する
・チェックがかからない部分にチェックをする⇒型を新たに定義
⇒間違った型を指定するとエラーになるようになる
メッセージ
今がTypeScriptの始めどき
・S/4HANA 2023、BTPでの開発ではTypeScriptが現実的な選択肢に
・コーディングの手間は増えるがデバッグの手間と相殺される
・TypeScriptを使うデメリットは特になく、若干のハードルのみ
この記事が気に入ったらサポートをしてみませんか？