Start developing UI5 apps using TypeScript

SAP Inside Track Tokyo 2024,
Week5: Dev & Automation

sitTokyo2024_TypeScriptでUI5開発を始めよう

#sitTokyo

Transcript

1. Start developing UI5 apps using TypeScript 2024-3-14: Week 5 – App Dev & Automation TOKYO SAP I nside Track 2024 # sitTokyo
2. 2 名前： 安竹みお 役割： BTP, S/4HANAなどの技術調査、プロジェクト支援 TechEd 参加目的：技術情報の収集 関心のある分野：SAPUI5, Fiori elements, CAP, RAP, Cloud Integration 安竹みお(tami)
3. 2024年3月14日 安竹 みお TypeScriptでUI5開発を始めよう TOKYO SAP Inside Track 2024 #sitTokyo
4. 4 1. TypeScriptとは 2. UI5でのTypeScript開発 3. TypeScript開発の始め方 4. デモ TypeScriptでUI5開発を始めよう
5. 5 包括的なビジネスプロセス管理 Intelligent, Sustainable Enterprise Indu stry-specific and sustain able 人材管理 支出管理と ビジネスネットワーク 顧客関係 管理 ビジネステクノロジープラットフォーム クラウド ERP パートナーソリューション インダ ストリークラウド & サステナビ リティ エンタープライズ レベルのセキュアで 信頼できるプラットフォームで実行 SAP アプリケーションと即座に連携する 拡張機能やカスタムUXを作成 業務ナレッジを活かして、俊敏性を持って 変化に対応可能なシステムを構築 アプリケーション開発 機能拡張とイノベーション インテグレーション 接続性とシンプル化 データ＆アナリティクス 価値や意味の抽出 人工知能 知性や頭脳の埋込み プロセス自動化 最適化と自動化
6. 6 1. TypeScriptとは 2. UI5でのTypeScript開発 3. TypeScript開発の始め方 4. デモ TypeScriptでUI5開発を始めよう
7. 7 1. TypeScriptとは JavaScriptで起こりがちなこと
8. 8 1. TypeScriptとは JavaScript Types (静的型付け) TypeScript = + 型の定義 型の指定 基本 コンパイル時点での型決定・チェック
9. 9 1. TypeScriptとは TypeScriptをサポート するエディタ(*) 開発時のサポート TypeScript + ⇒ TypeScriptのうれしさ チェック オートコンプリート * VS Code, SAP Business Application Studioなど多数
10. 10 1. TypeScriptとは 2. UI5でのTypeScript開発 3. TypeScript開発の始め方 4. デモ TypeScriptでUI5開発を始めよう
11. 11 2. UI5でのTypeScript開発 ▪ Version 1.116.0から公式にサポート ▪ TypeScript版のウォークスルー（チュートリアル）も登場 • SAP S/4HANA2023 (SP01) ～ • SAP Build Work Zoneはすでに対応 https://sap-samples.github.io/ui5-typescript-walkthrough/ 最近のできごと
12. 12 2. UI5でのTypeScript開発 サポートされるということは ▪ 型の定義が提供される ▪ TypeScriptをJavaScriptに変換する仕組みが提供される TypeScript for UI5: “Yay, it’s official!” – and a round-up of recent changes
13. 13 2. UI5でのTypeScript開発 これまでと変わること ES6に対応した書き方 TypeScriptによるチェックに対応した書き方 ES6 TS
14. 14 2. UI5でのTypeScript開発 ES6に対応した書き方 ES6 JavaScript TypeScript 「こんな変化がある」ということを知っておくだけで十分
15. 15 2. UI5でのTypeScript開発 これまでと変わること ES6に対応した書き方 TypeScriptによるチェックに対応した書き方 ES6 TS
16. 16 2. UI5でのTypeScript開発 TypeScriptによるチェックに対応した書き方 (1/2) https://www.typescriptlang.org/tsconfig#noImplicitAny TS ▪ メソッドの引数は、型を指定しないとエラーになる
17. 17 2. UI5でのTypeScript開発 TypeScriptによるチェックに対応した書き方 (2/2) TS getModel()はModelを返す getData()はJSONModelのメソッド 例 ▪ メソッドの返り値は、型を指定してから利用しないとエラーになることがある
18. 18 1. TypeScriptとは 2. UI5でのTypeScript開発 3. TypeScript開発の始め方 4. デモ TypeScriptでUI5開発を始めよう
19. 19 4. TypeScript開発の始め方 ステップ1 メソッドの返り値の型指定 メソッドの引数の型指定 ▪ TypeScriptによるチェックに対応する まずは最低限の対応でTypeScriptのメリットを享受する
20. 20 4. TypeScript開発の始め方 ステップ2 独自に定義した型の利用 ▪ 型をもっと活用する（オプション） TypeScriptがチェックできる範囲が拡大
21. 21 1. TypeScriptとは 2. UI5でのTypeScript開発 3. TypeScript開発の始め方 4. デモ TypeScriptでUI5開発を始めよう
22. 22 メッセージ：今がTypeScriptの始めどき • S/4HANA 2023、BTPでの開発ではTypeScriptが現実的な選択肢に • コーディングの手間は増えるがデバッグの手間と相殺される • TypeScriptを使うデメリットは特になく、若干のハードルがあるだけ • UI5開発者/これからUI5を始めようとする人へ ✓ Learn to use TypeScript with UI5 [Tutorial] : UI5を知っている人向けTypeScriptのチュートリアル ✓ ui5-typescript-walkthrough：これからUI5を始める人向けウォークスルー
23. 23 デモで紹介したTypeScriptの使い方 ①Configure advanced options: Yes ②Enable TypeScript: Yes 1. TypeScriptを有効にする方法 2. イベントの型は<コントロール>$<イベント名>で指定可能 3. メソッドが”undefined”を返す場合、自動的に?がつく ⇒ undefinedのまま次のメソッドを実行するとエラーになるため、 undefined以 外が返ってきた場合のみ後続のメソッドを実行するという意味。
24. 24 • ui5-typescript-walkthrough：これからUI5を始める人向けウォークスルー • Learn to use TypeScript with UI5 [Tutorial] : UI5を知っている人向けTypeScriptのチュートリアル • The TypeScript Handbook • サバイバルTypeScript おすすめリソース