<p data-line="0" class="code-line">こんにちは！<br>
トレンドレポート#2はtamuが担当させていただきます！</p>
<p data-line="3" class="code-line">React TokyoのDiscordチャンネルで盛り上がったトピックをピックアップしてお届けさせていただきます！</p>
<h1 id="%E5%88%9D%E3%82%81%E3%81%A6react%E3%82%92%E5%AD%A6%E3%81%B6%E6%95%99%E6%9D%90" data-line="5" class="code-line">
<a class="header-anchor-link" href="#%E5%88%9D%E3%82%81%E3%81%A6react%E3%82%92%E5%AD%A6%E3%81%B6%E6%95%99%E6%9D%90" aria-hidden="true"></a> 初めてReactを学ぶ教材</h1>
<p data-line="6" class="code-line">Reactの学習を始める際、どんな教材を選ぶべきか？公式ドキュメントを読むべき？動画のほうが分かりやすい？ハンズオン形式がいい？……そんな悩みを持つ人も多いのではないでしょうか。<br>
今回、React TokyoのDiscordで特に話題になった「React初心者向けの学習教材」をご紹介します！</p>
<h3 id="1.-react%E5%85%AC%E5%BC%8F%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%EF%BC%88%E6%97%A5%E6%9C%AC%E8%AA%9E%E7%89%88%EF%BC%89" data-line="9" class="code-line">
<a class="header-anchor-link" href="#1.-react%E5%85%AC%E5%BC%8F%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%EF%BC%88%E6%97%A5%E6%9C%AC%E8%AA%9E%E7%89%88%EF%BC%89" aria-hidden="true"></a> 1. React公式ドキュメント（日本語版）</h3>
<p data-line="10" class="code-line">公式ドキュメントは王道の学習手段ですね。<br>
ですが、いきなり公式ドキュメントはハードルが高く感じて、「勧めても読んでもらえない」こともあるようです。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__414610fd1401" src="https://embed.zenn.studio/card#zenn-embedded__414610fd1401" data-content="https%3A%2F%2Fja.react.dev%2Flearn" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://ja.react.dev/learn" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://ja.react.dev/learn</a></p>
<h3 id="2.-mosya-react---react%E5%85%A5%E9%96%80%E3%81%8B%E3%82%89%E5%91%A8%E8%BE%BA%E7%9F%A5%E8%AD%98%E3%81%AE%E7%BF%92%E5%BE%97%E3%81%AB%E3%82%82%E6%B4%BB%E7%94%A8%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9" data-line="14" class="code-line">
<a class="header-anchor-link" href="#2.-mosya-react---react%E5%85%A5%E9%96%80%E3%81%8B%E3%82%89%E5%91%A8%E8%BE%BA%E7%9F%A5%E8%AD%98%E3%81%AE%E7%BF%92%E5%BE%97%E3%81%AB%E3%82%82%E6%B4%BB%E7%94%A8%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9" aria-hidden="true"></a> 2. mosya React - React入門から周辺知識の習得にも活用できるプログラミング学習サービス</h3>
<p data-line="15" class="code-line">Reactの基本をブラウザーで学べる教材。<br>
公式ドキュメントよりも親しみやすい形式で、React学習できる点がおすすめです。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__aeb1d22af0c92" src="https://embed.zenn.studio/card#zenn-embedded__aeb1d22af0c92" data-content="https%3A%2F%2Fmosya.dev%2Freact" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://mosya.dev/react" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://mosya.dev/react</a></p>
<h3 id="3.%E3%82%8A%E3%81%82%E3%82%AF%E3%83%88%EF%BC%81-typescript%E3%81%A7%E5%A7%8B%E3%82%81%E3%82%8B%E3%81%A4%E3%82%89%E3%81%8F%E3%81%AA%E3%81%84react%E9%96%8B%E7%99%BA" data-line="19" class="code-line">
<a class="header-anchor-link" href="#3.%E3%82%8A%E3%81%82%E3%82%AF%E3%83%88%EF%BC%81-typescript%E3%81%A7%E5%A7%8B%E3%82%81%E3%82%8B%E3%81%A4%E3%82%89%E3%81%8F%E3%81%AA%E3%81%84react%E9%96%8B%E7%99%BA" aria-hidden="true"></a> 3.りあクト！ TypeScriptで始めるつらくないReact開発</h3>
<p data-line="20" class="code-line">書籍でReactを学べる教材。<br>
会話ベースで話が進むのでインプットしやすく、学習のハードルは下がりそうです。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b74c6ab177bf6" src="https://embed.zenn.studio/card#zenn-embedded__b74c6ab177bf6" data-content="https%3A%2F%2Fbooth.pm%2Fja%2Fitems%2F2368045" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://booth.pm/ja/items/2368045" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://booth.pm/ja/items/2368045</a></p>
<h3 id="4.%E3%80%902024%E5%B9%B4%E6%9C%80%E6%96%B0%E3%80%91react(v18)%E5%AE%8C%E5%85%A8%E5%85%A5%E9%96%80%E3%82%AC%E3%82%A4%E3%83%89%EF%BD%9Chooks%E3%80%81next14%E3%80%81redux%E3%80%81typescript" data-line="24" class="code-line">
<a class="header-anchor-link" href="#4.%E3%80%902024%E5%B9%B4%E6%9C%80%E6%96%B0%E3%80%91react(v18)%E5%AE%8C%E5%85%A8%E5%85%A5%E9%96%80%E3%82%AC%E3%82%A4%E3%83%89%EF%BD%9Chooks%E3%80%81next14%E3%80%81redux%E3%80%81typescript" aria-hidden="true"></a> 4.【2024年最新】React(v18)完全入門ガイド｜Hooks、Next14、Redux、TypeScript</h3>
<p data-line="25" class="code-line">動画で体系的に学べるので、独学が不安な方にもおすすめ。<br>
ただし、情報量が多いため、情報を絞って学習したい方は別の動画を活用するのがいいかもしれません。</p>
<p data-line="28" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1780101cfb48a" src="https://embed.zenn.studio/card#zenn-embedded__1780101cfb48a" data-content="https%3A%2F%2Fwww.udemy.com%2Fcourse%2Freact-complete-guide%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.udemy.com/course/react-complete-guide/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.udemy.com/course/react-complete-guide/</a></p>
<h3 id="5.%E3%80%902024%E5%B9%B4%E7%89%88%E3%80%91%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E5%90%91%E3%81%91%E8%AA%AD%E3%82%80%E3%81%B9%E3%81%8D%E8%B3%87%E6%96%99%E3%81%BE%E3%81%A8%E3%82%81" data-line="30" class="code-line">
<a class="header-anchor-link" href="#5.%E3%80%902024%E5%B9%B4%E7%89%88%E3%80%91%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E5%90%91%E3%81%91%E8%AA%AD%E3%82%80%E3%81%B9%E3%81%8D%E8%B3%87%E6%96%99%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> 5.【2024年版】エンジニア向け読むべき資料まとめ</h3>
<p data-line="31" class="code-line">無料で公開されている資料をまとめてくださっています。<br>
「どれを選べばいいのか分からない」という悩みは大きなハードルになるので、まとめてくださった資料があれば学習効率は向上するのではないでしょうか。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f845a0b11314f" src="https://embed.zenn.studio/card#zenn-embedded__f845a0b11314f" data-content="https%3A%2F%2Fqiita.com%2FKNR109%2Fitems%2F160e7d14ef5d08a88a8f" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/KNR109/items/160e7d14ef5d08a88a8f" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/KNR109/items/160e7d14ef5d08a88a8f</a></p>
<h1 id="%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" data-line="35" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> 終わりに</h1>
<p data-line="36" class="code-line">Reactの学習方法にはさまざまな選択肢があります。</p>
<ul data-line="37" class="code-line">
<li data-line="37" class="code-line">公式ドキュメント</li>
<li data-line="38" class="code-line">プログラミング学習サービス</li>
<li data-line="39" class="code-line">書籍</li>
<li data-line="40" class="code-line">Udemyなどの動画学習コンテンツ</li>
<li data-line="41" class="code-line">QiitaやZennなどの記事</li>
</ul>
<p data-line="43" class="code-line">学習の進め方も人それぞれで、以下のような意見が出てきました。</p>
<ul data-line="44" class="code-line">
<li data-line="44" class="code-line">公式ドキュメントのチュートリアルから始めて、関連ライブラリのチュートリアルを通じてReactの雰囲気を掴む人</li>
<li data-line="45" class="code-line">フレームワークを使わずにReactの基礎を学び、その後Reactに関するエコシステムを理解するという方法を取る人</li>
</ul>
<p data-line="47" class="code-line">大切なのは、自分に合った学習スタイルを見つけることだと思います。<br>
React Tokyoのコミュニティを通じて、色々な人と話すことで自分の学習スタイルが見つかるかもしれません！<br>
ぜひ、React Tokyoのコミュニティに参加して、イベントにもいらっしゃってください！</p>
<p data-line="51" class="code-line">最後までお読みいただき、ありがとうございました。</p>
<p data-line="53" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6a87c10a840cf" src="https://embed.zenn.studio/card#zenn-embedded__6a87c10a840cf" data-content="https%3A%2F%2Freact-tokyo.vercel.app%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://react-tokyo.vercel.app/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://react-tokyo.vercel.app/</a></p>


React Tokyo トレンドレポート #2 : 初めてReactを学ぶ教材

1. React公式ドキュメント（日本語版）

2. mosya React - React入門から周辺知識の習得にも活用できるプログラミング学習サービス

3.りあクト！ TypeScriptで始めるつらくないReact開発

4.【2024年最新】React(v18)完全入門ガイド｜Hooks、Next14、Redux、TypeScript

Discussion