はてなブックマーク

はじめに こんにちは@Sicut_study (Watanabe Jin)です。 2023年から始まった 「0からReactを勉強するならこのロードマップに従え」 ですが、早いもので3年目を迎えました。この期間で私も多くのプログラミング未経験の人にJISOUを通してReactを指導してきました。 👇メンバーの記事はこちらにあります また、実際に記事通りにロードマップを進めたことでReactやNext.jsの案件に参画できたというお礼のメールがくるようにもなりました。信じてやっていただけて大変感謝しています。 Reactを多くの人に指導してきてわかりました。 完全未経験だったとしても正しい手順を踏めば 誰でも3ヶ月でReactで個人開発できるレベルにはなれる 私から教わることでも達成できますが、自分でやれる行動力があるなら教わらなくてもできます。むしろ自分でできる人は自分でやって成長してく

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で色々なアプリを開発したり、JISOUを通して多くのエンジニアに教えてきました。今ではある程度技術的にも詳しくなってきましたが、最初からある程度できたわけではありません。 特に「Reactに詳しくなれたな」「技術力が身についたな」「可能性を感じられた」と思った瞬間は間違いなくCI/CDパイプラインが構築できるようになったことでした。 未経験からエンジニアになるためにはCI/CDの理解はほぼ必須の時代です。 しかしCI/CDの経験がないどこ

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を初心者を中心に指導してきました。 教えてきた生徒はReactで立派なサービスを開発していますが、実力はあっても仮想DOMや再レンダリングの理解が甘くバグに時間を取られるケースが多々あります。 (深く理解しなくても使えるが魅力でもあります) Reactを開発する上で「仮想DOM」や「再レンダリング」をしっかり理解することは、バグ対応やパフォーマンス向上のためにとても重要です。 今回はReactをJavaScriptのみで0から再実装すること

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)です。 エンジニアをしていると「AI」という言葉を聞かない日はないくらいに日常に浸透し始めて、最近では「AIエージェント」という言葉すら一般的になりつつあります。 そしていま現場の最前線ではどこもAIエージェント開発が始まっており、いかに早くエージェントを作りサービスに利用できるかが今後生き抜く上で重要になってきているように思います。 CursorなどのAgentモードを利用したことある方は多いのかなと思いますが 「AI時代でもエンジニアとしての市場価値を上げてい

はじめに こんにちは、Watanabe jinです。 ReactがAIも相まって選択されるケースが増えて学びたいと思っている人も多いかと思います。 私も過去にたくさんのReact教材をやりましたが、本当にやってよかったと思える教材はほぼありませんでした。 最初に選ぶ教材によってはReactの学習スピードは圧倒的に変わりますし、Reactの教材はJavaScriptの非同期処理やmapなどを踏まえて説明する必要があります。 このチュートリアルはそんな駆け出しエンジニアだった私に「これ1本だけやっておけば基礎は終わり」と言えるような完全版を目指して作成しました。JavaScriptがなんとなくという方でも最後まで絶対走りきれるように丁寧に解説しています。 最後までチュートリアルを行うと映画アプリが完成します。 動画教材も用意しています こちらの教材にはより詳しく解説した動画もセットでご用意して

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)です。 AIが日々進化しており、個人開発を誰もが気軽にできるような世界になってきました。 私もかなり焦りながら勉強をしておりついていくのに必死です。 個人開発のハードルが下がった中で、日々多くの個人開発がリリースされています。 その中でNext.js ×ばつ Hono ×ばつ Cloudflareという構成をネット上で見る機会が増えました。 この構成をすることは個人開発者にとっては大きなメリットがあります。 (だいたい)無料枠でサービスが動かせる 簡単にデプロイすることが

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が何故いいいのか、どのように使えるのかが説明できるレベルにはなれませんでした。 やはり文章の説明だけでなく

はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 ReactはAIブームなども相まって人気のJavaScriptフレームワークです。今後も更にReactを利用したアプリケーションは増えることが想像できます。 Reactのコンセプト(基礎)をしっかりと理解することは、効率的で保守性の高いアプリケーション開発において不可欠です。今回はそのなかでも特に大切なものを20個解説していきます。 この記事を読むことで Reactの基礎から応用までの体系的な知識を一箇所で習得できる コンポーネント設計やステート管理など、直面する課題に対する解決策を理解できる パフォーマンス最適化やエラー処理などアプリケーション開発に必要な知識を得られる 最新機能(React 19、Suspenseなど)について学び取り入れられる 面接や技術的な議論の場で、Reactについて自信を持って説明

T3 Stackは以下のような思想があるアプリケーションです。 「簡素さ」「モジュール性」「フルスタック安全」を実現できる技術スタックを集めた総称をT3 Stackと呼びます。 Next.js TypeScript trpc NextAuth.js Prisma TailwindCSS で構成されています。 2021年に生まれて多く利用されてきたモダンなスキルスタックと呼ばれていた構成でしたが現代いくつかの不満が生まれてきました。 そんな不満をもったJosh氏が作ったのがJStackでした。 今回は「JStack」を使ってX(旧:Twitter)のクローンアプリを開発していきます。 JStackを使うことでエンドツーエンドの型安全を体験しながら、Clerkを組み合わせてよりT3 Stackに近い開発ができるようにチュートリアルを作成しました。 このチュートリアルをやることでモダンな技術スタ

