https://twiki.yo-net.jp/index.php?action=history&feed=atom&title=JavaScript_Debug%E7%92%B0%E5%A2%83%E6%95%B4%E5%82%99 2026-04-05T18:37:40Z このウィキのこのページに関する変更履歴 MediaWiki 1.38.2 https://twiki.yo-net.jp/index.php?title=JavaScript_Debug%E7%92%B0%E5%A2%83%E6%95%B4%E5%82%99&diff=1798&oldid=prev 2022-11-14T12:41:22Z

<p>ページの白紙化</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="ja"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← 古い版</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">2022年11月14日 (月) 21:41時点における版</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">1行目:</td> <td colspan="2" class="diff-lineno">1行目:</td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">== '''概要''' ==</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">　ウェブブラウザで処理をするJavaScriptですが、少し複雑なものになってくるとデバッグ処理ができないとプログラム作成が困難になってきます。どこに何が入っているのか。あるいは誰かが作ったモノを参考に自分なりのプログラムに変えていくときに、同じようなことをするにはどうしたらいいかを勉強するには、統合開発環境と同じような環境が必要になります。JavaScriptもそういうものを構築できます。</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">　JavaScriptの開発環境はこうやって構築するというのは簡単には明示されていません。C、C++、Python、VB、Android含めたJava、VBA、MacOS向けとしてObjectiveC++、iOS向けとしてSwift、Xamarinといった開発環境や言語を使うときは、あるいみ専用の開発環境みたいなものがあるので、最適解を見つけやすいと思います。</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">　JavaScriptのようなWeb開発Script言語は、デバッグするための環境を構築するのはややこしいです。WebServerの反応を介さないと駄目だからだと思います。このような方式として有名なDebugツールは一昔前は*.aspのようなActiviServerPagesというVBスクリプトが有名だったかなと思います。VisualStudioで、ASP開発と選ぶだけでWebServerが立ち上がったりして複雑でした。その後、JavaでWeb開発するEclipseなんかがあったりPerlではApacheと連携したKOMODOなんかがありましたが、最近はVisualStudioCodeがこういったWebScript言語のデバッグを行う拡張機能が出てきたなという感じがあります。PHPやPerlもいけそうです。VisualStduioではC/C++/Java/VB/Pythonのアプリ開発、VisualStudioCodeではJavaScript/PHP/PerlのようなWebスクリプトといった役割分担ができそうです。VScodeは、もう少しできると思います。便利だ。</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">　Windows向けの開発環境で考えた場合、JavaScriptの開発をするにあたっては、オーソドックスでVisualStudioCodeが良いかなと思います。ユーザ数も多いイメージ。</del></div></td><td colspan="2" class="diff-side-added"></td></tr> </table>

Yo-net https://twiki.yo-net.jp/index.php?title=JavaScript_Debug%E7%92%B0%E5%A2%83%E6%95%B4%E5%82%99&diff=1791&oldid=prev 2022-11-14T12:34:46Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="ja"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← 古い版</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">2022年11月14日 (月) 21:34時点における版</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l4">4行目:</td> <td colspan="2" class="diff-lineno">4行目:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>　JavaScriptの開発環境はこうやって構築するというのは簡単には明示されていません。C、C++、Python、VB、Android含めたJava、VBA、MacOS向けとしてObjectiveC++、iOS向けとしてSwift、Xamarinといった開発環境や言語を使うときは、あるいみ専用の開発環境みたいなものがあるので、最適解を見つけやすいと思います。</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>　JavaScriptの開発環境はこうやって構築するというのは簡単には明示されていません。C、C++、Python、VB、Android含めたJava、VBA、MacOS向けとしてObjectiveC++、iOS向けとしてSwift、Xamarinといった開発環境や言語を使うときは、あるいみ専用の開発環境みたいなものがあるので、最適解を見つけやすいと思います。</div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">　JavaScriptのようなWeb開発Script言語は、デバッグするための環境を構築するのはややこしいです。WebServerの反応を介さないと駄目だからだと思います。このような方式として有名なDebugツールは一昔前は*.aspのようなActiviServerPagesというVBスクリプトが有名だったかなと思います。VisualStudioで、ASP開発と選ぶだけでWebServerが立ち上がったりして複雑でした。その後、JavaでWeb開発するEclipseなんかがあったりPerlではApacheと連携したKOMODOなんかがありましたが、最近はVisualStudioCodeがこういったWebScript言語のデバッグを行う拡張機能が出てきたなという感じがあります。PHPやPerlもいけそうです。VisualStduioではC/C++/Java/VB/Pythonのアプリ開発、VisualStudioCodeではJavaScript/PHP/PerlのようなWebスクリプトといった役割分担ができそうです。VScodeは、もう少しできると思います。便利だ。</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">　Windows向けの開発環境で考えた場合、JavaScriptの開発をするにあたっては、オーソドックスでVisualStudioCodeが良いかなと思います。ユーザ数も多いイメージ。</ins></div></td></tr> </table>

Yo-net https://twiki.yo-net.jp/index.php?title=JavaScript_Debug%E7%92%B0%E5%A2%83%E6%95%B4%E5%82%99&diff=1790&oldid=prev 2022-11-14T10:10:03Z

<p>ページの作成:「== &#039;&#039;&#039;概要&#039;&#039;&#039; == 　ウェブブラウザで処理をするJavaScriptですが、少し複雑なものになってくるとデバッグ処理ができないとプログラム作成が困難になってきます。どこに何が入っているのか。あるいは誰かが作ったモノを参考に自分なりのプログラムに変えていくときに、同じようなことをするにはどうしたらいいかを勉強するには、統合開発環境と同…」</p> <p><b>新規ページ</b></p><div>== '''概要''' ==<br /> 　ウェブブラウザで処理をするJavaScriptですが、少し複雑なものになってくるとデバッグ処理ができないとプログラム作成が困難になってきます。どこに何が入っているのか。あるいは誰かが作ったモノを参考に自分なりのプログラムに変えていくときに、同じようなことをするにはどうしたらいいかを勉強するには、統合開発環境と同じような環境が必要になります。JavaScriptもそういうものを構築できます。<br /> <br /> <br /> 　JavaScriptの開発環境はこうやって構築するというのは簡単には明示されていません。C、C++、Python、VB、Android含めたJava、VBA、MacOS向けとしてObjectiveC++、iOS向けとしてSwift、Xamarinといった開発環境や言語を使うときは、あるいみ専用の開発環境みたいなものがあるので、最適解を見つけやすいと思います。</div>

Yo-net