生SQLに型を手書きする時代は終わり？Prismaの新機能「TypedSQL」
生SQLを扱う $queryRaw TypeScript向けのORMライブラリとしてPrismaがあります。Prismaは直感的で型安全なAPIを提供し、TypeScript向けのORMとしては第一に名前が上がることが多いライブラリです。 しかしそんな人気なPrismaでも、裏側では少しクセのあるSQLが発行されていたり、欲しいSQLがPrismaのAPIでは実現できない場合があります。 そういった場合のために $queryRaw というメソッドが用意されており、これを使うことで生SQLを書いてその結果を受け取ることができました。他のORMにもよくある機能です。 例えば以下のように実装することができます。 const users = await prisma.$queryRaw` SELECT id, name FROM "Users" WHERE id = ${userID} `; co
TypeScriptチートシート(TypeScript(JavaScript)の文法を学び，フロント・バック両方開発できるようにしよう[プログラミング文法,配列操作関数,React,クリーンアーキテクチャ,API]) - Qiita
TypeScriptチートシート(TypeScript(JavaScript)の文法を学び，フロント・バック両方開発できるようにしよう[プログラミング文法,配列操作関数,React,クリーンアーキテクチャ,API])JavaScriptNode.jsTypeScriptDockerReact みなさんTypeScript(JavaScript)でどんなことができるかご存知ですか？初学者向けの言語や大規模開発でよく使う言語だというイメージがあると思います．TypeScript(JavaScript)はフロントの開発からバックの開発までなんでもできる非常に有用な言語です．本記事ではプログラミングをしたことのない人やTypeScript(JavaScript)を触った人のステップアップのためなど幅広い方向けに書きました．また，Node.jsの仕組みやReact,Vue.jsでの応用例やAPI作成
![TypeScriptチートシート(TypeScript(JavaScript)の文法を学び，フロント・バック両方開発できるようにしよう[プログラミング文法,配列操作関数,React,クリーンアーキテクチャ,API]) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/995c7bd0f4c22566af5682e92e6ccd3d960ae3ac/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VHlwZVNjcmlwdCVFMyU4MyU4MSVFMyU4MyVCQyVFMyU4MyU4OCVFMyU4MiVCNyVFMyU4MyVCQyVFMyU4MyU4OCUyOFR5cGVTY3JpcHQlMjhKYXZhU2NyaXB0JTI5JUUzJTgxJUFFJUU2JTk2JTg3JUU2JUIzJTk1JUUzJTgyJTkyJUU1JUFEJUE2JUUzJTgxJUIzJUVGJUJDJThDJUUzJTgzJTk1JUUzJTgzJUFEJUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgzJUJCJUUzJTgzJTkwJUUzJTgzJTgzJUUzJTgyJUFGJUU0JUI4JUExJUU2JTk2JUI5JUU5JTk2JThCJUU3JTk5JUJBJUUzJTgxJUE3JUUzJTgxJThEJUUzJTgyJThCJUUzJTgyJTg4JUUzJTgxJTg2JUUzJTgxJUFCJUUzJTgxJTk3JUUzJTgyJTg4JUUyJTgwJUE2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1jZjZjNDJlYmI2MDYyNzgxNTlmM2Q1NzU4MDczYjJmMg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBKYXZhTGFuZ1J1bnRpbWVFeGNlcHRpb24mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTBhMGMzZTAwMmI3YzE3NzYzZDk1ODBjMjgyYTk2YWQ3%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3De84738261ad1a28217134fd645a718d4)
TypeScriptを導入する意味と限界、型レベルプログラミングの紹介 - Qiita
はじめに JavaScript/TypeScript初学者を抜けたあたりの方に向けてTypeScriptの利点や限界、型レベルプログラミングについて紹介します。 TypeScriptはJavaScriptをラップしたライブラリであり、静的な型情報をつけることができます。また、それらの型情報をもとに型を推論し、型違反な代入やプロパティへのアクセスなどをプログラム実行 以前 に検知することができるようになっています。 例えば、動的型付けの言語であるJavaScriptでは、以下の関数のa,bには数値だけでなく、文字列を渡すことができます。数値同士を渡せば加算してくれますし、文字列同士を渡せば文字列連結をしてくれます。 「数値計算用の関数なのに、文字列連結に利用できてしまう」という緩さを開発時にはなるべく排除しようというのがTypeScriptを導入する意義です。 以下、TypeScriptの基
【TypeScript】非同期処理の良さを図解で日常生活に例えて解説する - Qiita
「同期的処理」の部分を、公式ドキュメントや他記事では同期処理や非同期処理と混在して書いていたように感じたので、本記事では「同期的処理」と名称を統一しています(個人的にはこの名称部分でかなり混乱してしまいました。。)。 今回は実装にて時間計測を用いるので、asyncを用いた「同期的処理」「非同期処理」について解説していきます。 同期的処理 // 計測 const elapsedTime = (start: number, end: number) : string => { return (end-start).toFixed(0) } // タスク消化 const doTask = (task: string, time: number) : Promise<string> => { return new Promise(resolve => { setTimeout(() => { re
TypeScriptで学ぶ！SOLID原則
はじめに 皆さんこんにちは、株式会社エムアイ・ラボのエンジニアです！ 今回はソフトウェア設計のSOLID原則について学習したので、弊社のメインの開発言語であるTypeScriptのサンプルコードを使って共有できればと思います。 SOLID原則は、オブジェクト思考プログラミングにおいて、ソフトウェアがメンテナンスしやすく、拡張や変更に強いソフトウェア設計を行うための原則です。 SOLID原則にはSOLIDの頭文字をそれぞれとった、５つの原則があります。 単一責任の原則（Single Responsibility Principle） 単一責任の原則とは、クラスが一つの機能や責任を持つべきで、クラスが変更される理由は一つであるべきというです。 クラスが一つの機能や責任のみを持つようにすることにより、コードは再利用可能でテストが容易になります。 単一責任の原則を遵守している例 以下のBirdクラ
【React】JavaScriptからTypeScriptに移行してみた - Qiita
import React, { useState, useEffect } from 'react'; import styles from './App.scss'; import { pokeNameList } from './pokeNameList'; const App = () => { return <SuggestForm />; }; const SuggestForm = () => { const [value, setValue] = useState(''); const suggestNum = 15 ; const wordList = pokeNameList; const [suggestions, setSuggestions] = useState([]); useEffect(() => { const suggestions = getSugge
「型システム入門」の先へ：TypeScriptの型システムのいくつかの側面 | 雑記帳
この記事は TypeScript Advent Calendar 2023 の8日目の記事です。言語実装勢にも役立つ内容を含んでいるかもしれないので、 言語実装 Advent Calendar 2023 にも登録しています。 TypeScriptで型システムに興味を持った人が「型システム入門」を読んだという話を時々聞きます。「型システム入門」は、Types and Programming Languages (TAPL) という本の邦訳で、型システムに興味を持った人が読むのは自然なことです。 型システム入門 プログラミング言語と型の理論 | Ohmsha 型システム入門 サポートページ ですが、この本の原著は2002年出版で、最近の話題がカバーされていなかったり、邦題に「入門」とあるように発展的な話題は扱っていなかったりします。一応続編的な感じのAdvanced Topics in Typ
TypeScriptってどんな言語？ 言語そのものを知る面白さ
2023年11月8日 プロを目指す人のためのTypeScript入門 - Forkwell Library #35
【TypeScript / JavaScript】this = "これ" ← どれ？ 【備忘録】 - Qiita
この記事で分かること TypeScript（JavaScript）における関数の宣言方法 各宣言方法におけるthisの扱い 初めに 初めまして。新人エンジニアをしているものです。 先日TypeScriptにおける関数宣言について学習する一環で、thisの取り扱いについて学んだので備忘録として書き上げます。 （前提）TypeScriptの関数の宣言方法 まずは複数ある関数の宣言方法を簡単にまとめます。 ①function構文による宣言
TypeScript Origins: The Documentaryを観た - laiso
TypeScript Origins: The DocumentaryはTypeScriptの誕生に関わった関係者たちへのインタビューで構成されたドキュメンタリー動画。 www.youtube.com 製作元はOfferZenというアムステルダムの求人プラットームの会社で、以前にはSvelte OriginsやLaravel Originsも公開している。 本作ではReact.js: The Documentaryの次世代フロントエンドフレームワーク開発競争と時期を同じくして起っていたAltJS戦争の中でどうTypeScriptが現在の地位を獲得していったのかに迫る。 laiso.hatenablog.com 私はTypeScriptについては片手間業務プログラマーという感じで全然詳しくないんですけど、TypeScript Originsのゆりかご からRemove TypeScriptの
using : リソース変数の管理が楽になるキーワード (JavaScript&TypeScript) - Qiita
この記事の内容にある意見は、個人の主観的意見を前提とします。 記事の内容は間違いがあり得ますので、ご了承いただけると幸いです。内容の間違い、認識の違い、違う意見などありましたら、コメント大歓迎です！ 概要 JavaScriptにおいて、変数を初期化できるkeyword var, let, constに加え、usingがまもなく追加される予定です。 usingキーワードで宣言した変数は、リソースタイプ変数として見なされ、変数がscope外になる前に自動でリソース解除作業を行うことができるようになり、従来の明示的にリソース解除コードを書くという面倒な作業がだいぶ楽になることが期待できます。 ECMAScript Proposalは以下となっておりStage3段階となってます。 https://github.com/tc39/proposal-explicit-resource-manageme
ライブラリにTypeScriptコードを同梱するときはディレクトリを分けよう - Qiita
ライブラリがこんな構成になっていませんか？ TypeScript製のライブラリをnpmで配布するとき、そのパッケージの構成は次のようなフラットな構造になっていませんか？フラットな構造とは、TypeScriptファイル(.ts)と、型定義ファイル(.d.ts)が同じディレクトリにあるような構成です。 ├── index.ts ...... TypeScriptファイル ├── index.d.ts .... 上の型定義ファイル | package.jsonのtypesフィールドで指定してる。 ├── index.js ...... 上のJavaScriptファイル | package.jsonのmainフィールドで指定している。 | ├── module.ts ..... TypeScriptファイル | index.tsからimportされている。 ├── module.d.ts ...
TypeScriptの "any" と "unknown" の役割と違い - Qiita
any 役割: any 型は TypeScript の型システムの一部を無効にするものです。変数が any 型の場合、その変数に対して任意の操作を行うことができ、コンパイラはそれをチェックしません。 主な使用ケース: 既存の JavaScript コードを TypeScript に移行する場合や、他のライブラリやフレームワークとの互換性を持つために一時的に型チェックをスキップしたい場面で使用されます。 リスク: any 型を使用すると、型の安全性が失われ、ランタイムエラーの原因となる可能性があります。 unknown 役割: unknown 型は最も厳格な型として考えられます。unknown 型の変数は存在は確定していますが、その型が何であるかは不明です。したがって、unknown 型の変数を直接操作することはできず、その型を具体的に確定させる必要があります。 主な使用ケース: 外部のライ
TypeScriptで開発中、Stringとstringの違いでエラーに遭遇。 - Qiita
こんにちは。 株式会社HRBrainでフロントエンドエンジニアをしているみつです。 とはいえ、技術が足らないなぁとか、 無理やりコーディングしているなぁとか、感じている日々 先日、そんな無理やりコーディングの最中、 「念のためString使って文字列だよってしとこ〜」と軽い気持ちで使っただけなのにね・・・ new String()になんか怒られたのでその共有です 目次 ★先に結論 ★これが、エラー ★これは、エラーじゃない String（MDNより） string（サバイバルTypeScriptより） ★何のエラーだった？ ★さらに言うと・・・ ★まとめ 参考URL ★先に結論 Stringは、オブジェクトだからstring型とは同じものではない。 ★これが、エラー const something = '何かしらの値' const text: string = new String(som
【TypeScript】超実践的テクニック集【Reactなし】 - Qiita
はじめに この記事はニジボックスQiita記事投稿リレーの2日目の記事です🌈 TypeScript（Reactなし）のフロントエンド実務現場で1年半ほど業務してきたうえで、頻繁に使うTypeScriptのテクニック（tipsレベルですが）をまとめていきます。タイトルはちょい盛りです。 手続き型でDOMを直接ゴリゴリいじくるイベント駆動のスタイルで、いわゆるモダンフロントな現場ではないという点、あらかじめご承知おきください。 1. 自分で定義した型に型ガードする 1-1. ユーザー定義型ガードについて TypeScriptではtypeof、instanceof、inなどの演算子を用いて変数を型ガードできますが、これらの演算子では自分で定義した型へは型ガードすることができません。 type Hoge = "hoge" | "fuga"; const attr = document.query
【TypeScript】ジェネリクスも便利だよ - Qiita
ジェネリクスがよく分からないと言われたので、噛み砕いて書いていこうと思います。 なお、ジェネリクスが何なのかの説明に終始し、実践的な活用方法にはあまり触れていません。 主に初学者向けですかね。悪しからず。 ジェネリクスとは ジェネリックプログラミングの特徴は、型を抽象化してコードの再利用性を向上させつつ、静的型付け言語の持つ型安全性を維持できることである。 Wiki - ジェネリックプログラミング 型安全性を保ちつつ、再利用性を向上させることができるようですね。 型だけじゃなくて説明も抽象的ですね。 言い換えると、型によって一定の制約を設けて安全性は担保するけど、使い回しもしやすくする、ということですね。 ジェネリクスとジェネリックは表記揺れです。 TypeScript Deep Dive日本語版でも、タイトルが「ジェネリック型」ですが次の見出しは「ジェネリクス(Generics)」となっ
【TypeScript/JavaScript】配列操作reduce()を救いたい。 - Qiita
Array.prototypeのreduce()メソッド。 苦手な方や、ややこしいから使わないようにしているという方もいるかな、と。 確かに、他のmap()やfilter()、sort()などと比べるとちょっと難解な感じありますよね。 また、一方では、reduceマジ最強と思ってる方もいると思います。 確かに、集計することも新たな配列を作ることも何でもできますもんね。 そんな避けられたり奉られたりなreduce()について、本当はどんなメソッドなのか自分なりの解釈を書きたいと思います。 （追記：ありがたいことに色々と有益なコメントを頂いているのでそちらも是非ご参照ください。） reduce()とは reduce() メソッドは、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対し
【TypeScript】カリー化・部分適用は便利だよ！ - Qiita
【TypeScript】カリー化・部分適用は便利だよ！ カリー化・部分適用利用してますか？ 調べたけど「関数を第一級オブジェクトとしてー」とか「関数を部分適用してー」とか説明が講義っぽくて途中で諦めた方も多いと思います。自分もそうでした。 また、知ってるけどどんな時に使うべきか迷って使ってないという方もいると思います。 具体的なコードを交えながら、カリー化・部分適用について、噛み砕いて説明していきたいと思います。 なお、すべてのTypeScriptのサンプルコードは実際に動かして確認することができますので、TypeScript Playgroundなどで是非お試しください。 カリー化と部分適用 まずはカリー化と部分適用の定義をば。 カリー化 (currying, カリー化された=curried) とは、複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引
TypeScriptのカリー化と部分適用について学んだこと - Qiita
背景 TypeScriptを書く際に下記のコードに遭遇し、引数を２つ連続で取ってるのっておかしくね？と思い調べました。調べてみると、関数型プログラミング言語にはカリー化というものがあることを知りました。 export const getBlog = (queries?: MicroCMSQueries) => (contentId: string) => apiClient.getListDetail<Blog>({ endpoint: 'blog', contentId, queries }) カリー化とは カリー化とは、複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引数を取り結果を返す関数」であるような関数にすること（あるいはその関数のこと）である。(Wikipedia) ？？ 簡単に言うと、 カリー化とは、複数の引数を取る関数を、一度に1つの引
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript入門 2024
