中級者向け

プログラミングに慣れてきて１年くらいたつと自分で何が問題なのか理解できる部分にたどり着くようになります。しかし中級レベルだとその解決策がベストなものなのかはまだ明確に理解できないです。

プログラミングの大半は調べることから始まります。調べて実際に検証をしながら経験を重ねて上級者レベルを目指していきましょう。

分かりやすい！シングルサインオン(Single Sign-On / SSO)を説明します。

by
SSOの流れ

SSOは認証システムの手法のうちの一つです。 初めてSSOがリリースされたのは2011年になります。それからGoogleやAmazon、Facebookなどのソーシャルメディアのアカウントを使って特定のアプリ、例えばチケット販売、ストリーミングのアプリなどにログインできるようになりました。 このSSOが連携している場合は、メインの画面とは別にポップアップのウィンドウが表示されGoogleなどのログインで使えるプロバイダが選択できるようになります。 このおかけでユーザーはアプリケーションごとにアカウントを作成することなくGoogleなどの一つのアカウントで複数のアプリのアカウントにログインできるようになります。 SlackのSSOの例：下記画像参照 SSOの認証の手法 SSOではメインとして2つの方法が使われます。 ①SAML（ Security Assertion Markup Language ） ②OpenID Connect SAMLはXMLベースで作成されたテクノロジーになります。OpenID Connect（オープンIDコネクト）はOAuth 2.0のフレームワークをベースに作成されたテクノロジーになります。OpenIDはJWT(JSON Web Token)を使いサービスとユーザー間でID（個人情報）を交換します。 SAMLについて では下記のイメージ図を参考にしながらSMALの認証の流れを見ていきます。 ①ユーザーがGmailなどのアプリにアクセスします。SAMLの概念ではGmailなどはサービスプロバイダと呼ばれます。 ②Gmailにログインしたあと、GmailサーバーがSARをブラウザに返します。 ③その後にブラウザがユーザーをIdP（SMAL認証を提供するプロバイダ）にリダイレクトします。例としてoktaやAuth0があげられます。 ④IdPがポップアップなどでユーザーにログイン情報を入力させます。 ⑤ユーザーがログインします。 ⑥ユーザーがログインした後、IdPがSAMLリスポンスを作成してブラウザに返します。この流れをSAML Assertion（アサーション）といいます。SAML Assertion（認証トークン）は暗号化されたユーザ情報を含むXMLドキュメントになります。 上記のステップが完了すると、ブラウザがサインされたSAML Assertionをサービスプロバイダに送ります。 認証されたユーザーはアプリケーション内の保護されたデータにアクセスできるようになるということです。 Open IDの流れ ではSAMLの流れが理解できたところで、Open IDの認証の流れを見てみましょう。 Open IDもSMALに似たプロトコル（手段）になります。しかしサインされたXMLを使う代わりにJWTを使います。 どちらの方法も主流であり、セキュリティ対策がされているので選ぶのはプログラマーの好みになると思います。 お疲れ様でした。

Nuxtでマウスで画面をドラッグしてスクロールさせる

by
Nuxtマウスでスクロール

お疲れ様です。最近のモバイルではユーザーが横幅に入りきらないボタンやメニューのアイテムをスクロールすることが当たり前ですね。 これを同じようにデスクトップで行おうとしてもブラウザではデフォルトでその機能が付いていません。 ですのでこのように見た目の汚いX軸のスクロールバーを使用するしかありません。 では今日はNuxtを使ってデスクトップでスクロールバーをなしでマウスでドラッグしてスクロールする方法を紹介します。 環境 今日はVueのSSRフレームワークのNuxtを使います。Vueの場合はクライアント側でレンダーされるのでWindowオブジェクトにアクセスできますが、Nuxtはサーバーサイドでレンダーされるのでデフォルトではwindowオブジェクトが使えません。この意味が分からない人は、まずはバニラJSでどうやってマウスを使ってスクロールができるのか知っておきましょう！Nuxtのプロジェクトができていることを想定して進めていきます。 VueUseライブラリ 今日はVueでもよくつかわれるライブラリのVueUseを使います。このuseMouseの機能を使ってVueでも簡単にマウスの現在の位置を手に入れることができるので自作で作るのが面倒な場合はこれが使えそうです。このVueUseのライブラリはSSRのNuxtも対応しています。 ではVueUseをインストールします。 インストールが完了したらNuxtのコンフィグファイルにこのモジュールを登録します。 カーソルの位置を知る ではモジュールを登録したところでグローバルでモジュールが使えるようになります。 これでカーソルが移動するたびにリアクティブに位置を取得できるようになりました。こんな簡単にできるとはすばらしいですね。 クリックイベントを作成 ｄえは下記の様にマウスイベントのクリック、マウスムーブ、マウスアップを作成してスクロールのポジションを変更していきます。 これでエレメント内でマウスクリックするとカーソルがつかむイラストに変わることが分かりました。 さらにつかんでいる間にマウスを移動させることでスクロールが移動できるようになりました。 const scrollcontainer=ref(null);はテンプレートrefでVueのやり方でHTMLタグにアクセスする方法です。 const{x}=useMouse();は、先ほど説明した通り現在のマウスの位置を知るモジュールです。今回はx軸だけ必要になります。 const isDragging=ref(false);はマウスがスクロールをつかんだかどうかをリアクティブに保管するための変数です。逆にisDraggingがfalaseの時は何も実行されないようにします。 const startingPosition = ref(0);x軸のスタートの位置です。初期では0にしておいて、クリックイベントで値を入れるようにします。 const postionDiff = ref(0);クリックが始まってからマウスを移動している際にリアクティブでその差を保管する変数です。では上記のデータをもとにmousedownScrollbar、mousemoveScrollbar、mouseupScrollbarを見てください。詳しい内容は関数内に書いたままになります。 最後に::-webkit-scrollbar要素を非表示にしてスクロールバーを隠して完成です！

