無限大な夢のあと

テニスとアニメが大好きな厨二病SEのブログ

【書評】これからはじめるReact実践入門 コンポーネントの基本からNext.jsによるアプリ開発まで( @yyamada ) 

今回もWINGSプロジェクトの書籍レビュアーに応募し、献本してもらったので、書評を書きました。
WINGSプロジェクトの皆様、著者の山田様ありがとうございます。
今回は表題の書籍を献本していただきましたので、こちらのレビューをさせていただきます。

要約

今までReact以外のJavaScriptフレームワークを使っていて、Reactを使うことになった人には必携の1冊。辞書的にも使いたい。

既にReactの経験がある方、あるいはプロジェクトで経験した特定の書き方しか知らない方にも書籍全体で見ると新しい気づきを得られる1冊となっています。

導入/私の前提知識

書評の書き手の技術レベルを読み手も把握できた方が良いと思うので簡単に記載します。端的にいうと、主戦場/強みはWebフロントではないが、フルスタックエンジニアとして開発には加わることができて、技術選定もできるかなのレベル感です。

私のJavaScript(TypeScriptの経験を含む)の直近5年の経験は以下になります。

  • React/TypeScriptを用いて、toC向けの画面/管理を作成して、実際のサービス運用。
  • GraphQLをプロジェクトで導入し、Apolloなどを実践投入。
  • 他の書籍の書評を通して、個人開発でReact/Vue3/ReactNativeなどで簡単なアプリを作成。

私自身、実務でのReactでのプロジェクト経験は前職の1プロジェクトのみで、今の現場ではモバイルアプリとバックエンドを中心に開発しております。
その中で、社内ではReactで作るプロジェクトも増えており、以下の書籍を会社のメンバーで輪読を行なっております。

また、前職でもいきなりReactをやることになったものの、基礎が分からず、以下の書籍を読んだりして理解が怪しかった点を補足して開発しておりました。

書評

ここから書籍の具体的な内容の書評に入らせていただきます。
端的にいうと、自分ではRactで調べながら開発できるものの、より良いベストプラクティスやメンバーなどから質問を深掘りされた時に答えられなかったもの/理解できなかったものが、この書籍をパラパラと読むと2023年時点では説明できることができそうというところです。

具体的に全部に目を通した中で、良いトピックや知らなかった話を取り扱っているところを簡単にリスト化します。

  • Note: manifest.json
  • P91 補足: コンポーネントの更新タイミング
  • 3-3-4 プロパティ型の検証(PropTypes)
  • 4-3 React Hook Form(Yup含む)
  • 5-1-1 Suspentコンポーネント
  • 5-3-2 Error Boundary
  • 6-1 MUI
  • 6-3 React Query
  • 7-5 Recoil
  • 7-6 memo/userMemo/userCallback
  • 7-7 useTransition
  • 7-8 フックの自作
  • Chapter8 ルーティング
  • Chapter9 テスト
  • 10-2-5 関数コンポーネントの型定義
  • Note Void Function Componet
  • Chapter11 Next.js(サンプルコードがある点やAppRouter)

上記で挙げたようなところから他に細かい点であったり、MUIやJestなどのところをコードレビューする時に公式リファレンス見れば速いが、サクッと確認したい時はこの書籍のまとめてあるところだけ確認すれば良い場面もありそうだなと思いました。
また、読む前にReduxの説明があるだろうなーと思って読んでいたらRecoilが出てきたのはかなりイけていると思いました。
加えて、バックエンド出身者やジュニアの方はメモ化を知らない人が多く、その上でmemo/userMemoも記載されていたのは良かったと思いました。

逆に、おそらく他の人も書いているとは思いますが、2023時点で見ると以下は直近の流れに反していて、これをバイブルとする人がいたら混乱しそうだと思いました。

  • CreateReactAppを使っていること(今ならVite一択ではないか?)

zenn.dev
zenn.dev

おそらく執筆期間が長かったこともあり、ここら辺は入れ込めなかったのかなと推察します。

