はてなブックマーク

はじめに 業務で携わっているサービスで無限スクロールを実装しました。 無限スクロールはライブラリを使って実装している記事が多いですが、今回はライブラリを使わずに実装してみました。 IntersectionObserverやscrollイベントなどで知らないことが多かったので自身の脳内整理のために書いていこうと思います。 使用した技術 React TypeScript Apollo Client: GraphQLクエリの実行 IntersectionObserver API: スクロールの検出 カスタムUIコンポーネント: Atomic Designに基づいたコンポーネント IntersectionObserverとは IntersectionObserverやスクロールそのものについての知識がなかったので調べてみました。 IntersectionObserverは、ページ上の特定の要素が別

早くも新年度になり、桜が咲き始める季節になりましたね🌸 エイプリルフールネタを考えてみましたが、特に思い浮かびませんでした🤨 今回はGitHub CopilotのAIコードレビュー機能を使ったTipsを紹介します。 GitHub Copilotのコードレビューとは GitHub Copilotのコードレビュー機能を使うと、プルリクエストのコードレビューをCopilotにお願いすることができます。 ちなみに、GitHub Copilot Enterprise のサブスクリプションに加入している組織ではコーディングガイドラインを別途設定できるようですが、以下の記事はEnterprise のサブスクリプションに加入していない組織のリポジトリでも使えるTipsです。 日本語でレビューさせる方法 デフォルトだと英語でレビューされてしまいますが、PULL_REQUEST_TEMPLATE.mdに以

弊社ではデザイナーがCSSを書いてくれるので、私はフロントエンドエンジニアながら最近はTypeScriptばかり書いていました。 しかし、フロントエンドエンジニアならCSSもしっかり学んでおかないといけないと思い、アウトプットついでにこの記事を書いています。 1. モダンCSSの現状と進化 2019-2024年に標準化された主要な機能 2019年以降、CSSには多くの革新的な機能が標準化され、JavaScriptに頼らずに実現できることが増えました。 レイアウト関連： コンテナクエリ - 親要素のサイズに基づくレスポンシブデザイン CSS Grid（サブグリッド） - ネストされたグリッドが親グリッドのトラックを継承 CSS ネスト - セレクタを入れ子構造で記述（Sassのような書き方） セレクタと制御： 親要素セレクタ (:has) - 子要素に基づいて親要素を選択 カスケードレイヤー

ReclineというAIエージェントを使用してみたら、GitHub Copilotを初めて使用したときの感動を思い出しましたのでご紹介します。 Reclineとは ClineというVSCode上で動作するAIエージェントがあります。様々なLLM（GPTやClaudeなど）を使用し、コーディング支援をしてくれるものです。 GitHub Copilotとは異なり、指示をするだけでコーディング、各ファイルやディレクトリの作成など行ってくれるため、GitHub Copilotより一段階上を行くAIエージェントと言えます。 Clineは前述の通り、各LLMを使用する必要があるため、別途LLMの料金がかかります。 今回検証するReclineはそのClineをVSCodeのLanguage Model APIを経由したGitHub Copilotと組み合わせて使用できるものです。 つまり、GitHub

この記事はTSKaigi Advent Calendar 2024 19日目の記事です。 1. ts-morphって何？ TypeScriptプロジェクトを扱っていると、こんな作業で困ったことはありませんか？ 「この関数をリネームしたいけど、使用箇所が多すぎて心配...」 「新しいフィールドを追加したら、関連する型定義も全部直さないと」 「外部APIのレスポンス型定義があるけど、バリデーション関数を手書きするのが大変」 このような作業を手動でやろうとすると、ミスのリスクが高く、膨大な時間がかかってしまいます。 ts-morphの役割 ts-morphは、TypeScriptのソースコードを扱うためのツールキットです。 以下のような作業を安全に自動化できます： コードの解析：クラスやインターフェース、関数の定義を探して、その内容を調べる 型情報の取得：変数や関数の型を正確に把握する コードの

2024年12月5日に、OpenAIからChatGPT Proが発表され、大きな話題となりました。 特に衝撃的だったのは、これまでo1-previewとして提供されていた生成モデルをさらにパワーアップしたo1、o1pro modeが提供されたことです。既に人間の脳に匹敵、あるいは凌駕する可能性まであるとか。 ChatGPT Proは$200/月で利用できるようです。早速登録して使ってみました。 東大入試数学を解いてもらおう Proを契約すると、いつものメニューの中にo1 pro modeが出現します。 早速何かを推論してもらいましょう。Xで流れてきたツイートによると、o1proは数理的推論能力に非常に優れており、大学入試数学も軽々解いてしまうとか。 自分は東京大学理系の卒業生ですが、o1proが解けてしまうならば自分のアイデンティティが崩壊する可能性があります。早速検証してみましょう。 昔