はじめに こんにちは、@Sicut_studyです。 Reactを勉強するとまず最初に勉強するのがuseStateなどのHooksだったと思います。 useStateやuseEffectなどは利用する場面が多く慣れている方も多いと思いますが、その他のHooksはどうでしょうか?そもそも名前すら知らないというHooksがたくさんあるかと思います。 その中には利用することでパフォーマンスを向上させたり、ステートを簡単に扱えるようになるものなど便利なものがたくさん用意されています。 React19の登場でuseActionStateやuseOptimisticなど絶対に覚えて活用していきたい重要なHooksも登場しております。 この記事ではそんなReactで用意されている全てのHooksを12分で読める内容にして紹介していきます。 最後まで読めばどのタイミングでどのHooksを選択すればよいかわ

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は便利なものが揃っている分、機能

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社が開発していたこともあり多くのプロジェクトで採用されていたため、代替に乗り換える必要が

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動画があります。 しかしそれらの記事や動画を見て思いました... 自分の能力が

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)です。 今回もハンズオンをやっていきますが、テーマは「爆速」です。 JavaScriptのフレームワークで話題になっているHonoとNext.jsを利用してAPIを開発します。 爆速が活かせそうなアプリケーションを考えていたのですが、爆速といえばタイピングゲームが真っ先に浮かびました。みなさんも「寿司打」はおそらく1度プレイしたことがあると思います。 しかし、今回のハンズオンの教材として作るゲームのイメージは少し違います。 「タイピングオブザデッド」という

はじめに みなさんこんにちは、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」を利用することも

GPTは一番新しいもので2023年の10月までのデータしか学習されていません! 今季のアニメについて聞けないじゃん!!! (2024年12月時点) モデルを追加で学習(ファインチューニング)することも可能ですが、 再学習には「時間」と「お金」がかかってしまうので今季のアニメについて聞きたいというモチベーションでは厳しいところがあります。 そこでは今回はRAGを使った最新情報を使えるチャットボット作成をしていきます このチュートリアルをやることで最近話題になっているRAGを理解できるだけではなく、Next.jsを利用してあなたの好きなチャットボットを作ることができます。 Webサイトの隅に専門のチャットボットをおいたり、学習には使えない社内の機密情報を利用したチャットボットを作って会社のヒーローになることも余裕でしょう 動画教材もご用意してます こちらの教材にはより詳しく解説した動画もセット

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)です。 今回はGraphQLの初心者向けチュートリアルを行っていきます。 REST APIと肩を並べて知られるGraphQLですが、なかなかイメージがしづらく初心者には難しいものです。私も駆け出しの頃に勉強しましたが全然身につけることができませんでした。 GraphQLのクエリのイメージがしづらい DBとGraphQLをどう接続すればいいかわからない 実際にアプリケーションと組み合わせる方法がわからない このように教材をやりながら感じていました。 GraphQLはふわっとし

マネタイズはできるか? もしあなたがこれから作るサービスを「多くの人に使ってもらいたい」「広めていきたい」そう思うのであればマネタイズは実装前に考えなければなりません。 ここで私の失敗を共有します。 私は人生で初めて行った起業で大失敗しています。 起業したのがコーヒーのオンライン販売でした。 あまり馴染みがないかもしれませんが、世の中に流通しているコーヒーは品質がよくないもので苦いイメージのあるものばかりです。 それに比べて値段は何十倍にもなりますが、味わいが果物であったりお花であったりとコーヒーなのにコーヒーでないような味わいがするスペシャリティコーヒーというのも存在します。 コーヒーが苦手という人はほとんどの人が品質の悪いものしか飲んだことがないからであり、本当に美味しいコーヒーは誰でも美味しく、楽しく飲めるものです。 しかし、そんな美味しいコーヒーを飲む機会はほとんど日常にはありませ

はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 普段はReactを使った実践的なハンズオンを投稿しています。 今回はApple Musicのようなかっこいい音楽プレイヤーを作成したいと思います。 実際にデプロイすればオンラインで音楽を聞くことができる実用的なものになっているので、ぜひハンズオンをして学んでみてください。 動画で解説 この記事よりももっと細かいところまで知りたい方は動画教材もあります。 もしReactやTypeScriptに不安がある方、やったことがない方は以下の動画をみてください! 対象者 Reactを初めてやる HTMLの経験がある JavaScriptをもっと学びたい TypeScirptを学んでみたい 今回のハンズオンはReactの基本が学べるので、Reactを全くやったことがない人におすすめです。 1. Reactの環境構築 Rea

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)です。 みなさんは読書していますか? 現代はスマホの普及に伴って周りにはたくさんの情報があります。 それらの情報をすべてキャッチアップするのは時間的に難しくなり、情報を得るのにタイパを意識する人が増えました。Youtubeを倍速で見る人が現れた時には驚きましたが、今では割と普通となりました。 そんな情報量が多い現代で「本を読む」ことは難易度が高いものとなっています。1冊本を読むのに数時間かかったと

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 人生を変える簡単な方法 朝起きて1人目標へ進む。人生を変えるための簡単な方法はたったこれだけだったんだ。 こんにちは、Watanabe Jin(@Sicut_study)です。 みなさんは早起きが得意でしょうか? 私はものすごく苦手です。体質的にも夜型なのでおそらく向いてないです。 加えて何時間でも寝れます。睡眠時間を確保しても早起きはできません。 朝は自分との闘いです。 アラームは毎日欠かさず設定するのですが 「眠いから今日は2度寝しよう」 「まだ3時間は寝れる」 そんな誘惑に負けてしまうのです。 「明日の朝は絶対起きる。勉強をたくさ

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)です。 エンジニアにとって勉強は一生つきまとうテーマです。エンジニアは一生学び続けなければいけないというのはエンジニアであれば誰もが理解している話です。 私は普段アウトプットを中心とした勉強法について記事を投稿しています。 正しい勉強方法を取り入れることで、「時間をムダにしていた」「もっと若い頃に知りたかった」と思うほどの成果を手に入れた人もお陰様で徐々に増えています。 その一方こんな

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)です。 私は勉強法についてかなりのこだわりがあり、日々勉強法に勉強するのが日課となっています。おそらく勉強法にこだわっているエンジニアは私くらいしかいないのではないでしょうか? しかし、ここまで勉強法に執着するのは私が過去に体験したエンジニア人生をダメにしかけたとある出来事がきっかけでした。 私はプログラミングコーチングJISOUという現役のエンジ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? それとも悪なのか? このサービスが広まった先に待つのは善なのか?悪なのか? こんにちは、Wtanabe Jin(@Sicut_study)です。 正直このサービスを作るかはものすごく迷いました。 このサービスが良いものとして扱われるのか、悪いものとして扱われるのか全く予想がつかないのです。仮に私が開発をやめたとしても、この記事を読んで同じサービスを生み出す人が現れるかもしれない。 しかし、この体験を通して伝えられることはエンジニア業界を変えるきっかけにつながるかもしれない。 今回は私が個人開発を通して感じた「これからのエンジニア」につい

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)です。 今回は記事1本で初心者が必要な知識を全て学べるGitチュートリアルを紹介していきます。 世の中にはたくさんのGitに関する教材があります。しかし、真に良いと思える教材はありません。 もちろん私も4年前はGitという言葉を知らない状態から、書籍などで学習をしました。 しかし、書籍で知識を得たとしても実際にコマンドを使って実践的に学んだわけではなかったのでほとんど身になりませんでした。 私が思う世の中にあるGitの教材のイケてない点は2つです。 結局ほとんどの

はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 この記事をもって投稿数が600本を超えました🎉🎉 今回は約4年間記事を書き続けた私が、 「どんなモチベーションで書いてきたのか?」 「記事を書いてきたことでどんなメリットがあったか?」 「現役でエンジニアをやりながらどのように時間管理して書いていかのか?」 600本書いてきた私だから伝えられることを本記事ではまとめていきます。 この記事を読むことで、気軽にアウトプットする考え方やモチベーションの維持の仕方などを学ぶことができます。 これまでの歩み 600本を投稿することで人生が大きく変わってきたことを紹介してきます。 私の活動についてですが、2024年9月現在で いいね数 25000 フォロワー 5000 2023 Top Contributer Qiita Enginner Festa 2位 月間ランキ

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)です。 突然ですが、私には不思議に思うことがあります。 なぜ同じタイミングでエンジニアになったのに、気づいたらスキルに圧倒的な差がついてるのか? もちろん努力量が違うというのもあるかもしれません。しかし、効率よく学習をするにはテクニックが存在します。 この記事では効率よく学習することをタイパのよい勉強法として紹介します。 「コスパのよい勉強法」に関してはネットに調べれば多くあります。それは本当に効率のよい勉強法はある程度やり方が決まっているからです。ここでは、考え

はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 アプリを作る上で事前に手札が多いほうが、実現できるアイデアの幅も広くなります。 今回は「AIによる画像生成」「ストレージへの保存」をメインとした画像ジェネレーターをReactで実装するアプリケーションを作成していきましょう。 今回はNext.jsの開発元であるVeceltとパートナー強化がされた「Supabase」を利用して素早く実装します。 今後Supabaseはより選択肢になる可能性が高くなる素晴らしいBaaSです。触ったことない方でもわかるように丁寧に解説しています。 動画で更に詳しく解説 この記事ではReact自体の解説は細かくしておりません。 もしReactやTypeScriptに不安がある方、やったことがない方は以下の動画をみてください! ハンズオンの対象者 Reactの基本がなんとなくわかる ハ