もう戻れない! Vue3で楽々Java Script ～入門から株価グラフを作ってみる～

こんにちはRcatです。
今回はJava Scriptネタです。
Pythonサーバーと、フロントにJavaScriptはいつものことですが、今回はそのJavaScriptの部分にvuejsを採用して強化してみようと思います!
これを採用することで、今までより超記述を少なくできるほか、フレームワークに丸投げできる部分も多いので不具合も減ります。

はじめに

利用規約

情報や作品の活用時は事前に利用規約をご確認ください。

コメントについて

利用規約のガイドラインを確認の上コメントしてください。
則っていないコメントは削除します。

概要

Vue.JSとは

WEBユーザーインターフェース(つまりフロントエンド)を構築するフレームワークです。
今まではプレーンのJavaScriptでめっちゃaddEventListener!と大量のリスナーを書いたりquerySelector!と要素をめっちゃ指定したりして、動くフロントエンドを作っていましたが、これを使うとなんと全くいらないという。
とにかく、ちょろっと動きを見るだけでもすごさがわかると思いますので、見てみてください。

急にどうしたの?

今までは知ってる領域内でいろいろやることで時短をしていましたが、最近仕事で使ったんですが、超感動してしまい…
これは普段から使うしかないぞ!ということになりました。双方向の勉強にもなるし。

感動事例

私が初見で一番感動したのはこれですね
後できちんと出しますが、ソースはたったこれだけで

選択のリストがちゃんとできてるという。
これ、いつもならループでCreateElementしてAppendChildして・・・と面倒だったやつ。
同じ要領で表とか作るとさらに感動する。あれ、tdとかtrとかいっぱいで面倒なんですよ…。

ちなみに、refというのはリアクティブ変数というVue特有の変数で、この中身が変わると自動的に対応する表示が更新されます。

なので

neko.value.push("Nyanko");

この一行が実行されると、選択肢が増えます。
え、selectクリアして入れなおさなくていいんですか!?

こんな感じで様々な感動ポイントがあるフレームワークです。
例えばこの後行うコンポーネントを作って使いまわすなど…

なお、この記事ではVue特有の文法の列挙的な紹介はしません。
ほかの記事でも足りてますし、あえて参戦する理由がありません。

導入

nodejsの導入

フロントの開発はnodejs経由のvue.jsで行います。
なのでまずはこちらを導入します。
※最終的にビルドするので、実行環境では不要です。

とりあえずWindowsインストーラーが楽だと思います。
上のほうはバージョンにうるさい人のためのDockerかな?

Vue.jsのプロジェクトを作成

nodejsが導入できたら、vue.jsのプロジェクトを作ります。
基本的には下記の沿って進めればOK

npm create vue@latest

いろいろ選択肢が出てくるんですが、私は最低"Router"だけチェック入れて進めてます。
RouterはURLを管理するのに使います。

出来上がったら、フォルダに入ってパッケージをインストールします。
ただinstallと打てばいいのは、既にリストが作成されているからです。requirementsみたい。
これでVueに必要なものが入ってきます。

vuejs>cd Rcat_test
Rcat_test>npm install

added 126 packages, and audited 127 packages in 18s
32 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities

サーバーを起動して確認する

そのまま下記コマンドを打つとサーバーが起動します

>npm run dev

URLが表示されるのでアクセスします

こんな画面になればOK
※最初の画面でチュートリアルスキップをYesで作ると出ないかも?

画面を作る

さて、ここからが本題、オリジナルのページを作っていきましょう!

メインページを作成

プロジェクトフォルダのsrcがメインの置き場です

画面本体はさらにviewsの中に置きます
チュートリアルを有効にしていると、ここに初期の画面が入ってます。
とりあえず一個複製してみました。

中身はこんな感じでした。

とりあえずこんな感じにします

今まで<HTML> </HTML>で書いていた部分は<template>の中に書きます。
jsはその下にある<script>の中に。これはいつも通り。

ルーティング（URLの設定）

同じ階層のrouterフォルダにあるindex.jsを開きます。
もうぱっと見でわかるのではないでしょうか?

上にimportの行があり、ここをHomeViewをパクってオリジナルの画面をimportします。
下のjsonの中に同じようにhomeをパクって"/neko"を作りました

