新人AI禁止令と、その結果の答え合わせ - Qiita
はじめに こんにちは、和田です。いえらぶGROUPで開発部の執行役員を務めています。 弊社も例に漏れず、今年はAI活用に非常に注力してきました。Cursorを全エンジニアに導入し、テックリードにはClaude Codeを配布、業務効率化・実装スピード強化・精度向上を進めてきました。 そんな会社で、私はある新人エンジニアに対して「AIの使用を禁止する」という判断を下しました。 先日ちょっと話題になってましたね、こちらの彼の話です。 社内でも圧倒的なAI推進派の私がなぜそのような判断をしたのか。そして3ヶ月後、その新人はどう変わったのか。この記事では、私の目線からのある種答え合わせ的なつもりで経緯と結果をまとめてみました。 最初は「AIをどんどん使わせていた」 新人が入社した当初、私は彼にもCursorを使わせていました。なんならClaude Codeも使わせていました。理由はシンプルです。
Reactコンポーネントの不要な再レンダリングを制御する。useMemo/useCallbackの使いどころとPropsの粒度管理 | レバテックラボ（レバテックLAB） - レバテックLAB
執筆 中川 幸哉 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表：山田祥寛）に所属するテクニカルライター。新潟県上越市出身。会津大学コンピュータ理工学部卒業後、現在は新潟市に在住。ReactやAndroidを軸に、モバイルアプリ開発やWebサイト制作、Webメディア編集部の業務改善や、プログラミング技術記事の執筆等に携わっている。著書に『たった1日で基本が身に付く! Androidアプリ開発超入門』、『基礎から学ぶ React Native入門』 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表
React Router v7で実現するuseStateゼロ開発
年末にReact Router v7がリリースされましたね！ これによりWebフレームワークであるRemixとルーティングライブラリであるReact Routerが統合され、1つのプロジェクトとなりました。 React Router v7で実現する完全純粋コンポーネント開発 統合自体が一つの大きなニュースなのでそこに注目が集まりがちですが、当然書き方もいくつか変化しています。 私としてはこの書き方の変化からほとんどのコンポーネントを純関数で表現できるようになったことに大きく注目しています。 純関数とは 純関数とは、ひとことでいうと 隠れた入出力がない関数のこと です。 隠れてない入力は引数、隠れてない出力は戻り値で、それ以外の入出力がある関数と言えます。 いくつか例をあげると、以下のようなものが挙げられます。 // 純関数 function add(a: number, b: number
"use server"; でexportした関数が意図せず？公開される
Next.js AppRouterで利用できるReactのServer Actions機能。クライアントからサーバ上の処理を関数で呼び出せるので非常に便利ですが、 "use server"; のことをあまり知らず、誤った使い方をすると意図せず公開したくない関数が外部に公開されてしまうケースがあるので注意です（ほとんどこんなケースはないと思いますが、なくはないので注意喚起です）。 Server Actionsの例 Server Actions用の関数として宣言するためには "use server"; が必要です。それ以外は至って普通の非同期関数で大丈夫です。 "use server"; export async function someAction() { return { message: "Server Action", }; } 次に定義したServer Actionsの関数を呼び出
React 19の新機能まとめ — サーバーコンポーネントは全フロントエンドエンジニア必見
9月5日、Vercelの公式ブログで「What’s new in React 19 – Vercel」と題した記事が公開された。この記事では、React 19における重要な新機能や改善点について、詳細かつ実践的な内容が取り上げられている。これまでのReactのバージョンで導入されてきた実験的機能が、React 19で正式に安定化され、多くの開発者にとってさらなるパフォーマンスの向上と開発体験の向上が期待されている。 ここでは、同記事からポイントを絞って内容をご紹介する。 サーバーコンポーネント (Server Components) サーバーコンポーネントは、Reactの10年の歴史の中でも最も大きな変化の1つであり、React 19の新機能の基盤となるものである。この機能により、以下の点が大幅に改善される。 初期ページロード時間の短縮 サーバーコンポーネントを使用すると、クライアントに送
GitHub - seratch/ChatGPT-in-Slack: Swift demonstration of how to build a Slack app that enables end-users to interact with a ChatGPT bot
⚠️ The official Slack integration from OpenAI is now available! You may want to try it first: https://my.slack.com/marketplace/A097V82EGG2-chatgpt Introducing a transformative app for Slack users, specifically designed to enhance your communication with ChatGPT! This app enables seamless interaction with ChatGPT via Slack channels, optimizing your planning and writing processes by leveraging AI te
JavaScript Visualized - Promise Execution
Promises in JavaScript can seem a bit daunting at first, but understanding what's happening under the hood can make them much more approachable. In this blog post, we'll dive deep into some of the inner workings of promises and explore how they enable non-blocking asynchronous tasks in JavaScript. I'm still working on making this blog better on mobile devices, mobile browsers don't always render t
Exhaustive branch checks with TypeScript - Jack Franklin
March 4, 2024Exhaustive branch checks with TypeScriptIt's very common when working with TypeScript that you will have a type that declares a list of values, such as an enum or union type: enum SupportedColour1 { RED, YELLOW, BLUE, } type SupportedColour2 = 'RED' | 'YELLOW' | 'BLUE'And then you will often have functions that need to run differently or return different values based on what variant i
雑にReactアプリを作りたい時に使ってるもの
import "./App.css"; import { Link, Route, Switch } from "wouter"; function Nav() { return ( <nav> <Link to="/">Home</Link> <br /> <Link to="/about">About</Link> </nav> ); } function Home() { return ( <div className="App"> <h2>Home</h2> <Nav /> </div> ); } function About() { return ( <div className="App"> <h2>About</h2> <Nav /> </div> ); } function App() { return ( <> <Switch> <Route path="/" compo
React Context を用いた簡易 Store
課題 redux を引っ張り出すと大仰になる。Context 下に共有ステートを持ってそこに setState できるだけでよい。 なので、次の 2 つを用意する 現在の state を参照する const appState = useAppState() 現在の state を更新する関数を返す const setAppState = useSetAppState() React.useState() と違って分割している理由は、主にパフォーマンス上の理由 大域な参照なので、可能な限りステートを参照したくない setState() の API は (prevState: State) => State も取れるので、状態更新用途に限ってはそもそも useAppState() せずに済むことが多い でも毎回書いてるけどボイラープレート感強い上に忘れるのでここにメモする 毎回書いてるボイラー
Console Utilities API reference | Chrome DevTools | Chrome for Developers
The Console Utilities API contains a collection of convenience functions for performing common tasks: selecting and inspecting DOM elements, querying objects, displaying data in readable format, stopping and starting the profiler, monitoring DOM events and function calls, and more. Looking for console.log(), console.error(), and the rest of the console.* functions? See Console API Reference. $_ $_
ChatGPT Bot を new Slack Platform で動かしてみた - LayerX エンジニアブログ
こんにちは、LayerX の Enabling Team の suguru です。 ChatGPT のAPIが公開されて、ものすごい勢いで Slack へのインテグレーションが始まりそうです。 API 利用する場合は、会話の内容が学習などに使われることはない、ということで、安心して利用できそうです。 LayerX でも、早速ChatGPTが応答してくれるボットを作ってみることにしました。 今回は new Slack Platform を使うことにしました。new Slack Platform は、Slack Cloud と呼ばれる Slack 側のサーバーでコードを動かす機能があります。Slack にコードをデプロイするだけで、サーバーの準備等をしなくても ChatGPT を自分たちの SlackBot として埋め込むことができます。 注 - new Slack Platform は執筆時
【保存版】「そのuseEffectの使い方あってる？」と言われる前に
参考 目的 プロジェクトで使用されている不適切なuseEffectを減らす 本題 Reactの公式ドキュメントにuseEffectは必要ないかもしれない，というようなページがありとても勉強になったので記事にしようと思いました． データフェッチング アプリのデータフェッチングをuseEffect内で行うのはよく知られている方法です． Bad 💣 function SearchResults({ query }) { const [results, setResults] = useState([]); const [page, setPage] = useState(1); useEffect(() => { // 🔴 Avoid: クリーンアップなしでのフェッチング fetchResults(query, page).then(json => { setResults(json); }
細かすぎて伝わらない Slack 次世代プラットフォームよもやま話選手権 - JMDC TECH BLOG
みなさんこんにちは! プロダクト開発部分析システムグループの新保です。 以前からクローズドベータで公開されていた、Slackアプリを作るための新しいプラットフォーム……いわゆる「次世代プラットフォーム」が9月下旬にオープンベータになりました。 ちょうどチーム内の勤怠を管理するためのSlackアプリを作ろうとしていたところだったので、この次世代プラットフォームを全面採用し、色々使い込んでみました。この記事ではその開発過程でぶつかった様々な問題を書いてみようと思います。 ちなみに完成したアプリはこちら。出退勤を管理するためのメッセージを毎朝送ってくれる、雄鶏の Rooster くんです。 Roosterのメッセージ (黒塗りの部分にはメンバーのアイコンと名前が並んでいます) 注意 Slack次世代プラットフォームはオープンベータ版です。この記事はバージョン1.14.0をベースにしています。 最
ECMAScript Decorators の変遷と最新仕様 - Qiita
はじめに 個人的に TC39 meeting をウォッチしてまとめている @petamoriken です。 ECMAScript の Decorators の提案は何度も改定しています。その割にあまり知れ渡っていません。この記事ではその変遷と最終的な Decorators の仕様について簡単にまとめようと思います。 この発表スライドを見ると流れがわかりやすいかもしれません。 最初の提案（2014年~2015年頃） 最初の提案はこのような形式をしていました。 Decorators 自体はただの函数で、引数にクラスとプロパティ名そしてプロパティディスクリプタを受け取り、そのプロパティディスクリプタを加工して返すようになっています。こうすることでプロトタイプに Object.defineProperty 相当の処理がなされる前に割り込むことが出来ます。 実装 TypeScript で exper
データフェッチはuseEffectの出番じゃないなら、結局何を使えばいいんだ
ショートアンサー React 18 からのフックである、useSyncExternalStore を使えばいいようです。 ※ useEffect がまったくだめだというわけではありません。 ※ クライアントサイドレンダリングのみを考えています。サーバーサイドレンダリングを考慮すると違った答えになるかもしれません。 サンプルコード 次のような useData フックを作ってみます。 JSON API の GET レスポンスを返すシンプルなものです。 実験をしやすいように、リクエスト URL を変えるボタンを置いてあります。 import { useEffect, useState } from "react" export function SearchResults() { const [id, setID] = useState(1) const todo = useData(`http
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Function calling の延長線上で MCP を考察 - Qiita
You Don't Need Next.js | ドクセル
なぜファイルの末尾に改行を入れたほうが良いのか - Qiita
koba04.com