質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

2回答

5687閲覧

Typescriptのコンパイルはtscだけじゃだめなのでしょうか

kurosuke___

総合スコア217

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2018/03/09 15:24

編集2018/03/09 15:24

前提

npmでTypescript, ts-loaderをインストールしてあります。

私はjsファイルを作ってHTMLに<script src="./js/main.js">と直接書いていくスタイルでずっとやっていて、CSSに関してもSCSSを最近学び始めたばかりです。

よってnode.js, npmに関しても初心者であり、フロントエンド開発は古代のやり方で止まっています。

目的

静的型付け、class構文(メンバ変数初期化等)や外部ファイル呼び出しなどを行える環境(Typescript)でブラウザで動くjavascriptを作りたい。

疑問

プロジェクトディレクトリでnpm init --y、npmでTypescript, ts-loaderをインストールして、最終的に以下のようなpackage.jsonに。
(scriptやdevDependencies,dependenciesくらいしか理解しておりません)

json

1{ 2 "name": "project_dir", 3 "version": "1.0.0", 4 "description": "", 5 "main": "main.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1", 8 "tsbuild": "tsc src/main.ts --outDir dist/" 9 }, 10 "devDependencies": { 11 "ts-loader": "^4.0.1", 12 "typescript": "^2.7.2" 13 }, 14 "keywords": [], 15 "author": "", 16 "license": "ISC" 17}

そして、tsconfig.jsonはこのようにしました。

json

1{ 2 "compilerOptions": { 3 "target": "es5", 4 "module": "es2015", 5 "sourceMap": false 6 }, 7 "exclude": [ 8 "node_modules" 9 ] 10}

(target, moduleの違いがよくわかっていませんが、es5を指定しているのでブラウザで動くのでは?とおもうのですが)

この状態で、静的型付け、class構文や外部ファイル呼び出しなどを使用した.tsファイルは、tscでコンパイルしてもブラウザで動かないのでしょうか?

検索すると、tsifyやらwebpackやらと併用するものばかりで、そうでないとブラウザで動かないのでしょうか。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HayatoKamono

2018/03/09 15:51 編集

tscまたはnpm run tsbuildでコンパイルされたjsをhtmlのscriptでいつものように読み込んで試してみれば分かるのではないですか?ちなみにts-loaderはwebpackでtypescriptをコンパイルしたい時に使うものなので、webpackを使わない場合はインストール不要です。
kurosuke___

2018/03/09 16:16

外部モジュールの読み込み方法が勉強中でして(しかもネット上では情報が錯綜していて・・・)まだコードが書けないのですが、いずれは使いたいので、かけるようになったときのために環境の方の知識をお貸しいただきたいと思い投稿しました。 ts-loaderはwebpackで使用するのですね、ありがとうございます。
guest

回答2

0

ベストアンサー

基本的にブラウザで実行するときjsが外部のjsをインポート(import文やrequire())することはできません。なので、依存関係にある複数のjsファイルを1つにまとめる(バンドル)必要があります。これを行うのがbrowserfyやwebpackです。

ただ、外部のjsをインポートするようなjs(ES Module)を読み込む機能がブラウザでも実装されてきています(<script type="module">)。
JavaScript modules via script tag - Can I use
ですがまだ対応状況が微妙なのでこの機能をproductionで使わないほうがよさそうです。

投稿2018/03/09 15:56

karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kurosuke___

2018/03/09 16:20

回答ありがとうございます。 なるほど・・・開発中では外部参照をサポートして、本番環境ではすべて一つのファイルにすることで外部参照を実現しているんですね・・・ webpackやBrowserifyを試してみたいと思います。 ありがとうございました!
guest

0

ts-loaderはwebpackでtypescriptをコンパイルする時に使うもので、tsifyはbrowserifyというwebpackと似たような立ち位置のツールでtypescriptをコンパイルする時に使うプラグインです。

webpackもbrowserifyもいろいろ設定しないといけないので、手を出しづらいかもしれません。

最近は設定なしでみたいなコンセプトのparcelというのも頭角を現してきてるので、まずはそちらから慣らしていくと良いかもしません。

参考
https://qiita.com/tonkotsuboy_com/items/20ee57c6bb2762746fce

投稿2018/03/09 16:31

HayatoKamono

総合スコア2415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問