画面を確認

この状態で、先ほどのトップ画面から、URL直たたきで/nekoにアクセスするとこんな感じ。

お分かりでしょうか?
たったこれだけで、選択のリストができちゃっているのです。

左の要らない

自分の画面なのになんか左にありますよね?
これ、ルート要素のApp.vueの記述だからです。
一個上のフォルダにApp.vueがあるので、"RouterView"以外を全部消します。

きれいになりました。

背景色などは、assetsフォルダにあるcssが読み込まれているようなので、空にすればいつもの味気ない白いページになります。

vueDevToolsを消す

画面下にあるやつを消すには、プロジェクトルートの"vite.config.js"から無効にできます。

CSSを入れる

これはメインの話ではないので詳しくは解説しませんが、今回からスタイルにbootstrapを用います。
どう使うかは、実際に使う際に注釈します。
そのためにインストールと設定をします。

bootstrapのインストール

npm install bootstrap

インストール後、main.jsに二行追記して全体で有効にします。

コンポーネントを作る

コンポーネントとは、画面を構成する要素の一部です。
特に、今回の私のようにユーザーインターフェースを作りたいときは、特定の機能を持つ画面を部品として作っておくと便利です(例:メーター)。

基本的には画面(ビュー)の中にコンポーネント(部品)を多数配置するという感じになります。
その前提でこの下ご覧ください。

グラフコンポーネントの作成

いきなりですがグラフ描きます
↓で使うために作るので

まずはファイル本体を作成します
componentsというフォルダがあるので、その中に空のファイルか、ハローワールドをコピペして流用します。
また、viewsの方もMainというファイルに置き換えています。

この時点で、画面は"Main"というビュー。
コンポーネントは"GraphTest"というコンポーネントです。

Graphtestのコンポーネントの中身はこんな感じ
とりあえず、コンポーネントとして表示できるかなのでグラフはまだ出ません

上から簡単に補足

• class="container"とかって何?
  これがbootstrapのCSSを適用するためのキーワードになります。
  つまり、bootstrapは大量のCSS定義を特定の名前のclassにアサインしているわけですね。
  それに合わせるだけで勝手にスタイルが適用されるということです。
  その要素を見るだけで、「あ、このスタイルなんだ」というのが分かります。

• {{}} って何?
  Vue特有の書き方で、この中に変数を入れることができます。
  冒頭のref変数を入れれば、中身が変わった瞬間に表示も変わります。

• propsって何?
  これは親の画面(ビュー)からデータを受け取る仕組みです。
  この次に出てきますが、このコンポーネントは画面からタイトルの文字列を受け取れるようにしてあります。

次にMainのビューがこちら

簡単に補足

• <div>多くない?
  bootstrapの様々なスタイルを適用するためにその分だけ使っています。
  今回はサクッとカードにしてみました。

• <GraphTest>タグって何?
  これがコンポーネントの挿入です。
  scriptの中でimportしていればタグとして挿入することで画面で利用できます。

• :title=って何?
  これがコンポーネントのpropsに渡す値です。
  向こうの名前と合わせたものに値を渡してやります。
  ちなみに":"をつけると式で、ないと固定値になります。
  今回は変数を入れているので式にしています。

というわけで表示がこちら
カードにしたことでWindowsっぽい感じになっています。
また、画面とコンポーネントの両方がきちんと表示されているのがわかると思います。

では、文字のところ、グラフにしていきましょう。

グラフにする

公式サイトを見ると下記コマンドでインストールができるとのことなので、まず入れます。

npm install plotly.js-dist

公式のリファレンスはこちら。
参考にして組んでいきます。

最初に結果だけ見せるとこんな感じ。
大人気銘柄の5分足です。わかるかな??

株価チャートの作り方

まずはテンプレートの中身とインポートですね。

文字だったところが、グラフ用エリアの"<div ref="chartContainer"></div>"に変わっています。
ref = を使い、同じ名前のref変数をnullで宣言すると勝手に参照が入ります。queryselecter?そんなの要らないんですよ☆

ちなみに株価は巨大なので別ファイルに入れてます。
テストでimportしてるだけなので、説明は省きます。

