自動化無しに生活無し

WEBとかAIとかLinux関係をひたすら書く備忘録系ブログ

JavaScript

  • 【React】グローバルなStateを使って、Propsバケツリレー問題を解決する
    Reactでは、Stateを使ってウェブアプリの状態を管理することができる。コンポーネントに対して引数を与えるにはPropsを使えば良い。 しかし、だからといって親コンポーネントで定義したStateを、Propsで子コンポーネントに引き渡すのは良くない。 このようなコンポーネントの階層が深い場合、無駄なPropsの受け渡しが発生してしまうからだ。 この問題を防ぐために、グローバルなStateを作る。グロ ...
    続きを読む

  • 【React】Props、State(useState)、useEffectなどの概念の解説
    ここではReactの基本的な概念であるProps、Stateについて扱う。 Props Propsを使うことで、コンポーネントの関数を呼び出す時、引数を与えることができる。 例えば、App.jsxとcomponents/HeaderContent.jsxがある。 App.jsxを以下のようにする。 import { HeaderContent } from "./components/HeaderContent"; export const App = () => { const message = "Hello!!"; return ( <> <HeaderContent /> </> ); } HeaderContent.jsxを以下とする。 export const HeaderContent = () => { const header_color = ...
    続きを読む

  • 【React】component(コンポーネント)の仕組み
    Reactではindex.jsを読み込むことで動作するが、全てをindex.jsに書いてしまうとindex.jsのコード行数が尋常ではなくなる。 故に、コンポーネントを使用してコードの一部を別ファイル化させる。 コンポーネントの構造 まずsrc内に以下がある。 App.jsxとindex.jsである。 App.jsxはコンポーネントのファイルである。見分けが付きやすいように拡張子を.jsxとしている。ind ...
    続きを読む

  • 【React】Helloworldの仕組みの解説
    勉強途中で書いているものなので、やや間違いがあるかも Reactの内部構造 srcに書かれたJavaScriptを発動させ、指定した内容を、publicにあるindex.htmlへレンダリングする。 プロジェクトを作ってHelloWorldまで プロジェクトを作る。 create-react-app myproject cd myproject 以下コマンドで、プロジェクトを起動させる。 npm start index.jsを作る srcディレクトリ内のファイルを全て削除して、新しくindex.j ...
    続きを読む

  • 【chart.js】グラフを4分割して、任意のグラフを作り直して再表示させる【myChart.destroy()】
    ソースコード HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script> <script src="script.js"></script> <style> body{ margin:0; } </style> </head> <body> <section style="width:90%;margin:auto;"> <div style="display:flex;"> <div style="position:relative;width:50%;"> <canvas id="graph1"></canvas> </div> <div style="position:relative;width:50%;"> <canvas id="graph2"></canvas> </div> </div> <div style="display:flex;"> <div style="position:relative;width:50%;"> <canvas id="graph3"></canvas> </div> <div style="position:relative;width:50%;"> <canvas id="graph4"></canvas> </div> </div> </section> </body> </html> JavaScript window.addEventListener("load" , function (){ let id_list = [ "graph1","graph2","graph3","graph4" ]; for (let id of id_list){ const ctx = document.getElementById(id).getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], }] }, options: { scales: { y: { beginAtZero: true } } } }); if (id === "graph3"){ //予め作ったグラフをデストロイする。 myChart.destroy(); //その上で既に作られたグラフに後からデータを入れてみる。(mychartはconstなので、代 ...
    続きを読む

  • 【chart.js】円グラフで大きい順、小さい順に並び替える【JavaScriptの.sort()】
    【前提】JavaScriptで並び替えをするには.sort()を使う これで並び替えができる。 let numbers = [12,67,47,223,84,5,1,7,8,365]; console.log(numbers); numbers.sort( function (a,b){ return a-b; }); console.log(numbers); モダンな書き方に修正する だが、待ってもらいたい。これでは、並び替え処理を実行する前のnumbersも並び替えの影響で、内容が変わってしまっている。 これを防ぐために、スプレッド構文を使って配列をコピーする。 さらに、アロー関数を使えば、更に短く書くことができる。 この2点を考慮すると、この ...
    続きを読む

  • Ubuntuにreactをインストールして動作確認する
    Ubuntu20.04にインストールしている npmのインストール sudo apt install npm reactのインストール sudo npm -g install create-react-app バージョンの確認 create-react-app --version プロジェクトを作り、開発用サーバーを起動する create-react-app myproject プロジェクトを作る。 cd myproject npm start 開発用サーバーを起動すると自動的にブラウザが立ち上がる。127.0.0.1:3000が表示される。 src/App.jsを下記のように修正するとHelloWorldが表示される。 import React from 'react'; const App = () => { return ...
    続きを読む

  • Reactに必要なJavaScript構文【ES2015(ES6)のテンプレート文字列、アロー関数、スプレッド構文、letとconstなど、脱jQueryにも有効】
    Reactに必要なJavaScript構文をまとめる Reactを使わない場合でも、JavaScriptをシンプル書くヒントがあるので、コードを小さくしたい場合にも有効。 脱jQueryを推進したい人は下記も参考に。 jQueryのコードをJavascriptに書き換える【セレクタ、属性値の参照、イベントなど】 letとconst letとconstはいずれも再宣言が不可能。 let test = "aaa"; //これはエラー //let test = "bbb"; ...
    続きを読む

  • 【JavaScript】囲碁ライブラリGliftを使ってSGF形式の詰碁WEBアプリを作る
    gliftとは gliftはJavaScript囲碁ライブラリである。 http://www.gliftgo.com/ 囲碁のルールに加え、SGFに対応しているので、棋譜の入出力ができる。 ソースコード glift.jsは https://github.com/artemispax/glift/releases/tag/v1.1.2 からDL SGFはここから拝借した。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="glift_1_1_2.min.js"></script> </head> <body> <div id="test" style="height: 500px;"></div> <script> gliftWidget = glift.create({ sgf: { sgfString: "(;AW[is]AW[ir]AW[iq]AW[ip]AB[js]AB[jr]AB[jq]AB[kp]AB[lp]AB[lq]AB[lr]AB[ms]AW[mr]AW[mq]AW[ks]AW[mp]AW[mo]AW[lo]AW[ko]AW[jp]AW[or]C[Can black live?]AP[goproblems](;B[kr]C[];W[ns]C[Yes, white can't pushRIGHT](;B[ls]C[RIGHT])(;B[nq];W[ls];B[ms];W[ls]))(;B[ls];W[kr]C[No, this is mistake. Black can't make 2 eyes at now.])(;B[nr];W[ls](;B[kr];W[ls];B[ks];W[nq];B[ns];W[os];B[ls];W[kq])(;B[ns];W[nq];B[kr];W[ls];B[ks];W[os];B[ls];W[kq])))", widgetType: 'CORRECT_VARIATIONS_PROBLEM', }, divId: "test" }); </script> </body> </html> 動かすとこうなる。 結論 これで棋譜や詰碁を管理するウェブアプリが作れる。 DBにSGFを文字列 ...
    続きを読む

  • 【JavaScript】marked.jsでマークダウン記法をHTML上でプレビューしてみる
    以前、Pythonでマークダウンを実現させてDjangoに実装したが、最近のサイトは皆、マークダウンを書いたら即時で隣のプレビュー欄に表示させる仕様になっている事が多い。 それはJavaScriptでマークダウンを作っているからで、Pythonでマークダウンを実現させているようでは難しい。 そこで、JavaScriptマークダウンのライブラリとして名高い marked.js を使うことにした。 とりあえず作ってみたソースコ ...
    続きを読む