Vue3+FirebaseでリアルタイムCRUD操作ができるアプリを作成しよう

by

今日はFirebaseのFirestoreデータベースを使ってリアルタイムで更新される、つまり、他のブラウザで更新されたデータベースが自分のブラウザでも更新されるCRUDアプリを作成します。 記事を始める前に知っておくべきこと 完成形はこのようになります。 完成したコードはGitHubから確認してください。 VueのToDoアプリ 今日はVueの説明は省きますがこちらのスターターテンプレートを使用するとFirebaseに集中して理解ができると思います。Gitでクローンして使ってください。 Vue-ToDoリストスターター 今日使用するテクノロジーはこちらです。 ToDoスターターのリポジトリの説明 基本的に理解しておく部分はApp.vueのみです。 App.vue 上記のようにデータベースに接続されていないので更新したデータはブラウザをリロードすると消えてしまいますね。 これからこのプロジェクトにFirebaseのFirestoreデータベースを連携させ、toDoの追加、編集、削除（CRUD操作）ができるようにします。 レッツゴー リポジトリのクローン Gitを使ったことがない人は似たようなファイルを作成しても良いですしGitHubからZipでダウンロードしてもOKです。Gitは必須ツールですので是非学んでおきましょう。Gitの使い方（YouTube） Firebaseのプロジェクトの作成 Firebaseのプロジェクトの作成の仕方はこちらの記事でくわしーく説明しているので先に確認しておきましょう。 Firebaseのモジュールをインストール では下記のコマンドでFirebaseのモジュールをインストールします。 次にプロジェクトの設定の歯車のアイコンの中にある全般のタブをクリックします。 そこにFirebaseのSDKのコードのスニペットがあるのでコピーしておきます。 これは大切な情報なので他人とシェアしないように！ 次に、このコードを読み込ませるファイルを作成します。 src/plugins/firebase.js（名前は何でもOKです。） つぎにfirestoreにサンプルのtodosタスクを追加します。 Firestoreの設定 次にfirestoreの設定を行います。 公式ドキュメンテーションにも詳しい説明があるので読んでおきましょう。 こちらにも書いているようにimport { getFirestore } from ‘firebase/firestore’;を記載してそこからデータベースの操作を行うメソッドを活用していきます。 では下記の様にdb変数にFirestoreのデータベースを格納してエクスポートします。 これでどのコンポーネントでもfirestoreのデータベースが使えるようになります。 firestoreのtodosデータを表示させる こちらのfirebaseのドキュメンテーションを参考にしてデータベースのデータを1回読み取る機能を実装していきます。下記がFirebaseのデータベースからドキュメントを読み込む関数になります。 では下記のように変数todosにfirebaseから呼び出したデータを格納してみます。 これで、Vueアプリからfirebaseのデータを読み込みレンダーすることができましたね。 データをリアルタイムで更新する firebaseの強みであるリアルタイムデータベースの機能を使ってみます。 今のコードのままだとFirebaseで直接データを変更したとしてもVueアプリ側のデータは更新されません。 今回のアップデートで、複数の人が同時にデータベースを更新した際にすべてのVueアプリで表示されるデータが最新のものに更新されます。 Firebaseのリアルタイムアップデートのドキュメンテーションはこちら。 参考にするコードはこちら では下記のようにonSnapshotの関数をtodosように変更してみます。 これで試しにfirestoreにデータを追加するとブラウザをリロードすることなくデータが更新されたことが分かりました。 データの変更をリッスンしているので削除と変更にも対応しています。 Firesotreにデータを追加 次にVueアプリからFriestoreにデータを追加する機能を追加します。 公式のドキュメンテーションはこちら。 今回はIDをVue側で指定しないaddDocメソッドを使用します。 参考になるコードはこちら … Read more