その下がメインのグラフ作成部ですね。

最初に株価のY軸を作成します。
ここで必要な4配列を参照し、タイプをcandlestickにすることでローソクになります。

その後にレイアウトの作成ですね。
空のグラフエリアに何をどう描くのか設定します。
ここではX軸の設定を主にしています。
なくても動くんですが、取引時間外を省かないと分足はとんでもないことになるのでその設定ですね。

ちなみにごそっと設定を消すとこんな感じ。キレそう!!

で、その後いろいろ手を加えて出来高まで入れました!

ちゃんと拡大もできます。えらい!

本格的にコンポーネント化する

さて、vueで株価チャートを出すという目的が達成できそうなことはわかりましたが、今のところ固定値だけしか表示できず意味がありません。

ここからは、きちんと親コンポーネントがAPIで引っ張ってきたデータを向こうがセットして、グラフの方は表示だけを担うようにします。

データを変数に保持
親コンポーネントからデータを受け取って描写するために変数に格納します。
今回はデータ本体と、グラフの設定をグローバルで保持します。

データセット / プロット関数の追加
データをセットしたら、再描写を行います。
今までのグラフ設定系が関数内に収まり、保持している値を読み込む感じになります。

そして大事なのがここです。
defineExposeを使い、特定の関数は親からたたけるようにします。
こうすることでデータを渡し、プロット指示を出せるようになります。
プロパティでも渡せるんですが、初回にしか参照がないので、あとから更新が面倒なんですよね。

親コンポーネント
さて、準備ができたので次は親の方です。
関数をたたくために、ref属性を追加して参照を保持します。

さっきまでグラフが直読みしていた株価をこっちでロードし、先ほど公開したデータセット関数に渡しています。
これで、親の方からデータが伝わります。
その後、plotをたたくことで再表示です。

結果はこんな感じ。問題なさそうですね。

コンポーネントの強み

これまでだと、コンポーネント作ってどうすんの?親に直でよくない?という感じですが、以下のように親を変更するとどうでしょう。グラフが2個に増えてますね

結果がこちら。はい、ダブルになりました!
こんな感じで、何度でもどこでも使いまわせるのが魅力です。
複数銘柄同時表示とかも簡単ですね。

ちなみに右側は初期のテストとしてコンポーネントに埋め込んであるデータです。

ビルドする

完成したらプロジェクトをビルドします。
これにより、既存のWEBサーバーのweb rootに出来上がったファイルを置くだけで公開できます。

簡単に言うと、実行環境ではnode jsもいらないし、npm runみたいなののもいらない。
さらに、ソースがえぐいくらい意味わからなくなるのでリバースエンジニアリングも防げる? LLMが簡単にデコードしそうだが…

ビルド方法

node jsのプロジェクトフォルダで下記を実行

npm run build

実際の様子がこちら

終わると"dist"というフォルダが出てくるので、この中身をWEBサーバーのルートに入れればOK。
distってpyinstallerもこんな名前のフォルダ出してきたのでコンパイル系の共通認識なのかな?←多分何も知らないだけw

ちなみに、これをpython flaskで手っ取り早く確認するには以下のようにします

WEBサーバーのルートフォルダとして扱えるように定数にするか、同じフォルダで実行する。

"/"へのアクセスでdist/index.htmlを返すようにする

任意のパスを返す時は、すべてwebrootとつなげてファイルを返すようにする
※"../"対策なども本来は必要。自分だけならいらないか?

この状態のFlaskサーバーに接続するとこんな感じ。全く同じ表示になりました!

サーバーのログはこんな感じ。
ちゃんと通信によってデータを持ってきていますね。何度か試していたので304なのはご愛嬌。

まとめ

いかがでしたか?
この程度では魅力は1割程度しか紹介できませんでしたが、とにかく動的に変わるページや、細かくパーツとして作って再利用などが簡単そうだというのはお判りいただけたかと思います。

次回以降は別のシリーズでこのvueを採用して進めていきますので、そちらと合流ですね。
それれはまたお会いしましょう。

リンク集

感想投稿フォーム

コメントは公開で恥ずかしい!! Rcatだけに送りたい人向け

関連記事

ミニPCにLinuxをインストール