はじめに 以前、フロント側でバーコードスキャンを実装したので、読み込んだ時にYahooAPIを利用してバーコード検索して読み込んだ結果を表示する px-wing.hatenablog.com 実装内容 Backend側はexpressを利用してAPIをコールして結果をフロントに返す スキャ…

はじめに Rustでわざわざ公式のイメージを使わないで環境を構築してみる。 Dockerが必ず使える環境とは限らない。あとどのようなライブラリが必要か勉強になる いろいろとトライアンドエラーで３~４日構築に時間がかかった。 alpineを選択している理由は自分…

はじめに yahoo api を利用したいと思い実際にAPIを利用しようとしたときにJSONP形式でデータを返す記述があり最初は見間違いだとおもったら、そのような形式があることを知りました。 JSONP とは scriptタグを使用してクロスドメインなデータを取得する仕組…

OS判定 AndroidとiOSで処理を分けたい場合 import { StyleSheet, Text, View, Platform } from 'react-native'; export default function App() { return ( <View style={styles.container}> <Text> {Platform.OS === 'ios' ? 'IOSです' : 'Androidです'} </Text> <StatusBar style="auto" /> </View> ); } 端末固有のIDを取得する react-na…

ReactNativeでreduxを利用する npm install redux react-redux Action export const addClip = ({clip}) => { return { type: 'ADD_CLIP', clip } } export const deleteClip = ({clip}) => { return { type: 'DELETE_CLIP', clip } } reducer const initial…

Rust www.rust-lang.org DockerでAlpine環境を用意する Dockerfile FROM alpine:latest RUN apk update && apk add curl RUN apk add --no-cache openssl ncurses-libs libgcc インストール rustのインストール / # curl --proto '=https' --tlsv1.2 -sSf ht…

はじめに Redux7.1からHooksのAPIがつかる https://react-redux.js.org/api/hooks useDispatch Reduxストアからディスパッチ関数への参照を返します。必要に応じて、アクションをディスパッチするために使用できます。 import React from 'react' import { u…

