[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク
TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました！ esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめに これまでの JavaScript ビルドツールと私 以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな
Microsoftは米国時間2021年5月27日、Microsoft 365 for the webのExcel Onlineで、「Officeスクリプト」が利用可能になったことを公式ブログで発表した。OfficeスクリプトはExcel Onlineの操作を記録して自動実行を可能にする機能で、テキストエディターでいえばキーボードマクロを連想すると分かりやすい。具体的には複数セルの計算やグラフ作成といった操作をTypeScriptのコードに置き換える。筆者が確認した限りでは日本語環境でも利用可能だった。 Excel Online上の操作をTypeScriptコードに変換する(画像はすべて公式ブログより抜粋) 作成したOffceスクリプトはPower Automate経由で自動実行できる。より詳細を確認するには、公式ドキュメントやサポートページ、サンプルコードに目を通すことをお薦めしたい。近年
はじめに ニコニコ生放送でフロントエンドを担当している misuken です。 今回は関心が分散してしまう理由やその原理、この問題に対する適切な対処法を通して、package by feature の合理性や、そこで重要になってくる関心の単位などについて解説していきます。 規模の大きなものを扱っている方、分類が苦手な方、分類に関して悩みを感じている方には特に有用です。 前提 Reactでコンポーネントを管理する例で説明します 当然React以外の様々なディレクトリ構成でも応用できます BCD Design の概念も覚えておくとより体系的に理解できます 精度の高い明名ができれば、分類の効率も精度も上がります 現実世界で捉える関心の分散 通常、自宅や職場でトイレに行くとき、同じフロアや同じ建物内のトイレに行きます。 もしもトイレだけの建物が隣に建っていて、そこに行かなければならないとなったらと
export type Bookmark = { id: number; url: string; comment: string; }; このファイルには型しか書いてありませんね。ということは、「型定義ファイル」として bookmark.d.ts という名前にするべきでしょうか。実はそうではなく、この場合は bookmark.ts とするべきです。 「型定義ファイル」とは、「どこか別の場所にある実装に型をつけるためのファイル」です。たとえば、以下のファイルは「どこか別の場所にある実装」に型をつけているから、 *.d.ts にするのは自然です。 いっぽう、 type Bookmark は別のどこかにある *.js の型を与えているわけではないので、 *.ts でよいです。 このように本来 *.ts であるべきものを *.d.ts にしてしまうことには問題があります。代表的な問題として型エラ
TypeScriptでテストコードを徹底的に型推論する / TypeScript Meetup 4
2020年6月16日 TypeScript Meetup #4 にて発表した資料です。
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パッケージをインポート可能に
※2019/11/8: 無料サンプルと目次を記事内に追加しました。 2019年4月に開催された技術書典６で頒布した「レガシーフロントエンド安全改善ガイド」ですが、このたびインプレスR&D社さまより商業版を刊行することになりました。 自分が商業版の技術書を書く日が来るとは思わなかったのでビクビクしています。 メディア: この商品を含むブログを見る nextpublishing.jp 表紙イラストは同人版と同様、鍋料理さんに描いていただきました。「安全な感じで！」という相談から、カワイイ工事現場が仕上がりました、とても気に入ってます。工事現場本と呼んでください。 タイトルに「迷わない！困らない！」という強気ワードが付いててちょっぴり恥ずかしいですが、迷わず困らない内容になってる・・はずです！ 同人版との違い / 加筆・修正した点 紙の本で比較すると、ページ数が110ページ程度→200ページ超と
PullRequestからチーム開発の生産性・健全性を測るCLIツールを書いてみた - $shibayu36->blog;
最近、開発チームの生産性や健全性をどのように計測したら良いかについて興味を持っている。その中で「LeanとDevOpsの科学」の中に書いてあるようなデプロイの頻度・変更のリードタイム・MTTR・変更失敗率の4指標や、開発チームの生産性・健全性を客観的に知るためにリポジトリ履歴から機械的に可視化するツールを作った - Qiitaに興味を持った。 一方、それらの指標を考えてみた時、以下のような点について悩んでいた。 マイクロサービスなどで複数レポジトリとなり、さらにデプロイ手法がそれぞれ違う状況の場合、変更のリードタイム = コミット〜本番稼働までの時間を計測するのがなかなか難しい コミットという単位だとかなり小さく、個々人のばらつきも大きすぎるように感じるので、もう少し良い単位はないのだろうか このような悩みから、PullRequestの単位で集計することで、生産性や健全性をもう少し測りやす
Design System 1.4.1 | Figma
デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 デザインシステムについての詳細や更新履歴はデジタル庁ウェブサイトをご覧ください。 ※Figma Communityにて公開中のデータは、Figma Communityの規定によりCC BY 4.0のライセンスが表記されます。ただし、このファイル内のイラストレーション・アイコン素材に関してはデジタル庁ウェブサイトに掲載の「イラストレーション・アイコン素材利用...
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
TypeScript の型定義に凝りすぎじゃね？ ここ数年で、Qiita や Zenn で TypeScript の話を見かける機会が多くなった。JavaScript には Java のような型定義がなく、初心者の混乱の元・ひいては障害の元になりうるのはよく分かる。 しかし、最近どうにもこうにも、TypeScript でむりくり型定義するような Tips を多く見かけて、疑問に思っている。たかが TypeScript に頑張り過ぎじゃね？ と。 【TS】TypeScript 4.0 の新機能 - Qiita こういう新機能とか、追加されるのはいいんだけど、本当に便利なんか？と思ってしまう まず、TypeScript による型定義は単なる Linter でしかない。コードが実行される時は基本的に JavaScript に変換され、TypeScript の構文で記した型定義は消失する。コーディ
React Flow めっちゃいいぜ
はじめに 今回の記事の結論はタイトル通り『React Flowめっちゃいいぜ』です。 こんにちは。株式会社Red Frascoの根本(github: tkcel )と申します。普段はフロントエンドを主に担当することが多いです。 この前個人開発中に以下の壁にぶち当たりました。 React（Next）でぐりぐりできるフローチャートみたいなものを作るにはどうすればいいのか？ 描画系のサービスはcanvasで作る方がいいのか？DOMに落とし込む方がいいのか？ 同じような悩みを持っている方がたくさんいる気がする（？）のですが、なかなか日本語検索でヒットしないので、今回記事を書こうと思いました。 React Flowとは？ まずは、公式サイトからの翻訳から。 ノードベースのエディターとインタラクティブなダイアグラムを構築するための高度にカスタマイズ可能な React コンポーネント MIT ライセンス
Web フロントエンドにおけるコロケーション (co-location) という考え方について - mizdra's blog
Webフロントエンド界隈の文献などにあたっていると、「コロケーション (co-location)」という考え方が時々登場します。 コロケーションを簡単に説明すると、関連するリソース同士を近くに置いておく、という考え方です。 FooComponent.tsx と同じディレクトリに FooComponent.test.tsx を置く GraphQL fragment は、クエリを発行するコンポーネントファイル (pages/user.tsx) ではなく、fragment を利用するコンポーネントファイル (components/UserInfo.tsx) の中で定義する pages/user.tsx からはサブコンポーネントのファイルで定義されている fragment を import してきて、クエリを組み立てて発行する API ドキュメントは API.md に書くのではなく、コードの中にド
より良いReact開発者になり、より優れたコードを書き、コーディング面接で抜き出るため、Reactの技量を改善するすぐに使える知識です。 さあ、皆さん。始めましょう。 1. Reactフックを使った関数コンポーネント フックはReact v16.8で導入され、Reactの関数型プログラミングを大きく向上させました。Reactフックで、クラスコンポーネントの代わりに関数コンポーネントが使えますし、使うべきです。しかし...関数コンポーネントとステートとは？ライフサイクルメソッドとは？ 怖がる必要はありません。Reactフックを使えばできます。 例をいくつか見てみましょう。 これは、クラスを使う従来の方法です。次のようにuseStateフックが使えます。 簡単に見えますか？その通りです！useStateフックを使って、初期状態を空の文字列（''）に設定し、現在の状態（value）とその状態を変
導入経緯 当社は受注開発の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に準ずるデータ構造になればよい
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 の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。Effect-TS は、以下のような特徴を備えています。 並行性（concurrency）：Fiber ベースの並行モデルにより、高いスケーラビリティと低レイテンシを実現 コンポーザビリティ（composability）：小さく再利用可能なパーツを組み合わせることで、メンテナンス性、可読性、柔軟性の高いソフトウェアを構築する リソースの安全な管理（resource-safety）：処理が失敗したとしても、安全にリソースを開放する 型安全性（type-safety）：TypeScript の型システムを活用した型推論と型安全性に焦点を当てている エラー処理（error handling）：構造化された信頼性の高い方法でエラーを処理する 非同期性（asynchronicity
Pythonが教育用途において十分だという話
Pythonが教育用途において十分だという話 今話題のPythonを教えている現役の講師です。Pythonを教える際に重視すべきだと考えている機能等について書いておきます。 dataclass / Pydantic 自分は型ヒントよりもdataclassやPydanticを使った型付けを重視しています。いわゆるクラスベースな言語の書き方が大事だと考えています。 dataclass Pythonは動的型付け言語であり、interface相当の機能すらclassの構文で書く変わった言語です。近年Pythonの型ヒントは少しづつ充実してきていますが発展途上であることは否めないですし、何より実行時にその型であることは保証されないので、dataclass等を使った開発スタイルが依然強力だと考えています。 Python+TypeScriptというようなスタックを使う際には両言語の差に混乱するでしょう。
ノーコードは形を変えた現代の RPG ツクールなのではないか - mizdev の記事では、ノーコードのビジュアルプログラミングが発展性を欠く理由として、次の理由を挙げました。 汎用的なビジュアルプログラミング基盤(Scratch みたいなものではなくプロユースなもの) ↑ 上でのビジュアル環境でのデータベースのグラフ構造のビジュアル化手法 ↑ 上でのビジュアル環境でのパイプラインのビジュアル化手法 ↑ 上での UI とデータと UI のマッピングのビジュアル化手法 これらを隠蔽してオートスケールするマネージレスなインフラ基盤(これはパイプライン実装の中身) で、こんなものを作った話 現代の Intellisense + Formatter 感覚 TypeScript の補完と、保存の度に prettier をバリバリに効かせた状態でプログラミングをしていると、そもそも自由文脈でコードを書
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
【TypeScript】カリー化・部分適用は便利だよ！ カリー化・部分適用利用してますか？ 調べたけど「関数を第一級オブジェクトとしてー」とか「関数を部分適用してー」とか説明が講義っぽくて途中で諦めた方も多いと思います。自分もそうでした。 また、知ってるけどどんな時に使うべきか迷って使ってないという方もいると思います。 具体的なコードを交えながら、カリー化・部分適用について、噛み砕いて説明していきたいと思います。 なお、すべてのTypeScriptのサンプルコードは実際に動かして確認することができますので、TypeScript Playgroundなどで是非お試しください。 カリー化と部分適用 まずはカリー化と部分適用の定義をば。 カリー化 (currying, カリー化された=curried) とは、複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引
OpenAI が提供している ChatGPT は非常に面白いですね。今年以後、GPTやChatGPT周りがさらに流行ると思います。 この記事は、TypeScriptでChatGPTクローンを作る第一弾です。長くなりすぎるため、この記事では、GPTを使った検索エージェントを実行するまでを取り上げます。 検索エージェントは「ぼっち・ざ・ろっくの作者は？」と尋ねたら検索エンジンとGPTを使って「はまじあき」という結果を生成できる技術です。 またこの記事や、続く記事でLangChainのプロンプトをあれこれ読み解いていこうと考えています。 筆者は機械学習の初心者であるため、間違ったことが書かれている可能性があります。間違いがあった場合は、ぜひご指摘いただけると幸いです。 なお、この記事では添削にChatGPTおよびGPT-3.5を使っています[1]。 どうやってTypeScriptでChatGPT
何問解ける？TypeScriptクイズ！ #techtekt Q - techtekt
みなさまこんにちは。techtekt編集部です。 パーソルキャリアのエンジニアやデータサイエンティストなどが出題する「techtekt Q」という新たなコンテンツをスタートしました。 社内でよく使われる言語から、注目しているフレームワーク、答えを導くプロセスなど、さまざまな視点でクイズを出題します！ トップバッターをかざってくれたのは、主に新規サービスの開発を担う「サービス開発部」からYuto SAGAWAさんと、@_k725さんからの出題です。さて、あなたは何問解けますか？？？ ※Yuto SAGAWAは退職していますが、本人の同意を得て掲載を継続しています。 出題背景 私達のチームではメインの開発言語にTypeScriptが採用されています。 TypeScriptには静的型付けなどがあり、またトランスパイルする時点でエラーが分かることから、複数名での開発で便利なことが特徴です。 便利で
「メリハリのある TypeScript」で運用しながら型安全性を高めやすい TypeScript リプレースを行う - Mobile Factory Tech Blog
こんにちは、21 卒エンジニアの id:d-kimuson です。 モバイルファクトリーでは、最近のプロダクトではフロントエンドに TypeScript を採用していますが、僕がアサインされているプロダクトは歴史が長く JavaScript で書かれていて、今回 TypeScript へのリプレースを行いました。 既存プロダクトの TS リプレースではしっかり型付けすることは難しいので、型チェックオプションを緩くしてリプレースすることが多いと思います。しかし、既存コードからリプレース後のコードまで全て型安全性が担保できなくなってしまうので、後からの strict 化は非常に大変になってしまいます。 今回のリプレースでは、型チェックオプションは緩くしない代わりに @ts-nocheck や @ts-expect-error を使用することで、段階的に型安全性を高めやすい形でリプレースを行いま
脱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/
先日 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 倍です」と書か
はじめに@typesスコープを管理しているDefinitely Typedは、Microsoftから支援を受けているものの、Microsoftの脆弱性報奨金制度におけるセーフハーバーの対象ではありません。1 本記事は、公開されている情報を元に脆弱性の存在を推測し、実際に検証することなく潜在的な脆弱性として報告した問題に関して説明したものであり、無許可の脆弱性診断行為を推奨することを意図したものではありません。 Definitely Typedに脆弱性を発見した場合は、Definitely Typedのメンバーへ報告してください。 要約Definitely Typedのプルリクエスト管理Botに脆弱性が存在し、悪意のあるプルリクエストをDefinitelyTyped/DefinitelyTypedリポジトリへマージすることが可能だった。 これにより、npm上の@typesスコープ配下に存在す
【NextAuth.js 入門】認証機能から認証情報によるページの表示制御を学ぶ（Next.js & Typescript）
【NextAuth.js 入門】認証機能から認証情報によるページの表示制御を学ぶ（Next.js & Typescript） アプリケーションを開発するにあたって、避けて通れないのが認証機能の実装です。 本書籍では、NextAuth.js を使って Next.js で作成したアプリケーションに認証機能を実装していきます。さらに、認証情報を使って、表示するページの制御も行います。 認証情報によるページの表示制御にはいくつか方法がありますが、本書籍では NextPage 型を拡張した CustomNextPage 型を作成することによって、ページの表示制御を実現します。 一緒に NextAuth.js による認証機能を学んでいきましょう。
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 =
対象 業務レベルでサーバーサイドで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が正常に削除できること
JavaScriptには、import * as という構文があります。これは、インポート先のモジュールの中身全部をオブジェクト（モジュール名前空間オブジェクト）として取得できる構文です。 import * as mod from "./some-module"; console.log(mod.foo, mod.bar); たまに、「この構文を使うとTree Shakingが効かなくなる」といった説明が見られることがありますが、必ずしもそうではありません。そこで、この記事ではimport * as構文とパフォーマンス最適化に関連する正しい知識と、その背景をご紹介します。 webpackで検証してみよう Tree shakingを行うのはモジュールバンドラであることが知られています。そこで、webpackを使って色々と構文を検証してみましょう。今回は次のような設定を用います。これは最適化を
【TypeScript と友達に】Type Challenges を全問解いたのでエッセンスと推し問題を紹介してみる - 前編
【TypeScript と友達に】Type Challenges を全問解いたのでエッセンスと推し問題を紹介してみる - 前編 はじめに 自己紹介 初めまして、@kakekakemiya と申します。 現在は東京大学大学院学際情報学府の修士 1 年で、フロントエンドエンジニアとして活動しています（25 卒の就活生です）。TypeScript × React × Next.js が主戦場ですが、Flutter でモバイルアプリを開発するときもあります。 今回は自分の TypeScript 力の向上のために、合計 170 問あるType Challenges を全問解いたので、Type Challenges における推し問題を紹介しながら、型パズルを解く上でのエッセンスを述べていく記事を書いてみようと思います。 Zenn での初投稿なので、何かと至らない点があるかもしれませんが、よろしくお願い
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web版Excelを自動実行する「Officeスクリプト」がGA
アンチパターンを理解して package by feature へ
`*.d.ts` ファイルをコミットする前に知ってほしい4つのこと
「レガシーフロントエンド安全改善ガイド」を商業出版します #技術書典 - memo_md
TypeScript におけるモジュール関連オプションの整理
TypeScript の型定義に凝りすぎじゃね？ - Neo's World
より良いReactJS開発者になるための10のヒントとコツ - Qiita
Vim から VSCode に移行して分かったたった１つの真実
React Server Components 総まとめ
全ての道はRomeへ続くのか - これからのJavascript開発を考える
試行錯誤を邪魔しない開発環境 - mizdra's blog
空でない配列を型で表現する正しい方法【TypeScript】
エラーや非同期処理をより安全に扱うための TypeScript ライブラリ Effect-TS
コードとビジュアルの双方向編集なエディタを試作して ビジュアルプログラミングについて考えてみた
【TypeScript】カリー化・部分適用は便利だよ！ - Qiita
TypeScriptでGPT-3.5を使ってChatGPTクローンを作る1 - GPTで検索エージェント
【T3 Stack】フロントエンド・バックエンドTypescript開発入門
Devcontainer がデバッグ環境構築のハードルを一気に下げるお話
インフラもバックエンドもフロントエンドも Go で書いてみた
npmの@typesスコープにおける任意のパッケージの改竄
Amazon.co.jp: プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発: Boris Cherny (著), 原隆文 (翻訳), 今村謙士 (監修): 本
JestのTips集10選。サーバーサイドでNode.jsのJestを書いたことない人向け
import * as 構文とパフォーマンス最適化 - Qiita