EY-Office ブログ

ゼロから作るDeep Learning ❷を読んで頭が爆発した + Viteを使ったReactアプリの環境変数

今回は軽い記事を2つ書きます。1つ目は、いまさらながら『ゼロから作るDeep Learning』を読んだに続きゼロから作るDeep Learning ❷―自然言語処理編を読んだ感想を書きます。

2つ目は、Reactアプリ内で環境変数を使う方法が以前の標準Create React Appと最近の流行Viteを使った開発環境では互換性がないことが判ったので書いておきます。

ゼロから作るDeep Learning ❷

ゼロから作るDeep Learning ❷―自然言語処理編の感想

空前のChatGPTブームですが、ChatGPTのエンジンであるGPTは文章を生成する自然言語処理のAIです。
この書籍は自然言語をコンピュターで扱いやすい数値ベクトルに変換できるWord2vecを学んだ後で、GPT以前はさかんに研究され実用化されていたRNN (Recurrent neural network)を学びます。

RNNは前の本で取り上げていたCNNが画像を入力して猫や犬の画像である確率を答えるシンプルなディープラーニングですが(と言っても簡単ではありませんが)、
RNNは文書のような単語がたくさん並んだデータを相手にするので、人間が本を読むとき脳内に文章の概要を記憶しながら読み進むように、RNNには記憶するレイヤーを持つのが特徴です。 また記憶がある故に起きる問題点を補った、LSTMが発明されました。

今回は前の本のようにコードを眺め・実行したりせず、文書を読み、式を理解し、図を眺めながら読み進んで行きましたが、このへんで数学力が限界に達してしまい、頭が爆発しました。

🤯 🤯 🤯 🤯 🤯 🤯 🤯 🤯 🤯 🤯

その後の2つのニューラルネットワークを使い、入力側のEncoder(英和翻訳であれば英語文章解釈の処理)と出力側のDecoder(英和翻訳であれば日本語文章組み立の処理)を接続したSeq2seqや、データに注目度(重要度)のレイヤーAttentionは、文書を読む程度で流してしまいました。

ただし、この本を読むことで憧れのChatGPTに少し近づけた気がします。自然言語処理の基本や、過去に発明されてきた数々の発明の原理に触れる事ができました。

その後Seq2seqやAttentionに付いては、ディープラーニング系YouTubeを見て復習しました。私には初期の学習は書籍、その復習にはYouTubeが良いかなと感じました。

Viteを使ったReactアプリの環境変数

小ネタなので追加で書きます、Create React Appで作ったアプリをViteで動かしたとき、Uncaught ReferenceError: process is not definedというエラーが発生しました。
調べて行くとCreate React Appで作ったアプリ内で環境変数をアクセスする部分はVite環境では互換性がない事が判りました。

Create React Appで作られたアプリから環境変数をアクセスする方法

  • App.tsx

環境変数の取得はnode.js同様にprocess.envオブジェクトを使います。

function App() {
  const ServerUrl = process.env.REACT_APP_SERVER_URL;

  ...

}
  • .env

ただし、環境変数名はREACT_APP_から始めないといけません。

REACT_APP_SERVER_URL=https://backend.com/api

Viteで作られたアプリから環境変数をアクセスする方法

  • App.tsx

環境変数の取得はimport.meta.envオブジェクトを使います。→ドキュメント

function App() {
  const ServerUrl = process.env.VITE_SERVER_URL;

  ...

}
  • .env

ただし、環境変数名はVITE_から始めないといけません。

VITE_SERVER_URL=https://backend.com/api

以上。

- about -

EY-Office代表取締役
・プログラマー
吉田裕美の
開発者向けブログ