また、書籍の売れ筋にも影響するのかもしれませんが、全てTypeScript前提で書いてもらえると嬉しかったです。
説明を埋めることで書籍のページ数も圧縮できて、泣く泣く入れられなかったであろう内容も詰め込めたのではないかと思い、そこら辺は残念でした。
今回の書籍の形式だと難しいとは思いますが、以前以下のAndroidの書籍のレビューに参加させていただいた時に、Kotlin前提なら良かったとレビューを記載させてもらった際に、次の版からJava版に加えてKotlin版が発売されるようになったので、そこも期待しての記載となります。


以上、簡単ではございますが書評のレビューとさせていただきます。

Streamlit + Voicevox + OpenAIのAPIで、大喜利のお題にAIが答えてくれるアプリ

9月に卒業したAIIT(社会人大学院)の授業の中で、雑に作ったコードがあり、そちらを供養。

Streamlit を初めて使ったんですが、プロトタイプを簡単に作るのは結構便利でした。
Streamlit documentation


他の方の説明しているブログなど。
www.alpha.co.jp

書籍も出ているみたいですね。


一旦、自分の書いたコードはこんな感じです。
授業の縛りでPythonでしたが、今後こういう系はM1Chipで動くようになったMojoとかでトライしてみたいところ。

import subprocess
import streamlit as st
import openai
import asyncio

# 話者とIDの対応辞書
speakers = {
    "四国めたん": {
        "ノーマル": 2,
        "あまあま": 0,
        "ツンツン": 6,
        "セクシー": 4
    },
    "ずんだもん": {
        "ノーマル": 3,
        "あまあま": 1,
        "ツンツン": 7,
        "セクシー": 5
    },
    "春日部つむぎ": {
        "ノーマル": 8
    },
    "雨晴はう": {
        "ノーマル": 10
    },
    "波音リツ": {
        "ノーマル": 9
    },
    "玄野武宏": {
        "ノーマル": 11
    },
    "白上虎太郎": {
        "ノーマル": 12
    },
    "青山龍星": {
        "ノーマル": 13
    },
    "冥鳴ひまり": {
        "ノーマル": 14
    },
    "九州そら": {
        "ノーマル": 16,
        "あまあま": 15,
        "ツンツン": 18,
        "セクシー": 17,
        "ささやき": 19
    }
}


def get_chat_ai_answer(text_input):
    # ChatGPT APIのトークン読み込み/GPT-3.5 TurboのAPIキーを設定
    openai.api_key = st.secrets["chatgpt_api_key"]
    # ChatGPTによるテキスト生成
    messages = [{"role": "user", "content": text_input + "という大喜利に答えて。10文字以上50文字以内で答えよ"}]
    completion = openai.ChatCompletion.create(model="gpt-3.5-turbo", messages=messages)
    response_data = completion["choices"][0]["message"]["content"].strip()
    # テキストをファイルに書き出す
    with open("text.txt", "w", encoding="utf-8") as f:
        f.write(response_data)
    return response_data


def generate_image(prompt):
    # 画像生成のAPIを呼び出して画像を生成する
    response = openai.Image.create(prompt=prompt, n=1, size="512x512")
    image_url = response["data"][0]["url"]
    return image_url


async def get_audio_query(speaker_id):
    # audio_queryコマンドを実行
    audio_query_cmd = f'curl -s -X POST "localhost:50021/audio_query?speaker={speaker_id}" --get --data-urlencode ' \
                      f'text@text.txt > query.json '
    subprocess.run(audio_query_cmd, shell=True, check=True)

    # synthesisコマンドを実行
    synthesis_cmd = f'curl -s -H "Content-Type: application/json" -X POST -d @query.json ' \
                    f'"localhost:50021/synthesis?speaker={speaker_id}" '
    response = subprocess.run(synthesis_cmd, shell=True, check=True, capture_output=True)

    # 音声をファイルに保存する
    with open("audio.wav", "wb") as file:
        file.write(response.stdout)


