TypeScriptが仕事で使えるレベルになるためには、単に基本的な文法や構文を理解するだけでなく、実際のプロジェクトやチーム開発でどのように活用するか、スケーラビリティや保守性を考慮しながらコードを書く能力が求められます。この記事では、TypeScriptを実務で使うために必要な基本から、少し踏み込んだ中級レベルの知識を、コード例を交えながら丁寧に解説します。 TypeScriptとは TypeScriptは、JavaScriptのスーパーセットで、JavaScriptに静的な型を追加した言語です。静的型付けとは、変数や関数にあらかじめ「このデータはこの型でなければならない」というルールを設定することです。このルールに基づいて、開発者が予想しない動作やバグを防ぐ手助けをしてくれます。 JavaScript自体は非常に柔軟で、型に縛られない自由な書き方ができますが、それが逆に大きなバグを生

2024/03/26 TypeScript 開発言語を統一 〜フロントからバックまで活用〜 Lunch LT 登壇資料 https://findy.connpass.com/event/312847/

TypeScriptを用いた開発では、その型システムを活かしてランタイムエラーを事前に防いだり、実装漏れを防いだりとコードの安全性の向上を図ることができます。 本記事では、個人的に知ったおかげでコードの安全性が増した！と感じたtipsをまとめました。 ※ なお、linterを用いたコードの安全性向上も非常に有効ですが、この記事では主にTypeScriptの型システムに焦点を当てています。 tips集 配列周りのtips まずは配列を扱う際に役立つ、tipsを紹介します。 配列からUnion型を作成する ↓のように(typeof array)[number]で配列の全要素を持つUnion型を作成できます。 const fruits = ["apple", "banana", "lemon"] as const; type Fruit = (typeof fruits)[number]; //

概要 新しい技術を集めて、使い回しやすく、型安全な、フルスタックの開発環境を作ったのでその共有です。 とりあえず動かしたい人へ # optional: If you haven't installed pnpm npm i -g pnpm # clone repo git clone https://github.com/yanagie/mono-trpc.git # install packages cd mono-trpc && pnpm i # migrate db by prisma pnpm --filter @mono-trpc/prisma run migrate:dev # start dev server pnpm dev front: http://127.0.0.1:5173 api: http://localhost:3001 おすすめな人 monorepo, tu

tRPC をちょっとだけやってみたので、やる前に自分が知りたかったことやセットアップ時にわかりにくかったことを整理して、ふんわりざっくり大味でまとめておきます ついでなので gRPC についても簡単に整理します まず RPC とは RPC ( Remote Procedure Call ) とは、ネットワークで繋がっている別のコンピュータのプログラムを実行できるようにする技術のことです 呼ぶ側 ( = クライアントサイド ) が呼ばれる側 ( = サーバサイド ) を実行するときに、具体的な通信手段やプロトコルについて自分で実装する必要がない点が特徴です イメージを見てみましょう 普段行っているメソッド呼び出しは、RPC に対して LPC ( Local Procedure Call ) と言います このようなコードです、カタログはローカルにあるということにします

class: middle, center <img src="./assets/logo.svg" align="center" width="200" /> モダンな JavaScript/TypeScript 実行環境 Deno --- class: middle, center 「Deno」 聞いたことありますか? 🙋‍♀️ 🙋‍♂️ --- class: middle, center 「Deno」 使ったことありますか? 🙋‍♀️ 🙋‍♂️ --- class: middle, center 今日は Deno を 「聞いた事ない」 ~ 「触った事はある」 ぐらいの人向けの話をします --- # 話す人 <img src="./assets/hinosawa.jpg" align="right" width="300" /> 日野澤歓也 twitter @kt3k Web

2022/1/28 Harajuku.ts Meetup #2 にて使用した資料です。 11ページ目はString#join()ではなくArray#join()の誤りでした。お詫びいたします。

スタディスト 開発部 技術支援ユニットの笹木 (@s_sasaki_0529) です。 2021年上半期、およそ6万行の JavaScript コードを TypeScript に置き換える作業を、半年間単独で行いました。 本記事では、機能開発自体を止めずに、どのように走り切ることができたのか、ふりかえりたいと思います。 なお、本記事の内容は、移行開始直後の登壇資料 “大規模 Vue アプリケーションの TypeScript 移行” と、移行完了後の登壇資料 “6万行の TypeScript 移行とその後” と重複する内容を含んでいます。 Teachme Biz と TypeScript弊社が開発している、マニュアル作成・共有システム Teachme Biz は、iOS/Android や Windows など、マルチプラットフォームで提供されています。 その中でも、作成・管理に多く使われて

Guten Tag、伊藤です。 何気なく Web 版の Excel でスクリプトを使おうと見てみたら、GAS のようなサンプルスクリプトが出てきて驚きました。 「Office スクリプト」という TypeScript で記述できるスクリプト機能で、今年5月末にGAが開始したばかりなんですね！ しかし、同じエクセルファイルをアプリ版で開いてみると、従来のVBAが表示され、こちらのスクリプトエディタは表示されません。というのも、現時点で Web 版の Excel のみで利用可能な新機能なんですね。まさに Google スプレッドシートのスクリプトのようです。 ということで、今回は簡単に使ってみた内容を紹介します。 Officeスクリプトの始め方 まず、利用には商用ライセンスでウェブ版などの要件を満たしている必要があります。 現時点で要件として記載されているのは以下の通りです。 1. Excel

