Gumi-nikky

勉強したことのメモ書きと日記。

Reactの勉強1

React Hooks

useEffect

useEffect(() => {
  /* 第1引数には実行させたい副作用関数を記述*/
  console.log('副作用関数が実行されました！')
},[依存する変数の配列]) // 第2引数には副作用関数の実行タイミングを制御する依存データを記述

Reactのレンダリングまで関数の処理を遅らせる。

useRef

const refObject = useRef(initialValue)

//例
const number = useRef(100);
console.log(number.current); // 100

useRefで生成したオブジェクトは親classがアンロードされるまで同一オブジェクトを扱う。

useState

//const [状態変数, 状態を変更するための関数] = useState(状態の初期値);
const [count, setCount] = useState(initialState)

// ちなみにクラスコンポーネントでは、、、
this.state = {
  count: initialState
}

initialstateが初期値で、初回レンダー時にstateが代入される。setstate関数を格納し、stateを更新する。

i18next

useTranslation

import React from 'react';
import { useTranslation } from 'react-i18next';
 
export const TestComponent = () => {
  const { t } = useTranslation();
  return <div>{t('test.message')}</div>;
}

内にreact-i18next経由で取得した文字列(翻訳された文字列)を表示する。 メッセージキーをtに渡すことで、jsonファイルに定義されたメッセージが返却される。

VSCodeでNode.jsとJavascript、Typescriptを始める


他環境で同じ物を作るための備忘録として。

資材の用意

以下のものをインストールしておきます。

すべて最新バージョンでOK。インストールも推奨構成です。

Node.jsの確認

VSCodeのターミナルを開き、Node.jsのバージョンを確認。

$ node -v 
v16.14.0

$ npm -v
8.3.1

$ npx -v
8.3.1

以下のサンプルコードを走らせます。

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
$ node hello-world.js 
Server running at http://127.0.0.1:3000/

localhost:3000に接続するとHello,World!と表示されます。

Typescript環境の導入

Gitコンソールで以下を実行します。

npm install typescript ts-loader webpack webpack-cli webpack-dev-server --save-dev
名称 説明
typescript TypeScriptコンパイラ
ts-loader TypeScript用のローダー。Webpackと連動してTypeScriptコンパイラを動作させる
webpack JavaScript用のビルドツール
webpack-cli コマンドプロンプトからWebpackを動作させるためのツール。
webpack-dev-server Webpackのビルド、開発用Webサーバー、ソースコードの変更検知、ブラウザの自動リロードを一括して提供するサーバー

package.jsonファイルに以下を追記します。

"scripts": {
    "build": "webpack --mode=development",
    "start": "webpack serve --mode=development"
  }

Apache Kafkaについて齧る

メッセージキュー

Apache Kafka

主な内容はRedHat社のドキュメント(Apache Kafka：基本的な 10 の用語と概念について (redhat.com))から読み解きます。

概要

Apache Kafka(以後Kafka)はOSSの分散型イベントストリーミングプラットフォーム、またはメッセージキューです。非同期通信システムの一種で、複数システムを疎結合で連携する場合や、ストリーミング処理が必要なサービスのバッファーとして利用されます。

kafkaのメッセージキューシステムは3つの役割から構成されます。

  • Producer:メッセージの発行元、Publisherとも書きます。
  • Broker:Publisherからのメッセージを保管し、Consumerからのリクエストに応じてメッセージの配信を行う非同期型メッセージキューイングを行う。
  • Consumer:メッセージの受信・購読先。Subscriberとも書きます。

https://qiita.com/sigmalist/items/5a26ab519cbdf1e07af3　より引用。

Kafkaは分散型MQシステムなので、Brokerもクラスタ構成になります。

処理の流れ

Producerから発行されたメッセージはBrokerクラスタ内でTopicという分散キューを構成します。このTopicはBrokerではなくProducerによってクラスタに分散配置されているPartitionに分配され、key-value形式でRecordとして保存されます。Consumerは受信するTopicに応じてBrokerに問い合わせを行い、Partitionそれぞれから受信します。kafkaは高速化とクラスタリングに優れたプラットフォームで、MQTT等の標準プロトコルではなく独自プロトコルによって分散配信と受信を行い、高速化を実現しています。

クラスタリング

それぞれのTopicは複数のPartitionに分かれています。Partition内ではLeader ReplicaとFollower Replicaとなるクラスターが1:Nの構造で存在し、Partition毎にどのクラスターがLeader Replicaであるかが異なります。ノードがダウンした際には適宜Follower ReplicaがLeaderに昇格する事でクラスタを保ちます。

このTopic-Partitionの割り当て管理を行うのがApache Kafka - ZooKeeperです。

 

参考:

1:Apache Kafkaの概要とアーキテクチャ - Qiita

2:Apache Kafka：基本的な 10 の用語と概念について (redhat.com)

3:Kafkaを利用した分散処理について (パーティション機能の座学) - Qiita