<h2 id="h8d027c8ed3">はじめに</h2><p>TERNスタックは、MERNスタックをベースに、MongoDBをTigrisに置き換えた最新のWeb開発スタックです。この記事では、TERNスタックの概要とそのメリット、実際の構成要素、そして始め方を簡単に説明します。<br></p><h2 id="h459edba130">TERNスタックとは</h2><p><br>TERNスタックは、Tigris、Express.js、React、およびNode.jsの組み合わせで構成されるWeb開発スタックです。MERNスタック（MongoDB, Express.js, React, Node.js）からTigrisに移行することで、サーバーレスNoSQLデータベースと検索プラットフォームを利用できるようになります。<br></p><h2 id="h17e45b512f">何が良いのか</h2><p><br>Tigrisを採用することで、以下のメリットが得られます。<br><br>- コードファーストアプローチ<br>- データベースブランチング<br>- 手動クラスタリングやシャード管理が不要<br>- ACIDトランザクションのサポート<br>- 全文検索機能の統一<br>- より低いランニングコスト<br></p><h2 id="h66b4bcedf3">実際の中身</h2><p><br><img src="https://images.microcms-assets.io/assets/661f51695d9d4fb590c322a7cdea4bf7/997a3aefc18c47f1a5690d4435ec3fc2/TERN%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF.png" alt=""><br><br>TERNスタックの構成要素は以下の通りです。<br></p><ul><li>ブラウザ: JavaScriptまたはTypeScriptで記述されたReact</li><li> サーバー: JavaScriptまたはTypeScriptで記述されたExpress.js</li><li>データベース: Tigris TypeScript SDKを使用したTigrisデータベース</li></ul><p><br></p><h2 id="hebac0a8a0f">TERNスタックを構築してみたい、という方へ</h2><p><br>TERNスタックを試すためには、以下が必要です。<br><br>1. Node.js LTS以上がインストールされていること<br>2. Tigris Cloudアカウントまたは自己ホストされたTigrisインスタンス<br>3. サンプルリポジトリをクローンし、MERNブランチに切り替える<br><br>その後、MongoDB接続文字列を更新し、Tigris SDKを使用するように変更します。これで、TERNスタックへの移行が完了します。<br></p><h2 id="ha214098e44">まとめ</h2><p><br>TERNスタックは、MERNスタックからMongoDBをTigrisに置き換えた最新のWeb開発スタックです。サーバーレスNoSQLデータベースと検索プラットフォームを利用できることで、開発効率と運用コストの削減が期待できます。<br></p><h2 id="h6cfbcd1bbd">参考にした資料</h2><ul><li>3分で分かる。MERNスタックを簡単に説明してみる: https://qiita.com/Kage_/items/ffb0c213bfc36eae3592</li><li>TERN Stack example repository: https://github.com/tigrisdata-community/tern-stack-example.git</li><li>MERN Stack guide: https://www.tigrisdata.com/blog/tern-stack/</li></ul>

TERNスタックをざっくりと説明してみる

<h1 id="h6d1d38962b">【テーブル定義編】ハンバーガー屋のモバイルオーダーシステム作成</h1><p><br></p><h2 id="h8d027c8ed3"><span style="color:#374151">はじめに</span></h2><p><span style="color:#374151">最近、多くのお店でモバイルオーダーシステムが導入されていて、お客さんにとっても便利で、お店にとっても効率的ですよね。そこで、自分も後学としてハンバーガー店向けの</span>モバイルオーダーシステムの開発プロセス１として<span style="color:#374151">、まず</span>PostgreSQLを使用した<span style="color:#374151">テーブル定義を作成してみました。</span><br><br></p><h2 id="hfde64f4a4a">Shopsテーブル</h2><p>最初のテーブルは、店舗情報を格納する「Shopsテーブル」です。このテーブルには、店舗のID、店舗名、住所、営業時間などが格納されます。また、店舗ごとに異なる店舗IDを主キーに設定することで、複数の店舗情報を管理することができます。</p><pre><code>CREATE TABLE shops (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    address VARCHAR(255) NOT NULL,
    phone VARCHAR(20) NOT NULL,
    opening_hours VARCHAR(50) NOT NULL,
    latitude DOUBLE PRECISION NOT NULL,
    longitude DOUBLE PRECISION NOT NULL
);</code></pre><p><br></p><h2 id="h3be570c593">Usersテーブル</h2><p>次に紹介するのは、顧客情報を格納する「Usersテーブル」です。このテーブルには、顧客ID、顧客名、電話番号、メールアドレスなどが格納されます。顧客IDを主キーに設定することで、顧客ごとの注文履歴を管理することができます。</p><pre><code>CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    phone VARCHAR(20) NOT NULL
);</code></pre><p><br></p><h2 id="h5ec8943e6a">Productsテーブル、Ordersテーブル、Order_itemsテーブル</h2><p>最後に紹介するのは、メニュー商品情報、注文情報、注文された商品の詳細を格納する３つのテーブルです。<br>「Productsテーブル」には、商品ID、商品名、値段、商品説明などが格納されます。顧客が注文する際に、このテーブルの情報を参照し、注文する商品を決定します。<br>「Ordersテーブル」には、注文ID、顧客ID、注文日時、支払い方法、注文ステータスなどが格納されます。このテーブルを用いて、顧客ごとの注文履歴を管理し、ステータスを更新することができます。<br>「Order_itemsテーブル」には、注文ID、商品ID、数量、値段などが格納されます。このテーブルを用いて、注文された商品の詳細を管理することができます。</p><pre><code>-- products
CREATE TABLE products (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    description TEXT NOT NULL,
    price DECIMAL(10, 2) NOT NULL,
    image_url VARCHAR(255),
    shop_id INTEGER REFERENCES shops(id)
);

-- orders
CREATE TABLE orders (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id),
    shop_id INTEGER REFERENCES shops(id),
    status VARCHAR(50) NOT NULL,
    created_at TIMESTAMP NOT NULL,
    updated_at TIMESTAMP NOT NULL
);

-- order_items
CREATE TABLE order_items (
    id SERIAL PRIMARY KEY,
    order_id INTEGER REFERENCES orders(id),
    product_id INTEGER REFERENCES products(id),
    quantity INTEGER NOT NULL,
    price DECIMAL(10, 2) NOT NULL
);</code></pre><p><br></p><h2 id="ha214098e44"><span style="color:#374151">まとめ</span></h2><p><span style="color:#374151">今回は、ハンバーガー店向けモバイルオーダーシステムのテーブル定義について学びました。適切なテーブル設計により、顧客に使いやすいシステムを提供し、同時に店舗の業務効率も向上させることができます。(自分はまだまだですが、、、)</span><br>次回はrust言語でAPIサーバーを作成する記事を書こうと思います！！<br></p>

【テーブル定義編】ハンバーガー屋のモバイルオーダーシステムを作成しよう

<h2 id="h8d027c8ed3">はじめに</h2><p>ポケモンの野生の戦闘といえば、ポケモンシリーズの中でも大きな魅力の一つです。今回は、Google Apps Script（以下、GAS）を使ってポケモンの野生の戦闘を作成する方法を紹介します。GASはJavaScriptをベースにしたスクリプト言語で、Googleドキュメントやスプレッドシート、GmailなどGoogleが提供するサービスに対して自動化処理を行うことができます。コード例も交えて解説していきますので、ぜひ参考にしてください。<br><br></p><h2 id="h0585ba7510">野生ポケモンの出現</h2><p>まずは野生ポケモンが出現する仕組みを作りましょう。ポケモンはランダムに出現するため、Math.random()を使って乱数を生成して判定します。以下がそのコード例になります。</p><pre><code>function wildPokemonAppears() {
  var probability = Math.random();
  if (probability &gt; 0.5) {
    // 野生ポケモン出現
  } else {
    // 野生ポケモン未出現
  }
}