Vue3 + Vite + TailwindCSSのセットアップの仕方

by
Vite-Vue-TailwindCSS

今日はViteのビルドツールを使ってVue3とtailwindCSSのセットアップの仕方を紹介します。 すでにTailinwdCSSを使ったことがある方ならその良さをVueで発揮したいですよね？TailwindCSSは軽量でさらにデプロイの際に使用していないCSSをファイルから除くことができる優れたユーティリティライブラリです。 GitHubからソースコードを参照してください。 Vueのプロジェクトのセットアップ ではcdのコマンドでプロジェクトのディレクトリに移動してnodeのモジュールをインストールします。 Tailwind CSSのセットアップ Node.js 12.13.0より新しいバージョンであることを確認してください。 ではTailwindCSSをインストールします。 次にTailwindcssをイニシャライズしてコンフィグファイルを生成します。 ではプロジェクトのルート直下にtailwind.config.jsファイルが作成されたのでそちらを下記の様に更新します。 またpostcss.config.jsも自動で作成されていることを確認します。ちなみにnode.jsでエラーが出る場合はファイル名をpostcss.config.cjsに変えると直ります。 使用されていないスタイルを除くには： tailwind.config.jsにあるpurge（パージ）オプションにコンパイルしたcssファイルを出力したいパスを指定します。 次にassets/styles.cssなどのようにグローバルで使用したいCSSファイルを作成し、下記の様にtailwindcssをインポートします。 次にmain.jsからVueアプリの生成時に上記のcssファイルをインポートするように指示します。 main.js では最後にApp.vueにtailwindCSSのclassを使ってスタイリングをしてみます。 これでテスト用のウェブサーバーを起動するとスタイリングがアプライされたことが確認できますね。 デプロイの際には 下記のコマンドでvueアプリをデプロイ用にビルドします。 これでブラウザの検証ツールから確認すると最小限のCSSしか使用されていないことが確認できますね。 お疲れ様でした。

【コピペだけ】NuxtJSでCodePenのクローンを作成しよう

by

皆さん、CodePenは使ったことがありますか？CodePenはHTML、CSS、JavaScriptを入力してその結果をブラウザで見れるウェブアプリになります。CodePenはCSSやJavaScriptを使ってアニメーションを探したりするときにつかったりします。 今日はシンプルなCodePenのクローンを作成したので紹介します。 CodePenの例： 今日は自作でJavaScript、HTML、CSSを入力できるエディターとその結果が表示されるアプリのベースを作っていきます。 完成形は画像のようになります。完成したコードはこちらのGitHubリポからどうぞ。 この記事を読む前に知っておくこと このコードで使用するテクニック リポジトリのクローン では下記のコマンドを使用してリポジトリからデモアプリをセットアップします。 ファイル構成 nuxt.config.ts Nuxtのコンフィグファイルです。 monaco editorのモジュールの登録と、PrimeVueのUIライブラリで使うスタイルのインポートをしています。 plugins/primevue.js pluginsディレクトリはNuxtで指定されているディレクトリでレンダー時にNuxtが自動で読み込んでくれます。ここでは、グローバルで使えるPrimeVueのコンポーネントを登録しています。 詳しいPrimeVueのセットアップの仕方の記事はこちらから。 pages/code.vue pagesも同じようにNuxtで指定されている、自動で読み込んでくれるディレクトリです。pages/index.vueがランディングページになります。 /codeのページに行くとcode.vueのページ（コンポーネント）が読み込まれます。 components/code/editor.vue componentsディレクトもNuxtで指定されているディレクトリになります。 ここで登録されたvueファイルはグロバーバルで<CodeEditor>のように使用することができます。ファイル名の最初が大文字になることと、componetsディレクトリからディレクトリ名を当ててパスをしてするような方法になります。 TabViewとTabPanel：PrimeVueのコンポーネントです。 MonacoEditor：monaco editorのNuxtライブラリで使えるコンポーネントです。 valueJS、valueHTML、valueCSS：初期値とユーザーが入力できるリアクティブな値 iFrameのsrcdoc：iframeDoc変数（computedのHTMLファイルをレンダーします） monacoConfig：テキストエディターのパラメーター（ダークテーマ、ミニマップの表示、行数の表示など） 上記で説明した部分が今回のメインとなるロジックになります。 追加できなかった部分 JavaScriptを実行した際にconsole.logの値をブラウザ（consoleタブ）に表示 これは、以下の理由より完成できませんでした。 お疲れ様でした。

