JavaScript

今日はTypeScriptのオブジェクトの書き方について説明します。 前回までの記事に沿って説明をしているので是非、今までの記事を確認お願いします。 JavaScriptのオブジェクト JavaScriptのオブジェクトはダイナミックです。つまり、下記のようなコードが実行でき、コードが実行される中で形を変え、キーを増やしたりすることができます。 TypeScriptのオブジェクト ではTypeScriptのオブジェクトを作成してみましょう。 このようにオブジェクト内にnameのキー、バリューがない場合はエラーがでるのでname?のようにnameがあったらストリングと指示してあげます。 もしくは下記の様にデフォルトのバリューを与えてもOKです。 read onlyの値 オブジェクト内のidなどは変更することはありませんね。そのような場合でTypeScriptでreadonlyに設定することができます。 このようにreadonlyの値を変更しようとするとエラーが表示されるようになります。 オブジェクトに関数を入れる場合 では次にオブジェクトに関数の値を入れてみます。 例のようにpromoptedの値に関数が入ることを宣言しています。ここではdateのキーに対してJavaScriptのDateオブジェクトが入ることを指示しています。さらにreturnで返す値がないのでvoidとしています。実際のid:1のオブジェクトでは単純にコンソールにDateオブジェクトを表示させる関数を格納していることが分かりますね。 このままだと見づらいので次回以降にもっと洗練された書き方を紹介します。 お疲れ様でした。

JavaScriptを使うにあたって関数は必要不可欠です。今日はTypeScriptの関数について紹介します。 特に関数の引数のデフォルト値の設定の仕方、使われていないローカル変数の検知、returnで必ずデータが返ってきているか確認できるフラグは今後のコーディングに役に立つはずです。 今までの記事を確認してから今日のレッスンを理解することをお勧めします。 function:関数 ではテキストエディタを開いて.tsファイルに下記の様に関数を作成してみましょう。 ここで関数をカーソルでホバーすると上記のコメントのように:voidという表示が出てきました。voidはこの関数が値を返さないことを意味しています。 では下記の様にreturnを使って値を返してみます。 そうするとnumberのデータタイプの値が返ってくることが分かりますね。 さらに関数()：numberとreturnの値のデータタイプを指定することでデータタイプを制限することができます。 引数が使われていない場合のエラー表示 では、tsconfig.jsonファイルを見て、下記の行のコメントアウトを外してください。 このフラグを立てることで、関数の引数が使われていない場合にエラーを表示させることができます。 return値を必ず返したい場合 次に、if構文なのでnumberデータが返ってくる時と返ってこないときにエラーを表示させたい場合にはどうすればよいでしょうか？ 下記の例を見てください。 この場合だと、priceが100よりも小さい場合は0.1を返しますがそれ以外の場合はundefinedを返します。 このようなエラーを防ぐには、tsconfig.jsonのnoImplicitReturnsをtrueにしてあげます。 これでエラーが表示されるようになりました。 使われていないローカル変数を検知する 次に関数ないやブロック内で使われていない変数があった場合にエラーを表示させたい場合です。 この場合、tsconfig.jsonのnoUnusedLocalsをtrueに設定します。 これを使用することで、使われていない変数を検知して、無駄な変数の削減をすることができます。 このようにエラーが出るようになりました。 因数がオプショナルの場合 では下記の関数を見てみましょう。 このようにtotalPrice関数を実行する際に2つの引数（argument）が必要になりますが、足りない場合でも、多い場合でもエラーが出ます。 しかし、ご存じの通り、JavaScriptではこれはあり得ることで、引数がオプショナルの場合はこのように使用することも考えられます。 その場合は下記の様に引数に?を追加して、あった場合は使うという指示をします。 さらに(discount||0)のようにdiscountとorオペレーターで記載しておき、もしdiscountがなかったら0を使うように指示します。 さらに！より良い書き方として、このdiscountにデフォルト値を設定することができます。 このように引数に=でデフォルト値を割り当てます。 では今日はTypeScriptの関数の書き方について紹介しました。 お疲れ様です。