def main():
    # Streamlitアプリのタイトルとテキスト入力
    st.title("大喜利のお題にAIが答えてくれるアプリ")
    text_input = st.text_area("大喜利のお題入力欄", value="", key="text_input",
                              placeholder="ex) AIITで3ヶ月に1度しか提供されない学食のメニューとは")

    # 話者を選択するドロップダウンメニュー
    selected_speaker = st.selectbox("お題に答えてくれる人", list(speakers.keys()))

    if st.button("AIが回答して、イメージ画像が出るよ", key="generate_button"):  # keyを追加
        response_data = get_chat_ai_answer(text_input)

        # 画像を生成する
        st.spinner("画像生成中...")
        image_url = generate_image(response_data + "という返答のイメージ画像")
        st.success("画像生成が完了しました!")
        st.image(image_url, caption="Generated Image", use_column_width=True)

        # 非同期処理を実行する
        st.spinner("音声生成中...")
        speaker_id = speakers[selected_speaker]["ノーマル"]
        asyncio.run(get_audio_query(speaker_id))
        st.success("音声生成が完了しました!")
        st.audio("audio.wav", format="audio/wav")

        st.write("Response Data:", response_data)  # 追加


if __name__ == "__main__":
    main()

Prolog入門 #1 #AIIT #インテリジェンス特論 #Prolog

この記事を読んだら知れること

  1. Web上での実行ツールの紹介(SWISH)
  2. MacでのPrologのダウンロード方法
  3. VSCodeでの環境構築
  4. SWI-Prologでのプログラムの実行方法
  5. 最初に見てみると良さそうな動画

記事の背景

以下のURLのAIITという社会人大学院に通っていて、授業の中でPrologを扱う回があり、初めてPrologを触るということで備忘録も含めて実行方法などをまとめます。
aiit.ac.jp

Web上での実行ツールの紹介(SWISH)

以下のWeb上のSWISHというツールで、Create a [Program]を選択するとプログラムを記述できるようになります。
SWISH -- SWI-Prolog for SHaring

Mac M1環境でのPrologのダウンロード方法

Prologはいろんな処理系があるらしいのですが、今回は SWI Prolog を使用します。

brew install swi-prolog

VSCodeでの環境構築

以下のプラグインVSCodeに入れると開発が楽になると思います。
marketplace.visualstudio.com

SWI-Prologでのプログラムの実行方法

簡単に試せる実行方法は2つあり、簡単に紹介します。
ルールの読み込みはファイル読み込みでの実行しかできないように見えますが、通常実行している途中でファイル読み込みもできます。

  1. 通常実行
 swipl # 
?-  write(hello).
hello
true.
# ファイル読み込みで、ファイル名の指定を行いそのファイル内のルールを読み込む
[square].
true.
?- square(2, 3).
false.

# control + D で終了
  1. ファイル読み込み(ルール読み込み)の実行
 swipl square.pl

?- square(2, 3).
false.

?- square(2, 4).
true.

?- square(X, 4).
ERROR: Arguments are not sufficiently instantiated
ERROR: In:
ERROR:   [11] 4 is _26776*_26778
ERROR:    [9] toplevel_call(user:user: ...) at /usr/local/Cellar/swi-prolog/9.0.4/libexec/lib/swipl/boot/toplevel.pl:1173
ERROR: 
ERROR: Note: some frames are missing due to last-call optimization.
ERROR: Re-run your program in debug mode (:- debug.) to get more detail.
?- square(3, Y).
Y = 9.

# control + D で終了

square.pl自体の中身はこちらです。

square(X, Y) :- Y is X * X.

最初に見てみると良さそうな動画

AIITのインテリジェンス特論という授業を紹介したいところですが、入学あるいは科目履修生にならないとこちらを参照できないため、YoutubePrologの紹介をしていた以下のYoutubeの動画が概要も含めてより掴みやすいと思ったので、紹介です。
www.youtube.com

こちらの大学の授業で取り扱われていそうですね。
人工知能の基礎(全15回)

参考ブログ

qiita.com

【書評】改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで( @yyamada ) 

今回もWINGSプロジェクトの書籍レビュアーに応募し、献本してもらったので、書評を書きました。
WINGSプロジェクトの皆様、著者の山田様ありがとうございます。
今回は表題の書籍を献本していただきましたので、こちらのレビューをさせていただきます。

要約

初心者には「JavaScriptの最初の必携の1冊」

現場でTypeScirtptで開発している人には「TypeScriptには導入されていた文法の機能が、現状のJavaScriptでどこまで扱えるようになっているかが把握できるリファレンスとしても使える書籍」

導入

