japanese

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は「参照」という違いがあることは理解できたけど、自分のような初心者がそれを見分けることはできないので、結局一つずつ覚えるしかないようです。

Laravelの仕組みについて勉強していたところ、「__construct」というものが出てきたので、copilotに聞いたことをメモしておきます。 Bladeテンプレートで次のようなコードによりセッションのmessageがMessageクラスのインスタンスに引数として渡されます。 このとき、セッションのmessageが、Messageクラスの中の「__construct」の引数として渡されることにより処理がうまく流れていくのですが、なぜ単にMessageクラスの引数であるだけのmessageが、ちゃんとその中でも「__construct」の引数として扱われるのか、言い換えると、Messageクラスの中に「__construct」以外のfunctionが存在していても、その引数はほかのfunctionではなく「__construct」に渡すものであるとどういう風に判定しているのだろうか。この点が疑問でした。 調べたところ、「__construct」というのはPHPに用意されている特別なメソッドであり、クラスのインスタンスが生成されるときに最初に実行される性質を持つようです。そのため、クラスの中に「__construct」が存在すれば、クラスに対して渡された引数は、インスタンス化時に必ず「__construct」の引数として処理されるとのことです。ちなみにこういった「__」で始まるものはほかにもあって、PHP標準の機能として用意されているマジックメソッドというそうです。 代表的なマジックメソッド これまで素のPHPの基本を学び、Dockerの環境構築もようやく完了し、ついに本格的に勉強を進められるようになったけど、勉強すればするほど新しい疑問が出てきて、習得までには結構時間がかかりそうです。

現在、PHPのLaravelを学習中です。MVCアーキテクチャの各役割がどこのディレクトリに格納されているかいつも混乱するため、Copilotに聞いたので、ここにメモしておきます。 ビュー→ルート→コントローラという処理の流れ。①ビューの内容がブラウザに表示されるため、ビューの中にフォームタグが書いてあるが、フォームの中に、action=”{{route(‘post.store’)}}”などといったルートヘルパーを書いておく。②ルートの中で、どのルートヘルパーを記述したらどこのコントローラーを使用するかが設定されている。③フォームの送信ボタンを押したら、ルートヘルパーに対応したコントローラの中に書かれた処理が行われる。 ミドルウェアっていうのは何だろう。まだ勉強中なのでCopilotに聞いたけどよくわからなかった。とりあえず、12月末までには簡単なwebアプリを作れるようにLaravelを習得します。

時間間隔を10秒単位で設定できるインターバルタイマーを作成しました。繰り返しのチェックを外すと、単発で終了する通常のタイマーとしても使えます。自宅のWindowsPCとAndroidスマホでは音が鳴りましたが、なぜかiPadでは音が鳴りませんでした。 https://practice.asabori.com/p003 音量調節機能はできなくて断念しました。あと、作成している途中で一時停止ボタンも付けようかと思いましたが、スタートボタンを押したときに最初だけでなく再開もできるようにいろいろ設計し直すのが面倒だし、個人的にインターバルタイマー使うときに一時停止はあまり使用しないので、一時停止ボタンは作成しませんでした。 次はPHPとデータベースの練習をしたいので、毎日食べたものを記録できるメモ帳を作ろうと思います。

毎分00秒のときに音が鳴るタイマーを作成しました。タイマーというより時報になってしまいました。動作も不安定でなぜか鳴らないときもあります。 https://practice.asabori.com/p002 自分の作業用にインターバルタイマーとして作ってみたけどイマイチなので、次は、本物のタイマーみたいに、時間を設定できたり、残り時間が表示されるものを作ってみます。あと音量調整もできるようにしたいです。

出産予定日から、産休・育休期間計算ツールを作成しました。 http://www.practice.asabori.com/p001/childcareLeave/プログラミング勉強中のため、まだシンプルな機能しかありません。実際は出産予定日どおりに産まれるわけではないので、実際の出産日を含めた計算もできるように進化させていきたいです。さらに、社会保険料の免除や育休手当の計算も加えて、職場復帰した場合とのお金の比較ができるようなものにしていけたらいいなと思っています。