【時短】 TypeScriptでHello World / Webpack npm Node.js
余計な説明なし！すぐにブラウザにTypeScriptでHello World表示。
対象⇒簡単なプログラミングができる人
使用人口の多い有名なツールを使います。安心！
必要なもの
Node.js
Visual Studio Code
Live Server
上記が実行できる環境（PCなど）
※環境構築の一例です
Node.jsのインストール
使用許諾の同意、nextボタンを押していけば終了します。
できなかったら調べてください。
Visual Studio Codeのインストール
使用許諾の同意、何回かボタンを押せば終了です。
できなかったら(略
ソースコードとプロジェクトファイル
今回使用するファイルをgithubに公開しています。内容の説明なし、とにかく環境を作るのが目的です。
リポジトリのクローン、またはCode>Download ZIPからダウンロードしてください。
Visual Studio Code起動
Visual Studio Codeを起動、helloworldフォルダを開いてください。
こんなメッセージが表示されるはずです
信頼しないと実行できないのですが、なぜこれが必要か十分調べてから進んでください。宿題です。
怪しいツールやソースコードはできるだけ使わないようにしましょう。
今回のプロジェクトは、使用人口の多い有名なものだけを使用しています。間違いました、私の作成したソースコード以外は。
Live Serverインストール
Visual Studio Codeの拡張機能です。簡単にHTTPサーバーを立ち上げることができます。
ターミナル起動
Visual Studio Codeのターミナルを開く、これでコマンドライン入力が可能に。ツールの起動など、すべてここで行います。
プログラム用のツールダウンロード
> npm install自動的に必要なものがhelloworld/node_modulesにインストールされます。なんか色々表示されれば完了。
素性の確かなものだけ使いましょう。または自作で。
以下のツールをダウンロード＆インストール
"devDependencies": {
"css-loader": "^5.2.7",
"style-loader": "^2.0.0",
"ts-loader": "^8.4.0",
"typescript": "^4.7.2",
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2",
"webpack-merge": "^5.8.0"
}コンパイルなど
> npm run dev用意したスクリプトの実行です。devがスクリプト名、自分で作ります。TypeScriptをJavaScriptに変換、その他いろいろ実行。ソースコードが変更されると自動的にコンパイルしてくれます。
実行
dist/index.htmlを選択、右下のGo Liveをクリック！
既定のブラウザが起動、Hello World！と表示されます。
お疲れさまでした
環境が完成しました。index.tsファイルをいじって遊んでみてください。
詳しい説明や失敗したらどうとか説明したくなるのを我慢しながら書きました。必要最低限の事しか書いてません。うまくいかない、わからないことがあったらその時に調べてください。
ここまでお読みいただきありがとうございます
この記事が役に立ったという方は、サポートお願いします。今後の製作の励みになります。
ゲーム制作、アプリ製作で使えるようなプログラムを公開していく予定です。専門分野だった、3DCG、サウンド、計算系が多くなると思います。
この記事が役に立ったという方は、サポートお願いします。今後の製作の励みになります。