VueとFirebaseでGoogleアカウントを使ったログインシステムを作る

by
ユーザーをGoogleアカウントでログインさせる

前回はGoogleが提供するFirebaseのサービス（Baas:Backend as a Service）を紹介しました。 今日は、このFirebaseとJavaScriptのフレームワークのVueを使ってユーザーのログインシステムを作ってみましょう！ まずは、基本となるメールアドレスを使ってのログインのロジックを理解することが重要になります。順に従って進めていくことをお勧めします。 完成したコードはGitHubからどうぞ。 環境 なぜGoogleアカウントを使ってログインを作る必要があるか Googleアカウントである必要はありません。Twitterでも、GitHubアカウントでもOKです。数年前から見かけるようになったGoogleアカウントを使ってログインなどの認証方法はOAuthと言います、 OAuth方法を使用することで下記のメリットがあります。 以上のことから開発のスピードが速くなることとセキュリティが強化されることが理解できます。 Firebaseは必要か 詳しいFirebaseの説明は前回の記事を参照して下さい。Firebaseはあくまでもオプショナルです。しかし、無料でバックエンドのサービスを始められること、簡単にOAuthのロジックをフロントエンドに組み込められることから使っていて損はないシステムだと思います。またクライアント側はVueで作成するので必要に応じてバックエンド側のみ、フロントエンド側のみのテクノロジーを変更することができるのもメリットになります。 Vueプロジェクトの作成 今回はViteのビルドツールを使用してVueアプリを作成します。詳しいViteの使い方はこちらを参照してください。 ではテキストエディタを開いて基本のページを作成していきます。 Emailを使ったユーザー登録 では参考例として、Emailを使用したユーザー登録を作成していきます。その後にGoogleアカウントを使用したユーザーログインを作成します。 まずは、srcフォルダにFeed.vue、Home.vue、Register.vue,SignIn.vueを作成します。Feed.vueはログインしたユーザーのみアクセスさせるように進めていきます。 次にURLのラウティングを行うためにvue-routerをインストールします。下記のコマンドを実行してください。 次にsrc/routerフォルダを作成しindex.jsファイルを作成します。 ではrouter/indewx.jsに下記の様にページとなるコンポーネントを登録していきます。 つぎに作成しtarouterをmain.jsにインポートして読み込ませます。 次にデフォルトでついてきたHelloWorld.vueを削除して、App.vueに行きます。 App.vueにrouter-viewを登録してURLごとに読み込まれるページViewをレンダーさせます。 App.vue では、各Home、SignIn、Register、Feedのコンポーネントに適当なHTMLを入れてサーバーを起動するとURLごとにViewが変わることが確認できますね。 では最後にナビゲーションバーを作成して、URLではなくボタンからユーザーがページにジャンプできるようにします。 App.vue ここまで問題がないことを確認してください。 Firebaseのプロジェクトを作成 ではFirebaseのプロジェクトを作成していきます。詳しくはFirebaseを始めようの記事を参考にしてください。 手順だけ説明します。 下記のコマンドでfirebaseのライブラリをインストールします。 下記のようなコードがでるのでコピーしておきます。 認証システムを設定する firebaseの構築タブからAuthenticationを選択します。 始めるのボタンを押します。 Emailを追加します。 次にGoogleを追加します。 これで２つのプロバイダが登録されました。 では、npm install firebaseのコマンドを実行していることを再度確認してテキストエディタに戻ります。 次に先ほどコピーしておいたfirebaseのスニペットをmain.jsに貼り付けます。 initializeApp(firebaseConfig);の部分だけ変更してOKです。 認証システムを追加する では下準備が整ったところでいよいよユーザー認証のロジックをコードにしていきます。 ①ユーザー登録（Register.vue） 以上のようなテンプレートを作成します。 Vueの基本が理解されていることを前提に進めています。もしVueの基本を学びたい方はこちらのVue講座を読んでください。 今回注目してほしいところは、firebaseのライブラリからgetAuthとcreateUserWithEmailAndPasswordをインポートしてユーザー登録を完了させ、firebaseにデータを飛ばしてあげたことです。 ではfirebaseに戻り、Usersタブを見ると新しいユーザーが登録されていることが分かります。 もちろん実際には、強いパスワードのみ許可し、パスワードの再確認のインプットも作成すべきですが、今回は省きます。 … Read more

TypeScriptを始めよう：オブジェクトの書き方

by
TypeScript　オブジェクトの書き方

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

TypeScriptを始めよう：関数

by
TypeScriptで関数の書き方

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を始めよう：ビルドインタイプ

by
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