GitHubでつくって学ぶ Pythonで学ぶ 家計簿アプリ開発（第1回）～ Flask環境構築とHello Flask ～
はじめに今回から新しい連載として、Pythonの軽量WebフレームワークFlaskを使った「家計簿アプリ」の開発を通して、Pythonでのバックエンド開発の基礎を学んでいく企画をスタートする。これまで本ブログの「GitHubでつくって学ぶ」...
GitHubでつくって学ぶ 
GitHubでつくって学ぶ 【ニュース】今後の「GitHubでつくって学ぶ」の連載（予定）の告知
はじめに先日、「Reactで学ぶ 予定管理アプリ開発」シリーズが全6回で完結した。環境構築からGitHub Pagesでの公開まで、React・フロントエンドの基礎を一通り体験してもらえたのではないかと思う。「GitHubでつくって学ぶ」カ...
News 【リニューアルのお知らせ】PC-LABOが「つくって学ぶ体験型ブログ」として生まれ変わりました！
いつもPC-LABOをご覧いただき、誠にありがとうございます。この度、PC-LABOはサイトコンセプトおよびコンテンツ内容を大幅に刷新し、「つくって学ぶ体験型ブログ」としてリニューアルオープンいたしました！今回のリニューアルの背景や、新しく...
GitHubでつくって学ぶ Reactで学ぶ 予定管理アプリ開発（第6回・最終回）～ GitHub Pagesへのデプロイ～
はじめに前回で、カレンダー表示・予定の追加削除・保存まで、予定管理アプリとしての機能が一通り完成した。ただし、ここまではnpm run devでパソコン（Codespace）の中だけで動かして確認していただけである。最終回となる今回は、この...
GitHubでつくって学ぶ Reactで学ぶ 予定管理アプリ開発（第5回）～月表示カレンダーの実装～
はじめに前回で、予定の追加・削除・保存（localStorage）まで一通りの機能が揃った。ただし、画面はずっと「予定の一覧が並ぶだけ」のシンプルな見た目のままだった。今回は、いよいよ「予定管理アプリ」らしい見た目に近づける。月表示のカレン...
GitHubでつくって学ぶ Reactで学ぶ 予定管理アプリ開発（第4回）～useEffect + localStorageによるデータ永続化～
はじめに前回は、useStateを使って予定の追加・削除ができるようにした。ただし、最後に触れた通り、ブラウザを再読み込みすると追加した予定はすべて消えてしまう仕様だった。今回は、useEffectとlocalStorageという2つの仕組...
GitHubでつくって学ぶ GitHubとは？（第2回）～Codespacesでコードを書いて動かしてみる（超初心者向け）～
はじめに前回は、Git・GitHubとは何か、そしてGitHub Codespacesという「ブラウザだけで開発環境が使える機能」があることを紹介した。今回は、実際に手を動かして、以下を一通り体験してみよう。GitHub上に自分のリポジトリ...
GitHubでつくって学ぶ GitHubとは？～ プログラミング学習を「つくって学ぶ」ための土台～
はじめに本ブログのカテゴリ「GitHubでつくって学ぶ」では、実際にコードをGitHub Codespaces上で試しながら学習を進めていく記事を扱っている。「Reactで学ぶ 予定管理アプリ開発」シリーズも、このカテゴリに入る。本記事では...
GitHubでつくって学ぶ Reactで学ぶ 予定管理アプリ開発（第3回）～ useStateによる予定の追加・削除～
はじめに前回は、予定データをコンポーネントに分割し、propsで受け渡して一覧表示するところまで作った。ただし、表示していたのはコード内に直接書いた固定のデータだった。今回は、いよいよReactの中心的な機能であるuseStateを使い、画...
GitHubでつくって学ぶ Reactで学ぶ 予定管理アプリ開発（第2回）～ コンポーネント分割とprops～
はじめに前回は、Vite + Reactの開発環境を構築し、「Hello, PC-LABO!」とカウンターだけの画面を表示するところまで確認した。今回は、この初期画面を削って、予定管理アプリの本体となる「予定を一覧表示するだけ」のシンプルな...