</code></pre><p>乱数が0.5以上の場合、野生ポケモンが出現するようになっています。この後の処理で、出現した野生ポケモンに対して戦闘を行うことになります。<br><br></p><h2 id="hfc7f7c2de2">戦闘システム</h2><p>野生ポケモンが出現したら、次は戦闘システムを作成しましょう。ここでは、単純化のためにプレイヤーが1匹のポケモンしか持っていないものとします。以下がそのコード例になります。</p><pre><code>function battle() {
  var playerPokemon = "ピカチュウ";
  var wildPokemon = "フシギダネ";
  var playerHp = 20;
  var wildHp = 25;

  while (playerHp &gt; 0 &amp;&amp; wildHp &gt; 0) {
    // プレイヤーターン
    var playerAttack = Math.random() * 10;
    wildHp -= playerAttack;
    if (wildHp &lt;= 0) {
      // 野生ポケモン撃破
      break;
    }

    // 野生ポケモンターン
    var wildAttack = Math.random() * 10;
    playerHp -= wildAttack;
    if (playerHp &lt;= 0) {
      // プレイヤーポケモン敗北
      break;
    }
  }
}

</code></pre><p>戦闘はwhileループで行われ、プレイヤーと野生ポケモンが交互に攻撃を行います。攻撃力はMath.random()を使ってランダムに決定されます。どちらかのポケモンのHPが0以下になるまで戦闘が続きます。戦闘が終了したら、勝敗に応じてメッセージを表示する処理を加えるとより完成度が高くなります。<br><br></p><h2 id="ha214098e44">まとめ</h2><p>今回は、GASを使ってポケモンの野生の戦闘を作成する方法を紹介しました。乱数を使った野生ポケモンの出現判定やwhileループを使った戦闘システムの実装など、ポケモンゲームを作る上で基礎となる部分を学ぶことができたかと思います。ぜひ自分でコードを書いてみて、より高度なポケモンゲームを作ってみてください。<br><br></p>

ポケモンで野生の戦闘シーンをGASを使って作成してみよう

<h2 id="h8d027c8ed3">はじめに</h2><p>Go言語は、高速で効率的な並行処理を実現し、シンプルな構文で開発者に優しい言語として人気を博しています。この記事では、Go言語を使って銀行システムを作成する手順をハンズオン形式で解説します。また、コード例も提供するので、初心者でも理解しやすい内容となっています。<br><br></p><h2 id="h5c83e0077e">銀行システムの概要</h2><p>銀行システムは、顧客の口座情報を管理し、入出金履歴を記録するシステムです。このシステムを作成するためには、口座情報や入出金履歴をデータベースに保存し、データベースから情報を取得する機能が必要です。Go言語を使えば、簡単にデータベースとのやりとりができるため、銀行システムの作成に向いています。<br><br></p><h2 id="h570e56a9e0">銀行システムの実装</h2><p>銀行システムを実装するには、以下の手順が必要です。</p><ol><li>データベースの設計と作成</li><li>データベースとの接続</li><li>口座情報の登録、更新、削除機能の実装</li><li>入出金履歴の登録機能の実装</li><li>口座情報と入出金履歴の参照機能の実装</li></ol><p>以上の手順を順番に進めていくことで、銀行システムを実現することができます。Go言語を使えば、データベースの操作がシンプルになるため、実装も簡単に行えます。<br><br></p><h3 id="hb01849d767">データベースの設計と作成</h3><p>データベースの設計は、銀行システムの要件に基づいて行います。ここでは、口座情報を管理するためのテーブルを作成する例を示します。<br><br></p><pre><code>CREATE TABLE accounts (
  id INT(11) NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  balance INT(11) NOT NULL,
  PRIMARY KEY (id)
);

</code></pre><h3 id="h81a77e182b">データベースとの接続</h3><p>Go言語では、データベースとの接続にdatabase/sqlパッケージを使用します。以下のようにして、MySQLとの接続を行います。<br><br></p><pre><code>import (
  "database/sql"
  _ "github.com/go-sql-driver/mysql"
)

func ConnectDB() (*sql.DB, error) {
  db, err := sql.Open("mysql", "user:password@tcp(localhost:3306)/bank_system")
  if err != nil {
    return nil, err
  }

  return db, nil
}

</code></pre><h3 id="h95bd9ca336">口座情報の登録、更新、削除機能の実装</h3><p>以下のコード例は、銀行システムの口座情報を管理する機能の一部になります。<br><br></p><pre><code>type Account struct {
  id int64
  name string
  balance int64
}

func CreateAccount(db *sql.DB, account Account) (int64, error) {
  // Prepare statement for inserting data
  stmt, err := db.Prepare("INSERT INTO accounts(name, balance) VALUES(?,?)")
  if err != nil {
    return 0, err
  }
  defer stmt.Close()

  // Execute statement
  result, err := stmt.Exec(account.name, account.balance)
  if err != nil {
    return 0, err
  }

  // Get last inserted ID
  id, err := result.LastInsertId()
  if err != nil {
    return 0, err
  }

  return id, nil
}

func UpdateAccount(db *sql.DB, account Account) error {
  // Prepare statement for updating data
  stmt, err := db.Prepare("UPDATE accounts SET name=?, balance=? WHERE id=?")
  if err != nil {
    return err
  }
  defer stmt.Close()

  // Execute statement
  _, err = stmt.Exec(account.name, account.balance, account.id)
  if err != nil {
    return err
  }

  return nil
}

func DeleteAccount(db *sql.DB, id int64) error {
  // Prepare statement for deleting data
  stmt, err := db.Prepare("DELETE FROM accounts WHERE id=?")
  if err != nil {
    return err
  }
  defer stmt.Close()

  // Execute statement
  _, err = stmt.Exec(id)
  if err != nil {
    return err
  }

  return nil
}

</code></pre><h3 id="h9a3b84a5eb">入出金履歴の登録機能の実装</h3><p>以下のコード例は、銀行システムの入出金履歴を管理する機能の一部になります。<br><br></p><pre><code>type Transaction struct {
  id int64
  accountID int64
  amount int64
  date time.Time
}

func CreateTransaction(db *sql.DB, transaction Transaction) (int64, error) {
  // Prepare statement for inserting data
  stmt, err := db.Prepare("INSERT INTO transactions(account_id, amount, date) VALUES(?,?,?)")
  if err != nil {
    return 0, err
  }
  defer stmt.Close()

  // Execute statement
  result, err := stmt.Exec(transaction.accountID, transaction.amount, transaction.date)
  if err != nil {
    return 0, err
  }

  // Get last inserted ID
  id, err := result.LastInsertId()
  if err != nil {
    return 0, err
  }

  return id, nil
}

</code></pre><h3 id="hac28976913">口座情報と入出金履歴の参照機能の実装</h3><p>以下のコード例は、銀行システムの口座情報と入出金履歴を参照する機能の一部になります。<br><br></p><pre><code>type AccountWithTransactions struct {
  id int64
  name string
  balance int64
  transactions []Transaction
}

func GetAccountWithTransactions(db *sql.DB, id int64) (AccountWithTransactions, error) {
  // Get account information
  var account Account
  err := db.QueryRow("SELECT id, name, balance FROM accounts WHERE id=?", id).Scan(&amp;account.id, &amp;account.name, &amp;account.balance)
  if err != nil {
    return AccountWithTransactions{}, err
  }

  // Get transactions
  rows, err := db.Query("SELECT id, account_id, amount, date FROM transactions WHERE account_id=?", id)
  if err != nil {
    return AccountWithTransactions{}, err
  }
  defer rows.Close()

  var transactions []Transaction
  for rows.Next() {
    var transaction Transaction
    err := rows.Scan(&amp;transaction.id, &amp;transaction.accountID, &amp;transaction.amount, &amp;transaction.date)
    if err != nil {
      return AccountWithTransactions{}, err
    }

    transactions = append(transactions, transaction)
  }

  return AccountWithTransactions{id: account.id, name: account.name, balance: account.balance, transactions: transactions}, nil
}