GAS を書くたびに開発環境構築を調べている気がするので、GAS 開発用の Template リポジトリを作ってみました。 Templateリポジトリ 機能はこちらです。 claspによる App Script へのデプロイ TypeScript 対応 Webpack5 でのビルド※ ESLint / prettier でのコード整形 husky / lint-stage でのプレコミットフック 使い方 GitHub Template として公開しているので、リポジトリのUse this templateボタンをクリックすれば、コミット履歴が削除された自分のリポジトリとして作成できます。 作成したリポジトリをローカルに clone したら、.clasp.jsonのscriptIdを自身の AppScript の ID で書き換えてください。 ※ AppScript の ID は AppSc

Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +

Cloud Function使ってますか？簡単なサービスをシュッと作って公開するにはとても便利ですよね。筆者もよく使っています。今やGCPの中では一番手に馴染んだサービスのひとつです。 最近Cloud Functionsを使っていくつかサービスを作っていて、最初にすることが決まってきたのでご紹介します。 TypeScriptの導入 初手はTypeScriptの導入です。みなさんはTSを導入するときどうしていますか？入れるだけなら簡単なんですが、ESLintだとかPrettierだとか考え始めるとゾッとしますよね。これから楽しくプログラミングを始めるのにゾッとはしたくないので、で頭をカラッポにしてgtsを使います。gtsというのはgoogleが作っているいい感じにTypeScriptを使えるやつで、入れておくだけでそれはそれはいい感じになります。詳しくはこのエントリーを見てくれ。npx gt

こんにちは。DevOps芸人と化して久しいAndyです。 2020年の秋にTypeScript 4.1へTemplate Literal Typesが導入され、そのインパクトに俄かに一部の界隈がザワついたのは記憶に新しいかと思います。 今回は型プログラミングの可能性を大いに押し広げたTemplate Literal Typesを用いてSQL文を型レベルで解析し、その実行結果を型情報として導出するためのsqlptureというライブラリを作ったので紹介します。 Embedded content: https://github.com/andoshin11/sqlpture SQLの実行/検証対象はPostgreSQL v13です。 tl;dr SQL文を型レベルで解析・評価して返り値型を取得できるmini interpreterを作ったよ 型レベルのSQL validatorも作ってるよ 実際

TS 4.1 の Template Literal Types を使うと、文字列を解釈して型定義ができる。文字列は変数化でき、テンプレートリテラルで埋め込める。 type Hello = 'Hello' type World = 'World' // Template Literal を埋め込める type HelloWorld = `${Hello}, ${World}` // => type 'Hello, World' // 引数に取ることもできる type Concat<T extends string, S extends string> = `${T}, ${S}` type HelloWorld = Concat<'Hello', 'World'> // => type 'Hello, World'

こんにちはー。 フロントエンド開発部の火村(ひむら/id:eiel)です。前回までは id:cw-himura で記事を書いていましたが、個人アカウントに切り替わりました。 よろしくおねがいします。 以前はサーバーサイド開発部に所属していましたが、2019年6月ぐらいからフロントエンドチームにヘルプとして無期限レンタル移籍中です。 主な担当している業務は「難しいバグ対応」と「これからChatworkのウェブフロントエンドをどうするかを考える」です。 昨日は期待の新人であるレオくんの入社して3ヶ月の熱烈な想いでした。アツいです。 さて、今回のお題は「レガシーフロントエンド脱却への挑戦」と雑に上から投げられたのですが、未来のことを考える作業をしているので書きやすいネタがありません。 あってもオチがつきません。 ということで、設計に役立つかもしれない話をラフに書くことにしました。 アプリケーショ

2020年度リクルート新人ブートキャンプ エンジニアコースの講義資料です

[TS] Firestoreを型安全にするライブラリ Fireschema を作った [rules自動生成/データ自動型付け]TypeScriptFirebasecloudfunctionsFirestoreFirestore型付け係 8/18 更新 Custom Transformer を使用し、documentSchema<T>() の型引数 (T の部分) の AST 解析によって rules の文字列が自動生成できるようになったため、documentSchema() の引数が不要になりました スキーマレスな Firestore では、その気になれば一般ユーザーが予期しない構造のデータをセットできてしまうので、セキュリティルールで書き込み時のスキーマ検証を設定する必要があります。しかし、セキュリティルールはモデル定義に合わせて手動で書かなければならないのでミスが起きやすく、そのために

同じTypeScriptという言語を利用する場合においても、トランスパイラによってTypeScript自体の機能制限がかかったり、思わぬトラブルを招く場合があります。それぞれのトランスパイラの特徴を踏まえた上で、それにより生じる問題も見ていきましょう。 1-1. tsc TypeScriptの開発元であるMicrosoft純正のTypeScriptトランスパイラです。TypeScriptを利用する際に typescript パッケージをインストールする必要がありますが、それに同梱されています。 公式ツールなだけあって最も早く最新バージョンのTypeScriptに対応したり、言語すべての機能を利用することができる一方で、バンドラではないためminifyやchunkの設定はできません。また、Path Aliasesの未解決や旧ESへの互換性が不完全であることが欠点として挙げられます。 tsco

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日よりThe State of JavaScript 2018というアンケートが行われていたのですが、その集計結果が公開されたのでざっくりと紹介してみます。 回答者数は2万人超としか書かれてなくて正確な数は不明です。 というか全体的に大まかな集計結果しか出てなくて、もっと詳しいデータが欲しければ直接連絡しろという方針らしいです。 ちょっと残念。 The State of JavaScript 2018 Introduction 2万人以上のJavaScript開発者が回答したよ。 結果の概要はMediumに投稿してるよ。 色々なプロジ