こちらの書籍ですが、個人的にはかなり思い入れがあり、初版がJavaScriptを学んだ一番最初の書籍でした。

また、2016年(もう7年前?)にも第2版の際にもレビューをさせていただ、その際にも知識をアップデートできた認識でした。
dke-msy-node.hatenablog.com

そこから私もエンジニアのキャリアを7年重ねてきましたが、自分の原点ということもあり改めて今回の第3版についてレビューに参加させていただいております。

書き手の技術レベルを読み手も把握できた方が良いと思うのでm私のJavaScript(TypeScriptの経験を含む)の直近2-3年の経験は以下になります。

  • React/TypeScriptを用いて、toC向けの画面/管理を作成して、実際のサービス運用。
  • GraphQLをプロジェクトで導入し、Apolloなどを実践投入。
  • 他の書籍の書評を通して、個人開発でReact/Vue3/ReactNativeなどで簡単なアプリを作成。

書評

ここから書籍の具体的な内容の書評に入らせていただきます。
端的にいうと、事前知識がある程度ある前提の私のような人が読むと、「TypeScriptには導入されていた文法の機能が、現状のJavaScriptでどこまで扱えるようになっているかが把握できるリファレンスとしても使える書籍」という認識です。
もちろん、もう初学者の視点には戻れないですが、自分がJavaScript初学者の時の内容からさらにボリュームアップしていることも考えると、「JavaScriptの最初の必携の1冊」と言えると思います。

具体的に全部に目を通した中で気になった点の3つを紹介していきます。

  • ES2020、ES2021、ES2022の記法を追加された箇所にマークが付いていて、分かりやすい。(第2版と同様)
  • トレンドを押さえていて、現場的に必要な知識も含まれている。
  • 丁寧な説明により、初学者に説明するのに説明しやすい。

ES2020、ES2021、ES2022の記法を追加された箇所にマークが付いていて、分かりやすい。(第2版と同様)

bigint、数値セパレータ、&&=、||=、??=、??などが型や演算子があるんだなと知ることができました。
??などTypeScriptなどにもあるんですが、&&=、||=、??=なんてあるんですね。
www.typescriptlang.org
ES2022で導入されたクラスのプロパティ構文や静的イニシャライザ、プライベートメンバーなども把握できていなかったです。

トレンドを押さえていて、現場的に必要な知識も含まれている。

2版の時に比べてエディタでこうとあまり記載がなかった記憶なのですが、今回は最近の流行に合わせてVSCodeについてのTIPSがコラムに載っていたりしてより現場に即した感じで実務に近い人が書籍を書いていると思いました。
Chapter11でも現場で避けれて通れない知識として、Node.jsに加えて、JestやVite、ESlint、JSDocまで紹介していてJavaScript初心者がこれを読んだ時のとっかかりとしても使えそうな側面で記載されているのは新しく生まれてくるJavaScriptのエンジニアたちにも良い影響も与えるなと思っています。
記憶が正しければ、UTのFWは前回の書籍の記載はJestではなかった気がします(Jasmineだったはず?)し、前回はBabelが載っていて今回はViteが載ったと思うので、そこも流行を押さえていてとても良いと思います。
Viteは触ったことなかったので、勉強させていただきました。

丁寧な説明により、初学者に説明するのに説明しやすい。

JavaScriptの基礎的なトピックの説明もあり、図も活用されてわかりやすいので、プログラミング初心者(うちだと妻)に説明するにも理解してもらいやすい書籍になっています。
DOMのセレクタやイベントオブジェクトも表のに記載されて一覧で見れるのわかりやすいなと思っています。
また第2版にもあったかもしれませんが、ジェネレータやーPorxyオブジェクトなど、自分もあまり活用できていないかったトピックでも説明がわかりやすいなと思いました。

以上、簡単ではございますが書評のレビューとさせていただきます。

【追加トピック】この書籍の後に一歩進んで現場で必要な知識を学ぶための道標

書評からは少し外れるのですが、実際に現場で必要な知識として自分が参考にした書籍を並べていきます。
JavaScriptに関しては古い書籍も混ざるのですが、良い書籍ばかりです。
TypeScript、React/Next、Vueは最近の書籍でより参考になると思います。