今日はTypeScriptのビルドインのデータタイプについて説明します。前回までの記事を理解していることが条件になりますのでご確認お願いします。 TypeScriptのビルドインタイプ TypeScriptにはJavaScriptのデータタイプに加えられたものがあります。 JavaScript TypeScript numberstringbooleannullundefinedobject 左に加えて…anyunknownneverenumtuple ではテキストエディタを開いてコードを書いていきましょう！ 数字を見やすくする TypeScriptでは、数字のk（キロ：カンマの部分）はアンダースコアで記載することができます。 下記の例のように123_000_000は123,000,000と同じになります。もちろんこれはオプショナルなので使っても使わなくてもOKです。 データタイプを宣言する 下記のようにデータタイプを宣言することができます。 ここで、初期の変数に値がある場合は変数のデータタイプをデフォルト値で固定できるのでデータタイプを外すこともできます。 ここでVSCodeでカーソルを変数の値にホバーするとデータタイプが表示されることが確認できます。 しかしlet myName;のようにデフォルト値を設定しないとTypeScriptが変数のデータタイプを判定することができません。 データタイプ：any では.tsファイルに下記のような関数を作成してみます。 そうすると、因数のdocumentがハイライトされエラーが出ます。 エラーの内容はParameter ‘document’ implicitly has an ‘any’ typeで、documentにanyタイプのパラメーターが使用されています、です。 では、下記のようにanyのデータタイプを記載します。 これでエラーが消えましたね。これは、データがどのタイプ(any)でも受け付けますと指示しています。これで開発する際にデータタイプを確認させるような仕組みになっているわけですね。 もし、このエラーを非表示にしたい場合はtsconfig.jsonファイルから設定を変更することができます。 このようにnoImplicitAnyをfalseにすることでエラーがなくなりました。実際にはTypeScriptはデータタイプのチェックのために使用するのでこの変更はできるだけしないようにしましょう。 配列：Array JavaScriptの配列（Array）ではどのデータを使用することができます。 しかし、このようなストリングと数字の混ざったデータを計算させようとすると１＋１＝１１のようになってしまい問題になりますね。 では、下記の様に数字のみの配列であることを宣言します。 もしくは、デフォルト値が数字だけの場合はnumber[]を外してもTypeScript側でデータタイプがnumber[]であることを認識してもらえます。 空の配列で数字のデータを受け入れる場合は下記の様にデータタイプを宣言しておくようにします。 VSCodeの推測機能 さらにTypeScriptを使う事でできるおまけの機能を紹介します。 TypeScriptではデータタイプを指定するのでVSCodeが次に来るメソッド等を予測して表示してくれます。 JavaScriptではできないことなので素晴らしいですね。 Tuple Pythonを使ったことがある人は見たことがあるかもしれません。Tuple（タプル）はデータタイプが固定された配列のことです。よって配列の長さも変更できません。 このように上記のTupleに3つ目のデータを追加しようとしたりデータタイプを変更したりしようとするとエラーになります。 それ以外の変更（値の変更）は可能です。 また、TypeScriptの強みとしてこのように数字のデータに対してのメソッドと次のスクリーンショットのストリングに対するメソッドがそれぞれ表示されるのでとても使いやすくなります。 列挙型(Enums) 列挙型は、関連する値の集合を編成する方法です。これを使用することで関連する変数をセットとして一つのenum内にまとめることができます。 下記のsmallとSize.Smallは同じものになります。ちなみにenumで宣言する変数名は大文字で始まり、中の変数も大文字で始めることが慣習とされています。 上記のコードは下記のコマンドで実行できます。 このようにsmallとSize.Smallは同じ値になることがわかりますね。 ここでコンパイルされた.jsファイルを見ると中身がすごいことになっていることに気が付きます。 dist/index.js この変数を詳しく見てみましょう。 そうすと、データタイプがオブジェクトで返ってきました。これは変数 … Read more

