1. 神経質やせ男チャンネル
  2. Bootstrap導入でUIが激変した話
Bootstrap導入でUIが激変した話
2026-04-14 02:26

Bootstrap導入でUIが激変した話

Flask学習の終盤で、Web画面の見た目を整えるためにBootstrapを導入。HTMLファイル10以上を書き換える泥臭い作業になったものの、完成後のUIは一気にモダンに。エラー修正のスピードも上がり、学習の成果を実感した一日の開発記録です。

#Flask
#Bootstrap
#Webアプリ開発
#プログラミング学習
#個人開発
---
stand.fmでは、この放送にいいね・コメント・レター送信ができます。
https://stand.fm/channels/608520b1eeca46c0ab7489cd

感想

まだ感想はありません。最初の1件を書きましょう!

00:06
神経質やせ男です。
今日は開発日記です。
現在学習しているのはウェブアプリ開発のフレームワークフラスク、
読んでいるフラスク本格入門、優しくわかるウェブアプリ開発も、
いよいよ終盤に差し掛かってきました。
今日は見た目の改善を行いました。
使ったのはウェブデザインのフレームワークBootstrap。
これを使うとボタンやレイアウト、ナビゲーションなどが一気にモダンなウェブ画面になります。
ただしここで一つ問題がありました。
Bootstrapを使うということは、今まで作ったHTMLを全部修正するということを意味します。
今回作っているアプリはすでに画面数が増えていて、
HTMLファイルは10個以上、つまり全部書き換えです。
地味ですが結構な作業量でした。
一つ一つの画面をBootstrapのクラスに合わせてレイアウトを修正していく。
ボタンを変えたり、フォームの見た目を変えたり、ナビゲーションを整えたり。
まさに泥臭い全ファイル修正。
ただ全部直して完成した画面を見ると、これがかなり変わりました。
修正前はいかにも試作品という感じだったんですが、
修正後はちゃんとしたウェブアプリという見た目になりました。
やっぱり見た目って大事、そう感じましたね。
そしてもう一つ今回感じたことがあります。
それはエラーの修正スピード。
最初の頃は小さなエラーでもかなり時間がかかっていました。
でも今回はHTML10ファイル以上を修正して、
エラー対応も含めて約1時間15分。
少しずつですがデバッグのスピードが上がってきている実感があります。
ちなみにこの本の構成ではここまででアジャイル開発の章は終了。
残っているのはマイクロサービスという最後の章です。
振り返ってみるとここまでの学習時間のかなりの割合はエラー対応。
そしてその原因の多くはスペルミス。
本当に地味なミスですが、
自分でコードを書くとこういう問題がはっきり見えてきます。
でもその分確実に経験値にはなる。
この体験を次の開発にしっかり生かしていきたいですね。
次回は仮想ビジネスが暴く自治体の闇についてお話しする予定です。
ご清聴ありがとうございました。
02:26

コメント

スクロール