JavaScript
はじめに prisma.jsを触って覚えたことをまとめてみました。 www.prisma.io Viewテーブルをprisma.jsから利用する方法 下記のようなviewテーブルを作成した場合 create view productlist as select id, name from product; npx prisma introspectコマンドを…
はじめに 住所検索をする機会が多く便利なChromeの拡張機能があると思い調べてみたところ、なさそうだったので、自分で作ってみた。 APIに関しては下記のサイトのAPIを利用させていただく。 zipcoda.net manifest.jsonファイルを作成する manifest.jsonファ…
はじめに D3.jsを触ってみる。 サンプルコード HTML <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>D3.js example</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>テスト</p> <p>テスト</p> <p>テスト</p> <p>テスト</p> </body></html>
はじめに TypeScriptを勉強しているとプロトタイプやプロトタイプチェーンのキーワードが出てくるので、調査してみる。 JavaScriptのプロトタイプ 必要なメモリ量を節約できる プロトタイプは、他のオブジェクトがプロパティを継承する内部オブジェクトであ…
はじめに 前回、Ｃａｎｖａｓに絵を書くコンポーネントを作成したので、その延長でカラーパレットで線の色を変えてお絵描きできるコンポーネントを作成する お絵描きした絵はＪｐｅｇでダウンロードできるようにする インストール npm install react-color -…
はじめに ReactでCanvasに絵を書くコンポーネントを作成してみました。 サンプルコード import React,{useEffect} from 'react' const Canvas = () =>{ let canvas, ctx, drawFlag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dotFlag = false; /…
はじめに -ReactからPDFを出力できないか調査したところ、Reactから出力できるパッケージをみつけたので、試しに使ってみる stackoverflow.com テキストや画像は利用できるが、表形式のコンポーネントがないため、CSSを駆使したサンプルが提供されていた。 r…
はじめに 駅JPのデータを利用して駅検索機能を作成する バックエンド側でMySQLに登録されている駅JPのデータをjsonで返す フロント側でバックエンド側のURLへアクセスしてjson形式でデータを取得してreact-selectで実装する 過去の記事をベースに実装 px-win…
はじめに 前回、駅JPの情報をbackend側でjson形式で返す処理を実装したので、そのJSONをフロント側で取得する 取得したデータをプルダウンで表示できるようにする react-selectパッケージを利用する 過去の記事 px-wing.hatenablog.com px-wing.hatenablog.c…
はじめに 以前、フロント側でバーコードスキャンを実装したので、読み込んだ時にYahooAPIを利用してバーコード検索して読み込んだ結果を表示する px-wing.hatenablog.com 実装内容 Backend側はexpressを利用してAPIをコールして結果をフロントに返す スキャ…
はじめに ReactからQuaggajsライブラリを利用してバーコードをスキャンする serratus.github.io サンプルコード import React , { useState,useEffect } from 'react' import Quagga from "quagga"; const Scan = (props) => { const [barcode,setBarcode] =…
はじめに 会員登録機能でユーザーに誕生日を登録して持ったので、誕生日までのカウントダウンコンポーネントを作成しようと思いましたが、 指定の時間を入力して、入力した時間のカウントダウンのコンポーネントを作成することにしました。 時間の操作はmome…