誰向けの記事？ 📃 初学者~中級者 プログラミングを楽しむ気力が無くなった人 何の話？ VimConf 2024というVimの国際カンファレンスに参加したのですが、そのセッションの一つです これはエンジニアに通じる話で当日に感銘を受けたので共有します TJって誰？ TJ DeVreis氏です 🐶 現在この界隈には大きく二つVimとNeovimが存在しており、TJはNeovimのコアコントリビューターです また、Neovimで有名なTelescope.nvimの作者でもあります🔭 まぁ、めちゃめちゃざっくり言えばすごい人です 彼はどんなセッションをしたの？ 🗣️ タイトルは(Neo)Vim Made Me a Better Software Developerです 彼がNeovimというOSSでより良い開発者になった経緯を発表してくれました この内容がとても素晴しかったです 結論を書

PyCon JP 2024に行ってきました PyCon JP 2024に参加してきました！ 今回は私史上初の主催スタッフとしての参加で、会場の運営に携わりました。 以下、登壇資料のまとめ集です。 PyCon JP 2024タイムスケジュール ※ユーザ名は敬称略です。 Day1 Django Ninjaで高速なAPI開発を実現する: 実践ガイドとベストプラクティス @mmmm70641 Robot FrameworkとNVDAスクリーンリーダーによるアクセシビリティのテスト自動化 @24motz Crafting Your Own Numpy: Do More in C++ and Make It Python @tigercosmos 5年分のツケを一気に払った話 @soogie あなたのアプリケーションをレガシーコードにしないための実践Pytest入門 @fuine 実践structlo

TryHackMeでHackerになった話 フロントエンドエンジニアがセキュリティもできるようになりたいと思い、TryHackMeを始めてHackerランクになったのでやったことを残しておきます (セキュリティエンジニア見習いぐらいにはなれたはず) TryHackMeのランクは以下の通り 0x1 0x2 0x3 0x4 0x5 0x6 0x7 0x8[Hacker]← 今ここ 0x9[Omni] 0xA[Wizard] 0xB[Master] 0xC[Guru] 0xD[God] そもそもTryHackMeって何？ ネット上のテスト環境でハッキングのシナリオを元に実践的なサイバーセキュリティのトレーニングができるサイトです やった学習問題 Introduction to Cyber Security 名前の通りサイバーセキュリティとは何かを学べる キャリアパスとか攻撃の手法、防御方法など

SRE NEXTに行ってきました SRE NEXT 2024に参加してきました！資料のまとめ集です。 メルカリさん、ランチごちそうさまです🍞 SRE NEXT 2024タイムスケジュール ※ユーザ名は敬称略です。 Day1 工学としてのSRE再訪 @yuuk1t 登壇者紹介リンク: https://x.com/yuuk1t/status/1819631327219798137 ※08/05 13:40ころまでリンクに誤りがありました。失礼いたしました。 DevSecOpsの内回りと外回りで考える持続可能なセキュリティ対策 @yamaguchi_tk 登壇者紹介リンク: https://x.com/yamaguchi_tk/status/1820376622715002885 組織的なインシデント対応を目指して〜成熟度評価と改善のステップ〜 @nari_ex 登壇者紹介リンク: https

概要 社内版ChatGPTを構築しようということで、OSSであるLibreChatを利用しました。 社内版ChatGPTの導入に至った経緯やその後の効果測定については弊社ブログ記事をご覧ください。 https://blog.gmo.media/internal-chatgpt 今回のZennの記事はシステム構築編となります。 AIはどのサービスを使うか 弊社ではまずはAzure OpenAI Service（AOAI）を採用することにしました。 LibreChatではOpenAI公式のAPIを利用することも可能です（最近AssistantAPIに対応した模様） 基盤まわり 社内全体で使えるドメインがRoute53で管理していることと、AWSの経験者が多いのもあり サーバ周りはAWSで構築しました。 また、弊社では全社員がGoogleWorkSpaceを使用しているため、認証についてもGoo

公式ドキュメントには以下のように書かれています。 THIS COMMAND IS EXPERIMENTAL. THE BEHAVIOR MAY CHANGE. 和訳：このコマンドは実験的です。動作が変更される可能性があります。 この記事の内容と違う場合があるので、ご注意ください。 この記事は2024年2月28日時点の情報です。 え？まだgit checkoutしてるの？ git checkoutといえば、ブランチを切り替えたり、git addしたファイルを元に戻したりするコマンドですが、それはもう古いです。 実は2019年8月リリースのgit 2.23からgit switchとgit restoreが追加されました。 知らなかった人も多いのではないでしょうか？(恥ずかしながら私は知らなかった...) 「先輩、checkoutってなんすか？」と後輩に聞かれる前に、この記事を読んでgit sw