GitHubでつくって学ぶ

はじめに前回で、カレンダー表示・予定の追加削除・保存まで、予定管理アプリとしての機能が一通り完成した。ただし、ここまではnpm run devでパソコン（Codespace）の中だけで動かして確認していただけである。最終回となる今回は、この...

はじめに前回で、予定の追加・削除・保存（localStorage）まで一通りの機能が揃った。ただし、画面はずっと「予定の一覧が並ぶだけ」のシンプルな見た目のままだった。今回は、いよいよ「予定管理アプリ」らしい見た目に近づける。月表示のカレン...

はじめに前回は、useStateを使って予定の追加・削除ができるようにした。ただし、最後に触れた通り、ブラウザを再読み込みすると追加した予定はすべて消えてしまう仕様だった。今回は、useEffectとlocalStorageという2つの仕組...

はじめに前回は、Git・GitHubとは何か、そしてGitHub Codespacesという「ブラウザだけで開発環境が使える機能」があることを紹介した。今回は、実際に手を動かして、以下を一通り体験してみよう。GitHub上に自分のリポジトリ...

はじめに本ブログのカテゴリ「GitHubでつくって学ぶ」では、実際にコードをGitHub Codespaces上で試しながら学習を進めていく記事を扱っている。「Reactで学ぶ 予定管理アプリ開発」シリーズも、このカテゴリに入る。本記事では...

はじめに前回は、予定データをコンポーネントに分割し、propsで受け渡して一覧表示するところまで作った。ただし、表示していたのはコード内に直接書いた固定のデータだった。今回は、いよいよReactの中心的な機能であるuseStateを使い、画...

はじめに前回は、Vite + Reactの開発環境を構築し、「Hello, PC-LABO!」とカウンターだけの画面を表示するところまで確認した。今回は、この初期画面を削って、予定管理アプリの本体となる「予定を一覧表示するだけ」のシンプルな...

はじめに今回から新しい連載として、Reactを使った「予定管理アプリ」の開発を通してReactの基礎を学んでいく企画をスタートする。 これまで本ブログではC言語・Python・Javaなどの言語やITの基礎などを扱ってきたが、今回は視点を変...