</code></pre><h2 id="ha214098e44"><br><br>まとめ</h2><p>今回は、Go言語を使って銀行システムを作成する手順をハンズオン形式で解説しました。銀行システムを作成することで、データベースとのやりとりや、関数の実装方法を学ぶことができます。また、コード例も提供しているので、初心者でも実際に手を動かしながら学ぶことができます。Go言語に興味がある方は、ぜひ挑戦してみてください。</p>

Goを使った銀行システムをハンズオン形式で学ぼう

<h2 id="h8d027c8ed3">はじめに</h2><p>プログラミングの世界に入りたての初級エンジニアにとって、知識を増やし、スキルアップをするために本を読むことは非常に重要です。しかし、何から読んでいいのか迷ってしまうこともあるでしょう。そこで、ここでは初級エンジニアにとってオススメの本を5冊紹介します。<br><br></p><h2 id="hfce3cd040b">1. 『コードコンプリート第2版』スティーブ・マコネル著</h2><p>プログラミングの基本的なスキルを身につけることができる本です。初心者から上級者まで、幅広い層に有用な内容が書かれています。コードの読みやすさ、保守性、拡張性を向上させるためのアプローチについて学ぶことができます。プログラミングの基礎から応用まで、幅広い内容を網羅しています。<br><a href="https://www.amazon.co.jp/CODE-COMPLETE-%E7%AC%AC2%E7%89%88-%E4%B8%8A-%E5%AE%8C%E5%85%A8%E3%81%AA%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%97%E3%81%A6/dp/489100455X" target="_blank" rel="noopener noreferrer">Amazon購入リンク</a><br><br></p><h2 id="hcfc60c2f08">2. 『Effective Java 第2版』ジョシュア・ブロック著</h2><p>Javaプログラマにとって、オブジェクト指向プログラミング(OOP)の基本を習得するための必読書です。OOPに関連するさまざまなトピックについて、実際のコード例を交えて説明されています。Javaのベストプラクティスを学ぶことができるため、Javaエンジニアには必読の書と言えます。この本を読むと、Javaのコードを書く上でのノウハウやコミュニティの慣習について深く理解することができます。<br><a href="https://www.amazon.co.jp/EFFECTIVE-JAVA-Java-Joshua-Bloch/dp/4621066056" target="_blank" rel="noopener noreferrer">Amazon購入リンク</a><br><br></p><h2 id="h725830e3f1">3. 『リーダブルコード』ダスティン・ボズウェル著・トレバー・ファウラー著</h2><p>コードの可読性を高めるための方法について解説されている本です。コードを書くだけでなく、読みやすくすることもプログラマにとって非常に重要なスキルです。本書では、コードのフォーマット、コメント、変数名、関数の命名法など、コードの可読性を向上させる方法が紹介されています。プログラミング初心者にとっては、読みやすいコードを書くことができるようになるための基礎となる本と言えます。<br><a href="https://www.amazon.co.jp/%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89-%E2%80%95%E3%82%88%E3%82%8A%E8%89%AF%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%81%AA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-Theory-practice-Boswell/dp/4873115655" target="_blank" rel="noopener noreferrer">Amazon購入リンク</a><br><br></p><h2 id="h3d63ef1b3e">4. 『コンピュータシステムの理論と実装』ノーム・ナーセット著</h2><p>本書は、コンピュータシステムの内部構造について詳しく解説されている本です。コンピュータ上でプログラムがどのように動いているのか、理解することができます。また、本書で紹介されている言語やプログラムの実装方法を学ぶことで、プログラムをより効率的に書くことができます。プログラムの基礎から理論まで、幅広い内容を網羅しています。<br><a href="https://www.amazon.co.jp/%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%AE%E7%90%86%E8%AB%96%E3%81%A8%E5%AE%9F%E8%A3%85-%E2%80%95%E3%83%A2%E3%83%80%E3%83%B3%E3%81%AA%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-Noam-Nisan/dp/4873117127" target="_blank" rel="noopener noreferrer">Amazon購入リンク</a><br><br></p><h2 id="h0a4f252313">5. 『達人プログラマー』アンドリュー・ハント著・デビッド・トーマス著</h2><p>この本は、プログラミングのエキスパートである著者が、プログラマに求められるスキルや考え方について解説した本です。本書では、コードの書き方やデバッグ方法、チーム開発の方法など、プログラマにとって重要なスキルが紹介されています。また、本書で紹介されている多くのエキスパートたちの意見を参考にすることで、プログラマのスキルアップにつながることが期待できます。<br><a href="https://www.amazon.co.jp/%E9%81%94%E4%BA%BA%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC-%E7%AC%AC2%E7%89%88-%E7%86%9F%E9%81%94%E3%81%AB%E5%90%91%E3%81%91%E3%81%9F%E3%81%82%E3%81%AA%E3%81%9F%E3%81%AE%E6%97%85-David-Thomas/dp/4274226298" target="_blank" rel="noopener noreferrer">Amazon購入リンク</a><br><br></p><h2 id="ha214098e44">まとめ</h2><p>初級エンジニアがプログラミングスキルを向上させるためには、本を読むことが必要不可欠です。本記事で紹介した5冊は、初心者から上級者まで幅広く役立つ内容が書かれています。プログラマに必要なスキルを身につけるために、ぜひ手に取って読んでみてください。</p>

初級エンジニアが読んでおくと幸せになれる書籍５選

<h2 id="h8d027c8ed3">はじめに</h2><p>ウェブスクレイピングは、自動化されたプログラムを使用して、Webサイトから情報を収集するプロセスです。ウェブスクレイピングをすることで、手動で情報を収集するよりもはるかに効率的に情報を取得できます。Google Apps Script（GAS）を使用して、ウェブスクレイピングを行うことができます。この記事では、GASを使用してウェブスクレイピングを学ぶ方法について説明します。<br><br></p><h2 id="h60c32a1d25">スクレイピングの基本</h2><p>ウェブスクレイピングをするためには、HTMLの解析が必要です。GASには、HTMLを解析するためのパーサーが標準搭載されています。パーサーを使用して、HTMLから必要な情報を抽出することができます。また、GASには、HTTPリクエストを送信するためのfetch関数もあります。fetch関数を使用して、データを取得することができます。<br>ウェブスクレイピングをする際には、サイトの利用規約に注意する必要があります。ウェブスクレイピングは、サイトの利用規約に違反することがあるため、注意が必要です。また、ウェブサイトの所有者から許可を得ることをお勧めします。<br><br></p><h2 id="h92c94061b3">ウェブスクレイピングの例</h2><p>以下は、GASを使用してウェブスクレイピングを行う簡単な例です。例として、Googleのトップページからタイトルを取得するプログラムを紹介します。</p><pre><code>function getTitle() {
  var response = UrlFetchApp.fetch("http://www.google.com");
  var html = response.getContentText();
  var title = html.match(/&lt;title[^&gt;]*&gt;([^&lt;]+)&lt;\/title&gt;/)[1];
  Logger.log(title);
}

