UUIDを短くするライブラリを作った
のように、22文字の短くてスッキリしたIDに変換できます。 これを簡単に行うためのライブラリ「uuid58」を作成しました。 本記事ではuuid58を作った背景や使い方、特徴を紹介します。 動機 データベースの主キーにUUIDを使うことは多いですが、UUIDは36文字（ハイフン込み）と長く、URLに埋め込むと見た目も悪くなりがちです。 「短くしたい！」と思ってBase64エンコードを考える人も多いですが、Base64は/や+、=などURLで使いにくい文字が含まれてしまいます。 そこで、Bitcoinでも使われているBase58（視認性の悪い文字を除外したアルファベット）でエンコードすれば、 22文字に短縮できる URLセーフ 見た目もスッキリ 0とO、Iとlのような区別しづらい文字が除外されている ダブルクリックで選択可能 という理想的なIDが作れます。 既存のUUID→Base58変換ラ
PullRequestからチーム開発の生産性・健全性を測るCLIツールを書いてみた - $shibayu36->blog;
最近、開発チームの生産性や健全性をどのように計測したら良いかについて興味を持っている。その中で「LeanとDevOpsの科学」の中に書いてあるようなデプロイの頻度・変更のリードタイム・MTTR・変更失敗率の4指標や、開発チームの生産性・健全性を客観的に知るためにリポジトリ履歴から機械的に可視化するツールを作った - Qiitaに興味を持った。 一方、それらの指標を考えてみた時、以下のような点について悩んでいた。 マイクロサービスなどで複数レポジトリとなり、さらにデプロイ手法がそれぞれ違う状況の場合、変更のリードタイム = コミット〜本番稼働までの時間を計測するのがなかなか難しい コミットという単位だとかなり小さく、個々人のばらつきも大きすぎるように感じるので、もう少し良い単位はないのだろうか このような悩みから、PullRequestの単位で集計することで、生産性や健全性をもう少し測りやす
モダンなjQueryに挑戦してみよう
最初にこの記事を書いた時点では、jQueryでTypeScript, バンドラー, ES module, そしてmoduleを使ったビジネスロジックの分離を使ったものは現場で見たことはないと述べました。その後、これをすべて使っている現場があることも発見したので、本記事を修正しました。 用意したもの 例によって、デモコードをGitHubに公開しました。 今回作るのは下記のリンクにあるUIです。 電車の料金を計算するUIです 入力: ユーザが入力する項目 通常席かファーストクラスか 乗客の人数 割引率 出力: 画面で変化する項目 通常席かファーストクラスかのボタンの表示 単価 合計金額 jQueryが得意とするちょっとしたUIの動的アップデートではなく、ブラウザでステートとビジネスロジックを持たせるものを作っています。考えずに作るとスパゲッティーコード化しやすいものです。 複雑になりやすいUI
Denoが大幅な方針変更を発表。3カ月以内にnpmパッケージへの対応を実現、最速のJavaScriptランタイムを目指しHTTPサーバを刷新
Denoが大幅な方針変更を発表。3カ月以内にnpmパッケージへの対応を実現、最速のJavaScriptランタイムを目指しHTTPサーバを刷新 オープンソースのJavaScript/TyeScriptランタイム「Deno」を開発するDeno Landは、「Big Changes Ahead for Deno」（Denoの方向性の大きな変更）という記事を公開し、Denoのnpmパッケージへの対応や高速化などの新たな取り組みを発表しました。 Big changes ahead for Denohttps://t.co/Q5xKz3bJLg — Deno (@deno_land) August 15, 2022 今回の発表では、npmへの対応、最速のJavaScriptランタイムを目指す、企業向けサポート、という3つの大きな取り組みが示されています。 3カ月以内にnpmパッケージをインポート可能に
Deno first でやっていく
去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS
TypeScript 4.7 で “module” という名前で始まる Compiler Option がさらに追加されて、さすがに何が何やら感あるので、役割を軽く整理。 この記事では雑な紹介に留めるので、それぞれの詳細は TSConfig Reference を読みに行ってください。 対応関係ソースコードとそれぞれのオプションが何に作用しているのかを雑に図示するとこんな感じ。 重要なことどのオプションをいじっても、import 指定子 (上図の “./hoge” の部分) がコンパイル時に書き換えられることはない。 これが頭に入っていれば、.mts, .cts といった TypeScript のファイルで import "./foo.cjs" と書くことや、 --moduleSuffixes がソースコードの探索にしか影響しないことに得心できるはず。 --moduleTypeScript
React Flow めっちゃいいぜ
はじめに 今回の記事の結論はタイトル通り『React Flowめっちゃいいぜ』です。 こんにちは。株式会社Red Frascoの根本(github: tkcel )と申します。普段はフロントエンドを主に担当することが多いです。 この前個人開発中に以下の壁にぶち当たりました。 React（Next）でぐりぐりできるフローチャートみたいなものを作るにはどうすればいいのか？ 描画系のサービスはcanvasで作る方がいいのか？DOMに落とし込む方がいいのか？ 同じような悩みを持っている方がたくさんいる気がする（？）のですが、なかなか日本語検索でヒットしないので、今回記事を書こうと思いました。 React Flowとは？ まずは、公式サイトからの翻訳から。 ノードベースのエディターとインタラクティブなダイアグラムを構築するための高度にカスタマイズ可能な React コンポーネント MIT ライセンス
より良いReact開発者になり、より優れたコードを書き、コーディング面接で抜き出るため、Reactの技量を改善するすぐに使える知識です。 さあ、皆さん。始めましょう。 1. Reactフックを使った関数コンポーネント フックはReact v16.8で導入され、Reactの関数型プログラミングを大きく向上させました。Reactフックで、クラスコンポーネントの代わりに関数コンポーネントが使えますし、使うべきです。しかし...関数コンポーネントとステートとは？ライフサイクルメソッドとは？ 怖がる必要はありません。Reactフックを使えばできます。 例をいくつか見てみましょう。 これは、クラスを使う従来の方法です。次のようにuseStateフックが使えます。 簡単に見えますか？その通りです！useStateフックを使って、初期状態を空の文字列（''）に設定し、現在の状態（value）とその状態を変
TypeScript の型定義に凝りすぎじゃね？ ここ数年で、Qiita や Zenn で TypeScript の話を見かける機会が多くなった。JavaScript には Java のような型定義がなく、初心者の混乱の元・ひいては障害の元になりうるのはよく分かる。 しかし、最近どうにもこうにも、TypeScript でむりくり型定義するような Tips を多く見かけて、疑問に思っている。たかが TypeScript に頑張り過ぎじゃね？ と。 【TS】TypeScript 4.0 の新機能 - Qiita こういう新機能とか、追加されるのはいいんだけど、本当に便利なんか？と思ってしまう まず、TypeScript による型定義は単なる Linter でしかない。コードが実行される時は基本的に JavaScript に変換され、TypeScript の構文で記した型定義は消失する。コーディ
導入経緯 当社は受注開発のIT企業である。2023年に長らくお世話になったVimの利用を辞め、VSCodeを使い始めた。 当社の実情 当社のエンジニアは2022年時点で全員がVimを使っていた。当時の案件はメインがRuby on Rails関連であったことも相まって、世に出回る便利なエディタ、IDEに関する情報感度が極めて低かった。 Rails案件ではVimを使うことに対して大きな問題はなかった。補完がある程度効けばバックエンドの実装に支障がないからである。エンジニアとしてそれでいいのかという葛藤は当然あったが、当社のエンジニアは日々の業務をこなすことに集中していた。 (設立当初から積み上げられた歴史としてのvimrc) 転機 ついにその時が来てしまった。 そう、Vue、Typescript案件が唐突に現れたのである。 当社のエンジニアは皆狼狽した。 Vimで培われた爆速タイピングは、es
先日、React Server Componentsについてまとめる機会がありました。 この記事では、React Server Componentsの概要と、デモを触る中で感じたことについてご紹介します。 React Server Componentsとは React Server Componentsは、Reactコンポーネントをサーバーサイドでレンダーする新しい技術です。 一部のコンポーネントをサーバーサイドでレンダーしてしまうことで、アプリケーションのパフォーマンスを上げることを目的とします。 図は、デモの画面のうち、サーバーでレンダーされる部分を青で、クライアントでレンダーされる部分を赤で示したものです。 ページ全体をサーバーでレンダーするのではなく、一部のコンポーネントはクライアントにレンダーさせていることがわかります。 また、React Server ComponentsはCo
『Rustで作るプログラミング言語』を読んで、かねてから構想していた自作言語を形にした - Islands in the byte stream
Rustで作るプログラミング言語という書籍が先日発売されました。簡単なプログラミング言語を作ってバイトコードに変換して実行したりネイティブコードに変換して実行してみよう、という本で、大変面白く読みました。最終的にまあまあ本格的な言語になるので、これを元にするとわりとちゃんとした言語を作れそうです。 この書籍で最終的に作られる言語はこちら: GitHub - msakuta/ruscal: Programming language implementation learning project ちょうど私も、以前から構想していた言語があったので、ちょっと作ってみました。というのも、TypeScriptを設定記述言語としてさまざまなプログラミング言語から使えると便利ではないかとずっと思っていたのです。 この設定言語で複雑なことができる必要はなく、最終的にはJSONに準ずるデータ構造になればよい
技術書をソフトウェア開発する
本日のテーマ Why: なぜ jsprimer は始まり、更新され続けるのか？ How: どうやって更新を実現しているのか？ Learn: 技術書を「ソフトウェア開発」することから得られる知見 Future: これからの jsprimer の展望 [fit] なぜ、TSKaigi で JavaScript の話をするのか？ TSKaigi のミッション 学び、繋がり、”型”を破ろう なぜ TSKaigi で JavaScript の話をするのか？ TypeScript と JavaScript の関係性 TSKaigi のミッション: 「学び、繋がり、”型”を破ろう」 TypeScript から「型」を取り除くと JavaScript になる JavaScript を学ぶことは、TypeScript の理解を深めることに繋がる [fit] $ node --experimental-str
Romeとは 現代のJavascript開発には多くのツールチェーンが必要とされます。Babel,webpack,Jest,ESLint,Prettier,Typescriptなどを組み合わせて開発することが多く、さらにこれらの一部代替選としてesbuild,SWC,Viteなどのツールチェーンの選択肢が存在し、選択肢の多さやその組み合わせの複雑さに苦い思いをしたことがある方も少なくないのではないと思います。 こうした中で、新たに開発が進められているツールチェーン、Romeをご存知でしょうか？ Romeは先に挙げたように複数のツールチェーンを役割ごとに組み合わせて使うのではなく、1つのツールチェーンでこれら全ての役割を担ってしまおうという壮大な計画を持つツールチェーンです。 Romeは2020/03にFacebookより発表されました。現在は法人化され、yarnやBabelの生みの親である
ある機能を実装する際、完成形のコードになるまでには、プログラムとして不正確な状態や、プロダクト品質ではない状態を経る 静的型検査や lint rule に違反したコードが途中に挟まる 型エラーや lint エラーは望ましくないので、できるだけ早くこうした情報を開発者に伝え、気付けるようにすると良い CI でこうしたエラーを検知して、Pull Request をマージする前に気づけるようにするとか エディタ上にエラーの情報を表示して、コーディング中に気づけるようにするとか エラーを積極的に通知してくれるのはありがたいけど、やりすぎには注意するべき なんとなくでも動いてくれたほうが嬉しい 例えば lint エラーがあった際に、watch モードで起動しているビルドやテストの実行を止めて、lint エラー見つけたよーと教えてくれる開発環境がたまにあるけど... 別にビルドやテストの実行は止める必
TypeScriptでは配列が空でないことを型レベルで表現できます。 この記事ではその型をNonEmptyArray<T>と書くことにします。 結論だけ先に書くと、次のように定義するのが正しいです。 export type NonEmptyArray<T> = [T, ...T[]] | [...T[], T] 現在ネット上では上記とは異なる、少し不具合のある型定義が紹介されているので要注意です。 それらも含めて簡単に解説します。 よくある間違いその1：T[] & { 0: T } ２つあるうち最初に紹介するのはこの型定義です。[1]
【TypeScript と友達に】Type Challenges を全問解いたのでエッセンスと推し問題を紹介してみる - 前編
【TypeScript と友達に】Type Challenges を全問解いたのでエッセンスと推し問題を紹介してみる - 前編 はじめに 自己紹介 初めまして、@kakekakemiya と申します。 現在は東京大学大学院学際情報学府の修士 1 年で、フロントエンドエンジニアとして活動しています（25 卒の就活生です）。TypeScript × React × Next.js が主戦場ですが、Flutter でモバイルアプリを開発するときもあります。 今回は自分の TypeScript 力の向上のために、合計 170 問あるType Challenges を全問解いたので、Type Challenges における推し問題を紹介しながら、型パズルを解く上でのエッセンスを述べていく記事を書いてみようと思います。 Zenn での初投稿なので、何かと至らない点があるかもしれませんが、よろしくお願い
ReadableStream text(), json(), bytes(), blob(), WebSocket client compression with `permessage-deflate`, `bun pm version`, reduced memory usage f...
2024年に調べたり構築した開発環境について
はじめに 2024 年に調べたり構築した開発環境について、振り返っておこうと思います。基本的に Linux をメインに Web アプリの開発環境を構築することが多いです。 今どきの Web アプリの開発環境というと、VS Code + Docker + Git が必須となっているので、これらをベースとして環境構築をしています。2024 年は、これらを使った開発環境の構築をしていました。また、構築にあたって、いろいろと調べていました。 Visual Studio Code Visual Studio Code は、Linux、Windows、macOS に対応していて、Intel 系 CPU だけでなく ARM 系 CPU にも対応している OSS ベースの高機能エディタということで、重宝しています。VS Code や、vscode と省略されることがあります。 本体だけでも十分便利なのです
本書執筆時点での初級〜中級編の全問に実際に取り組み、解説と解答例を収録しました。本書では各章の最初にそのPartの問題を解くために必要なTypeScriptの知識を解説します。その後、実際にtype-challengesの問題を実践します。各問には問題を解くためのヒントも掲載しているので困ったら読んでみてください。以上のように、座学→実践という形式でTypeScriptの型システムを学ぶことを目指します。
何問解ける？TypeScriptクイズ！ #techtekt Q - techtekt
みなさまこんにちは。techtekt編集部です。 パーソルキャリアのエンジニアやデータサイエンティストなどが出題する「techtekt Q」という新たなコンテンツをスタートしました。 社内でよく使われる言語から、注目しているフレームワーク、答えを導くプロセスなど、さまざまな視点でクイズを出題します！ トップバッターをかざってくれたのは、主に新規サービスの開発を担う「サービス開発部」からYuto SAGAWAさんと、@_k725さんからの出題です。さて、あなたは何問解けますか？？？ ※Yuto SAGAWAは退職していますが、本人の同意を得て掲載を継続しています。 出題背景 私達のチームではメインの開発言語にTypeScriptが採用されています。 TypeScriptには静的型付けなどがあり、またトランスパイルする時点でエラーが分かることから、複数名での開発で便利なことが特徴です。 便利で
Pythonが教育用途において十分だという話
Pythonが教育用途において十分だという話 今話題のPythonを教えている現役の講師です。Pythonを教える際に重視すべきだと考えている機能等について書いておきます。 dataclass / Pydantic 自分は型ヒントよりもdataclassやPydanticを使った型付けを重視しています。いわゆるクラスベースな言語の書き方が大事だと考えています。 dataclass Pythonは動的型付け言語であり、interface相当の機能すらclassの構文で書く変わった言語です。近年Pythonの型ヒントは少しづつ充実してきていますが発展途上であることは否めないですし、何より実行時にその型であることは保証されないので、dataclass等を使った開発スタイルが依然強力だと考えています。 Python+TypeScriptというようなスタックを使う際には両言語の差に混乱するでしょう。
先日 CDK for Terraform が GA になりました。 CDK for Terraform を使うことにより、 TypeScript や Go などといったプログラミング言語を使って Terraform エコシステムを利用したインフラの定義やプロビジョニングを行うことができます。 「Go でインフラが書ける」と聞き、ふと思ったことがこちらです。 というわけで書きました。 (2022/10/27 追記) CI/CD も Go で書いた記事を公開しました。 作ったもの GoGoGo 猫の画像をランダムで表示するサンプルアプリです。 主な利用技術について簡単に紹介します。 利用技術 Go 説明不要ですね。 Google 様が作ったプログラミング言語です。 Gin Go の軽量な Web フレームワークです。 公式の紹介に「パフォーマンスは Martini の最大 40 倍です」と書か
OSS活動と好きな技術が新しいキャリアを切り開いた ー 活用も進む注目のDeno開発企業で私が働く理由 - Findy Engineer Lab
Webのフロントエンド開発言語として真価を発見されたJavaScriptは、数年後に今度はサーバーサイド開発言語として再発見されます。しかし、その立役者となったNode.jsの作者ライアン・ダール（Ryan Dahl）はNode.jsの開発を離れ、新しいJavaScript実行環境としてDenoを生み出しました。 ▶ Deno - A modern runtime for JavaScript and TypeScript 今回お話しを伺った日野澤歓也（@kt3k）さんは、2018年からオープンソース活動としてDenoにコントリビュートを重ねた結果、作者のライアン・ダール自身にリクルーティングされ、2021年1月にその開発会社であるDeno Land Inc.にジョインしました。現在はフルタイムのOSS開発者として勤務しています。 JSConf JP 2021における日野澤さんの発表「De
OpenAI が提供している ChatGPT は非常に面白いですね。今年以後、GPTやChatGPT周りがさらに流行ると思います。 この記事は、TypeScriptでChatGPTクローンを作る第一弾です。長くなりすぎるため、この記事では、GPTを使った検索エージェントを実行するまでを取り上げます。 検索エージェントは「ぼっち・ざ・ろっくの作者は？」と尋ねたら検索エンジンとGPTを使って「はまじあき」という結果を生成できる技術です。 またこの記事や、続く記事でLangChainのプロンプトをあれこれ読み解いていこうと考えています。 筆者は機械学習の初心者であるため、間違ったことが書かれている可能性があります。間違いがあった場合は、ぜひご指摘いただけると幸いです。 なお、この記事では添削にChatGPTおよびGPT-3.5を使っています[1]。 どうやってTypeScriptでChatGPT
対象 業務レベルでサーバーサイドでJestを書いたことはないけれど、新プロジェクトでは書くことになったみたいな方を想定して記述しています。 Jestについては中々ベストプラクティスが集まりにくいので、経験的にこう書くと「きれいに」・「早く」・「正確に」書けるよというTipsを集めてみました。もし、よろしければお読みください。 前提 TypeScript Node.js Jest DBアクセスありの状態を想定しています 1. it文内では、必ず1回は、expectをつかって検証をする JestのPRをレビューしてるとたまに見受けるのですが、expectを使ってないケースがあります。 // NG it('userを正常に、作成できること', async() => { await createUser({ name: 'Mike' }); }); // OK it('pdfが正常に削除できること
「メリハリのある TypeScript」で運用しながら型安全性を高めやすい TypeScript リプレースを行う - Mobile Factory Tech Blog
こんにちは、21 卒エンジニアの id:d-kimuson です。 モバイルファクトリーでは、最近のプロダクトではフロントエンドに TypeScript を採用していますが、僕がアサインされているプロダクトは歴史が長く JavaScript で書かれていて、今回 TypeScript へのリプレースを行いました。 既存プロダクトの TS リプレースではしっかり型付けすることは難しいので、型チェックオプションを緩くしてリプレースすることが多いと思います。しかし、既存コードからリプレース後のコードまで全て型安全性が担保できなくなってしまうので、後からの strict 化は非常に大変になってしまいます。 今回のリプレースでは、型チェックオプションは緩くしない代わりに @ts-nocheck や @ts-expect-error を使用することで、段階的に型安全性を高めやすい形でリプレースを行いま
はじめに@typesスコープを管理しているDefinitely Typedは、Microsoftから支援を受けているものの、Microsoftの脆弱性報奨金制度におけるセーフハーバーの対象ではありません。1 本記事は、公開されている情報を元に脆弱性の存在を推測し、実際に検証することなく潜在的な脆弱性として報告した問題に関して説明したものであり、無許可の脆弱性診断行為を推奨することを意図したものではありません。 Definitely Typedに脆弱性を発見した場合は、Definitely Typedのメンバーへ報告してください。 要約Definitely Typedのプルリクエスト管理Botに脆弱性が存在し、悪意のあるプルリクエストをDefinitelyTyped/DefinitelyTypedリポジトリへマージすることが可能だった。 これにより、npm上の@typesスコープ配下に存在す
【TypeScript】カリー化・部分適用は便利だよ！ カリー化・部分適用利用してますか？ 調べたけど「関数を第一級オブジェクトとしてー」とか「関数を部分適用してー」とか説明が講義っぽくて途中で諦めた方も多いと思います。自分もそうでした。 また、知ってるけどどんな時に使うべきか迷って使ってないという方もいると思います。 具体的なコードを交えながら、カリー化・部分適用について、噛み砕いて説明していきたいと思います。 なお、すべてのTypeScriptのサンプルコードは実際に動かして確認することができますので、TypeScript Playgroundなどで是非お試しください。 カリー化と部分適用 まずはカリー化と部分適用の定義をば。 カリー化 (currying, カリー化された=curried) とは、複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引
フロントエンド API コール時のエラーハンドリングを軽く整理（Fetch API・typescript-fetch・TanStack Query） - カミナシ エンジニアブログ
カミナシのソフトウェアエンジニア佐藤です。カミナシレポートの開発に携わっています。 フロントエンドのエラーは「画面リロードやブラウザ再起動で復旧できる（かもしれない）」「クラッシュしてもユーザーの端末に閉じる」などの理由から、バックエンドよりは精緻に扱われない傾向があると個人的には感じています。 その一方、カミナシレポートは、ノンデスクワーカー向けの不安定なネットワーク環境で利用されることも多々あるアプリです。そのため、デジタルツールに不慣れな方のために精緻なフィードバックが必要とされる、リロードに頼ることが難しいケースがある、などの理由でエラーの扱いにも慎重になる必要があります。 本記事では、カミナシレポートのフロントエンド開発をする中で、 バックエンドの API コール時にエラーが発生する条件とその内容（型・クラス） これらエラーをハンドリングする箇所 について、把握しておきたいと感じ
PrismaのTypedSQLがなぜアツイのか
Prisma界隈で話題沸騰中（自分調べ）のTypedSQLだが、自分の中ではかなりアツいと思っているので、その理由を語ろう。なおTypedSQLの機能とか仕組みについては記述しないのでドキュメントや以下の記事を参照するとよい。 Prismaの難しさ 複雑なクエリを組み立てるのが特に難しい。複雑といっても何10行もあるようなクエリとかではなく、joinとか集計関数がいくつかあるくらいで十分複雑になる。たとえば特定のユーザーに紐づく記事をコメントの数を含めて取得したいとする。クエリは雰囲気こんな感じ。SQLとしては全然難しくない。 SELECT posts.id, count(comments.id) AS cnt FROM posts INNER JOIN users ON posts.author_id = users.id LEFT JOIN comments ON posts.id =
TypeScript/JavaScript Array完全攻略2024 | フューチャー技術ブログ
TypeScriptアドベントカレンダーの12/5のエントリーです。昨日は@nanasi-1さんの【TypeScript】ジェネレーターによる遅延評価でフィボナッチ数列を生成するでした。 イマドキのJavaScriptの書き方2018というのを以前書いたのだけど、配列周りはかなり変わっているな、というのを思ったので、そこの部分だけアップデートするつもりで書いてみました。 実環境で使えるECMAScriptバージョン今時のブラウザは常に最新に更新されるはずなのでECMAScript 2024の機能もフルに使えるはずですが、おそらくNode.jsのLTSが一番古いJavaScriptエンジンということになるのかな、と思います。本記事執筆時点でサポート中のバージョンは以下の4つです。軽くメソッドを調べたりした感じ、こんな感じかと。202x年の11月ぐらいになると、ES202xがLTSバージョンで
Today we are thrilled to announce the availability of TypeScript 4.0! This version of the language represents our next generation of TypeScript releases, as we dive deeper into expressivity, productivity, and scalability. If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by adding syntax for static types. The idea is that by writing down the types of your val
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
【NextAuth.js 入門】認証機能から認証情報によるページの表示制御を学ぶ（Next.js & Typescript）
【NextAuth.js 入門】認証機能から認証情報によるページの表示制御を学ぶ（Next.js & Typescript） アプリケーションを開発するにあたって、避けて通れないのが認証機能の実装です。 本書籍では、NextAuth.js を使って Next.js で作成したアプリケーションに認証機能を実装していきます。さらに、認証情報を使って、表示するページの制御も行います。 認証情報によるページの表示制御にはいくつか方法がありますが、本書籍では NextPage 型を拡張した CustomNextPage 型を作成することによって、ページの表示制御を実現します。 一緒に NextAuth.js による認証機能を学んでいきましょう。
脱Reduxを試みて失敗した話、その原因と対策について
さて、年末が近づいてきましたが今年も 「Redux 使うべき使わないべきか」という話で盛り上がりましたね。 僕もずっと悩める人なのですが、@f_subal さんの Tweet や @takepepe さんの Next.js の状態管理 2020 が示すように Read 要件・Write 要件の多さで使い分けるという指針には深く納得をしました。 Redux の代替になるツールやノウハウもより活発に出てきて、Redux 以外の選択肢を考えるにあたって様々な学びがあった 1 年でした。 自分も色々と Redux 以外の選択肢を試していたのですが、その中で「やっぱ Redux を使えばよかった」と思ったときがあったので、これから Redux を剥がそうと考えている人に向けてその失敗談を語りたいと思います。 自分も手探りで正解がわかっていないところなのでアドバイス・反論・指摘などがあれば頂きたいです
はじめに フロントエンドもバックエンドもTypescriptで書きたい！ということで、T3 Stack（T3スタック）について調べてみました。 T3 Stackを利用したプロジェクトを作成するためのCLIツールcreate-t3-appが用意されており、簡単に雛形プロジェクトが作れるため、実際に使ってみました。 この記事は以下の内容をメインに紹介します。 create-t3-appの環境構築手順 雛形プロジェクトの解説（特にtRPCを用いたAPIの呼び出し方法について） T3 Stackとは T3 Stackとはsimplicity（簡潔さ）、modularity（モジュール性）、full-stack type safety（フルスタックの型安全）を追求した思想に焦点を当てています。 そしてそれらを実現するために以下6つの技術スタックが採用されています。 ✅ Next.js ✅ tRPC
起動確認 いつもの 初期設定 VSCode左下の><をクリック 開発コンテナー構成ファイルを追加 ワークスペースに構成を追加する こちらを選択することでGit上で構成ファイルを管理出来ます。 定義済みのコンテナー構成定義から Node.js & TypeSctipt 導入する、言語などを選択してください。 バージョンを指定してください。 お好きな拡張機能を追加してください。 .devcontainer/devcontainer.jsonに以下の様なファイルが出来上がります。 // For format details, see https://aka.ms/devcontainer.json. For config options, see the // README at: https://github.com/devcontainers/templates/tree/main/src/
Effective TypeScript 読んだ / 郷に入っては郷に従う - Object.create(null)
Effective TypeScript (第2版) を読んだ なんらか他の人に読んでおくと良いよと紹介できる本があると良いなと思って読みました. 2020 年以降に TypeScript を書く上での常識が概ね網羅されていると思うので, そういった前提知識に自信をつけたいならおすすめです. www.oreilly.co.jp ただ「項目18 推論可能な型でコードを乱雑にしない」で, 関数の戻り値の型アノテーションをデフォルトで省略するよう推奨していることについては明確に反対したい. より正確には, コールバックなど再利用を想定しない関数についてはデフォルトで省略してもよいが, 通常関数は再利用を目的として定義されがちなことを考えると, デフォルトで省略するというのはあまり実態に則していないと思う. 実際にこの本の後の章には戻り値の型アノテーションを書いておけばよかったのにという状況がしば
2022/11追記： Nuxt 3 の stable リリースに合わせて新しく記事を書き直しました。 祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力 上記の記事の方が最新の情報を詳しく網羅していますので、そちらを読んで頂くことをオススメします。 Nuxt.js バージョン3のPublic Betaが公開されて約2ヶ月が経ちました。 私自身この2ヶ月、プライベートでNuxt 3を触っているのですが、かなり気に入っています。 とにかく開発体験が向上していて、一言で表すと「開発していて楽しい」フレームワークです。あまりにも気持ちよく開発できるので、Nuxt 3が公開されてから明らかに睡眠時間が減っています。 ただ、実際に何が変わったのか、どんなところが良いのか、よくわからずにとりあえず様子見している方もいると思います。 Vue 3の目玉機能であるComposition APIはVu
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript におけるモジュール関連オプションの整理
より良いReactJS開発者になるための10のヒントとコツ - Qiita
TypeScript の型定義に凝りすぎじゃね？ - Neo's World
Vim から VSCode に移行して分かったたった１つの真実
React Server Components 総まとめ
全ての道はRomeへ続くのか - これからのJavascript開発を考える
試行錯誤を邪魔しない開発環境 - mizdra's blog
空でない配列を型で表現する正しい方法【TypeScript】
Bun — A fast all-in-one JavaScript runtime
Re: type-challengesから始めるTypeScript実践演習 初級〜中級編
インフラもバックエンドもフロントエンドも Go で書いてみた
TypeScriptでGPT-3.5を使ってChatGPTクローンを作る1 - GPTで検索エージェント
JestのTips集10選。サーバーサイドでNode.jsのJestを書いたことない人向け
npmの@typesスコープにおける任意のパッケージの改竄
【TypeScript】カリー化・部分適用は便利だよ！ - Qiita
Announcing TypeScript 4.0 - TypeScript
import * as 構文とパフォーマンス最適化 - Qiita
【T3 Stack】フロントエンド・バックエンドTypescript開発入門
Devcontainer がデバッグ環境構築のハードルを一気に下げるお話
Nuxt 3 を今すぐオススメしたい 15 のポイント
9db.jp
projectofnapskint.com
b.hatena.ne.jp
help.gaiagps.com
mainichi.jp
www.1-humidasu.com