JavaScript

次へのステップアップとして、関数型を学ぶという観点でここら辺の書籍はおすすめです。ES2015だったりそれより昔の内容になりますが、ベースの知識は変わらないのでおすすめです。

より上級者向けで、関数型を学ぶという観点でここら辺の書籍はおすすめです。難しい内容ですが、継続の話まで出ている珍しい書籍です。

ここら辺の書籍は少し前の書籍ですが、参考になる内容が多いです。Node.jsなどが流行った時期に一気に出版されたJavaScriptの書籍群ですね。

TypeScript

TypeScriptの特徴をサクッと押さえるのに使いました。構造的部分型のところなどをこの書籍でインプットできた思い出があります。今はちょっと古いかなと思います。
この書籍の後は現場で叩き上げで学びました。
レビューはこちらに記載しています。
dke-msy-node.hatenablog.com

React/Next

Reactの特徴をサクッと押さえるのに使いました。今はちょっと古いかなと思います。
レビューはこちらに記載しています。
dke-msy-node.hatenablog.com

現在、Reactを使うなら絶対に読んでおくべきです。
雰囲気でReactを使っている人は必読です。2版まで出ているので、2版の方を買うようにしましょう。Hooksの話を始め、関数型のエッセンスも前半に詰まっています。

Nextを使う際に参考にしました。

Vue

Vue3を押さえていて、とても参考になります。
レビューもこちらに記載しています。
dke-msy-node.hatenablog.com

【書評】Pythonでできる! 株価データ分析 ( @yyamada )

WINGSプロジェクトの書籍レビュアーに応募し、献本してもらったので、書評を書きました。
今回は表題にある通り「Pythonでできる! 株価データ分析」の書評となります。

自分は米国株持っていたり、iDeCoなどをやっているのですが、なんとなくでしか銘柄を選べていませんでした。
ずっと何かしたらの機会に勉強したいと思っていて、今回良い機会だったのでレビュー応募させていただきました。

早速、レビューに入ります。

TL;DR

端的にいうと、PythonでColabratoryなどでデータ分析の経験がある人が読むと、実際に株価のデータ分析ができるようになる書籍だと思いました。

早速より詳細についても話していきます。

前提としての自分の実務経験や知識など

私の今回の書籍に関係するところで考えると、 Python/Google Colabratoryによるデータ分析の経験があたると思い、該当するのはAIITという社会人大学院の授業で経験したのみで初心者に毛が生えた程度です。
プログラミング自体の経験は実務で10年以上ありますが、Pythonではちょっとしたスクリプトの修正レベルでほぼ実務経験がないです。
株価データ分析などもほぼ知識がないです。

書籍を読んだ率直な感想

章ごとに微妙に印象が違いますので、簡単にまとめます。全般的にはコラムが面白くて休憩時に読んでいました。

1章 株価分析を始める準備
2章 株価のデータ構造
3章 株価データの可視化
  • Python/Google Colabratoryで分析がやったことがあれば、株価分析特有の専門用語(ローソク足チャートやストップ高)などは記憶できるレベルまでしか出てこないので、スムーズに読めます。
  • 実際の銘柄に当てはめてGoogle Colabratoryでもサクッと動かせました。
4章 株価の方向性
5章 株価のトレンド変換
  • ここら辺から専門用語が一気に増えてきます。
  • トレンドなどは大丈夫だったのですが、特にテクニカル指標に入ってからは簡単に頭には入ってこず、何度か戻って確認しました。
  • MACDで一度お腹いっぱいになりました。
6章 株価のトレンド分析
  • 相場の加熱度について学びつつ、RSI、ストキャスティクスなどを同時に表示したり、ひとまず手を動かしました。
  • 実例でテクニカル指標の仕様通りの動きに連動している例は感動しました。
7章 インタラクティブな可視化
8章 よく利用される売買戦略
9章 売買のシミュレーション
  • 高度なグラフを描画できるPlotyなどの例もあり参考になりました。
  • 売買戦略などの実例も参考になりました(完全にまだ覚えられていないですが)
  • 実際に自分が株を選定するために必要なバックテストの例もイメージが湧きました。

良かった点