はじめに ReactからQuaggajsライブラリを利用してバーコードをスキャンする serratus.github.io サンプルコード import React , { useState,useEffect } from 'react' import Quagga from "quagga"; const Scan = (props) => { const [barcode,setBarcode] =…

はじめに ReactNativeで画面遷移をしてみる WebViewを利用する 画面遷移 公式サイトでも推奨されているReactNavigationをインストールして利用してみる docs.expo.io 公式サイト(抜粋 / google翻訳) React Navigationは、React Nativeエコシステムで最も人気…

はじめに ブラウザからの通知を送る developer.mozilla.org コード 下記のコードはスマートフォンだと通知されない エラーハンドリングをしないとスマートフォンでエラーになります。 chromeしか動かない import React from 'react' const Notification = (p…

はじめに ReactNativeでHooksを利用するにあたり覚えたことを下記にまとめました。 Hookが利用できるバージョン expoではReactHookがSDK33以降から対応している。 ReactNativeは0.59から対応している React 16.8.0 がフックをサポートする最初のバージョンで…

はじめに 会員登録機能でユーザーに誕生日を登録して持ったので、誕生日までのカウントダウンコンポーネントを作成しようと思いましたが、 指定の時間を入力して、入力した時間のカウントダウンのコンポーネントを作成することにしました。 時間の操作はmome…

はじめに 前回の記事でReactでログイン画面を実装することを記載しましたが今度はログイン認証のバックエンド側の処理を実装する px-wing.hatenablog.com コード 基本的にはPOSTされたデータを router.post('/login', async (req, res, next) => { let error…

覚えたこと React Nativeは画面スクロールするには、scrollviewまたはflatlistを使う flatlistの方が処理は早い。 reactnative.dev ダメなコード 下記のコードで記述すると、リストしたデータが画面スクロールするほど多い場合、端末上でスクロールしない。 …

はじめに 前回ログイン画面を作成したので、今度はログイン画面の実装をする px-wing.hatenablog.com px-wing.hatenablog.com Reactでログイン画面を実装する -front側 import React,{useState, useContext } from 'react' import { BrowserRouter as Router…

React Native画面作成 ViewタグはHTMLでいうところのdivタグのようなもの CSSを勉強しないといい感じのレイアウトは作れない。 import React from 'react'; import { StyleSheet, Text, View,Image } from 'react-native'; export default function App() { …

はじめに 下記のサンプルのようにログイン済みのユーザーのみ閲覧できるページを実装したかった。 reacttraining.com 理想は下記のように実装したかった。 import React from "react"; import { BrowserRouter as Router, Switch, Route, Link, Redirect, us…

ReactNative 開発環境設定 -vscodeの拡張機能で「prettier」をインストールしておくと、コードを自動的にインデントやシングルクォートなどに統一したフォーマットに保管してくれる prettier.io .prettierrcファイルをルート配下に設置してファイルの中身を…

ExpoCLIインストール expo.io npm install expo-cli --global expoのバージョンを確認する PowerShellで実行すると下記のエラーが発生する > expo --version expo : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nod…

TypeScriptコンパイル watchモード ファイル修正時に動的にコンパイルしてくれるコマンド tsc index.ts --watch or tsc index.ts --watch 複数のファイルを指定する場合 tsc index.ts test.ts --watch tsc--initコマンド -- tsconfig.jsonファイルを作成する…

はじめに 前回、会員登録フォーム用のテーブルを作成したので、そのテーブルに対してデータを登録する処理をexpress側で実装する px-wing.hatenablog.com コード POSTされたデータをもとにアクセストークンを作成する。有効時間は1時間 トークン作成後、ユー…

はじめに デザインが全くできないエンジニアとしては、少しでもデザインをよくするために無料のアイコンなどでUIをほんの少しだけよくしたい。 下記の無料枠で利用できるアイコンを画面に表示させる https://iconscout.com/ 利用するパッケージのインストー…

はじめに 会員登録処理を実装したところ、登録日が日本日付にならなあったので色々と調整してみた px-wing.hatenablog.com 最初にOSの時間を調整してみてダメで、結局はsequelizeの設定ファイルを修正したら日本時間になりました。 Alpine Dockerfileに下記…

はじめに 前回に会員登録フォームをreactで作成したので、この情報をサーバーに保存する バックエンドはexpressを利用してDBはMySQLを利用する expressからSequelize ORMを利用する px-wing.hatenablog.com px-wing.hatenablog.com 会員登録の画面イメージ …

はじめに なぜCSSをいきなり再学習したかというとBootstrapなどCSSフレームワークを利用しない純粋なHTMLとCSSで構築しているサイトの新規ページの依頼がきた CSSフレームワークがないとレイアウト調整が難しいなぁと本当に思いました。いままでBootstrapあ…

はじめに ReactHooksでBMI計算で1日ごとの結果を一覧で表示する（redux/useContext使用）を作成したので、そのデータをグラフで表示してみる。 下記のサンプルは下記の過去記事を続きの実装となります。 利用したパッケージは下記の２つとなります。 yarn ad…

はじめに 久しぶりにバックエンド側の開発を進めようとしたらexpressが動いているdockerコンテナが落ちていた 原因を調べていたら下記のエラーでおちていた [nodemon] Internal watch failed: watch ENOSPC 現在、centos上でdockerを動かして開発しており、V…

はじめに 前回、BMIの計算フォームを作成しましたが、日付事に結果を残すものにバージョンアップする px-wing.hatenablog.com 同じ日付を入力したら、以前のデータを上書きする reduxも利用してデータの持ち回りをする。日付事に一覧を表示させる 登録したデ…

はじめに -TypeScriptを触ったことがない人が勉強がてらメモしているだけなので、凍えるような冷たい目で見てください。 - 1回目と2日目は下記となります。微妙にタイトルを変えていきます。 px-wing.hatenablog.com px-wing.hatenablog.com TypeScriptの型 …

はじめに TypeScriptを触ったことがない人が触っている勉強してる状況です。 px-wing.hatenablog.com TypeScriptの型 Javascript型とTypeScriptの型がある JavaScriptでも型はあるTypeOfで型を確認することができる TypeScriptはtscコマンド実行時に型検査を…