TypeScript + Reactで特定の要素だけを受け付けるコンポーネントを型安全に実装する - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
【図解解説】MCPを実装理解！Next.jsでAIアシスタントを開発するチュートリアル【Hono/TypeScript/Prisma】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは、Watanabe Jin(@Sicut_study) です。 私はよくQiitaやZennなど技術記事サイトを見ているのですが、最近はランキングがMCPという技術の記事ばかりで埋まっていることに気づきました。 「MCP？こんなに話題なら勉強しておかないといけない」 解説記事を読んで以下の図をたくさん目にしました。 「なんとなくわかるけど、なんとなくしかわからない！！」 なんとなくイメージはわかるのですが、MCPが何故いいいのか、どのように使えるのかが説明できるレベルにはなれませんでした。 やはり文章の説明だけでなく
MDN推奨JavaScriptコーディングガイド徹底解説｜React・TypeScript対応の最新ベストプラクティス | しんすーブログ
MDN推奨JavaScriptコーディングガイド徹底解説｜React・TypeScript対応の最新ベストプラクティス JavaScript は自由度が高く、個々の書き方が混在しやすい言語です。チーム開発ではスタイルの不一致がバグの温床になり、レビュー工数も膨らみます。 Mozilla が公開する JavaScript Sample Code Guide は、同社が社内のドキュメントやチュートリアル用に用いているコーディング規約を外部公開したものです。公式の絶対基準ではありませんが、実践的かつ網羅的に整理されているため、社内ガイドのたたき台として価値があります。 ここではこのガイドを軸に、最新ブラウザ環境・React 18・TypeScript 5 で役立つベストプラクティスを具体例付きで解説します。 配列初期化のベストプラクティス ― Array.from と new Array の使い
【東証グロース上場｜React,React Native】新規プロダクトのアプリ開発をメインに、既存プロダクトのアプリやフロントエンド開発にも携われるリードエン
【東証グロース上場｜React,React Native】新規プロダクトのアプリ開発をメインに、既存プロダクトのアプリやフロントエンド開発にも携われるリードエン 株式会社ハウテレビジョン @howtelevision TypeScript React I want to hear a detailed 募集背景 開発生産性や保守性の観点から進めていた大規模な技術的負債の返済に目処が立ち、2024年12月からCTOにめもりー氏（@m3m0r7）が就任し、開発組織も新体制になった現在、本格的な新規開発を加速していきたいと考えております。 これまで「外資就活ドットコム」「Liiga」「mond」を主軸に事業成長を続けてきたハウテレビジョンですが、新規プロダクトの企画・開発に着手し、さらなる能力開花の促進を実現していきたい背景があり、その新規プロダクト内でモバイルアプリ開発(React Nativ
React + Vite + TypeScript で診断アプリを作ってみた記録（Step2） - Qiita
Step2：UI仮構築とJSONデータ連携 今回は、診断アプリの Step2 として以下の実装を行いました。 ✅ 今回の目的 ハードコーディングではなく、外部JSONファイルから質問データを読み込む仕組みを作る JSXにベタ書きしていたUIを、動的に表示される構成へ変換 質問と選択肢の管理が柔軟になるように構造化する ✅ 追加・変更した内容 1. UIコンポーネントの作成（仮質問画面） return ( <div style={{ padding: '2rem' }}> <h2>質問：{question.text}</h2> <div style={{ marginTop: '1rem' }}> {question.options.map((option, index) => ( <OptionButton key={index} label={option.label} /> ))} <
TypeScript/React/Next.jsおすすめ学習資料のご紹介
はじめに 今回は、現代のWEB開発で最も使用されている言語/フレームワークであるTypeScript/React/Next.jsについて学ぶために、私がおすすめしたい学習資料についてご紹介したいと思います。 非常に有用で、初心者から中級者、上級者まで幅広い層に向けた内容が含まれていますので、時間を見つけて是非読んでみてください。 ※TypeScript/React/Next.jsって何？という方のために、簡単に以下にそれぞれご説明いたします。 TypeScript Microsoftが開発した、JavaScriptを拡張したプログラミング言語。JavaScriptに比べ、型安全性の向上によるエラーの早期発見や、型注釈でコードの意図を明確にすることによる可読性/メンテナンス性の向上が期待できる。現代のWEB開発においては、ほとんどの開発者がJavaScriptからTypeScriptへ移行し
2025-03-12のJS: React Aria March 5, 2025、Firefox 136.0、TypeScriptコンパイラをGoに移植
JSer.info #728 - React Aria March 5, 2025リリースされました March 5, 2025 Release – React Spectrum Releases Toast/Tree/Virtualizerコンポーネントを追加、AutocompleteをMenu/Selectなどと組み合わせて利用できるようになりました。 また、<Pressable>/<Focusable>の追加、usePressのリファクタリングなどが含まれています。 その他には、ドキュメントをTailwind v4に対応など Firefox 136.0リリースされました Firefox 136.0, See All New Features, Updates and Fixes Firefox 136 for developers - Mozilla | MDN HTMLのautoc
【図解解説】話題の神Reactフレームワークreact-serverで技術記事投稿サイトを開発するチュートリアル【@lazarv/react-server/Convex/TypeScript】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 ReactのフレームワークというとNext.jsが最初に浮かぶ人も多いのではないでしょうか？そこから様々なフレームワークが開発されて、RemixはWeb標準でステートを使わない思想からNext.js一強時代にメスをいれることになりました。 私自身もRemix(React Router)を選択するケースが増えましたが、やはりNext.jsにあるキャッシュ周りやAPIなどはRemixにないメリットだと思っています。Next.jsは便利なものが揃っている分、機能
【図解解説/入門】ReactとJotaiを使って実用的なNotion風ノートアプリを開発するチュートリアル【Convex/TypeScript/MDXEditor】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは、Watanabe Jin(@Sictu_study)です。 2025年に入ってReact界隈に衝撃が走りました。これまでメンテナンスが全然されていなかった状態管理ライブラリ『Recoil』のプロジェクトが凍結されました。 2023年にMeta社のレイオフをきっかけにメンテナンスが半年以上されなくなっていたところに、React19が登場して対応できなくなった結果完全にRecoilはなくなりました。 Recoilは使いやすくMeta社が開発していたこともあり多くのプロジェクトで採用されていたため、代替に乗り換える必要が
フロントエンドエンジニア（フルリモート可・フルフレックス）
フロントエンドエンジニア（フルリモート可・フルフレックス） ちょっと株式会社 @chot TypeScript React Vue.js Angular I want to hear a detailed 仕事概要 弊社はモダンなフロントエンド開発を得意とし、上場企業〜スタートアップまで様々な規模のWebサイトやアプリケーション開発の受託事業を展開しています。 創業から5年、おかげさまで多くのお客様からモダンなフロントエンド開発に強い会社として支持され、案件のご依頼が続いています。お客様のご要望にお答えするため、引き続き体制の強化を行っています。 現在の従業員数は50名。フルリモートの働き方を取り入れているため、従業員の約半分は東京以外の場所に住んでいます。またフルフレックスで自由な時間で働けるのも特徴です。 エンジニアは約30名が在籍しており、そのほとんどがフロントエンド開発を中心とした
【図解解説】React19の新機能を使って書籍管理アプリを開発するチュートリアル【Hono/TypeScript/TailwindCSS】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに ついにReact19が安定版になりました！！！！ React19になったことで「サーバーコンポーネントの正式対応」や「アクションの追加」など大きな変更が入りました。 この変更によってShadcnなど多くのライブラリが対応を頑張っている状況です(おそらく裏では...) 今回はそんなReact19の中でも特に知っておきたい機能を中心に紹介していきます。 ちなみにReact19の機能は実験的に少し前から公開されており、世の中にはすでに多くの記事やYoutube動画があります。 しかしそれらの記事や動画を見て思いました… 自分の能力が
【図解解説/初心者OK】Next.js不要？進化したReact Routerで技術記事アプリを作るチュートリアル【TypeScript/TailwindCSS】 - Qiita
はじめに みなさんこんにちは、Watanabe Jin(@Sicut_study)です。 Reactが大好きな私にとってReactの歴史が大きく変わる瞬間に出くわしました。 ついにReact 19が安定版としてリリースされたのです。 React19になってSSRなどサーバーコンポーネントが完全にサポートされます。 そんな中で真っ先に動いたのがRemixです。 Reactでサーバーでの処理ができるとなると「React + React Router」と「React + Remix + React Router」で実現できることの差がなくなりました。 そこでReact RouterとRemixが統合されて新たなフレームワークが生まれます。 それが「React Router v7」なのです！！！ React Router v7はいままで通りライブラリとして「ReactRouter」を利用することも
【図解解説/初心者OK】たった1時間でNext.jsで最新AIを使ったチャットアプリを作ろう【RAG/LangChain/OpenAI/TypeScript】 - Qiita
GPTは一番新しいもので2023年の10月までのデータしか学習されていません！ 今季のアニメについて聞けないじゃん！！！ (2024年12月時点) モデルを追加で学習(ファインチューニング)することも可能ですが、 再学習には「時間」と「お金」がかかってしまうので今季のアニメについて聞きたいというモチベーションでは厳しいところがあります。 そこでは今回はRAGを使った最新情報を使えるチャットボット作成をしていきます このチュートリアルをやることで最近話題になっているRAGを理解できるだけではなく、Next.jsを利用してあなたの好きなチャットボットを作ることができます。 Webサイトの隅に専門のチャットボットをおいたり、学習には使えない社内の機密情報を利用したチャットボットを作って会社のヒーローになることも余裕でしょう 動画教材もご用意してます こちらの教材にはより詳しく解説した動画もセット
【図解ハンズオン】たった60分でReactを使った音楽プレイヤーを作ろう！【TypeScript/Shadcn/TailwindCSS】 - Qiita
はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 普段はReactを使った実践的なハンズオンを投稿しています。 今回はApple Musicのようなかっこいい音楽プレイヤーを作成したいと思います。 実際にデプロイすればオンラインで音楽を聞くことができる実用的なものになっているので、ぜひハンズオンをして学んでみてください。 動画で解説 この記事よりももっと細かいところまで知りたい方は動画教材もあります。 もしReactやTypeScriptに不安がある方、やったことがない方は以下の動画をみてください！ 対象者 Reactを初めてやる HTMLの経験がある JavaScriptをもっと学びたい TypeScirptを学んでみたい 今回のハンズオンはReactの基本が学べるので、Reactを全くやったことがない人におすすめです。 1. Reactの環境構築 Rea
世界最大級の「完全栄養食サブスク」をともに創るフロントエンドエンジニア募集！
世界最大級の「完全栄養食サブスク」をともに創るフロントエンドエンジニア募集！ ベースフード株式会社 @basefood TypeScript JavaScript Vue.js React Angular I want to hear a detailed 何をどうやって実現する仕事か？ ベースフードが独自開発するECシステムの開発・運用に携わっていただき、よりユーザ体験を向上させるようなシステムを目指していきたいと思っています。 https://shop.basefood.co.jp/ なぜやるのか ベースフードはこれまで、一食に必要な栄養素を全て含む完全栄養食を独自開発の自社Webサイトを通じて販売してきました。 これからは「健康をあたりまえにするWell-Beingサービス」を目指し、ユーザーのヘルスケアデータを活用したアプリやサービスも開発していきます。 「人生を楽しみ尽くす基盤の
【フルスタックエンジニアへの道！】ReactとTypeScriptの修行をした話 - Findy Tech Blog
こんにちは、ファインディでFindy Team+（以下Team+）を開発しているEND（@aiandrox）です。 普段はバックエンドの開発をメインで担当しているのですが、3ヶ月間フロントエンドの開発に挑戦する機会がありました。短い期間でしたが、フロントエンドテックリードから直接指導してもらいながら実装をすることで、フロントエンドの開発を一人でできるくらいに慣れることができました。 今回は、その経験と学びについて書いていきます。 フロントエンドに挑戦する前の自分について フロントエンドに挑戦することになった経緯 フロントエンドを学ぶ上で助けられたこと フロントエンドのノウハウが溜まった記事の充実 開発ツールが揃っている テックリードとマンツーマンでタスクをやっていく react.devの輪読会 つまづいた点 タスク粒度を適切に分割すること Team+のフロントエンドの責務の考え方 Type
【Next.js + Typescript】ブログサイトを個人開発 - Qiita
はじめに 今回はじめてNext.jsを使用したアプリの開発をしました。 今まではReactとViteという組み合わせで作成することが多かったので、Next.jsに慣れておらず、苦戦しながらもなんとか作成をすることができました。 開発したアプリの詳細とNext.jsを使ってみた所感を共有したいと思います。 アプリのご紹介 概要 Qiita と MicroCMS の API を利用してブログや記事を掲載するサイトです。 使用している技術スタック - 環境 Next.js: v14.2.6 firebase: 10.13.0 - 言語 typescript: 5.3.3 - ライブラリ react: 18.2.0 react-hook-form: 7.52.2 react-markdown: 9.0.1 react-dom: 18.2.0 - CSS tailwindcss: 3.4.10 da
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React + TypeScript】メニューボタンの押下位置に応じたメニューの表示 - Qiita
Next.js個人備忘録④：Next.jsでTypeScriptとJavaScript、どちらを使うか迷ったため、記事にまとめてみた - Qiita
Vite + ReactプロジェクトをTypeScriptに移行する手順と発生しがちなエラーの解決方法 - Qiita
