TSKaigi 2024
オンライン視聴の方 オンライン視聴には無料の参加登録が必要です。下記リンクからお進みください。 オンラインは当日参加も受け付けていますので、お気軽にご参加ください。 諸注意事項 ・会場にはwifi(id,passはお手持ちのリーフレット参照)がありますのでご自由にお使いください。ただし、遅延を避けるためdocker pull等、負荷が懸念される操作はご遠慮ください。 ・各トラックルーム、最前列のカバー付きの椅子は個人スポンサーの優先席です。個人スポンサーの優先入場時にTシャツの確認をさせていただいております。 ・本日は記録のために、カメラマンが撮影を行っています。個別対応はできかねますので、あらかじめご了承ください。 ・地下一階のホワイエ(エスカレーターを降りた場所)は、飲食禁止エリアとなっています。各トラックのルーム内や、休憩室でお済ませください。 日本最大級の TypeScriptをテ
Announcing typescript-eslint v7 | typescript-eslint
typescript-eslint is the tooling that enables standard JavaScript tools such as ESLint and Prettier to support TypeScript code. We've been working on infrastructure improvements that will help ensuring long-term interoperability with other tools in the ecosystem. In particular this major release tightens our dependency requirements to help set us up for ESLint v9 and includes a new package typescr
【SkyWay】みんな俺になる。新時代の匿名会議 - Qiita
こちらは「Qiita Engineer Festa 2023 で開催中の 「 新しくなったSkyWayを使ってみよう！」への投稿記事となります。 はじめは簡単なチャットアプリを作ろうと触り始めましたが すぐできてしまったので、 色々機能を足していたらなんだか不思議なアプリができました。 作ったもの 実装方法やSkyWayの使い勝手の話をする前にどんなものを作ったのか ↓これです↓ 🤔？ ...... ... チャットルームに参加すると全員もれなく ジョイマン高木さん になります。 また声のピッチも上下できるので個人特定を著しく困難にした新時代匿名会議ツールです。 画面遷移図としてはこちら↓ チャンネル名が中二病なのはカッコいいからです (ファンタジー用語メーカー利用) PC版Chrome限定ではあるものの、ユーザーは特に準備することなく※1利用することができるのでお手軽ですね。 (複数デ
TypeScript の型のエラーはどんなときに発生するのか？～部分型と変性で学ぶ TypeScript の型システム～ - Qiita
TypeScript の型のエラーはどんなときに発生するのか？～部分型と変性で学ぶ TypeScript の型システム～TypeScript型型システム TypeScript の型のエラーはどんなときに発生するのか？ TypeScript は静的型付け言語です。 型のチェックをコンパイルやエディタの拡張機能などを通じて行い、実行前に型のエラーを示してくれます。 では、型のエラーはどんなときに発生するのでしょうか？ その手掛かりとして、TypeScript の実際の型エラーを見てみましょう。 string 型は number 型に 代入 できません。 つまり、「右辺の値の型」が「左辺の変数の型」に代入できない場合に、エラーが発生するようです。 では、どんな場合に代入できて、どんな場合に代入できないのでしょうか？ 型が同じ場合はもちろん代入できます。しかしそれだけではありません。 答えを言って
TypeScriptで条件分岐時の可読性の高い変数設定 - Qiita
本記事を対象とする人 TS,JSで極力letではなくconstを使うべきと思っている人 結論 ts-patternが便利 https://github.com/gvergnaud/ts-pattern 解説 何かのオブジェクトを参照して場合分けして、変数を定義したい場合があると思います 例 let platform = ''; if (game.name === 'ff3') { platform = 'fc'; } else if (game.name === 'ff4') { platform = 'sfc'; } const platform = (() => { if (game.name === 'ff3') { return 'fc'; } else if (game.name === 'ff4') { return 'sfc'; } return ''; })(); //--
【入門】フロントエンドのテスト手法まとめ - Qiita
はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の対象者 フロントエンドのテストの概要を知りたい人 React-Testing-LibraryとJestについて知りたい人 具体的なテストの書き方を学びたい人 なお本記事では、React-Testing-Libraryの具体的な書き方についてをメインにしている
SvelteではじめるWeb Components開発 - Qiita
はじめに あまり知られていないかもしれませんが、Svelteを使ってWeb Componentsを開発することができます。 本記事ではSvelteを使ってWeb Componentsを開発するやり方を紹介したいと思います。 Web Componentsとは webcomponents.orgから引用 Web Componentsは、WebプラットフォームAPIのセットで、WebページやWebアプリケーションで使用する、新しいカスタム、再利用可能な、カプセル化されたHTMLタグを作成することを可能にします。カスタムコンポーネントとウィジェットはWeb Componentsの標準に基づいて構築され、モダンブラウザで動作し、HTMLで動作するあらゆるJavaScriptライブラリやフレームワークで使用することができます。 Web Componentsは、既存のWeb標準をベースにしています。We
APIから取得したデータの型定義がほしい！って時はJSONから自動生成します。 - Qiita
型定義ほすぃ〜 ちょっとしたプロジェクトで、サードパーティのAPIを使用する際に型定義が無くて困ることがしばしばありました。OpenAPIに登録されていれば自動生成することもできますが、されていなかった場合には今回紹介する手法が使えるかもしれません。 MakeTypes こいつです。 使い方はかんたん。 まず何らかの方法でJSONをまるっとクリップボードに保存します。 自分は一度ブラウザに表示させてやってます。 firefox developer Edition使ってます。 あとはMakeTypesにいって好きな名前付けて貼ると... 型定義が生成されます。 おそらくここから微調整が必要になりますが、大まかなスタートラインとしては十分かと。少なくともゼロから全部自力で書くよりはマシです。 以上。 「それよりこうした方がよくない？」ってのがあれば是非教えて下さい。
CoffeeScript 辞めました - クラウドワークス エンジニアブログ
CoffeeScript 辞めました はじめに こんにちは、CrowdWorks のジャンヌチームのエンジニア bugfire です。 CrowdWorks は歴史のあるサービスで CoffeeScript が利用されている箇所が大量にあります。 具体的には411ファイルありました。1 いまとなっては CoffeeScript を利用したコードを新たに書くことも少なくなり、改善するときに TypeScript で書き直されることも多くなってきました。しかし、個別に変換すると時間が掛かってしまうため、まとめて機械的に変換することにしました！ 3行まとめ CoffeeScript より TypeScript の方に記述を移していきたい。 利用している Sprockets の CoffeeScript 変換コードを借用して全ファイルを変換しました。 確認は変換前後の出力 JavaScript コ
Amplify Function を TypeScript で開発し、ESLint, Prettier で解析する CI/CD 環境 - Qiita
Amplify Function を TypeScript で開発し、ESLint, Prettier で解析する CI/CD 環境TypeScriptESLintprettieramplifyhusky Amplify 便利ですよね。Amplify Function を TypeScript で実装し Lambda にデプロイする方法を調査しました。 本記事は Amplify Docs の公式サイトの解説を元に TypeScript を ESLint と Prettier で静的コード解析した上で Lambda にデプロイする一連の流れを説明します。 本題ではないものは割愛して公式サイトのリンクを掲載します。 CI/CD 環境の考え方 基本となる考え方は上記記事と同じです。 CI はソースコードの①静的コード解析→②テストを担う CD は③ビルド→④デプロイを担う 環境構築 Amplif
オープンソースをメンテするときに自分が考えていること
@azu さんのブログ記事 Maintainer Month: オープンソースをメンテナンスするコツ を読んで GitHub が Maintainer Month というイベントを主催していることを知りました。 自分は Maintainer Month の Sponsoring の対象でありませんが、自分がオープンソースのプロジェクトをメンテするときに考えていることを書き残しておこうと思います。 オープンソースガイド などにはすごいためになることが書かれていますが、積極的な内容で自分にとっては読むだけで疲れてしまうような内容でもあります。なのでこの記事ではあえて自分が普段考えていることの中でも消極的なことについて書いてみます。 オープンソースのメンテナンスに疲弊している人や、オープンソースに貢献している人、もしくは貢献しようと思っている人に「こんなゆるい気持ちでやってる人もいるんだ」と思っ
【React】ライブラリーを使わないでパララックスを使って、リッチなサイトを作る - Qiita
概要 みなさんは、パララックス（parallax）と聞いたことがあるでしょうか？ 最近のサイトは、要素がふわっとフェードインしたり、要素の移動速度が違ったり、 スクロールに応じて色々なアニメーションが発火します。 このようなアニメーションを実装するのは大変です。 そのため、多くのライブラリーが公開され、簡単に実装できるようになっています。 ただ今回は、そんなライブラリーを使わずにパララックスのアニメーションを作成し、 リッチに見えるサイトを作成しました。 ↓作ったサイトはこちらです。ご覧ください。 ※ Qiita Engeer Festa 2022にご参加もお願いします。 パララックス（parallax）についてとは？ まずパララックス（parallax）にて解説します。 パララックス（parallax）とは？ パララックスとは、視差効果のことで、 Webサイトにおいては、パララックスはス
Daggerを使用してCIパイプラインを作成する - Qiita
最近話題になっている？Daggerを使用して typescriptをトランスパイルしS3へdeployするパイプラインを作成してみました。 Daggerとは Daggerは、CICD向けのポータブルなdevkitです。 DaggerはDocker互換のランタイムでパイプラインが実行されるため、Docker互換のランタイムが動く環境であれば Daggerをそのまま実行し、同一の結果を得ることができます。 Daggerではパイプラインの記述を一般的な yaml などではなくcuelangを使用して記述します。 module/packageや型定義などの強力な構文を使用することができます。 チュートリアルなども用意されています。 メリット 上記のことからDaggerを使用することで 開発環境とCI環境の統一 CIロックインをなくすことができる といったメリットを受けることができます。 Dagge
Cloudflare Workersフレームワーク「Hono」の紹介
「Hono」というCloudflare Workers向けのフレームワークを作っています。 以前もYAPCの発表とZennの記事で紹介したものです。 Hono[炎]っていうイケてる名前のフレームワークを作っている Hono[炎] Ultrafast web framework for Cloudflare Workers. あらためて、さかのぼってみると「Initial Commit」が去年の12月15日でそれから現在405コミット。頑張っています。これは僕個人だけのものではなく、コントビューターの方のかいもあってです。ちなみに、そういうのも考慮して、個人リポジトリでやっていましたが、ある時から「honojs」オーガナイゼーションに切り替えました。 現在のバージョンは「v1.4.5」。 APIで紆余曲折ありつつも、安定してきました。また、使ってくれる人もだんだんと増えています。 今回は「現
Prettier と plugin だけで Node.js のモジュール import の並び順を整える - Qiita
はじめに Prettier を導入しているが、ESLint が導入されていない JavaScript/TypeScript の小さなプロジェクトで import の並び順を揃えたいニーズがあったため、追加したライブラリと設定を記載します ESLint を導入することで解消も可能でしたが、 ESLint を入れる程大きなプロジェクトではないため見送りました 実行環境 % sw_vers ProductName: macOS ProductVersion: 12.4 BuildVersion: 21F79 % node -v v16.7.0 % yarn -v 1.22.15 import の並び順を整える 今回追加するのは trivago が開発している prettier-plugin-sort-imports です ライブラリの追加 該当のプロジェクトでは yarn を利用していたため以下
歴史から見るTypeScriptにおけるwebpackとBabelの必要性 - Qiita
はじめに 今回はwebpackやBabelについて学習したことを理解を深めるために文章としてアウトプットしていこうと思う。 そもそもなぜwebpackやBabelに関して学習しようと思ったかは、これまでTypeScript、React等を用いて様々なアプリケーションを開発してきたが、webpackやbabelに関する知識が曖昧なまま開発ばかりを行なっていた。なんとなく"とりあえず変換してくれているもの"程度の知識しかなかったので、しっかり理解していこうと思う。 そんな中でwebpackやbabelの必要性を学習していくうちにJavaScriptの歴史を理解した方がわかりやすいと思ったため、JavaScriptの歴史についても触れていこうと思う。 JavaScriptの歴史 JavaScriptの誕生 JavaScriptの1995年にNetscapeの技術者であるブレンダン・アイクが開発し
await-to-js で非同期処理(Promise)の try/catch をなくそう - Qiita
API 通信などのエラーハンドリングはどうしていますか？ await したものを try/catch で囲む、もしくは Promise の catch を使うなどがありますが、きちんと都度エラーハンドリングしていくとコードが複雑になりがちです。 await-to-js はそういったエラーハンドリングの辛さを解消する手段の1つとして効果的です。 それでは簡単なエラーハンドリングの例を元に説明していきます。 非同期処理のエラーハンドリング 例えば「ユーザーを取得してタスクを保存する」というものを考えてみます。 async function saveUserTask(userId) { // ユーザー取得 const user = await fetchUser(userId); if (!user) { throw new Error("存在しないユーザー"); } // タスク保存 cons
Pulumi (TypeScript) で操作中の AWS アカウント ID を取得する - Qiita
はじめに AWS のリソースへのアクセス権限 （bucket policy 等） や、ログ出力先の設定などを行うために、アカウント ID を取得する機会があり調査したメモです。 AWS Classic (@pulumi/aws) の場合 AWS Classic (@pulumi/aws) は terraform の AWS Provider を元に作成されています terraform の場合は aws_caller_identity を利用しますが Pulumi でも同様の data source を利用します terraform で AWS アカウント ID を取得する場合は以下記事を参考ください。 AWS Classic (@pulumi/aws) の場合は getCallerIdentity を利用し取得 getCallerIdentity terraform 同様、 アカウント I
Pulumi (TypeScript) で AWS Native Package を利用する初期設定 - Qiita
はじめに Public preview 中の AWS Native Package の初期設定方法について本記事にまとめました。 AWS Native Package については ▼ 記事を参照してみてください Pulumi の project は作成済みであることを前提として記載します。 まだ、 project を作成していない方は以下記事や公式ドキュメントを参考に初期設定まで完了させてください。 実行環境 % sw_vers ProductName: macOS ProductVersion: 12.0.1 BuildVersion: 21A559 % node -v v16.10.0 % yarn -v 1.22.17
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - PlasmoHQ/plasmo: 🧩 The Browser Extension Framework