三好アキ

🟦Amazonベストセラー著者　🟨専門用語なしでプログラミングを教えるメソッドに定評が…

三好アキ

🟦Amazonベストセラー著者　🟨専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを最新のフロントエンド開発入門に成功させる　🟩https://amazon.co.jp/mod728/e/B099Z51QF2

『はじめてつくるReactアプリ（with TypeScript）』第2版をリリース／Vite使用

React + Viteを採用した新版発売本日、『はじめてつくるReactアプリ』と、そのTypeScript版『はじめてつくるReactアプリ with TypeScript』の第2版をリリースしました。 最大の変更点（create-react-appからReact + Viteへ）変更点は、開発ツールをReact + Viteに切り替えたことです。 2021年3月の初版以来「create-react-app」を使っていましたが、今回の新版でReact + Viteに変

三好アキ

    • ドラゴン桜とプログラミング

      私の本のコンセプト私は過去3年間で20冊以上のビギナー向けプログラミング教本を書いてきましたが、最初に出した本から重視しているコンセプトがあります。 「知っていること」よりも「できること」。 頭の中での抽象的な理解や知識の拡充を目指すのではなく、「自分の手で何かができるようになる」という行動性の重視です。 私たちが助詞と助動詞の違いを知らなくても日本語を話せるように、「知っていること」と「できること」は違います。 ビギナーに必要なのは「小さな成功体験」学び始めの初心者

      三好アキ

      • 【React + TS徹底フォーカス：TypeScriptマスター with React】（三好アキ著）

        はじめに本書のねらい 2020年ごろまで、TypeScriptはオプション的なスキル、いわば「知っていたらベター」という扱いでしたが、近年ではフロントエンド・エンジニアならば知っておかなければならない必須スキルとなりました。これはReact開発において特に顕著で、企業案件や商業目的のReactアプリはTypeScriptで書くのが今はデフォルトになっています。 TypeScriptだけ、あるいはReactだけにフォーカスした書籍はいくつもありますが、本書では特に「Type

        1,600
        三好アキ

        • 【React全部入り：Reactマスター Zero To Hero】（三好アキ著）

          はじめに本書のねらい Reactの確かな理解とスキルを身につけることが本書の目標です。ウェブアプリケーションの仕組み、JavaScriptの基礎知識から、Reactの基本および発展的内容まで、Reactアプリケーション開発の広い範囲を本書はカバーしています。 本書の一部には、言葉による概念の説明が続く所がありますが、本書の大部分はコードを自分の手で実際に書き、自分の目で実際に働きを確認しながら進めてもらうことを想定しています。自分の手で作ったものが動いたときの喜びは格別で

          1,800
          三好アキ

        『はじめてつくるReactアプリ（with TypeScript）』第2版をリリース／Vite使用

        三好アキ

          【Next.js】メタデータをクライアント・コンポーネントに設定する方法

          Next.jsのメタデータはサーバー・コンポーネントにしか設定できないメタデータとはブラウザのタブに表示されるページ名や、ページ概要の書かれたdescriptionのことで、SEOには非常に重要なデータです。 このメタデータ設定のため、Next.js（Appルーター）にはgenerateMetadataやmetadataといった専用タグが用意されていますが、制限がひとつあります。 これらのタグがサーバー・コンポーネントでしか使えないことです。 しかし実は使えるようにする

          三好アキ

          【Next.js】メタデータをクライアント・コンポーネントに設定する方法

          三好アキ

          【React + TypeScript】イベントの型の記法には3種類あります

          3種類の型の記法React + TypeScript開発で使うイベントの型の記法には、次の3つがあるので紹介します。 1：インライン記法 2：パラメータ横に書く記法 3：イベント名の横に書く記法 １インライン記法（React + TypeScriptのイベントの型）次のようなコードがあったとします。 // Form.tsxconst Form = () => { const [data, setData] = useState("") return (

          三好アキ

          【React + TypeScript】イベントの型の記法には3種類あります

          三好アキ

          【Next.js】Reactサーバーコンポーネントのメリットを実際に確認してみました

          サーバーコンポーネントのメリットを実際に確認Next.js AppフォルダでデフォルトになっているReactサーバーコンポーネント。 その特徴として、「セキュリティ性が高い」や「パフォーマンスに優れる」といたるところで書かれていますが、言葉の説明だけではよくわからないので、本記事では実際に確認をしてみましょう。 クライアントコンポーネントよりも「パフォーマンスに優れる」という点を見ていきます。 4メガバイト、減りましたまずNext.jsをインストールしましょう。 np

          三好アキ

          【Next.js】Reactサーバーコンポーネントのメリットを実際に確認してみました

          三好アキ

          TypeScriptジェネリクスをサクッと理解【その４　複数のジェネリクスをつかう】

          TypeScriptのジェネリクスはむずかしい？この記事はジェネリクスをサクッと解説する全4回の記事の4つ目です。 ジェネリクスを複数使う次のコードがあったとします。 // main.tsfunction example(a: string, b: string){ return [a, b]}console.log( example("三島", "由紀夫")) aとbの2つのデータをexampleに渡して実行後すると、aとbは「[a, b]」という配列にな

          三好アキ

          TypeScriptジェネリクスをサクッと理解【その４　複数のジェネリクスをつかう】

          三好アキ

          TypeScriptジェネリクスをサクッと理解【その３　型定義とfunction両方に対して使うジェネリクス】

          TypeScriptのジェネリクスはむずかしい？この記事はジェネリクスをサクッと解説する全4回の記事の3つ目です。 型定義とfunction両方のジェネリクス次のfunctionがあったとします。 // main.tsfunction example(b: any){ return b.data} これは、渡された「b」というany型のデータをreturnするだけのfunctionですが、「b.data」となっているところから、「b」はオブジェクトだとわかります。

          三好アキ

          TypeScriptジェネリクスをサクッと理解【その３　型定義とfunction両方に対して使うジェネリクス】

          三好アキ

          TypeScriptジェネリクスをサクッと理解【その２　functionに対して使うジェネリクス】

          TypeScriptのジェネリクスはむずかしい？この記事はジェネリクスをサクッと解説する全4回の記事の2つ目です。 functionのジェネリクス次のコードがあったとします // main.tsfunction example(a: string){ return a} これは「a」という渡されたstringのデータをreturnするだけのfunctionです。 次のコードを追加してJavaScriptに変換すると、ブラウザのコンソールには「東京」と表示されます

          三好アキ

          TypeScriptジェネリクスをサクッと理解【その２　functionに対して使うジェネリクス】

          三好アキ

          TypeScriptジェネリクスをサクッと理解【その１　型定義に対して使うジェネリクス】

          TypeScriptのジェネリクスはむずかしい？下記のような「T」や「K」の入ったTypeScriptのコードを「ジェネリクス」といいます。 function example<T, K>(a: T, b: K): [T, K]{ return [a, b]} 「T」や「K」が入っていて、見た目だけですでに難しく感じます。 実際、ジェネリクスに苦手意識を感じている人は世界中にたくさんいます。 しかし、ひとつひとつ理解をしていけば実はシンプルなのがジェネリクスです。

          三好アキ

          TypeScriptジェネリクスをサクッと理解【その１　型定義に対して使うジェネリクス】

          三好アキ

          【Reactビギナー向け】default exportとexportの種類をすべて解説

          exportとimportいろいろReactを使っていると、「default export」というコードをかならず目にします。最後の行です。 const App = () => { return ( <div> <h1>こんにちは</h1> </div> )}export default App そうかと思えば、単に「export」だけのコードを見ることもあります。 export const addData

          三好アキ

          【Reactビギナー向け】default exportとexportの種類をすべて解説

          三好アキ

          新刊書『React + TS徹底フォーカス：TypeScriptマスター with React』リリース

          React + TypeScript新刊書リリースReact + TypeScriptの新刊書を本日リリースしました。 私はすでに数冊、ビギナー向けのReact + TypeScript入門書（下掲）を書いていますが、本書はそれらを終えた方が次に読むのに最適な一冊です。 特に、先月リリースのReactの全範囲をカバーした「Reactマスター Zero To Hero」の次に読む本としてぴったりの内容です。 https://note.com/monotein/n/nc8a

          三好アキ

          新刊書『React + TS徹底フォーカス：TypeScriptマスター with React』リリース

          三好アキ

          Reactをむずかしく感じる理由と、その解決法【その３】

          Reactが難しい原因は知識不足【その１】に書きましたが、React入門に成功して、最初のハードルを超えた人が感じるReactの難しさの原因はJavaScriptの知識不足です。 具体的には次の2点です。 • function（コンポーネント）の記法 • イベントの記法 本記事で紹介するのは、2つ目の「イベントの記法」です。 イベントの記法がわかれば、Reactに感じる苦手意識はぐっと減ります。 1つ目の「functionの記法」はに書いてあるので、そちらをまだ読

          三好アキ

          Reactをむずかしく感じる理由と、その解決法【その３】

          三好アキ

          Reactをむずかしく感じる理由と、その解決法【その２】

          【その１】に書きましたが、React入門に成功して、最初のハードルを超えた人が感じるReactの難しさの原因は、JavaScriptの知識不足です。 具体的には次の2つの項目です。 • function（コンポーネント）の記法 • イベントの記法 本記事で紹介するのは、1つ目の「function（コンポーネント）の記法」です。 functionの記法がわかれば、Reactに感じる苦手意識がぐっと減ります。 2つ目の「イベントの記法」は、続編の【その３】を見てくださ

          三好アキ

          Reactをむずかしく感じる理由と、その解決法【その２】

          三好アキ

          Reactを難しく感じる理由と、その解決法【その１】

          Reactの第一印象は「簡単」Reactを一度でも触ったことのある人や、私のReact入門書（下記）を読まれた方なら、「Reactって思ってたほどは難しくない」と感じたでしょう。 その理由は下記コードのように、Reactのreturn内はほとんどHTMLと同じように書けてしまうからです。 const App = () => { return ( <div> <h1>こんにちは</h1> </div> )}exp

          三好アキ

          Reactを難しく感じる理由と、その解決法【その１】

          三好アキ