GitHubでつくって学ぶ

Reactで学ぶ 学習タイマー開発(第2回)~タイマーを動かす~【GitHub対応】

はじめに第1回では、「25:00」の表示と科目の入力欄を作った。ただ、ボタンを押しても何も起きない、動かない画面だった。第2回では、いよいよタイマーを動かす。useEffectとsetIntervalを使って、1秒ごとに残り時間を減らしてい...
Uncategorized

Reactで学ぶ 学習タイマー開発(第1回)~画面を作る~【GitHub対応】

はじめに「PC-LABOを試すためのJavaScript・React入門シリーズ」と「Reactで学ぶ 予定管理アプリ開発シリーズ」では、useStateを中心に、Reactの基本を学んだ。今回から始めるこの新シリーズでは、学習タイマーを作...
JavaScript / React

PC-LABOを試すためのJavaScript・React入門(第3回)~JSX・コンポーネント・props・useState~【GitHub対応】

はじめに第1回ではJavaScriptの基本文法を、第2回では配列・オブジェクト・map/filter・スプレッド構文など、Reactのコードに頻出する書き方を扱った。入門シリーズの最終回となる今回は、いよいよReactそのものを扱う。JS...
JavaScript / React

PC-LABOを試すためのJavaScript・React入門(第2回)~配列・オブジェクト・map/filter・import/export・JSON・Date~【GitHub対応】

はじめに第1回では、変数・型・条件分岐・ループ・関数といった、JavaScriptの最も基本的な文法を扱った。第2回では、Reactのコードに頻繁に登場するJavaScriptの書き方を扱う。「Reactで学ぶ 予定管理アプリ開発」でつまず...
JavaScript / React

PC-LABOを試すためのJavaScript・React入門(第1回)~変数・型・条件分岐・ループ・関数~【GitHub対応】

はじめに「Reactで学ぶ 予定管理アプリ開発」では、Reactの機能が次々と登場する。ただ、つまずく原因の多くはReactそのものではなく、土台になっているJavaScriptの書き方である。そこで、初心者の方は、この入門シリーズ(全3回...
Python

PC-LABOを試すためのPython入門(第3回)~クラスと標準ライブラリの読み方~【GitHub対応】

このシリーズについてこのブログでは、「基本情報技術者試験問題に挑戦しよう!」シリーズをはじめ、Pythonの短いプログラムを動かしながら仕組みを確かめる記事を扱っている。このシリーズでは、「本ブログのコードを読める・動かせる」ことを目標に、...
Python

PC-LABOを試すためのPython入門(第2回)~条件分岐・ループ・関数の引数・辞書~【GitHub対応】

このシリーズについてこのブログでは、「基本情報技術者試験問題に挑戦しよう!」シリーズをはじめ、Pythonの短いプログラムを動かしながら仕組みを確かめる記事を多く扱っている。このシリーズでは、「このブログのコードを読める・動かせるようになる...
Python

PC-LABOを試すためのPython入門(第1回)~変数・型・print~【GitHub対応】

このブログの構成についてこのブログでは、「基本情報技術者試験問題に挑戦しよう!」シリーズをはじめ、Pythonの短いプログラムを動かしながら仕組みを確かめる記事を扱っている。ただ、それらの記事に掲載のコードを理解するには、変数や関数、クラス...
GitHubでつくって学ぶ

Pythonで学ぶ 家計簿アプリ開発(第6回)~ 完結!Renderへのデプロイ ~

はじめに前回までで、家計簿アプリの機能面(一覧表示、追加・削除、データベース保存、集計・グラフ表示)はひと通り完成した。最終回となる今回は、これまでCodespaces上だけで動かしてきたこのアプリを、Renderを使ってインターネット上に...
GitHubでつくって学ぶ

Pythonで学ぶ 家計簿アプリ開発(第5回)~ 家計簿アプリらしくなってきた集計機能 ~

はじめに前回は、支出データの保存先をPythonのリストからSQLiteに切り替え、再起動してもデータが消えないようにした。今回は、これまで蓄積してきたデータを月別・カテゴリ別に集計し、グラフとして可視化する。家計簿アプリらしい機能に、いよ...