TypeScriptはMiroSoft社が開発したオープンソースのプログラミング言語になります。Javascriptにデータタイプの制限を加え、開発時に起こりうるバグを防ぐために作られました。 TypeScriptを始める前に知っておくべきこと TypeScriptはJavaScriptにコンパイルできる言語ですので基本のJavaScriptが理解できていないとその良さも生かせません。 まずTypeScriptを学ぶ前に下記のJavaScriptの基本だけは知っておくようにしましょう。 TypeScriptってなに？ JavaScriptを使い始めると色々な部分で変だな、ふにゃふにゃしているなと思う事がありませんか？特に変数にデータタイプを指定する必要がないので下記のようなコードが実行できてしまいます。 これはJavaScriptはDynamically Typed Language（動的型付け言語）であるからです。 ブラウザがJavaScriptコードを実行する際に勝手にデータタイプを変更してしまうので、できるだけ正解に近いものを返してくれるようになります。 これは使い勝手は良いですが、バグが発生する原因になりがちです。 これらの問題を解決するために作られたのがTypeScriptです。TypeScriptではデータタイプを指定する必要があるので静的型付け言語（static typing）といえます。 静的型付け言語 動的型付け 言語 TypeScriptC/C++C#JavaGoScalaSwift JavaScriptPythonRubyPHP メリット コンパイル時にエラーが出てくれるエラーが事前にわかるのでコンパイル時にデバッグができます。例：・整数型変数なのに文字列を代入しようとしてる・型の違うデータで関数を呼ぼうとしている 記述量が大幅に減るデータ型の記載が不要になるので、書くコード量が減る。 比較的簡単にプログラムが書けるデータタイプを気にしなくてよい。 TypeScriptはJavaScriptのすべての機能を持つ以上に開発時に変更点のフィードバックが分かるのでデベロッパーの強い味方といえます。 なのでVSCodeなどのテキストエディタで.tsのタイプスクリプトファイルの変数のデータタイプを変更しようとすると下記のようにエラーがでます。 TypeScriptの難点 ①TypeScriptをJavaScriptコードにコンパイルしないといけない。→TypeScriptのコードはブラウザが理解できないのでJavaScriptのコードに変換（コンパイル）してあげないといけないです。 ②コードの制限が細かい。→JavaScriptと比べてコードを書く量が増え、データタイプをいちいち宣言しないといけません。スケールの小さいプロジェクトの場合はJavaScriptだけで対応することも検討すべきです。 TypeScriptのプロジェクトを作成する TypeScriptを使用するにあたりNode.jsを使います。まずは使用するマシンにNode.jsがインストールされていることを確認しましょう。 つぎにtypescriptのライブラリをグローバルにインストールします。 テキストエディタ テキストエディタはVSCodeをお勧めします。 ではテキストエディタを開いて、.tsファイル（TypeScriptファイル）を作成しましょう。今回はindex.tsファイルを作成してみます。 ちなみに.tsファイルにはタイプを指定しない普通のJavaScriptを書くこともできます。 ではターミナルを開いて.tsファイルをコンパイルしてみましょう。 VSCodeのターミナルが開けたらtscのコマンドを使ってJavaScriptファイルにコンパイルしてみましょう。 そうすると新しく.jsファイルが作成されたことが確認できます。 データタイプの指定 TypeScriptでデータタイプを指定するには変数の宣言の際に：タイプの形式で記載することができます。 では、再度.tsファイルをコンパイルしてみます。中身を見てみましょう。 変数のletがvarになっていることが分かりますね。これはコンパイル時にES5（ECMAScript）の基準に従って古いブラウザでも実行できるファイルに変換しているからです。なのでアロー関数を使った場合もES5の基準に従って変換してもらえます。 もしES6の基準で.tsファイルをコンパイルしたい場合は–targetフラグを使用してください。 TypeScriptのコンフィグファイル ではターミナル（コマンドプロンプト）から下記のコマンドでTypeScriptのコンフィグファイルを作成してみましょう。 コマンドの実行後にtsconfig.jsonファイルが作成されました。 この中身を見てみると多くのコンフィグがコメントアウトされています。これを必要に応じて設定することができます。説明はコンフィグの右側にあります。ではtargetフラグを見てみます。 では中身を消して””だけ残してみましょう。その後にカーソールが””の中にある際に、コントール+スペースバーを押すとすべてのオプションを見ることができます。 そのほかに、rootDir、outDirで.tsファイルを読み込むディレクトリ、書き出し先を設定できます。これでファイルを指定せずにコンパイルを実行することができます。 また“removeComments”: trueに設定することで.jsファイルにコメントを除くことができます。これは便利ですね。 “noEmit”: trueを設定すると、エラーがある際にはコンパイルが実行されません。 また、TypeScriptに慣れた時点でコンフィグ設定を学ぶことになるので、現段階ですべてを理解する必要はありません。 では、次回以降にTypeScriptのデバッグの仕方、詳しい書き方を説明していきたいと思います。 お疲れ様でした。