Astroの入門書リリース本日、日本でも人気を集めるウェブフレームワークAstroの入門書『はじめてつくるAstroサイト（三好アキ著）』をリリースしました。 ビギナーを対象にしているので、JavaScriptやReact、Vueなどの知識は不要です。 Astroは最新バージョンの5（Beta）を使っています。 Kindle Unlimited利用者は無料購読可能です。 HTMLとCSSを終えたビギナーに最適なAstroAstroは2021年にベータ版がリリースされた
Server Actionsの新刊リリース本日、Next.jsとServer Actionsを使ってフルスタックアプリを開発する新刊をリリースしました。 私の他の本と同じように、本書もビギナーを対象にしているので、Next.jsやReactの深い理解や経験は不要です。 Next.jsは、1週間前にリリースされた最新バージョンの15を使っています。 Kindle Unlimited利用者は無料で購読可能です。 本書の特徴本書はServer Actionsを使ったフルスタ
Next.js新刊書リリース明日9月19日に翔泳社より『動かして学ぶ！Next.js/React開発入門』が発売になります。 くわしい書籍の情報は、下記の翔泳社のページでご覧ください。 https://www.shoeisha.co.jp/book/detail/9784798184678 X(Twitter)リンク 目次は本記事の最後にあります。 内容と対象読者この本では、Next.jsをはじめて使うウェブ開発者の人向けに、Next.js（バージョン14／Appル
2年ぶりのアップデート『はじめてつくるバックエンドサーバー発展編（Node.js & Express & MongoDB）』の改訂版を発売しました。 電子書籍とペーパーバック、両方でご利用いただけます。 改訂の理由『はじめてつくるバックエンドサーバー発展編』を書いたのは2022年4月なので、発売からすでに2年半ほど経っていました。 2年半といえば、npmパッケージのバージョンが上がり、コードの書き方が変わっていてもおかしくはない時間の長さです。 実際、書籍内で使ってい
この記事の内容次のことに触れています。 • 本の「賞味期限」の意味 • 技術書がすぐに腐る理由 • 時間の経過とともに読まれなくなる本の特徴 • 長く生き残る本を書くために必要なこと • 私自身が本を書きながら感じていた空虚感と、それを乗り越えた方法 それでは以下、本編です。 本の賞味期限私はこれまでプログラミングの入門書を20冊以上書いてきましたが、その初めの1冊目を3年前に書いていたとき、あることに気がつきました。 本には賞味期限があることです。 賞味期
網羅性を避けた理由これまでに私はいくつかのプログラミングの教本を書いてきましたが、そこにはひとつ共通するコンセプトがあります。 たとえばウェブアプリ開発ツールのReactについて書いた『はじめてつくるReactアプリ（2024年4月第2版リリース）』であれば、Reactというツールの全事項の紹介はしないということです。 教科書風の入門書でよく見る網羅性を目指すものとは真逆のアプローチでした。 網羅性や包括性を目指さなかったことには、次の2つの理由があります。 • 列挙
React + Viteを採用した新版発売本日、『はじめてつくるReactアプリ』と、そのTypeScript版『はじめてつくるReactアプリ with TypeScript』の第2版をリリースしました。 最大の変更点（create-react-appからReact + Viteへ）変更点は、開発ツールをReact + Viteに切り替えたことです。 2021年3月の初版以来「create-react-app」を使っていましたが、今回の新版でReact + Viteに変
私の本のコンセプト私は過去3年間で20冊以上のビギナー向けプログラミング教本を書いてきましたが、最初に出した本から重視しているコンセプトがあります。 「知っていること」よりも「できること」。 頭の中での抽象的な理解や知識の拡充を目指すのではなく、「自分の手で何かができるようになる」という行動性の重視です。 私たちが助詞と助動詞の違いを知らなくても日本語を話せるように、「知っていること」と「できること」は違います。 ビギナーに必要なのは「小さな成功体験」学び始めの初心者
はじめに本書のねらい 2020年ごろまで、TypeScriptはオプション的なスキル、いわば「知っていたらベター」という扱いでしたが、近年ではフロントエンド・エンジニアならば知っておかなければならない必須スキルとなりました。これはReact開発において特に顕著で、企業案件や商業目的のReactアプリはTypeScriptで書くのが今はデフォルトになっています。 TypeScriptだけ、あるいはReactだけにフォーカスした書籍はいくつもありますが、本書では特に「Type
はじめに本書のねらい Reactの確かな理解とスキルを身につけることが本書の目標です。ウェブアプリケーションの仕組み、JavaScriptの基礎知識から、Reactの基本および発展的内容まで、Reactアプリケーション開発の広い範囲を本書はカバーしています。 本書の一部には、言葉による概念の説明が続く所がありますが、本書の大部分はコードを自分の手で実際に書き、自分の目で実際に働きを確認しながら進めてもらうことを想定しています。自分の手で作ったものが動いたときの喜びは格別で
Next.jsのメタデータはサーバー・コンポーネントにしか設定できないメタデータとはブラウザのタブに表示されるページ名や、ページ概要の書かれたdescriptionのことで、SEOには非常に重要なデータです。 このメタデータ設定のため、Next.js（Appルーター）にはgenerateMetadataやmetadataといった専用タグが用意されていますが、制限がひとつあります。 これらのタグがサーバー・コンポーネントでしか使えないことです。 しかし実は使えるようにする
3種類の型の記法React + TypeScript開発で使うイベントの型の記法には、次の3つがあるので紹介します。 1：インライン記法 2：パラメータ横に書く記法 3：イベント名の横に書く記法 １インライン記法（React + TypeScriptのイベントの型）次のようなコードがあったとします。 // Form.tsxconst Form = () => { const [data, setData] = useState("") return (
サーバーコンポーネントのメリットを実際に確認Next.js AppフォルダでデフォルトになっているReactサーバーコンポーネント。 その特徴として、「セキュリティ性が高い」や「パフォーマンスに優れる」といたるところで書かれていますが、言葉の説明だけではよくわからないので、本記事では実際に確認をしてみましょう。 クライアントコンポーネントよりも「パフォーマンスに優れる」という点を見ていきます。 4メガバイト、減りましたまずNext.jsをインストールしましょう。 np
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のジェネリクスはむずかしい？この記事はジェネリクスをサクッと解説する全4回の記事の3つ目です。 型定義とfunction両方のジェネリクス次のfunctionがあったとします。 // main.tsfunction example(b: any){ return b.data} これは、渡された「b」というany型のデータをreturnするだけのfunctionですが、「b.data」となっているところから、「b」はオブジェクトだとわかります。
TypeScriptのジェネリクスはむずかしい？この記事はジェネリクスをサクッと解説する全4回の記事の2つ目です。 functionのジェネリクス次のコードがあったとします // main.tsfunction example(a: string){ return a} これは「a」という渡されたstringのデータをreturnするだけのfunctionです。 次のコードを追加してJavaScriptに変換すると、ブラウザのコンソールには「東京」と表示されます
