ki-hi-ro.com

DAILY JOURNAL

Webアプリ開発

14記事の記録。

2026年7月

  1. Django × React ToDoアプリの開発記録

    フェーズ1：基盤構築とAPI連携 投稿日記事タイトル開発過程における位置・役割2025.03.01WEBエンジニアとして今の自分に足りないスキルとギャップを埋めるための行動計画開発の起点：自身のスキル不足を補い、実力を証明するためのポートフォリオ作成を計画する。2025.03.02タスク管理アプリを作っていくバックエンド構築（初期）：DjangoとDRFを使用し、モデルやシリアライザー、APIエンドポイントの基本実装を行う。2025.03.02現状のデータのレコードを確認する動作検証：Djangoのシェル機能を活用し、データベース（Taskクラス）へのレコード保存・取得を検証する。2025.03.02Django製のタスク管理アプリをGitHubでホス…

2026年5月

  1. goで買い物リスト作成アプリを作成した

    goに興味があったので、チャッピーに相談してアプリを作成した どんなアプリか localhost:8080にアクセスすると、商品を追加できる画面が表示される 商品名を入力して、追加を押すと追加された商品が下に表示される 作成過程 ソースコード main.go package main import ( "fmt" "net/http" ) var items []string func main() { http.HandleFunc("/", showList) http.HandleFunc("/add", addItem) fmt.Println("http://localhost:8080 で起動中") http.ListenAndSe…

2025年8月

  1. 商品が削除される時に何が起こっているのか？

    例えば、トマト水煮を削除するには、 チェックボックスを押す。 削除された。 この理由をソースコードドリブンで解明していこう。 フロントエンド 要素の検証で確認すると、チェックボックスは、inputタグになっている。 frontend/src/components/ShoppingList.vueでは、以下のあたりが関係してきそうだ。 <template> <div> <section v-for="section in sections" :key="section.id" class="section"> <draggable v-model="section.items" item-key="id" @en…

    実際にアプリを使ってみる

    Docker Desktopで起動中のサービスの状況が確認できている。 アプリを開く スマホのトップ画面に置いたアイコンをクリックする。 バローと無印のセクションを作成している。 dockerのbackendのログは、以下のようになっていた。 [11/Aug/2025 16:20:00] "GET /api/lists/ HTTP/1.1" 200 209 [11/Aug/2025 16:20:00] "GET /api/lists/1/ HTTP/1.1" 200 207 商品を追加する それでは早速、これから私がルピットタウン刈谷に買いに行く商品を追加しよう。 ヨーグルトを追加した。 その時、backendとdbのログに変化があった…

    現状のオフライン対応の仕組み

    以下のプロジェクトを「docker compose up --build」で起動した後、 https://github.com/ki-hi-ro/shopping_list_app 同一IPアドレス:ポート番号でスマホでアクセスできる。 機内モードに変更 機内モードにすると、以下のようになる。 オフラインモード（変更は後で同期）が表示されている。 機内モードを外す 機内モードを外すと、オフラインモードの文字が消える。 現状の問題点 5Gのモバイル通信で、オフライン操作が行えない。 具体的には、商品の追加ができない。 同一IPセグメントにいないためと思われる。 機内モードにしたときに、オフラインモードの表示が行われる理由 それは、frontend/src…

2025年3月

  1. Django製のタスク管理アプリをgithubでホスティング→別デバイスでクローン

    先日作成し始めたタスク管理アプリをguthubで管理できるようにした。 リモートリポジトリの作成 これは最初のコミットをした後だが、こちらはみなさんも画像をクリックすればアクセスできる。 ローカル→リモート (venv) Mac:django_todo shibatahiroshitaka$ git init hint: Using 'master' as the name for the initial branch. This default branch name hint: is subject to change. To configure the initial branch name to use in all hint: of your…

    タスク管理アプリを作っていく

    PythonのDjangoでWEBアプリ開発を行いたい。 そこでまずは、タスク管理アプリを作成していく。 記事ベースで進めていくので、見届けて欲しい。 アプリのコンセプト 以下の２点が達成できればいい（今回は） ユーザーがタスクを追加・編集・削除できる タスクの完了・未完了を管理できる Djangoプロジェクトを準備する WEBアプリを作るのに必要なPython製フレームワークのDjangoを使用していく。 pythonの仮想環境はvenvを準備してある。 django_todoというディレクトリを作成した。 venvは有効になっている。 (venv) Mac:python shibatahiroshitaka$ DjangoとDjango REST…

2022年12月

  1. 今日の支出合計算出アプリ、SPA

    Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 See the Pen Vue3 支出管理アプリ by Shibata Hiroki (@khiro-enginner) on CodePen. 使い方 例えば、コンビニで88円の水を買ったとすると、入力欄に88と入力して、「記録」ボタンを押します。そうすると、今日の支出合計が計算されて、表示されます。 金額を入力する 「記録」ボタンを押す 次に、スーパーで夕食の材料を買いに行き、合計777円使ったとします。同じ操作を行うと「今日の支出合計」が計算されて表示されていることが分かります。 金額を入力する 「記録」ボタンを押す 注意点 SPA（S…

  2. Storybookを試してみた

    Storybookは、UIコンポーネントのカタログです。 Storybookの存在は以下の本を読んだ時に知りました。 TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 | 手島 拓也, 吉田 健人, 高林 佳稀 |本 | 通販 | Amazon Storybookのインストール WordPressでStorybookを使おうとしたところ、おそらく依存ファイルが足りないなどの理由で、上手くいきませんでした。 なので、Next.jsで使ってみることにしました。 公式サイトのドキュメントに従って、インストールを行いました。 まずは以下のコマンドをターミナルで打ち込みました（HTMLとありますが、ターミナルに打ち込んだコー…

  3. カレンダー入力のUI作成、vuejs-datepicker

    クラウドワークスで、お問い合わせフォームの日付入力をプルダウン形式からカレンダー入力形式に変更して欲しいというご相談を受けました。 学習ブログを書いていきます。 今回の要件 引越し予定日の年・月・日をカレンダーから選択できるようにする。 ライブラリを使うための準備 まずは、vue.jsとvuejs-datepickerを読み込みました。 https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js https://unpkg.com/vuejs-datepicker 最も基本的な形 See the Pen vue datepicker by Shibata Hiroki (@khiro-eng…