専門用語もどんどん説明しつつ、実際の株を選定するために必要な情報が詰まっている気がしました。
単純にテクニカル分析の内容を説明するだけでなく、それをPythonで自分で構築することで細かいチューニングができそうだと思いました。
おそらくはこういう専用のツールが世の中にあるとは思いますが、細かいところに手が届かないみたいなところをカバーできるのだろうと思いました。

悪かった点

特段なかったのですが、強いて言えば専門用語がたくさん出てくるので、巻末にクイズやコードでの穴埋めなどがあるとさらに理解度と、重要項目が頭に残る気がしました。

まとめ

全く違うドメインだけれど、身近であった株価のデータ分析について学べてとても勉強になりました。
全部のサンプルコードは手元ではまだ動かせていないですが、実際に個別の株(自分の会社の株など)について動かしてみようと思いました。

以上、書評とさせていただきます。

Google Colaboratory で Julia を使いたい場合

何度も調べていて忘れるので、メモレベルです。

基本は以下のNotebookをコピーした上で、STEP1を実行した後にブラウザをリロードすればOKです。
colab.research.google.com


参考にしたブログ
blog.goo.ne.jp

中身を詳しく知りたくなったら参考にするブログ
qiita.com

【書評】Vue3 フロントエンド開発の教科書 ( @yyamada )

WINGSプロジェクトの書籍レビュアーに応募し、献本してもらったので、書評を書きました。
今回は表題にある通り「Vue3 フロントエンド開発の教科書」の書評となります。

早速、レビューに入ります。

TL;DR

端的にいうと、ここ半年以内でVue3で新たにアプリケーションを作る人は必読というくらいに内容のボリューム、質の書籍です。また、特にゼロから立ち上げる場合はどう考えてもJavaScriptよりTypeScriptの方が良いということを考えると、この書籍がTypeScriptで記載されているのもとても良いと思いました。

前提としての自分の実務経験や知識など

私の今回の書籍に関係するところで考えると、経験したことがあるプログラミング言語を記載するのが良いと思ったので以下に列挙します。

    • React(実務で1年半)
    • Vue2(実務で半年)
    • Angular2(実務で1年)
    • TypeScript(実務で2年)
    • JavaScript(実務で2年)

書籍を読んだ率直な感想

実際に手を動かすハンズオン形式というのも良いと思いましたし、プロジェクト作成時の質問まで細かく書いてあったところには初心者の人向けの配慮としてとても感動しました。
ちょうどプログラミングとJavaScriptを勉強し始めた妻に対して、手を動かす教材としてもとても良さそうだと思いました。
あとは中身的なところだと、Vue2と結構変わっているなーというのとこんなにReactに近くなってきたんだなぁというところも感想ですw

良かった点

P43のプロジェクトのフォルダの構成から、P46のVueプロジェクトの動作原理の図などわかりやすさにも特化しているなと思いました。また、P69のColmunでもUIライブラリを使うとしたらの部分の説明も実務やっている人が書いていて、自分が実際に開発するとしたら調べるだろうなーということが記載しているのはすごく嬉しかったです。
また、実務でどんどんユニットテストを導入していくべきだと思っている派なので、ユニットテストの章があること、その中身としていろんなケースでの使いかたも説明していて、書籍で取り扱っていたのは嬉しかったです。ここら辺は実務で使うとなると、間違いなく検索するポイントでもあるので時間も節約できます。

悪かった点

ところどころでNuxtの話題を取り扱っていただいたのは良かったのですが、P311のColumnにも書いてあったステート管理の話などを見たりして、ページ数短くてもNuxtで動作させる部分もカバーする内容があっても良かったのかなぁとは思いました。
ただ、これはページ数の尺の都合上+Nuxt3が正式版になっていないという点でしょうがないと思いますので、Nuxt3が正式リリースされることになったら解説する書籍の出版をぜひお待ちしています!!

まとめ

最近ずっとFlutter、Unity、Reactなどを触ってきて、Vueを触る機会はなかったですが、小さい個人のサービスなどはこの書籍を元に妻と一緒にVue3で作ってみるのも良さそうだなぁと思いました。

以上、書評とさせていただきます。

Nuxt.jsビギナーズガイド

Nuxt.jsビギナーズガイド

Amazon