potatomatoes167

タスク管理アプリ「引っ越しタスクチェッカー」 こんにちは、Move Checkerというタスク管理アプリを作りました。 すごくシンプルなアプリなんですが、実は裏側にはかなり深い試行錯誤が詰まっています。 このページでは、その開発の過程やこだわったポイント、地味に苦労したところ、そして楽しかった瞬間まで、まるっと紹介したいと思います。アプリは下のバナーからアクセスできます。初めにログイン画面が表示されますが、新規ユーザー登録からユーザー名とパスワードを登録すると使用できるようになります。 どんなアプリ？ 引っ越しタスクチェッカー は、ユーザーがログインして、タスクを追加・編集・削除できるようなPHPアプリです。機能はこんな感じです： ぱっと見ると「よくあるやつ」なんですが、設計の中身がなかなか濃いです。 セキュリティを第一に考えた構成 「小規模でも、セキュリティは本番レベルにしたい」そんな想いで、ファイル構成とアクセス制御にはかなりこだわりました。 実際、完成までに10回くらい「なんでCSSが効かない？」「actionがズレる！？」と苦戦しました😅 苦戦ポイントと乗り越えたところ 正直、今回一番難しかったのは「プログラミングそのもの」よりも「パスの管理」でした。 そのたびに、目の前のエラーをじっくり追いかけて、直して、再テストして…「やっと動いた！」という感動は、手間をかけたぶんだけ大きかったです。 最終的にこうなった！という成果 URLに /public が見えているのはちょっと気になるけれど、それを隠すために構成を崩すより「見えたままでも、安全に動く形」で完成としました。この辺は“等身大の選択”として、とても納得感のある落としどころだったと思います。 この開発で学んだこと 今後に向けて 次のステップは Laravel への移行。Laravelではルーティングやセキュリティがもっと洗練されていて、今回悩んだ部分を自動で解決してくれるところもあります。 でも、今回のPHPアプリ開発で学んだ「自分で構成とルールを考えて、手を動かして整理した力」は、Laravelに進んでも絶対に活きると感じています。 最後に ちょっとしたツールの裏にも、いろんな試行錯誤が詰まっています。この引っ越しタスクチェッカーは「自分の力でアプリを完成させる」という経験として、すごく大きな一歩になりました。 まだまだ勉強中ですが、「小さくても丁寧に作る」って、開発者としてすごくいい練習になるなと思ってます。今後も、こうやって一歩一歩、技術と設計の力を育てていけたらいいなと思ってます🌿

PHPでデータベースから情報を取り出すときによく使われる fetch() や fetchAll()。最初は「何が違うの？」「All ってつけないとどうなるの？」と疑問だったけれど、今日じっくり向き合って、ようやく自分の言葉で腑に落ちる感覚が得られたので記録しておきます。 ✅ fetchAll()：まとめて全部テーブルに出す ✅ fetch()：1件ずつ順番に受け取っていく 🎯 fetch という言葉に込められた意味 英語の fetch には「どこかへ行って、何かを取ってきて戻る」というニュアンスがある。 この言葉の感性って、なかなか日本語だけでは浮かびにくい。でも、その動作のイメージを持つことで「fetch の正体」がぐっと鮮明になる。 ✨ 今日の理解をひと言で fetch() は、実行済みのSQLステートメントに対して「結果をひとつずつ読み出す操作」。それは「データを配列にして持ってくる」というより、「次の資料を一枚ずつ請求する」感覚。そして $stmt は「SQL文の実行結果や状態を保持する概念」だと理解した。 🔚 おわりに 最初はなんとなく使ってた fetch() や fetchAll()。でも実は、「データの取り方の違い」がちゃんとあることがわかった。 fetch() は1件ずつもらうやり方。fetchAll() は全部まとめて受け取るやり方。 それがわかったので、これからは「どっち使うべきか？」考えられるようになった。 今後も「この関数ってどういうイメージなんだろう？」ってところから掘っていきたい。

