自己学習日記

typescriptとは？
TypeScript（タイプスクリプト）は、Microsoftによって開発されたオープンソースのプログラミング言語です。TypeScriptはJavaScriptのスーパーセットであり、JavaScriptの構文を基にしていますが、追加の静的型付けやクラスベースのオブジェクト指向プログラミングなどの機能を提供しています。
主な特徴としては以下の点が挙げられます：

静的型付け: TypeScriptは変数や関数の型を静的に宣言できます。これにより、開発者はコードを書く際に型に関するエラーや不整合を事前に検知することができます。

クラスベースのオブジェクト指向: TypeScriptはクラスやインターフェースをサポートしており、これによりオブジェクト指向プログラミングの概念を導入できます。

ES6+機能のサポート: TypeScriptはECMAScript（JavaScriptの標準規格）の最新の機能や構文をサポートしています。これにより、新しいJavaScriptの機能を利用しながらも、静的型付けなどのTypeScriptの機能を使用することができます。

モジュールのサポート: TypeScriptはモジュールシステムをサポートしており、大規模なアプリケーションの開発を容易にします。

コンパイル: TypeScriptコードは通常、JavaScriptにコンパイルされて実行されます。これにより、ほとんどのブラウザやランタイム環境で実行可能なJavaScriptコードに変換されます。

TypeScriptは、大規模で複雑なアプリケーションの開発において特に有用であり、開発者によるエラーの早期発見やコードの保守性向上に寄与します。

typescriptでWebアプリとして図書館の本を管理するシステムのコードを作る草案
Webアプリケーションの本を管理するシステムを完全に実装することは、複雑であり、このプラットフォームで提供できる量のコードを超えるかもしれません。ただし、簡単な例として、本のリストを表示する機能を持つシンプルなWebアプリケーションの TypeScript コードの一部を示します。

まず、HTMLの基本的な構造と、本を表示するための一部のサンプルデータが含まれている index.html ファイルを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>図書館管理システム</title>
</head>
<body>
  <div id="app"></div>

  <script src="app.js"></script>
</body>
</html>

次に、TypeScript ファイルを作成します。以下は、本を表す Book クラスと、本のリストを表示するための簡単なコードです。

// Book クラスの定義
class Book {
  constructor(public title: string, public author: string, public isbn: string) {}
}

// 本のリスト
const library: Book[] = [
  new Book("JavaScript: The Good Parts", "Douglas Crockford", "9780596517748"),
  new Book("Clean Code", "Robert C. Martin", "9780132350884"),
  new Book("Design Patterns", "Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides", "9780201633610"),
];

// 本を表示する関数
function displayBooks(books: Book[]): void {
  const appDiv = document.getElementById('app');
  if (appDiv) {
    appDiv.innerHTML = '<h1>図書館の本一覧</h1>';

    const ul = document.createElement('ul');
    books.forEach(book => {
      const li = document.createElement('li');
      li.textContent = `${book.title} by ${book.author} (ISBN: ${book.isbn})`;
      ul.appendChild(li);
    });

    appDiv.appendChild(ul);
  }
}

// 本を表示する
displayBooks(library);

// Book クラスの定義
class Book {
  constructor(public title: string, public author: string, public isbn: string) {}
}

// 本のリスト
const library: Book[] = [
  new Book("JavaScript: The Good Parts", "Douglas Crockford", "9780596517748"),
  new Book("Clean Code", "Robert C. Martin", "9780132350884"),
  new Book("Design Patterns", "Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides", "9780201633610"),
];

// 本を表示する関数
function displayBooks(books: Book[]): void {
  const appDiv = document.getElementById('app');
  if (appDiv) {
    appDiv.innerHTML = '<h1>図書館の本一覧</h1>';

    const ul = document.createElement('ul');
    books.forEach(book => {
      const li = document.createElement('li');
      li.textContent = `${book.title} by ${book.author} (ISBN: ${book.isbn})`;
      ul.appendChild(li);
    });

    appDiv.appendChild(ul);
  }
}

// 本を表示する
displayBooks(library);

この例では、Book クラスを定義し、そのクラスのインスタンスで構成された本のリストを作成し、Webページに表示します。ただし、このコードは非常にシンプルなものであり、実際の図書館管理システムは、データベースやサーバーサイドの処理など、多くの追加の機能が必要です。