</code></pre><p>このコードでは、fetch関数を使用して、GoogleのトップページからHTMLデータを取得しています。その後、正規表現を使用して、タイトルタグからタイトル文字列を抽出しています。最後に、Logger.log関数を使用して、タイトルを出力しています。<br><br></p><h2 id="ha214098e44">まとめ</h2><p>GASを使用してウェブスクレイピングを行うことは、非常に簡単で効果的です。この記事で紹介した例を参考に、自分のプロジェクトでウェブスクレイピングを始めてみてください。ただし、ウェブスクレイピングは、ウェブサイトの利用規約に違反することがあるため、注意が必要です。また、ウェブサイトの所有者から許可を得ることをお勧めします。<br>ウェブスクレイピングは、ウェブサイトから情報を取得するための非常に強力なツールであり、データ収集や分析に役立ちます。しかし、ウェブスクレイピングを行う際には、必ずサイトの利用規約に従い、違反行為を行わないように注意しましょう！</p>

GASでwebスクレイピングを学ぶ

<h2 id="h8d027c8ed3">はじめに</h2><p>three.jsはJavaScriptで書かれた3Dライブラリであり、WebGLを使用して高品質な3Dグラフィックスをレンダリングすることができます。この記事では、three.jsを使用して動きのあるWebページを作成する方法について紹介します。また、ハンズオンの手順も合わせて説明します。<br><br></p><h2 id="h89da4fa0f0">ハンズオン：three.jsを使って動きのある立方体を作成する</h2><p>まずはthree.jsを使用して、動きのある立方体を作成してみましょう。以下の手順に従って進めてください。<br>①HTMLに必要なスクリプトを読み込む まずはじめに、three.jsを使用するために必要なスクリプトを読み込みます。以下のコードをheadタグ内に追加してください。</p><pre><code>&lt;script src="&lt;https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js&gt;"&gt;&lt;/script&gt;

</code></pre><p>②シーンを作成する three.jsでは、3Dオブジェクトをレンダリングするためにシーンを作成する必要があります。以下のコードを追加して、シーンを作成してください。</p><pre><code>var scene = new THREE.Scene();

</code></pre><p>③カメラを作成する シーンを作成したら、カメラを作成する必要があります。以下のコードを追加して、カメラを作成してください。</p><pre><code>var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

</code></pre><p>④レンダラーを作成する レンダラーを作成し、シーンとカメラを渡して、画面に表示するための準備をします。以下のコードを追加して、レンダラーを作成してください。</p><pre><code>var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

</code></pre><p>⑤立方体を作成する シーン、カメラ、レンダラーを作成したら、立方体を作成してみましょう。以下のコードを追加して、立方体を作成してください。</p><pre><code>var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

</code></pre><p>⑥アニメーションを作成する 最後に、アニメーションを作成してみましょう。以下のコードを追加して、アニメーションを作成してください。</p><pre><code>function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

</code></pre><p>これで、動きのある立方体が完成しました。ブラウザで確認してみましょう。<br><br></p><h2 id="hfc6566219c">three.jsを使ったWebページの応用例</h2><p>three.jsを使ったWebページの応用例として、以下のようなものがあります。</p><ol><li>3Dモデルの表示 three.jsを使用して、3DモデルをWebページ上に表示することができます。このようにすることで、商品の3DモデルをWebページ上で見ることができるようになります。</li><li>ゲームの作成 three.jsを使用すれば、ブラウザ上で動作するゲームを作成することができます。高品質なグラフィックスをレンダリングすることができるため、本格的なゲームを作成することができます。</li><li>データ可視化 three.jsを使用して、膨大なデータを可視化することができます。例えば、地図上にデータをプロットすることができるため、データの傾向やパターンを視覚的に理解することができます。</li></ol><p><br></p><h2 id="ha214098e44">まとめ</h2><p>この記事では、three.jsを使用して動きのあるWebページを作成する方法について紹介しました。また、ハンズオン形式で立方体を作成する手順も説明しました。three.jsを使えば、高品質な3Dグラフィックスをレンダリングすることができるため、Webページの表現力を大幅に向上させることができます。是非、挑戦してみてください。</p>

three.jsで動きのあるwebページを作成しよう

<h2 id="h8d027c8ed3">はじめに</h2><p>tsParticlesは、JavaScriptで作成された高度なパーティクルエフェクトライブラリです。その多様な設定や効果により、Webサイトやアプリケーションに魅力的な背景を簡単に追加することができます。この記事では、tsParticlesを使用してAmong Us風の背景を作成する方法を紹介します。<br><br></p><h2 id="hb4d7d7c891">tsParticlesとは</h2><p>tsParticlesは、パーティクルエフェクトを作成するためのオープンソースライブラリです。JavaScriptで書かれており、Webサイトやアプリケーションに簡単に追加できます。tsParticlesには、多様な設定や効果があり、背景やアニメーションの作成に役立ちます。</p><h3 id="h1b9800cba2"><span style="color:#242424">公式サイト</span></h3><p><a href="https://particles.js.org/" target="_blank" rel="noopener noreferrer">https://particles.js.org/</a><br></p><h3 id="h77a364642d"><span style="color:#242424">Github</span></h3><p><a style="color:#242424" href="https://github.com/matteobruni/tsparticles" target="_blank" rel="noopener noreferrer">https://github.com/matteobruni/tsparticles</a><br><br></p><h2 id="h4d7cae4fa0">Among Us風の背景を作成する方法</h2><p>Among Usは、多くの人に愛される人気のあるゲームです。その特徴的な背景は、宇宙船内部のテーマを持っています。以下の手順に従って、tsParticlesを使用してAmong Us風の背景を作成しましょう。</p><h3 id="hc23912c962"><span style="color:#242424">デモページ(Among Us）</span></h3><p><img src="https://images.microcms-assets.io/assets/661f51695d9d4fb590c322a7cdea4bf7/bb35e103fdaa42ccb4dc82d2136f4628/chrome-capture-2023-1-7.gif" alt=""><br><br></p><h3 id="ha6bbacf071">1. tsParticlesをダウンロードし、プロジェクトに追加する</h3><p>まず最初に、tsParticlesをダウンロードし、プロジェクトに追加する必要があります。以下のコマンドを使用して、npmパッケージをインストールできます。</p><pre><code>npm install tsparticles

</code></pre><p>または、以下のタグを使用して、CDNからtsParticlesを読み込むこともできます。</p><pre><code>&lt;script src="&lt;https://cdn.jsdelivr.net/npm/tsparticles@1.22.1/dist/tsparticles.min.js&gt;"&gt;&lt;/script&gt;

</code></pre><h3 id="h4d132e5075"><br>2. HTMLファイルにcanvas要素を追加する</h3><p>tsParticlesを使用するには、HTMLファイルにcanvas要素を追加する必要があります。以下のように、id属性を"tsparticles"に設定したcanvas要素を追加します。</p><pre><code>&lt;canvas id="tsparticles"&gt;&lt;/canvas&gt;

</code></pre><h3 id="hac300b82a1"><br>3. JavaScriptファイルに設定を追加する</h3><p>次に、JavaScriptファイルに以下のようなtsParticlesの設定を追加します。</p><pre><code>tsParticles.load("tsparticles", {
  "background": {
    "color": {
      "value": "#292f3d"
    }
  },
  "fpsLimit": 60,
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "retina_detect": true
});

</code></pre><h3 id="h010889a384"><br>4. CSSファイルにスタイルを追加する</h3><p>最後に、CSSファイルに以下のようなスタイルを追加して、Among Us風の背景を反映させます。</p><pre><code>#tsparticles {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

</code></pre><p>これでAmong Us風の背景が完成しました。</p><h2 id="ha214098e44"><br><br>まとめ</h2><p>この記事では、tsParticlesを使ってAmong Us風の背景を作成する方法を紹介しました。tsParticlesは、多様な設定や効果を持っており、Webサイトやアプリケーションの背景やアニメーションの作成に役立ちます。是非、あなたもtsParticlesを使用して、創造性豊かな背景を作成してみてください。</p>

tsParticlesを導入してAmong Us風な背景を作ろう

