Edit of okoze/03.Episode/02.Development Environment

* 開発環境 [#j5f06faf]

javascriptまたはtypescriptを使ったwebアプリとして開発します。
できた部分はlive demoとしてgithub pagesに公開します。
対応するソースコードはgithubにあるのでtagを使って見ることができます。

皆さんが使用するmachine, browser, ideには特に依存しないと思いますが、
私が使用する開発環境を参考のために書いておきます。

** アプリの形態 [#o500aa08]

大まかな選択肢は
- Webアプリ
- スタンドアロン
の二つだと思います。
Webアプリの利点は
- スタンドアロンに対応も可能
- マルチプラットフォーム対応
- スマホ、タブレットに対応も可能
- GitHub pages でlive demoが可能(配布が楽)
難点は
- 複数のプロダクトを組み合わせる必要がある(browser, js, server, ...)

メリットが大きいのでWebアプリとして開発しましょう

** 開発マシン [#efaa949d]

手持ちのマシンを使います。
mac mini m4

** 開発言語 [#x271bd49]

オーソドックスなjavascriptから始めます。
ソフトが大規模化する前にtypescriptに切り替える予定です

** IDE [#ca733507]

メジャーでtypescriptにも強いVSCodeを使います
VSCode自体の使い方の解説はあまりしない予定です
web serverはVSCode付属？のLive Serverを使用します

** Browser [#o84e53d6]

デバッグ環境が充実したchromium を使います

** Version control [#fb566533]

Git / GitHub を使います

** Graphics [#uf9f87e1]

Canvas API ?
Webアプリのgraphicsはよくわかりません。
とりあえずはCanvasの低レベルの描画を使用する予定です

** coding [#v1ed3e9c]

AIを活用します

** 補足 [#u7efb3df]

私の専門はCAD、図形処理です。Webアプリはほとんど作成したことがありません。
Webアプリの知識はほとんどありません。そこに関しては素人じみた話が出てくるかもしれませんがご承知おきください。

** まとめ [#pf594950]

| Purpose | Tool |
| --- | --- |
| IDE | Visual Studio Code |
| Browser | Chromium |
| Development server | Live Server |
| Programming language | JavaScript, Typescript |
| Graphics | Canvas API |
| Version control | Git / GitHub |

*Development Environment [#c6624c05]

This project is a web application, so I decided to start with a very simple development environment.

**Editor [#ra6a046a]

I use '''Visual Studio Code''' as the main development environment.

I chose it because it is widely used for web development and provides a good environment for working with HTML, JavaScript, and TypeScript.

**Browser [#r0e62a96]

I use a modern web browser for running and testing the application.

The browser's Developer Tools are used for checking logs, errors, and other debugging information.

**Development Server [#b4a8543b]

For the initial development, I use '''Live Server''' in Visual Studio Code.

It provides a simple local web server and automatically reloads the page when files are changed.

I do not need a sophisticated development server at this stage.

**Initial Technology [#d9d0033f]

The initial prototype uses:

- HTML
- JavaScript
- Canvas API

I intentionally start with the browser's native Canvas API rather than choosing a drawing library at the beginning.

The reason is simple: I want to build a small working prototype first and understand what the application actually needs before selecting a drawing library.

**Development Tools [#be7350ba]

The main tools are therefore:

| Purpose | Tool |
| --- | --- |
| Editor | Visual Studio Code |
| Browser | Modern web browser |
| Development server | Live Server |
| Programming language | JavaScript |
| Graphics | Canvas API |
| Version control | Git / GitHub |

This is deliberately a small environment.

As the project grows, I may introduce additional tools or technologies when they become necessary.

Do not change timestamp