VSCodeでGithubCopilotを利用していて、Githubとの接続が途切れて突然Chat機能が使用不能になる不具合に長らく苦しめられてきました。この度、Qiitaに解決方法を載せてくださっている方を見つけまして、そのおかげでついに解決しました。ありがたいことです。 参考: VSCode で WSL2 プロジェクトを開くと Copilot 拡張機能が応答しない #copilot – Qiita 初心者目線でかみ砕いたメモを残しておきます。 作業環境 ・windows11・WSLを使用(Ubuntu)・VSCodeはwindows版をwindows上にインストール・VSCode上でWSLに接続し、WSL内のプロジェクトフォルダにて作業を行っている・VSCode上でCopilotChatの機能を使用している 不具合の症状 CopilotChatが突然使用不能になる(チャットのやり取り表示が消え、代わりにサインインを求められる表示が出るが、サインインのボタンを押しても何も動かない) 原因(おそらく) WSL上ではCopilot拡張機能が正しく動作しないことがある 対策 Copilot拡張機能に関しては、WSL:UBUNTUではなく、LOCALにインストールしたものを使用する。 具体的な手順 /home/<ユーザー名>/.vscode-server/data/Machine/settings.json に次のコードを追加しました。 これにより、拡張機能をwslではなくローカルから呼び出すことができました。適用後は次の画像のとおり、WSL:UBUNTUの方の表示がグレーアウトしました。 setting.jsonについて setting.jsonという名前のファイルは3種類存在する可能性があるので、混同しないようにしましょう。 Windows側（ローカル） VS CodeをWindowsで起動したときのユーザー設定C:\Users\<ユーザー名>\AppData\Roaming\Code\User\settings.json WSL側（Linuxユーザー設定） WSL内でVS Codeを使うときのユーザー設定（WSL内でVS Codeを直接起動した場合）/home/<ユーザー名>/.config/Code/User/settings.json VS Code Server（リモート拡張） VS Codeの「リモート – WSL」拡張を使っている場合、WSL内にVS Code Serverが立ち上がり、その専用の設定ファイル/home/<ユーザー名>/.vscode-server/data/Machine/settings.json 今回コードを追加するのは、この /home/<ユーザー名>/.vscode-server/data/Machine/settings.json です。 直ってとても快適になりました。よかったよかった。

最近のAIコーディングの進化がすごいですね。時代の変化に対して、現状の自分の学習方法が合っているのか疑問に感じてしまったので、AIに相談してみたところ、自分のやってきたことを全部肯定してくれて嬉しかったので、記録として残しておきます。 AIとの会話 私:現在プログラミングの学習中で、Vue.jsやTypeScriptなどをだんだん使えるようになってきて、最近オブジェクト指向プログラミング（クラスの使用）もようやくできるようになってきました。ところが、先ほどClaude Codeの実演のYouTube動画を見て、自動で生成できるコンテンツがあまりにもレベルが高くて、面食らってしまいました。今の自分の努力は、有効な努力といえるのでしょうか？もちろん、自分がコードを書けないとAIの実力を発揮できないということはあるのでしょうが、こんなにも長期間、言語の習得やフレームワークの理解などといった基礎学習に時間をかけることは正しいことなのでしょうか？Copilot:〇〇さん、とても真剣に学習に取り組んでいるのが伝わります！Vue.jsやTypeScriptを習得し、オブジェクト指向プログラミングまで理解できるようになったのは、大きな成果です。プログラミングは単なる「コードを書く」作業ではなく、「思考力」を養うものでもあります。その基礎がしっかりしていれば、新しい技術が登場しても応用できる力がついています。AIが驚くほどのスピードでコードを生成する様子を見て、不安に思う気持ちはよくわかります。でも、AIを最大限活用するためには、「何をどう作るべきか」を理解することが不可欠です。つまり、AIは強力なツールではありますが、土台となる知識や思考力がないと、AIに適切な指示を与えることができません。プログラミングの基礎をしっかりと身につけることは、むしろAI時代において最も重要だといえます。今の努力は決して無駄ではなく、むしろこれからのキャリアや開発力を高めるための大切なステップです。自信を持って学習を続けてくださいね！私:今は、VS CodeでGitHub Copilotに補助してもらいながら、小さなWebアプリを作って、ブログで公開するということを行っています。Copilot:素晴らしいですね！実際に手を動かして小さなWebアプリを作り、それを公開するというのは、学んだことを実践に落とし込む最高の方法です。しかもGitHub Copilotを活用しているとのことなので、AIの力をうまく取り入れながら効率的に開発を進めているのが伝わってきます。ブログで公開することで、自分の成長の記録にもなりますし、他の開発者との交流のきっかけにもなりそうですね。どんなアプリを作っているのか、とても興味があります！私:まずは自分がコードを書き、AIには補助をしてもらうといった現状のやり方で、フロントエンドだけでなく、バックエンドやデータベースの開発、外部APIの活用、Webスクレイピング、機械学習など様々な分野で、自分の技術の幅を広げていきたいと考えています。AI主導で書いてもらって自分がチェックするといったスタイルは、自力で作れるようになった後にした方がいいかな？また1年くらいしたら、今有料のサービスも無料で使えるようになったりするかもしれないし。Copilot:その考え方、とても理にかなっています！まずは自分の手でコードを書き、AIを補助として活用するスタイルは、技術の土台をしっかり固める上で非常に重要です。AI主導でコードを書かせてチェックするスタイルは、確かに自力で作れるようになってからのほうが有効かもしれません。今の学習スタイルなら、最終的に「AIに頼りすぎない開発者」としての力も培えますし、将来的にAIと協力してより効率的にコードを書くことができるようになるでしょう。自信を持って続けてくださいね！ 感想 今は焦らずに基礎学習を続けようと思います。AIはこれからどんどん使いやすくなると思うので、そんなに急いで最新技術に課金しなくてもいいかなと思いました。

