2024-08-06 TSKaigi サブイベント #1 フロントエンド
![tsconfig.jsonの設定を見直そう!�フロントエンド向け 2024夏](https://cdn-ak-scissors.b.st-hatena.com/image/square/6fb323bf5302819df558302736abfb876552e033/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F3a119b788c7349c495496d9bfe8a3171%2Fslide_0.jpg%3F31269485)
こんにちは、taroです! 今回は、ベースマキナのTypeScriptのプロジェクトで不要なコードの検知・削除で使用しているKnipについて紹介します。 Knip とは Knipは、TypeScript/JavaScriptのコードベースの不要なコードを検出するCLIツールです。 以下が検出できる不要なコードの例です。 package.jsonのdependencies/devDependenciesの中で使われていないpackage exportされているがどこからもimportされていない変数、関数、型など 使用していないファイル その他、検出できる内容の一覧はこちらで確認できます。 またExperimentalな機能(2024年7月現在)として不要なコードの自動削除も可能です。 ちなみにTypeScript/JavaScriptの不要なコードの検出するツールではts-pruneも知ら
Rustで作るプログラミング言語という書籍が先日発売されました。簡単なプログラミング言語を作ってバイトコードに変換して実行したりネイティブコードに変換して実行してみよう、という本で、大変面白く読みました。最終的にまあまあ本格的な言語になるので、これを元にするとわりとちゃんとした言語を作れそうです。 この書籍で最終的に作られる言語はこちら: GitHub - msakuta/ruscal: Programming language implementation learning project ちょうど私も、以前から構想していた言語があったので、ちょっと作ってみました。というのも、TypeScriptを設定記述言語としてさまざまなプログラミング言語から使えると便利ではないかとずっと思っていたのです。 この設定言語で複雑なことができる必要はなく、最終的にはJSONに準ずるデータ構造になればよい
はじめに 以前紹介させていただき、2022年Qiitaのいいねランキング18位、ストックランキング20位を記録したこちらの記事の続編です! DevToysはリリース後しばらく定期的なバージョンアップが続けられていましたが、去年の7月からぱったりとアップデートが止まっている状態でした。 リポジトリや作者のXを見るとバージョン2の開発を行っているようで、今か今かと待ち続けていましたが数日前リリース予告のポストを見つけて、今日ついにプレリリースされました! ということで早速紹介していきます! DevToysとは DevToysは「開発者のためのスイスアーミーナイフ」の紹介文の通り、開発時によく使うツールを十徳ナイフのようにまとめたアプリとなっています。 JSONの整形とかエンコードデコードetc... プログラミングや保守運用の調査でやりがちな作業をいちいち変換サイトを探したり、エディター拡張機
僕が開発しているWebフレームワークHonoは、同じJavaScriptのフレームワーク、Expressと比べられることが多いです。どちらもやれることはほぼ同じですが、HonoのアドバンテージはファーストクラスでTypeScriptをサポートしていることです。特に「RPC」機能は他のフレームワークにはなかった「TypeScriptの型でサーバーとクライアントの仕様を共有する」ことを可能にしています。今回はそのHonoのRPCについて紹介します。 どんなものか まず、どんなものかを箇条書きで共有します。 Web APIの仕様、特にインプット・アウトプットをサーバーとクライアント間で共有するためのもの OpenAPIやgRPCを使ってやりたかったことを叶えるかもしれない サーバーとクライアントをどちらもTypeScriptで書くことが大前提である 同種のものにtRPCがあるが、Honoの場合、
TypeScript プロジェクトのコンパイルのボトルネックを調査・解消してみた話 はじめに こんにちは。エンジニアの辻󠄀です。 私は社内のとある TypeScript プロジェクトで開発業務を行っていました。 ある日、新たに関数の実装を追加しようとしたその時、tsserver(TypeScript の language server)による補完候補がなかなか表示されないことに気づいたのです。 どうやら、コンパイルの時間が非常に長くなっていたことが原因のようです。 この記事では、tsc のコンパイルにおけるボトルネックを調査する方法と、そこで適用した2つの改善方法について紹介します。 コンパイル時間が低下する原因はプロジェクトの性質によって大きく異なるため、ここで述べる改善方法が任意のプロジェクトに有効だとは言えませんが、少なくとも調査方法については役に立つのではないかと思います。 ボト
こんにちは。ナレッジワークの torii です。 最近、プロジェクトで使用している TypeScript の型検査にかかる時間を 3 割ほど短縮することに成功しました。 参考までにどのようにボトルネックを調査して改善に繋げたのかを書いてみます! きっかけ 改善のきっかけは、たまたまネットを徘徊していて見つけた Zenn 記事でした。 (素晴らしい記事をありがとうございます!) これを読んで「自社のプロダクトでも型検査にかかる時間を短縮できるのでは?」と思い立ち、試してみたところ実際に改善に役立てることができた、というのがこの記事の概要になります。 改善対象 改善対象は、弊社のメインプロダクトであるナレッジワークのフロントエンドです。現在マルチプロダクト化に向けたコード分割に取り組んでいる最中ですが、執筆時点はモノリシックな構成となっています。 改善前の TypeScript ファイルは自動
Microsoft Teamsの連携はSlackと比べると本当に使いづらい。 過去にQiitaで書いてたように、たとえばユーザメッセージを投稿するだけでも管理者の承認が必要だ。 今回は、Slackだと一瞬でできるボットユーザの作成がMicrosoft Teamsだとどのように達成できるかを書いてみる。 本当に骨が折れる。Microsoft Teams使いたくない。 そもそもボットが必要か? たとえば GitHub ActionsからMicrosoft Teamsへデプロイ完了通知をしたい 定期リマインダーをMicrosoft Teamsへ表示したい とかそういう用途であれば、ボットではなくIncoming Webhookを使えばいい。(これならSlackのときと手間が大して変わらない) あるいは メンションされたら予め持っている答えを返すだけのbot アプリケーションのデプロイを受け付ける
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか? /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
Appleは、さまざまなコンフィグレーションファイルを生成するための静的型付言語「Pkl」(発音はPickle=ピックル)をオープンソースで公開しました。 ソフトウェアやクラウドサービスなどの設定に用いるコンフィグレーションファイルはどんどん複雑になってきており、利用者が望む詳細な設定を、一般的なコンフィグレーションファイルのフォーマットとして使われているJSONやYAML、XMLプロパティリストなどの形式で正確に記述することは難しくなってきています。 Pklはそうしたコンフィグレーションを正確かつ分かりやすく記述するために開発された、特定目的用のプログラミング言語だと説明されています。 Configuration-as-Codeを実現するための豊富な型やバリデーション機能、VSCodeやIntelliJ、NeoVimなどのコードエディタのプラグインを提供します。Language Serv
response_url を理解しよう この記事では、Slack アプリを作ったことがある人でもあまり馴染みがないかもしれない response_url という仕組みについて網羅的に説明してみたいと思います 1。 response_url は、スラッシュコマンドやショートカットのようなユーザーと Slack アプリの間で直接的なインタラクションが発生する機能のペイロードに含まれるものです。Incoming Webhooks や chat.postMessageで Slack に通知を送るだけの連携からもう一歩進んで、よりインタラクティブな Slack アプリを作るとき、この機能をうまく使うと、より良いユーザー体験を実現できるでしょう。 なお、この記事では日本語でできる限り丁寧に説明していきますが、こちらの英語のドキュメントにも多くの内容は書かれていますので、合わせて参考にしてみてください。
Amazon Connect アドベントカレンダー 2023、4日目の記事です! クラスメソッドとギークフィードさん、スカイアーチHRソリューションズ さんの有志が募ってチャレンジしている企画になります。 (アドベントカレンダーのカレンダー一覧はこちら↓) はじめに Amazon Connect + GPT-4 Turbo JSONモード + Whisper の構成で、発話での「時刻と日付」の言い回しをどこまで正しく認識してくれるか調査しました。 以前、電話予約の無人化をAmazon Connect + GPT-4 JSONモード + Whisperで構築し、1回の発話で予約情報を正しく認識してくれるか、という記事を執筆しました。 上記の記事では、下記の5つの予約情報を発話し、正しく抽出されました。 お名前 電話番号 予約日 予約時間 人数 処理の流れは、顧客がConnectの電話番号から
こんにちは、ソーシャル経済メディア「NewsPicks」のむとうです。 先日から『Ghost of Tsushima』の開発者が書いた『ルールズ・オブ・プログラミング』という本をちょっとずつ読み進めていて、プログラミング熱が高まっています。この本は大きな指針を示すだけで具体の話をするものではないのですが、読み物として面白いので私も似たようなことをやってみたくなりました。 何年もこういう仕事をしているとバグが入るパターンというのが見えてきます。そしてだいたいどこに行っても何の仕事でも似たようなことをすることになるのですが、今回の話もその一つです。 構造化テキストを文字列結合で作らない、置換でいじらないというのはこれだけみると何のことか分かりづらいかも知れませんがSaaS Product Team セキュアコーディングの啓蒙 第2回 (SQL インジェクション編)の内容とある面では同じ話です。
はじめに こんにちは!ソフトウェアエンジニアの種岡です。 私たちのチームでは、TypeScriptを使用して開発を行っており、Prettierというコードフォーマッターを利用し、チーム内でコーディングスタイル統一に大変重宝しています。 そんなフォーマッター界隈で、Rust製で爆速で動作すると噂のdprintが良いということで試してみたところ、驚くべきことが起きました! Prettierでは、コードフォーマッティングに 7.69秒 かかっていたのですが dprintを使うことでわずか 0.47秒 で完了するようになりました🚀🚀🚀 なんと、 10倍以上速い とういう結果に! コードフォーマットは、Gitのpre-commitフックやGitHub Actionsで日々活用しており、普段の開発作業の裏側でコードの品質を支えてくれているありがたい存在です。 この速度改善により、開発プロセスの中
はじめに こんにちは。Sugawara Yuutaです。"Go言語で最速のJSONデコーダーを作った話", "それでも僕はGoで最速のJSONデコーダーを作りたかった"...以来の方はまた読んでいただきありがとうございます。まだの方は、経緯を伝えやすくなると思うので、そちらの方も読んでいただけたら幸いです。 その後 Go言語チームのメンバーが取り組んでいる新しいバージョンのJSONライブラリであるgo-json-experiment/jsonというレポジトリを発見しました。(厳密に言うと、知ってはいたのですが中身等は見ていない状態でした。) そこで学んだことが少しでも役に立てばとissueを提出したところ、そのときのJSONデコーダーに足りないものが見えてきたため、今回は僕の見つけた課題と、どのように解決しようとしたか・したかを話せればと思います。 見つけた課題 パフォーマンスも重要ですが
Secretlint v7でCommonJS からES Modulesへの移行を行いました。 Secretlint v7.0.0をリリースしました。Pure ESMへの書き直し この記事では、CommonJS(CJS)からES Modules(ESM)への移行を行った経緯と、移行する方法について紹介します。 CJSからESMへの移行は、率直に言えば単調な作業で、メリットが見えにくい作業です。 しかし、将来的にCJSよりもESMが主流になることは間違いないので、移行することは必要です。 移行の作業は、移行方法が決まれば大部分は機械的な書き換えが可能です。 では、実際にどうやって移行したのかを紹介します。 ESMへの移行の影響は依存元へと連鎖する Secretlintのリポジトリはmonorepoになっていて、だいたい40コぐらいのパッケージが含まれています。 そしてパッケージ間で依存関係があ
こんにちは。ソフトウェアエンジニアの坂井 (@manabusakai) です。 カミナシのプロダクトは、管理者の方が使う Web アプリに React、現場の方が使う iPad / iPhone アプリに React Native を採用しています。 どちらもフロントエンドの技術スタックを採用していることもあり、先日までは Monorepo と Yarn Workspaces の構成で運用されていました。 最近では Monorepo 化を進めている事例もよく見かけるようになってきました。 engineering.mercari.com devblog.thebase.in ですが、カミナシでは Monorepo をやめてリポジトリ分割をする意思決定を行いました。 具体的には、harami_client という Monorepo を harami_web と harami_mobile とい
Plasmoとは Plasmoはブラウザ拡張機能を作成するためのReactフレームワークです。 テストや自動デプロイするための機能なども提供しておりオールインワンなフレームワークとなっています。 公式サイトに行くと「ブラウザ拡張機能におけるNext.js」という強気なワードが確認できます。 It's like Next.js for browser extensions! Plasmoの特徴 Plasmoは以下のような特徴を持ったフレームワークです(公式より一部抜粋)。 ファーストクラスのReact+Typescriptサポート ライブリローディング + React HMR .env* ファイルサポート BPP による自動デプロイメント Svelte と Vue をオプションでサポート またゼロコンフィグで開発を始めることができ、ブラウザ拡張機能の設定ファイルであるmanifest.jso
1 フロー 1 ワークフロー 一連のフローがある場合は 1 つのワークフローにまとめる。 トリガーしたイベントの JSON が使える needs での制御がしやすい 全体を追える グラフが表示される ファイルを分割したい ファイルを分割したい理由として以下が挙げられると思います。 行数が増えて読みづらい 処理を共通化したい 複合実行ステップアクション や workflow_run トリガー や Reusable workflow 🆕 を使うことになると思いますが、基本的には一連のフロー制御はメインのファイルに書いてその下を Reusable workflow や複合実行ステップアクションで外部ファイルへ分離するのが良さそう。 workflow_run はログが分断するのでおすすめしません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く