2024/03/26 TypeScript 開発言語を統一 〜フロントからバックまで活用〜 Lunch LT 登壇資料 https://findy.connpass.com/event/312847/
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
2024/03/26 TypeScript 開発言語を統一 〜フロントからバックまで活用〜 Lunch LT 登壇資料 https://findy.connpass.com/event/312847/
TypeScriptで知ってコードの安全性が上がったtips集
TypeScriptを用いた開発では、その型システムを活かしてランタイムエラーを事前に防いだり、実装漏れを防いだりとコードの安全性の向上を図ることができます。 本記事では、個人的に知ったおかげでコードの安全性が増した！と感じたtipsをまとめました。 ※ なお、linterを用いたコードの安全性向上も非常に有効ですが、この記事では主にTypeScriptの型システムに焦点を当てています。 tips集 配列周りのtips まずは配列を扱う際に役立つ、tipsを紹介します。 配列からUnion型を作成する ↓のように(typeof array)[number]で配列の全要素を持つUnion型を作成できます。 const fruits = ["apple", "banana", "lemon"] as const; type Fruit = (typeof fruits)[number]; //
ミニマムで安心の開発環境（tRPC, prisma, turborepo）
概要 新しい技術を集めて、使い回しやすく、型安全な、フルスタックの開発環境を作ったのでその共有です。 とりあえず動かしたい人へ # 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
ふんわりざっくり大味で gRPC と tRPC の雰囲気を知る
tRPC をちょっとだけやってみたので、やる前に自分が知りたかったことやセットアップ時にわかりにくかったことを整理して、ふんわりざっくり大味でまとめておきます ついでなので gRPC についても簡単に整理します まず RPC とは RPC ( Remote Procedure Call ) とは、ネットワークで繋がっている別のコンピュータのプログラムを実行できるようにする技術のことです 呼ぶ側 ( = クライアントサイド ) が呼ばれる側 ( = サーバサイド ) を実行するときに、具体的な通信手段やプロトコルについて自分で実装する必要がない点が特徴です イメージを見てみましょう 普段行っているメソッド呼び出しは、RPC に対して LPC ( Local Procedure Call ) と言います このようなコードです、カタログはローカルにあるということにします
モダンなJavaScript/TypeScript実行環境「Deno」
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
機能開発を止めずに、6万行の TypeScript 移行を完了させた開発プロセス
スタディスト 開発部 技術支援ユニットの笹木 (@s_sasaki_0529) です。 2021年上半期、およそ6万行の JavaScript コードを TypeScript に置き換える作業を、半年間単独で行いました。 本記事では、機能開発自体を止めずに、どのように走り切ることができたのか、ふりかえりたいと思います。 なお、本記事の内容は、移行開始直後の登壇資料 “大規模 Vue アプリケーションの TypeScript 移行” と、移行完了後の登壇資料 “6万行の TypeScript 移行とその後” と重複する内容を含んでいます。 Teachme Biz と TypeScript弊社が開発している、マニュアル作成・共有システム Teachme Biz は、iOS/Android や Windows など、マルチプラットフォームで提供されています。 その中でも、作成・管理に多く使われて
ウェブ版 Excel で使える新しい「Officeスクリプト」を試してみた | DevelopersIO
Guten Tag、伊藤です。 何気なく Web 版の Excel でスクリプトを使おうと見てみたら、GAS のようなサンプルスクリプトが出てきて驚きました。 「Office スクリプト」という TypeScript で記述できるスクリプト機能で、今年5月末にGAが開始したばかりなんですね！ しかし、同じエクセルファイルをアプリ版で開いてみると、従来のVBAが表示され、こちらのスクリプトエディタは表示されません。というのも、現時点で Web 版の Excel のみで利用可能な新機能なんですね。まさに Google スプレッドシートのスクリプトのようです。 ということで、今回は簡単に使ってみた内容を紹介します。 Officeスクリプトの始め方 まず、利用には商用ライセンスでウェブ版などの要件を満たしている必要があります。 現時点で要件として記載されているのは以下の通りです。 1. Excel
Google App Script 開発 のための Templateリポジトリを作った
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
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
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 FunctionsのNode.jsランタイムを使うときに毎回設定していること - yashiganiの英傑になるまで死ねない日記
Cloud Function使ってますか？簡単なサービスをシュッと作って公開するにはとても便利ですよね。筆者もよく使っています。今やGCPの中では一番手に馴染んだサービスのひとつです。 最近Cloud Functionsを使っていくつかサービスを作っていて、最初にすることが決まってきたのでご紹介します。 TypeScriptの導入 初手はTypeScriptの導入です。みなさんはTSを導入するときどうしていますか？入れるだけなら簡単なんですが、ESLintだとかPrettierだとか考え始めるとゾッとしますよね。これから楽しくプログラミングを始めるのにゾッとはしたくないので、で頭をカラッポにしてgtsを使います。gtsというのはgoogleが作っているいい感じにTypeScriptを使えるやつで、入れておくだけでそれはそれはいい感じになります。詳しくはこのエントリーを見てくれ。npx gt
TypeScriptで世界一型安全な型レベルSQL Interpreterを作っている話
こんにちは。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も作ってるよ 実際
TypeScript 4.1 の Template Literal Types がやばい - Qiita
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'
ウェブフロントエンドの設計力を高めるためにアプリケーションの構造を捉えてみる話 - Chatwork Creator's Note
こんにちはー。 フロントエンド開発部の火村(ひむら/id:eiel)です。前回までは id:cw-himura で記事を書いていましたが、個人アカウントに切り替わりました。 よろしくおねがいします。 以前はサーバーサイド開発部に所属していましたが、2019年6月ぐらいからフロントエンドチームにヘルプとして無期限レンタル移籍中です。 主な担当している業務は「難しいバグ対応」と「これからChatworkのウェブフロントエンドをどうするかを考える」です。 昨日は期待の新人であるレオくんの入社して3ヶ月の熱烈な想いでした。アツいです。 さて、今回のお題は「レガシーフロントエンド脱却への挑戦」と雑に上から投げられたのですが、未来のことを考える作業をしているので書きやすいネタがありません。 あってもオチがつきません。 ということで、設計に役立つかもしれない話をラフに書くことにしました。 アプリケーショ
TypeScript Bootcamp 2020
2020年度リクルート新人ブートキャンプ エンジニアコースの講義資料です
[TS] Firestoreを型安全にするライブラリ Fireschema を作った [rules自動生成/データ自動型付け] - Qiita
[TS] Firestoreを型安全にするライブラリ Fireschema を作った [rules自動生成/データ自動型付け]TypeScriptFirebasecloudfunctionsFirestoreFirestore型付け係 8/18 更新 Custom Transformer を使用し、documentSchema<T>() の型引数 (T の部分) の AST 解析によって rules の文字列が自動生成できるようになったため、documentSchema() の引数が不要になりました スキーマレスな Firestore では、その気になれば一般ユーザーが予期しない構造のデータをセットできてしまうので、セキュリティルールで書き込み時のスキーマ検証を設定する必要があります。しかし、セキュリティルールはモデル定義に合わせて手動で書かなければならないのでミスが起きやすく、そのために
![[TS] Firestoreを型安全にするライブラリ Fireschema を作った [rules自動生成/データ自動型付け] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/470856a8d7f01ac7fa91224f2b7499148075af95/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVFMlNUQlMjBGaXJlc3RvcmUlRTMlODIlOTIlRTUlOUUlOEIlRTUlQUUlODklRTUlODUlQTglRTMlODElQUIlRTMlODElOTklRTMlODIlOEIlRTMlODMlQTklRTMlODIlQTQlRTMlODMlOTYlRTMlODMlQTklRTMlODMlQUElMjBGaXJlc2NoZW1hJTIwJUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgxJUEzJUUzJTgxJTlGJTIwJTVCcnVsZXMlRTglODclQUElRTUlOEIlOTUlRTclOTQlOUYlRTYlODglOTAlMkYlRTMlODMlODclRTMlODMlQkMlRTMlODIlQkYlRTglODclQUElRTUlOEIlOTUlRTUlOUUlOEIlRTQlQkIlOTglRTMlODElOTElNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTE2OWQxYjM5YTA1NDdlZDRmMDRlZjIwNjI5MDBhZDBl%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5YXJuYWltbyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzhjNmUxNzhiZmViODQ2YTVlMzU0MzFhNTYzMTY0YjU%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g6YGL5Za26ICF44Ku44Or44OJ%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3De1cd9f83ad2708613de33994c1d3bfc5)
TypeScriptをプロダクト開発に使う上でのベストプラクティスと心得 - Qiita
同じTypeScriptという言語を利用する場合においても、トランスパイラによってTypeScript自体の機能制限がかかったり、思わぬトラブルを招く場合があります。それぞれのトランスパイラの特徴を踏まえた上で、それにより生じる問題も見ていきましょう。 1-1. tsc TypeScriptの開発元であるMicrosoft純正のTypeScriptトランスパイラです。TypeScriptを利用する際に typescript パッケージをインストールする必要がありますが、それに同梱されています。 公式ツールなだけあって最も早く最新バージョンのTypeScriptに対応したり、言語すべての機能を利用することができる一方で、バンドラではないためminifyやchunkの設定はできません。また、Path Aliasesの未解決や旧ESへの互換性が不完全であることが欠点として挙げられます。 tsco
2万人に聞いた、2018年の最新JavaScript事情 - Qiita
先日よりThe State of JavaScript 2018というアンケートが行われていたのですが、その集計結果が公開されたのでざっくりと紹介してみます。 回答者数は2万人超としか書かれてなくて正確な数は不明です。 というか全体的に大まかな集計結果しか出てなくて、もっと詳しいデータが欲しければ直接連絡しろという方針らしいです。 ちょっと残念。 The State of JavaScript 2018 Introduction 2万人以上のJavaScript開発者が回答したよ。 結果の概要はMediumに投稿してるよ。 色々なプロジェクトを紹介してるけど、その一部はスポンサーになってもらってるよ。 このアンケートはSacha Greif、Raphael Benitte、Michael Rambeauによって作成、維持されているよ。 SachaはVulcan.js、RaphaelはNiv
社内管理画面を Vue + Go で作る - Gunosy Tech Blog
広告技術部のUTと呼ばれている @mocyuto です。 普段は広告配信のバックエンドを主に担当しています。 今回は社内管理画面を作った話をお伝えしたいと思います。 はじめに 設計 バックエンド goa 構成 フロントエンド 構成 TypeScript Vuex Atomic Design まとめ はじめに Gunosyの管理画面ではRailsが多いですが、社内用管理画面を新規で作ることになり、Vue + Go のSPA（Single Page Application）で作ることにしました。 管理画面をVueとGoで作る事例は最近増えてきていますが、弊社でもすでにこの組み合わせで実績はあり、２つ目となりました。 今回の社内向けの管理画面の作成意図としては、ABテスト反映の高速化が目的です。 今までは、リリースフローは以下のようになっていました。 配信チームとロジックチームをまたいでファイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Build a Full Stack App with Next.js, Tailwind, tRPC and Prisma ORM
コードには型アノテーションよりも要件アノテーションを増やせ！/harajukuts2