<h2 id="h8d027c8ed3">はじめに</h2><p>現代のビジネスにおいて、オンラインプレゼンスは不可欠です。しかし、たくさんのウェブサイトがあり、検索エンジンでの上位表示が望ましいです。この点で、SEO（Search Engine Optimization、検索エンジン最適化）は重要な役割を果たします。この記事では、SEO対策について詳しく説明します。<br><br></p><h2 id="hb3b3e1fe4b">キーワード研究とオンページSEO</h2><p>SEOで最も重要なことの1つは、キーワード研究とオンページSEOです。キーワード研究は、特定のトピックに関連する検索用語を特定することを意味します。これにより、オンページSEOでこれらのキーワードを使用し、サイトのコンテンツを最適化することができます。オンページSEOには、タイトルタグ、メタディスクリプション、見出しタグ、画像タグなどが含まれます。これらの要素を最適化することで、検索エンジンはサイトの内容とトピックについて理解し、適切な検索結果に表示されます。<br><br></p><h2 id="hac613f9c49">バックリンクの重要性</h2><p>バックリンクは、他のサイトから自分のサイトにリンクが貼られていることを指します。これはSEOにおいて非常に重要です。検索エンジンは、他のサイトからのリンクが多いサイトを、信頼性の高いサイトと見なします。つまり、バックリンクが多いサイトは、検索エンジンの上位表示に有利です。しかし、バックリンクの質が重要なので、品質の高いサイトからリンクを取得することが重要です。<br><br></p><h2 id="h1d3e937b66">モバイルフレンドリーなサイトの重要性</h2><p>最近では、検索エンジンがモバイルフレンドリーなサイトを優先する傾向があります。これは、モバイル検索の増加によるものです。モバイルフレンドリーなサイトは、モバイルデバイスの画面サイズに最適化されているため、ユーザーがサイトのコンテンツを簡単に閲覧できるようになります。そのため、モバイルフレンドリーなサイトを作成することは、SEOにおいて非常に重要です。<br><br></p><h2 id="h265906333c">コンテンツの品質</h2><p>SEOにおいて、コンテンツの品質は非常に重要です。検索エンジンは、高品質のコンテンツを提供するサイトをより高く評価します。したがって、サイトのコンテンツは、読み手にとって有用であること、正確であること、そして独自であることが重要です。また、コンテンツは、見やすく、読みやすく、そして分かりやすくすることが重要です。<br><br></p><h2 id="h93fd45618a">ソーシャルメディアの活用</h2><p>ソーシャルメディアは、SEO対策において非常に有効なツールです。ソーシャルメディア上でのシェアやリツイートは、バックリンクを獲得することができます。また、ソーシャルメディア上での活動は、ブランドのオンラインプレゼンスを向上させることができます。したがって、ソーシャルメディアを活用することは、SEO対策において非常に重要です。<br><br></p><h2 id="ha214098e44">まとめ</h2><p>SEO対策は、サイトのオンラインプレゼンスを向上させるために不可欠なものです。キーワード研究、オンページSEO、バックリンク、モバイルフレンドリーなサイトの最適化、コンテンツの品質、そしてソーシャルメディアの活用が重要です。これらの対策を適用することで、検索エンジンでの上位表示が可能になります。</p>

SEO対策について

<h2 id="h8d027c8ed3">はじめに</h2><p>Next.jsはReactのフレームワークであり、サーバーサイドレンダリングや静的サイト生成を容易にするために設計されています。Next.jsは、Reactアプリケーションを構築するための多くの一般的な問題を解決するために、多くの機能を提供しています。以下では、Next.jsの主な利点について説明します。<br><br></p><h2 id="he95839922a">サーバーサイドレンダリング</h2><p>Next.jsは、サーバーサイドレンダリングをサポートするために設計されています。これにより、ユーザーがページを読み込むたびに、サーバーからHTMLを取得する必要がなくなり、ページをより速く読み込むことができます。また、SEOの改善や、ユーザーが低速なインターネット接続であってもページを見ることができるようになります。<br><br></p><h2 id="hab1c8b0995">静的サイト生成</h2><p>Next.jsは、静的サイト生成をサポートすることもできます。これにより、ページのコンテンツを静的に生成し、必要に応じて再利用できます。これにより、サイトの速度が向上し、ユーザーがページを読み込むのに必要な時間が短縮されます。<br><br></p><h2 id="h4ce70bc2f9">自動コード分割</h2><p>Next.jsは、自動的にコードを分割することができます。これにより、ページが必要とするコードだけを読み込むことができます。これにより、ページの読み込み時間が短縮され、ユーザーの体験が向上します。<br><br></p><h2 id="hf64c7c1253">ルーティング</h2><p>Next.jsは、ページのルーティングにも役立ちます。ファイルシステムベースのルーティングをサポートするため、ページを作成するための煩わしい設定を行う必要がありません。デフォルトでは、<code>/pages</code>ディレクトリの下にファイルを作成することで、自動的にルートパスが設定されます。<br><br></p><h2 id="h6e8de060d1">APIルート</h2><p>Next.jsは、APIルートを作成することもできます。これにより、サーバーレス関数を使用してAPIエンドポイントを作成し、認証やデータ処理のためのサーバーサイドロジックを実装することができます。<br><br></p><h2 id="h68ca20b497">良好な開発体験</h2><p>Next.jsは、開発者にとっても良い体験を提供します。 Next.jsでは、ファイルの変更を検出して自動的に再ビルドし、ファイルの変更をブラウザでリロードすることができます。また、開発サーバーを使用して、コードをデバッグしたり、アプリケーションをテストしたりすることができます。<br><br></p><h2 id="h0a8bebac79">TypeScriptサポート</h2><p>Next.jsは、TypeScriptをサポートしています。これにより、TypeScriptを使用してアプリケーションを構築することができます。TypeScriptは、コードの品質を向上させ、開発者の生産性を向上させるための強力なツールです。<br><br></p><h2 id="h9024538707">コミュニティ</h2><p>Next.jsは、活発なコミュニティを持っており、多くの有用なツールやパッケージが利用可能です。また、Next.jsの開発者は、コミュニティに積極的に参加しており、フィードバックや質問に迅速に対応しています。<br><br></p><h2 id="ha214098e44">まとめ</h2><p>Next.jsは、Reactアプリケーションを構築するために必要な多くの機能を提供するだけでなく、開発者にとっても優れた開発体験を提供します。ルーティングやAPIルートなど、多くの機能を提供することで、Reactアプリケーションをより速く、よりエレガントに構築することができます。TypeScriptサポートや活発なコミュニティなど、追加の機能があるため、Next.jsはReactアプリケーションの開発において、強力で信頼できる選択肢です。</p>

Next.jsについて

<h2 id="ha697d94822">引数の型指定</h2><p><br></p><pre><code>export const Practice1 = () =&gt; {
&nbsp;const calcTotalFee = (num: number) =&gt; {
&nbsp;&nbsp;const total = num * 1.1;
&nbsp;&nbsp;console.log(total);
&nbsp;};
&nbsp;const onClickPractice = () =&gt; calcTotalFee(1000); // 例：ここで文字列の1000を渡すとエラーになる

&nbsp;return (
&nbsp;&nbsp;&lt;div&gt;
&nbsp;&nbsp;&nbsp;&lt;p&gt;練習問題：引数の型指定&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&lt;button onClick={onClickPractice}&gt;練習問題1を実行&lt;/button&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;);
};</code></pre><p><br></p><h3 id="ha214098e44">まとめ</h3><p>実行する前にエラーを検知できる。<br>関数内で受け取った引数の型によって引き起こされるバグを防げる。<br></p><h2 id="hff00557ee3">返却値の型指定</h2><p><br></p><pre><code>export const Practice2 = () =&gt; {
&nbsp;const getTotalFee = (num: number): number =&gt; {

&nbsp;&nbsp;const total = num * 1.1;
&nbsp;&nbsp;return total;
&nbsp;};
&nbsp;const onClickPractice = () =&gt; console.log(getTotalFee(1000));

&nbsp;return (
&nbsp;&nbsp;&lt;div&gt;
&nbsp;&nbsp;&nbsp;&lt;p&gt;練習問題：返却値の型指定&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&lt;button onClick={onClickPractice}&gt;練習問題2を実行&lt;/button&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;);
};</code></pre><p><br></p><h3 id="ha214098e44">まとめ</h3><p>返却値の型を指定すると、コードの可読性が向上する。<br>後に別の開発者によって関数の改修が行われた際に、指定した型以外の返却値を返すとエラーになるのでリグレッションを防ぎやすい。</p>