神経衰弱ゲーム カードの色がグレーのみの神経衰弱ゲームを作成しました。 難易度によって、カードの枚数が変更できます。ランキング機能も付けられたらいいなと思ったので、バックエンドの学習も楽しみです。バックエンドは最初にphpを習得する予定です。 技術的な感想 typescriptを初めて触ってみたら、今までjavascriptでは曖昧に記述していたデータ型について、vscode上でたくさん警告が出てきて、その一つ一つを解決する過程が大変勉強になりました。 今回はtailwindcss(flowbite)とtyprscriptに初めて挑戦しました。これまでは素のjavascriptなどを使用していたので、アップロードにあたってのビルドやコンパイルといった作業は今回が初めてでしたが、index.html内のコードについて、cssやscriptの参照先を書き換えるなど、思ったよりも手作業で萎えました。もっといい感じに自動でうまいこと組み立ててくれるのかと思ってました。

javascriptでオセロゲームを作成しました。コンピュータとの対戦機能はありませんが、それ以外は問題なく動作するものが作れました。 https://practice.asabori.com/p004

今更ですが、疑問に思ったことを調べたので、メモしておきます。 htmlのコーディングでは、URLを指定することがあります。 例①　img src=”image.jpg”②　script src=”script.js”③　a href=”https://example.com”④　link rel=”stylesheet” href=”style.css” ①画像と②JavaScriptは「src=」と記述し、③リンクと④CSSは「href=」と記述します。 この違いはなぜなのか。Copilotに聞いた結果、次のような回答を得ました。 概要 詳しい違い ロード方法： src: リソースがドキュメントに直接ロードされる。リソースはページの一部として即座に表示または実行されます。例えば、画像（<img>）やスクリプト（<script>）。 href: リソースがドキュメントに間接的に適用される。リソースはページの一部として表示されるわけではなく、参照されることで適用されます。例えば、スタイルシート（<link rel=”stylesheet”>）。 使い方： src: コンテンツとして使用されるリソース。画像、ビデオ、オーディオ、スクリプトなど。 href: 文書の一部としてのリンク。スタイルシート、ウェブページへのリンク、ファビコン（ブラウザのタブやブックマークに表示される小さなアイコン）など。 映画と脚本の例え 料理とレシピの例え 本と目次の例え 交通手段と地図の例え srcは「埋め込み」、hrefは「参照」という違いがあることは理解できたけど、自分のような初心者がそれを見分けることはできないので、結局一つずつ覚えるしかないようです。