TypeScriptの不要なexportを自動で削除するOSS「ts-remove-unused」を開発しました
こんにちは。メディアカンパニーに所属する鴻巣和司 (@kazushikonosu) です。普段はLINEスキマニのフロントエンドの開発をしています。業務をきっかけに、TypeScriptの不要なデッドコードを自動で削除するツール ts-remove-unused を開発し、GitHub上でOSSとして公開しました。本稿では、ts-remove-unusedが解決しようとしている問題や直近で行った大規模な変更について紹介します。 exportしていることで気づきにくい不要なコード TypeScriptを使っている場合、tsconfig.json の compilerOptions.noUnusedLocals を有効にすることで、ファイル内で参照がない不要な変数などの定義をTypeScriptコンパイラの実行時に検知することが可能です。また、ESLintなどの静的解析ツールを使い適切にルール
多様なメンバーが気持ちよく効果的に働けるチームにしていきたい
チームのパフォーマンスを高めるために、日々試行錯誤している方も多いと思います。私自身も、プロセス改善にこだわり続け、うまくいった部分もあれば、失敗を経験した部分もあります。今回は私のチームリーダーとしての失敗談と学びを共有したいと思います。 チームリーダーとしての責任Tebiki株式会社 エンジニアの二瓶と申します。私は Tebiki株式会社の Web アプリケーションエンジニアとして入社し、現在は tebiki現場分析 の開発を担当しています。また、チーム内では「チームリーダー」という役割 を担っています。弊社のチームリーダーのミッションはざっくりいうと「生産性とプロダクトの品質を最高の状態に保ち、プロダクトの価値を最大化できるような『チームの状態』をつくること」です。ここでいうチームとはプロダクトマネージャー、デザイナー、エンジニアを含む開発チームことです。これまで一人の開発者として手
VSCodeのGitHub Copilotが色々便利になっていた件
はじめに 知らない間にGitHub Copilotが結構進化していたので、それらの内容を紹介します。 GitHub Copilot Chatは知っていたのですが、単なるChatGPTみたいな会話機能を追加しただけだと思っていました。 要約 右クリックメニューや#fileのようなコマンドが登場し、それを入力するだけでChatに見てほしいコンテキストを伝えることができるようになった。 ファイル単位だけでなく、選択した行やブロックに限定することもできる。 テストコードや新しいプロジェクトをコマンド一つで生成できるようになっている。 推薦の候補も複数を同時に比較できるようになった。 一度に最大10個くらい出る上、タブで保管できる。 ターミナルや編集中のファイルからコマンド一つでChatを立ち上げることができる。 特別なプロンプトを入力しなくても、開いた場所の文脈を読み取ってくれる。 右クリックメニ
Zennへのスパム投稿が急増したのでLLMでなんとかした話
はじめに Zennチームの吉川（dyoshikawa）です。 2024年6月頃より、Zennにいわゆるスパム投稿が急増したため、LLM（生成AI）を活用してのスパム投稿自動検出の仕組みを構築しました。 目的の性質上、あまり詳細については開示できないのですが、技術的な知見の共有のため、そして可能な限りコミュニティへ運営チームの取り組みをオープンにしたいという思いがあり本件の概要を紹介したいと思います。 課題 2024年6月頃より、Zennにスパム投稿が急増しました。それに伴いユーザの違反報告が増加したことで我々Zennの運営メンバーも事態を認識することになりました。 スパム投稿が読者の目に触れることが定常化することは避けたいですし、その都度違反報告をしてくださるユーザの負担も大きなものだろうという思いがあり、対策を進めることになりました。 解決策 この状況に対して、ある程度自動でスパム投稿を
読まないと後悔する技術書30選 - Qiita
はじめに 現代の人に名著以外の本を読むような時間はない こんにちは、Watanabe Jin (@Sicut_study)です みなさんは何か新しい技術を学ぶときにどんなコンテンツを利用するでしょうか？ 最近ではUdemyなどの動画講座を利用する人が多いと思いますが、本を読んで学ぶという人もまだまだ多いのではないかと思います 今回は私がこれまで5年間読んできた150冊以上の中から厳選した30冊の本を紹介します。広く多くの人に役立つものから、特定の技術の書籍までどれを読んでもあなたの大切な一冊になるのでぜひ読んでみてください 現代人には時間がない なぜ働いていると本が読めなくなるのかという本が話題になりました 現代人は本を読む時間がなくなっています。 仕事に追われてしまい、プライベートで本を読む暇などなくなっているのです。 しかし、エンジニアは「技術職」なのでプライベートの時間でも学習をして
VSCodeで生産性を上げる
はじめに こんなツイートを見て執筆をしようと思いました。 実際に、VSCodeは機能の追加や拡張機能の開発が活発に行われており、かつUIもユーザーフレンドリーであるため人気のエディターだと思います。VSCodeを使いこなせるのとそうでないのではエンジニアリングの生産性に大きな差が出てしまうと思います。 パンくずの設定 '>' を入力します。 '>' preferences: Open User Settings (JSON)を入力します。 僕のsettings.jsonは以下です。 { "workbench.colorTheme": "GitHub Dark", "terminal.integrated.fontFamily": "MesloLGM Nerd Font", "terminal.integrated.profiles.osx": { "fish": { "path": "/o
TypeScriptを導入する意味と限界、型レベルプログラミングの紹介 - Qiita
はじめに JavaScript/TypeScript初学者を抜けたあたりの方に向けてTypeScriptの利点や限界、型レベルプログラミングについて紹介します。 TypeScriptはJavaScriptをラップしたライブラリであり、静的な型情報をつけることができます。また、それらの型情報をもとに型を推論し、型違反な代入やプロパティへのアクセスなどをプログラム実行 以前 に検知することができるようになっています。 例えば、動的型付けの言語であるJavaScriptでは、以下の関数のa,bには数値だけでなく、文字列を渡すことができます。数値同士を渡せば加算してくれますし、文字列同士を渡せば文字列連結をしてくれます。 「数値計算用の関数なのに、文字列連結に利用できてしまう」という緩さを開発時にはなるべく排除しようというのがTypeScriptを導入する意義です。 以下、TypeScriptの基
Node.js + TypeScriptのモジュールを整理してみる
はじめにlink 最近受けるNode.js + TypeScript環境の相談の中で、CommonJSやECMAScript Modulesのあたりで落とし穴にはまっている人が多いという事に気づいた。 Node.jsは歴史的にCommonJSとECMAScript Modules（以後ESMと表記）がどうしても入り乱れる環境にあり、これにTypeScriptのモジュールが加わると組み合わせでさらに複雑度が増すのが現状である。 説明する際に口頭より整理した文章が欲しいと思ったので記事にする。 以下のリポジトリで検証コードを管理している。 https://github.com/koh110/module_test Node.jsモジュールチェックシートlink まず最初にNode.jsにおけるCommonJSとESMの挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
TypeScript の変性（共変・反変）を 5 分で理解する
type User = { name: string } type Admin = User & { permissions: string[] } const user: User = { name: "user", } const admin: Admin = { name: "admin", permissions: [], } User は名前だけを持つ型で、Admin は名前と権限を持つ型です。また、それぞれの型の変数も用意しています。 この後のコード例は極力シンプルにするため、やや不自然なコードになっていますがご了承ください[1]。 サブタイプとスーパータイプ Admin 型の変数は name プロパティを持ち、User 型の条件を満たしています。そのため、User 型の変数には Admin 型の変数を代入できます。 その逆は型エラーになります。User 型の変数には perm
自作キーボードを自作した話
この記事は mfk60 という 60% ANSI 配列 (US 配列) の左右分割自作キーボードの制作の過程をまとめたものです。 欲しいキーボードが売っていないけれど、自作するにはどうしたら良いのか 自作キーボードのキットは作ったことがあるけれど、次のステップを迷っている 左右分割キーボードが欲しいけれど、欲しい配列の物が売っていない そんな方に、参考になればと思います。 ソースコード このキーボードおよびプロトタイプの KiCad のプロジェクト、ツール、ファームウェアのソースコードは GitHub で公開されています。 https://github.com/niw/mfk60 https://github.com/niw/mfk5 https://github.com/niw/qmk_firmware/tree/mfk はじめに ここ数年、ゲーミング PC の流れもあって以前より多くの
あっ、そうだ！モダンCSSをまとめておこう
2023年もCSSの進化がすごかったですね！ その進化を2024年でも生かしていけるように、今回まとめておいていつでも参照できるように記事を書こうと思いました。 お読みいただけると幸いです。 一緒に2024年もスタートダッシュで走り抜けましょう。 まず、はじめに この記事では、最近登場した、エキサイティングで、アクロバティックでファンタジックなインパクトのある機能をピックアップして紹介したいと思います。 CSSの多彩な新機能を広く紹介することで、読者がこれらに触れる機会を持てるように努めています。 特に興味を引く機能があれば、他の媒体を通じて更に詳しく掘り下げることをお勧めします。 コンテナクエリ スタイルクエリ :has()セレクタ :nth-child()の「of S」構文 text-wrap: balance initial-letter ダイナミックビューポート単位 広色域のカラー
目標管理と評価制度の考え方 - KAKEHASHI Tech Blog
本エントリはカケハシ Advent Calendar 2023 の 11日目の記事です。 今年はPart2もあるのでぜひそちらもご覧ください！ カケハシのVP of Engineeringの湯前（@yunon_phys）です。皆さん、目標設定と評価は順調ですか？私はこれまで何年にも渡って、様々なメンバーの目標設定や評価をしてきました。残念ながら、こうすれば良い目標設定や評価が出来る！という銀の弾丸は無さそうです。でも、こう考えたら目標設定はやりやすいかも、こうすると評価はより納得感のあるものになるかも、というのはあります。 そこで今回は制度を施行・運用していく立場の人間として、目標管理と評価制度の考え方について、私の意見を述べていきます。 目標管理 目標はそもそも変わるものである みなさんこんなことありませんか？ やる気満々であんなことやこんなことを色々考えて、壮大な目標を期初にがんばって
ブラウザ自動操作API入門: WebDriver APIとChrome DevTools Protocol(CDP)
ウェブブラウザを自動操作する際には、WebDriverやChrome DevTools Protocol (CDP) などのAPIが広く利用されています。 これらのAPIを基盤に構築された様々なブラウザ自動操作フレームワークが、テスト自動化の分野で重要な役割を果たしています。 例えば、SeleniumやPlaywrightといったフレームワークを利用して、テストの自動化に取り組まれている方もいらっしゃると思います。 私もテスト自動化フレームワークの便利さを享受する一方で、フレームワークを介さずにブラウザを自動操作する方法についての興味がわいてきました。 そこで、この記事ではWebDriverやCDPが提供するAPIを直接利用してブラウザを操作する方法を基礎から探求してみることにしました。 これにより、私たちが普段利用しているフレームワークの背後にある原理を理解し、より深い知見を得ることを目
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
ChatGPT AIとペアプログラミング
OpenCVを使用して画像から複数のオブジェクトを認識し、切り出すための一般的な手順は以下のようになります： 前処理: 画像を読み込みます。必要に応じて画像をリサイズします。グレースケールに変換するか、あるいは必要に応じて色空間を変更します。オブジェクトの検出: エッジ検出、閾値処理、または色に基づくフィルタリングなどを使用してオブジェクトを検出します。輪郭検出を行い、オブジェクトの境界を見つけます。輪郭の処理: 検出された輪郭をフィルタリングして、ノイズや小さなオブジェクトを除去します。必要に応じて輪郭を近似します。オブジェクトの切り出し: 各オブジェクトの境界ボックスを使用して画像からオブジェクトを切り出します。オブジェクトごとに個別の画像として保存するか、表示します。後処理 (オプション): 切り出されたオブジェクトをさらに処理するためのステップを行います。例えば、オブジェクトのサイ
JavaScriptビルドツールの整理 各ツールの機能と依存関係
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
Vue.jsエコシステム動向2023
Vue 3 ͷϦϦʔελΠϜϥΠϯ • 2020/09/18: 3.0 (One Piece) • 2021/06/08: 3.1 (Pluto) • 2021/08/05: 3.2 (Quintessential Quintuplets) • 2023/05/11: 3.3 (Rurouni Kenshin) Vue 3 ͷϦϦʔελΠϜϥΠϯ • 2020/09/18: 3.0 (One Piece) • 2021/06/08: 3.1 (Pluto) • 2021/08/05: 3.2 (Quintessential Quintuplets) • 2023/05/11: 3.3 (Rurouni Kenshin) 3.3. ϦϦʔε·Ͱ2͔͔͍ۙͬͯ͘Δ ͳͥͰ͠ΐ͏ʁ
うつ病でも生きていくための方法(手続き)2022
会社勤めしてた人向けに。 ・傷病手当をもらう 会社を休職したら給料の6割がもらえる制度。 マックスで1年半もらえる。 2022年から改正されて、「通算で」1年半もらえるようになった。 例えば、今までだと鬱で1ヶ月休職して傷病手当もらってその2年後とかにまた休職、だと2回目の休職時には「1年半経過してるのでもう傷病手当渡せません」ってなってたのが、 改正後だと「前に1ヶ月分だけ傷病手当を渡したので、残りは1年5ヶ月分渡せます」となる。 詳しくは近所の協会けんぽに聞いてみて。 ・自立支援受給者証を作る 指定した精神科・薬局の料金が1割負担で済むようになる。 あと、収入によって月額の上限がある。自分の場合は月5000円だった。 1ヶ月の治療費がどんなにかさんでも5000円を超えることはない。(入院したら別にかかる) 精神科で診断書(3000円はすると思うけど、全然元とれる)を書いてもらおう。それ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Haystack
2024年6月にXに投稿したCSSテクニックのまとめ – TAKLOG