TypeScript チュートリアル【引数の型指定&返却値の型指定】

<h2 id="h0068efa9ac">カスタムフック</h2><p><br></p><h3 id="hbec6a76114">カスタムフックとは</h3><ul><li>ただの関数</li><li>hooksの各機能を使用できる</li><li>コンポーネントからロジックを分離していく考え方</li><li>メリットとして使い回しがきく、テストが容易、見通しが良くなる等がある</li><li>自由に作成できる。暗黙のルールでuse~という命名にする</li></ul><p><br></p><h4 id="hd65f06c6a0">./hooks/useAllUsers.ts</h4><pre><code>import axios from "axios";

import { useState } from "react";
import { UserProfile } from "../types/userProfile";
import { User } from "../types/api/user";

// 全ユーザー一覧を取得するカスタムフック
export const useAllUsers = () =&gt; {
&nbsp;const [userProfiles, setUserProfiles] = useState&lt;Array&lt;UserProfile&gt;&gt;([]);
&nbsp;const [loading, setLoading] = useState(false);
&nbsp;const [error, setError] = useState(false);

&nbsp;const getUsers = () =&gt; {
&nbsp;&nbsp;setLoading(true);
&nbsp;&nbsp;setError(false);

&nbsp;&nbsp;axios
&nbsp;&nbsp;&nbsp;.get&lt;Array&lt;User&gt;&gt;("https://jsonplaceholder.typicode.com/users")
&nbsp;&nbsp;&nbsp;.then((res) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;const data = res.data.map((user) =&gt; ({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id: user.id,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: `${user.name}(${user.username})`,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;email: user.email,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;address: `${user.address.city}${user.address.suite}${user.address.street}`
&nbsp;&nbsp;&nbsp;&nbsp;}));
&nbsp;&nbsp;&nbsp;&nbsp;setUserProfiles(data);
&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;.catch((err) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;setError(true);
&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;.finally(() =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;setLoading(false);
&nbsp;&nbsp;&nbsp;});
&nbsp;};

&nbsp;// 他のコンポーネントでカスタムフックで定義したStateや関数が使用できるように、returnで返却する
&nbsp;return { getUsers, userProfiles, loading, error };
};</code></pre><p><br></p><h4 id="h958348edf0">./App.tsx</h4><pre><code>import "./styles.css";

import { UserCard } from "./components/UserCard";
import { useAllUsers } from "./hooks/useAllUsers";

export default function App() {
&nbsp;// カスタムフックを呼び出し、返却値を受け取る
&nbsp;const { getUsers, userProfiles, loading, error } = useAllUsers();
&nbsp;const onClickFetchUser = () =&gt; getUsers();

&nbsp;return (
&nbsp;&nbsp;&lt;div className="App"&gt;
&nbsp;&nbsp;&nbsp;&lt;button onClick={onClickFetchUser}&gt;データ取得&lt;/button&gt;
&nbsp;&nbsp;&nbsp;&lt;br /&gt;
&nbsp;&nbsp;&nbsp;{error ? (
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p style={{ color: "red" }}&gt;データの取得に失敗しました&lt;/p&gt;
&nbsp;&nbsp;&nbsp;) : loading ? (
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Loading...&lt;/p&gt;
&nbsp;&nbsp;&nbsp;) : (
&nbsp;&nbsp;&nbsp;&nbsp;&lt;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{userProfiles.map((user) =&gt; (
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;UserCard key={user.id} user={user} /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;))}
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/&gt;
&nbsp;&nbsp;&nbsp;)}
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;);
}</code></pre><p><br></p><h3 id="ha214098e44">まとめ</h3><p>カスタムフックはhooksというディレクトリを切って管理していくのが一般的である。<br>他のコンポーネントでカスタムフックで定義したStateや関数が使用できるように、returnで返却する。<br>カスタムフックで呼び出したStateはそれぞれのコンポーネントで独立扱いなので、コンポーネント間でStateは競合しない。</p>

React チュートリアル【カスタムフック】

<h2 id="h97f1eb7137"><span style="color:#242424">コンポーネント分割（Atomic Design）</span></h2><h3 id="h1e9f1bc80c"><span style="color:#242424">Atomic Designとは</span></h3><ul><li><span style="color:#242424">画面要素を5段階に分け、組み合わせることでUIを実現</span></li><li><span style="color:#242424">コンポーネント化された要素が画面を構成しているという考え方</span></li><li><span style="color:#242424">React用ではなく、もともとはデザインの考え方</span></li><li><span style="color:#242424">モダンjavascript（コンポーネント）と相性が良い</span></li></ul><p><br><span style="color:#242424">■ATOMS：最小でそれ以上分解できない要素　</span><br><span style="color:#242424">例）ボタン/入力テキストボックス/アイコン 等 |</span><br><br><span style="color:#242424">■MOLECULES：Atomの組み合わせで意味を持つデザインパーツ　</span><br><span style="color:#242424">例）アイコン+メニュー名/プロフィール画像+テキストボックス/アイコンセット 等 |</span><br><br><span style="color:#242424">■ORGANISMS：AtomやMoleculeの組み合わせで構成される、単体である程度の意味を持つ要素群　</span><br><span style="color:#242424">例）入力エリア/サイドメニュー 等 |</span><br><br><span style="color:#242424">■TEMPLATES：ページのレイアウトのみを表現する要素（実際のデータは持たない）　</span><br><span style="color:#242424">例）ヘッダー、サイドメニュー、コンテンツエリア等のレイアウト情報　等 </span><br><br><span style="color:#242424">■PAGES：最終的に表示される1画面　</span><br><span style="color:#242424">例）ページ遷移毎に表示される各画面 |</span><br><br></p><h3 id="ha214098e44"><span style="color:#242424">まとめ</span></h3><p><br></p><h4 id="h5ae2ef9ec6"><strong style="color:#242424">あくまでベース</strong></h4><p><span style="color:#242424">Atomic Designはあくまで概念だと認識し、プロジェクトやチームに合わせてカスタマイズしていく。</span><br><span style="color:#242424">Atomic Designをすることが目的になってはいけない。</span><br><span style="color:#242424">プロジェクトの初期段階でチーム内で取り決めるのがベターである。</span><br><br></p><h4 id="hc921c5bcba"><strong style="color:#242424">はじめから無理して分けない</strong></h4><p><span style="color:#242424">慣れないうちに無理にコンポーネントに分けようとするとしんどい。</span><br><span style="color:#242424">まずは書いて定期的にリファクタリング（コンポーネント分割）する。</span><br><br></p><h4 id="h892bc51ab1"><strong style="color:#242424">要素の関心を意識</strong></h4><p><span style="color:#242424">「何に関心があるコンポーネントなのか」を意識しながら分割したり、Propsを定義したりする。</span></p>

React チュートリアル【コンポーネント分割（Atomic Design）】

<h2 id="h1560e3c524"><span style="color:#242424">ルーティング（React Router）</span></h2><p><br></p><h3 id="h910400ddb4"><span style="color:#242424">./App.jsx</span></h3><pre><code>import { BrowserRouter, Link } from "react-router-dom";

import { Router } from "./router/Router";

import "./styles.css";

export default function App() {
  return (

    &lt;!-- BrowserRouterコンポーネントで囲った範囲でルーティングが有効になる --&gt;
    &lt;BrowserRouter&gt;
      &lt;div className="App"&gt;
        &lt;!-- Linkコンポーネント（HTMLでいうaタグの役割）を使用することで簡単にページ遷移の処理を行うことができる Propsのtoに遷移したいURLのパスを指定する--&gt;
        &lt;Link to="/"&gt;Home&lt;/Link&gt;
        &lt;br /&gt;
        &lt;Link to="/page1"&gt;Page1&lt;/Link&gt;
        &lt;br /&gt;
        &lt;Link to="/page2"&gt;Page2&lt;/Link&gt;
      &lt;/div&gt;
      &lt;Router /&gt;
    &lt;/BrowserRouter&gt;
  );
}</code></pre><p><br></p><h3 id="h9e02f76acd"><span style="color:#242424">./router/Router.jsx</span></h3><pre><code>import { Switch, Route } from "react-router-dom";

import { Home } from "../Home";
import { Page404 } from "../Page404";
import { Page1Routes } from "./Page1Routes";
import { Page2Routes } from "./Page2Routes";

export const Router = () =&gt; {
  return (
    &lt;!-- パス毎に呼び出すコンポーネントを出し分ける場合はSwitchコンポーネントで囲った中でRouteコンポーネントを使用する --&gt;
    &lt;Switch&gt;
      &lt;!-- Propsにexcatを渡すことで、pathに完全一致したものを対象にすることができる --&gt;
      &lt;Route exact path="/"&gt;
        &lt;Home /&gt;
      &lt;/Route&gt;
      &lt;Route
        path="/page1"
        &lt;!--RouteコンポーネントにPropsにrenderを渡すことができる。renderにアロー関数を設定し、その中でコンポーネントを返却するとレンダリングするコンポーネントを指定することができる --&gt;
        &lt;!-- renderはデフォルトでPropsを受け取っている。その中身はルーティングに関する情報を持ったオブジェクトである。プロパティとしてhistory/location/matchのオブジェクトとstaticContextを持っている。例えば、renderオブジェクトの中のmatchオブジェクトのurlプロパティを参照するとURLの相対パスを受け取ることができる --&gt;
        render={({ match: { url } }) =&gt; (

          &lt;!-- Switchは入れ子にできる。この場合、子のRouteコンポーネントpathを親のRouteコンポーネントに指定したpathをルートとした記述とすることができる。 --&gt;
          &lt;Switch&gt;
            &lt;!-- 別ファイルに配列として切り出したパス設定を呼び出してループしてルーティングする事もできる --&gt;
            {Page1Routes.map((route) =&gt; (
              &lt;Route
                key={route.path}
                exact={route.exact}
                path={`${url}${route.path}`}
              &gt;
                {route.children}
              &lt;/Route&gt;
            ))}
          &lt;/Switch&gt;
        )}
      /&gt;
      &lt;Route
        path="/page2"
        render={({ match: { url } }) =&gt; (
          &lt;Switch&gt;
            {Page2Routes.map((route) =&gt; (
              &lt;Route
                key={route.path}
                exact={route.exact}
                path={`${url}${route.path}`}
              &gt;
                {route.children}
              &lt;/Route&gt;
            ))}
          &lt;/Switch&gt;
        )}
      /&gt;
      &lt;!-- 最後にRouteのpath="*"を指定することでどれにも一致しなかった場合のルーティングを設定できる --&gt;
      &lt;Route path="*"&gt;
        &lt;Page404 /&gt;
      &lt;/Route&gt;
    &lt;/Switch&gt;
  );
};</code></pre><p><br></p><h3 id="h3b2d747f6a"><span style="color:#242424">./router/Page1Routes</span></h3><pre><code>import { Page1 } from "../Page1";

import { Page1DetailA } from "../Page1DetailA";
import { Page1DetailB } from "../Page1DetailB";

export const Page1Routes = [
  {
    path: "/",
    exact: true,
    children: &lt;Page1 /&gt;
  },
  {
    path: "/detailA",
    exact: false,
    children: &lt;Page1DetailA /&gt;
  },
  {
    path: "/detailB",
    exact: false,
    children: &lt;Page1DetailB /&gt;
  }
];</code></pre><p><br></p><h3 id="h46f03b629b"><span style="color:#242424">./router/Page2Routes</span></h3><pre><code>import { Page2 } from "../Page2";

import { UrlParameter } from "../UrlParameter";

export const Page2Routes = [
  {
    path: "/",
    exact: true,
    children: &lt;Page2 /&gt;
  },
  {
    path: "/:id", &lt;!-- :の後にURLパラメータ名を指定できる --&gt;
    exact: false,
    children: &lt;UrlParameter /&gt;
  }
];</code></pre><p><br></p><h3 id="h291852eed6"><span style="color:#242424">./UrlParameter.jsx</span></h3><pre><code>import { useParams, useLocation } from "react-router-dom";

export const UrlParameter = () =&gt; {

  // useParamsというHooksを使用することで、URLパラメーターを受け取ることができる
  const { id } = useParams();

  // useLocationというHooksを使用することで、searchとしてURLクエリパラメーターを受け取ることができる
  const { search } = useLocation();
  // javascript標準のURLSearchParams関数に引数としてsearchを渡すことでURLクエリパラメーターを便利に扱える
  const query = new URLSearchParams(search);

  return (
    &lt;div&gt;
      &lt;h1&gt;UrlParameterページです&lt;/h1&gt;
      &lt;p&gt;パラメーターは {id} です&lt;/p&gt;
      &lt;p&gt;クエリパラメーターは {query.get("name")} です&lt;/p&gt;
    &lt;/div&gt;
  );
};</code></pre><p><br></p><h3 id="h934ef95612"><span style="color:#242424">./Page2.jsx</span></h3><pre><code>import { Link } from "react-router-dom";

export const Page2 = () =&gt; {
  return (
    &lt;div&gt;
      &lt;h1&gt;Page2ページです&lt;/h1&gt;
      &lt;Link to="/page2/999"&gt;URL Parameter&lt;/Link&gt;
      &lt;br /&gt;
      &lt;Link to="/page2/999?name=hogehoge"&gt;Query Parameter&lt;/Link&gt;
    &lt;/div&gt;
  );
};</code></pre><p><br></p><h3 id="h878c2cfcf1"><span style="color:#242424">./Page1.jsx</span></h3><pre><code>import { Link, useHistory } from "react-router-dom";

export const Page1 = () =&gt; {
  const arr = [...Array(100).keys()];
  // useHistoryというHooksを使用することで、javascriptを使用しての画面遷移を簡単に扱うことができる
  const history = useHistory();
  // history.pushを使用することで引数に指定したpathに遷移させることができる
  const onClickDetailA = () =&gt; history.push("/page1/detailA");

  return (
    &lt;div&gt;
      &lt;h1&gt;Page1ページです&lt;/h1&gt;
      &lt;!-- Linkコンポーネントのtoの中はオブジェクトを渡すこともできる。--&gt;
      &lt;Link to={{ pathname: "/page1/detailA", state: arr }}&gt;DetailA&lt;/Link&gt;
      &lt;br /&gt;
      &lt;Link to="/page1/detailB"&gt;DetailB&lt;/Link&gt;
      &lt;br /&gt;
      &lt;button onClick={onClickDetailA}&gt;DetailA&lt;/button&gt;
    &lt;/div&gt;
  );
};</code></pre><p><br></p><h3 id="ha0f49f6af6"><span style="color:#242424">./Page1DetailA.jsx</span></h3><pre><code>import { useLocation, useHistory } from "react-router-dom";

export const Page1DetailA = () =&gt; {
  // useLocationでstateとして任意の変数を受けることもできる
  const { state } = useLocation();
  // useHistoryというHooksを使用することで、javascriptを使用しての画面遷移を簡単に扱うことができる
  const history = useHistory();
  // history.goBackを使用することで前画面に遷移させることができる（ブラウザのバックボタンを同様の挙動）
  const onClickBack = () =&gt; history.goBack();
  console.log(state);

  return (
    &lt;div&gt;
      &lt;h1&gt;Page1DetailAページです&lt;/h1&gt;
      &lt;button onClick={onClickBack}&gt;戻る&lt;/button&gt;
    &lt;/div&gt;
  );
};</code></pre><p><br></p><h3 id="ha214098e44"><span style="color:#242424">まとめ</span></h3><p><span style="color:#242424">BrowserRouterコンポーネントで囲った範囲でルーティングが有効になる。</span><br><span style="color:#242424">パス毎に呼び出すコンポーネントを出し分ける場合はSwitchコンポーネントで囲った中でRouteコンポーネントを使用する。</span><br><span style="color:#242424">RouteコンポーネントのPropsにexcatを渡すことで、pathに完全一致したものを対象にすることができる。</span><br><span style="color:#242424">RouteコンポーネントにPropsにrenderを渡すことができる。renderにアロー関数を設定し、その中でコンポーネントを返却するとレンダリングするコンポーネントを指定することができる。</span><br><span style="color:#242424">renderはデフォルトでPropsを受け取っている。その中身はルーティングに関する情報を持ったオブジェクトである。プロパティとしてhistory/location/matchのオブジェクトとstaticContextを持っている。例えば、renderオブジェクトの中のmatchオブジェクトのurlプロパティを参照するとURLの相対パスを受け取ることができる。</span><br><span style="color:#242424">Switchは入れ子にできる。この場合、子のRouteコンポーネントpathを親のRouteコンポーネントに指定したpathをルートとした記述とすることができる。</span><br><span style="color:#242424">別ファイルに配列として切り出したパス設定を呼び出してループしてルーティングする事もできる。</span><br><span style="color:#242424">useParamsというHooksを使用することで、URLパラメーターを受け取ることができる。</span><br><span style="color:#242424">useLocationというHooksを使用することで、searchとしてURLクエリパラメーターを受け取ることができる。</span><br><span style="color:#242424">useHistoryというHooksを使用することで、javascriptを使用しての画面遷移を簡単に扱うことができる。</span></p>

React チュートリアル【ルーティング（React Router）】

<h2 id="hd3594f109c"><span style="color:#242424">レンダリングの最適化（memo/useCallBack/useMemo）</span></h2><h3 id="h59b94e0cf0"><span style="color:#242424">memo</span></h3><p><span style="color:#242424">./ChildArea.jsx</span><br></p><pre><code>import { memo } from "react";

const style = {
  width: "100%",
  height: "200px",
  backgroundColor: "khaki"
};
// memo()でコンポーネント自体（アロー関数）を囲うことで、propsが変更されない限り再レンダリングさせないことができる
export const ChildArea = memo((props) =&gt; {
  const { open, onClickClose } = props;
  const data = [...Array(2000).keys()];
  // 2000件の配列をループで回してコンソールログを出力する（ChildAreaコンポーネントのレンダリングの度に走る重い処理）
  data.forEach(() =&gt; {
    console.log("...");
  });
  console.log("ChildAreaがレンダリングされた！");

  return (
    &lt;&gt;
      {open ? (
        &lt;div style={style}&gt;
          &lt;p&gt;子コンポーネント&lt;/p&gt;
          &lt;button onClick={onClickClose}&gt;閉じる&lt;/button&gt;
        &lt;/div&gt;
      ) : null}
    &lt;/&gt;
  );
});</code></pre><p><br></p><h3 id="h9204a37fb9"><span style="color:#242424">useCallBack</span></h3><p><br></p><pre><code>import { useState, useCallback, useMemo } from "react";

import { ChildArea } from "../ChildArea";
import "./styles.css";

export default function App() {
  console.log("App");
  const [text, setText] = useState("");
  const [open, setOpen] = useState(false);
  const onChangeText = (e) =&gt; setText(e.target.value);
  const onClickOpen = () =&gt; setOpen(!open);

  /** 関数の処理が変わらない場合は、同じものを使い回させたいのでuseCallBackで囲ってあげる
   *  useCallBackは第一引数に関数、第二引数に依存配列を受け取る
   *  第二引数に空配列を指定すると、初回レンダリングに生成された関数を使い回す
   *  第二引数に変数を指定すると、その変数に変更があった場合のみ関数を再生成する
   */
  const onClickClose = useCallback(() =&gt; setOpen(false), [setOpen]);
  const temp = useMemo(() =&gt; 1 + 3, []);
  console.log(temp);

  return (
    &lt;div className="App"&gt;
      &lt;input value={text} onChange={onChangeText} /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;button onClick={onClickOpen}&gt;表示&lt;/button&gt;
      // &lt;子コンポーネントのPropsにアロー関数を渡す時、子コンポーネント側で毎回新しい関数を生成していると判断される（関数を普通に渡すだけだと、子コンポーネントをmemo化していてもPropsが変更されたと判断されるので子コンポーネントの再レンダリングが走ってしまう）
      &lt;ChildArea open={open} onClickClose={onClickClose} /&gt;
    &lt;/div&gt;
  );
}</code></pre><p><br></p><h3 id="h692f02ca4c"><span style="color:#242424">useMemo</span></h3><p><br></p><pre><code>import { useState, useCallback, useMemo } from "react";
import { ChildArea } from "../ChildArea";

import "./styles.css";

export default function App() {
  console.log("App");
  const [text, setText] = useState("");
  const [open, setOpen] = useState(false);
  const onChangeText = (e) =&gt; setText(e.target.value);
  const onClickOpen = () =&gt; setOpen(!open);
  const onClickClose = useCallback(() =&gt; setOpen(false), [setOpen]);
  /** 変数自体のメモ化をuseMemoで行うことができる
   *  useMemoは第一引数に関数、第二引数に依存配列を受け取る
   *  第二引数に空配列を指定すると、初回レンダリングに生成された変数を使い回す
   *  第二引数に変数を指定すると、その変数に変更があった場合のみ変数を再生成する
   */
  const temp = useMemo(() =&gt; 1 + 3, []);
  console.log(temp);

  return (
    &lt;div className="App"&gt;
      &lt;input value={text} onChange={onChangeText} /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;button onClick={onClickOpen}&gt;表示&lt;/button&gt;
      &lt;ChildArea open={open} onClickClose={onClickClose} /&gt;
    &lt;/div&gt;
  );
}</code></pre><p><br></p><h3 id="ha214098e44"><span style="color:#242424">まとめ</span></h3><p><span style="color:#242424">基本的に、複数の要素から成り立っているコンポーネントや、今後肥大化が予想されるコンポーネントはmemo()で囲ってあげる。</span><br><span style="color:#242424">関数の処理が変わらない場合は、同じものを使い回させたいので関数全体をuseCallBackで囲ってあげる。</span><br><span style="color:#242424">Propsに関数を受け取るコンポーネントの再レンダリングを最適化する場合は、コンポーネントのmemo化と関数定義にuseCallBackを設定することをセットとする。</span><br><span style="color:#242424">変数自体のメモ化をuseMemoで行うことができる。</span><br><span style="color:#242424">そこまで使う機会はないが、変数に設定する中の処理が複雑になっている時などのケースでは有効である。</span></p>

記事一覧