はじめに Reactを触り始めたので何度か復讐のために同じようなフォームを何度も作ってみることを目的としています。 ※前回は会員登録フォームを作成したので今回はBMI計算 px-wing.hatenablog.com 今回はBMIの計算だけですが、この情報をローカルストレージ…

TypeScriptとは JavaScriptにコンパイルされる静的型システムがついたJavaScriptの上位集合 TypeScriptがJSに変換される際に静的型システム（型検査）が実行される 'use strict' モード ⇒strict モードでは、JavaScript でエラーではないが落とし穴になる一…

はじめに 前回の記事で登録フォームの未入力チェックしか実装できなかったので、今回は半角チェックや文字数チェックおよびエラーメッセージの調整、独自の入力チェックを追加するなど実装しました。 px-wing.hatenablog.com コード import React from 'reac…

はじめに 前回の記事でreactから強引にgoogle mapを表示する方法を調べました。 こちらの記事では表示位置が画面下になっていたので、コンポーネント化して表示位置を調整したい 現在地を取得してgoogle mapに現在地のマーカーを表示したい サンプルコード …

はじめに 前回の記事でdocker にNginxをインストールしてSSLの環境を構築しました。 px-wing.hatenablog.com 理由は位置情報を取得して現在地にマーカーを表示したいと考えておりました。 実装 自分の実装方法が正しいとは思いませんが、もっと良い方法があ…

Dockerfile 自分が作成したファイルは下記となります。このままコピーしても動きません。 FROM alpine:latest ## nginx RUN apk --update add nginx && rm -rf /var/cache/apk/* RUN chmod 755 /var/lib/nginx /var/lib/nginx/tmp RUN mkdir -p /run/nginx A…

はじめに HTMLやCSSが得意でないバックエンドエンジニアよりの人が簡単にそこそこのレイアウトを構築する bootstrapは以前利用したことあるが、詳しくはしならないレベルの状態で画面を作成する reactもあまり触ったことない人がReactで会員登録フォームをつ…

はじめに 前回、テスト用のAPIを実行してReactで表示するサンプルプログラムを作成しました APIで取得したデータをローカルストレージで持ち待って、reactprouter-domでページ遷移したまま、APIで取得したデータを表示しつづけるプログラムを作成しました。 …

はじめに 下記のclientテスト用APIを利用してReactHooksからaxiosでリクエストしてデータを表示させる Reqres - A hosted REST-API ready to respond to your AJAX requests 外部API 'https://reqres.in/api/users?delay=1'からjsonを取得して画面に表示させ…

目的 udemyのReactHooksの入門編の受講を完了したので覚えている範囲で簡単なサンプルプログラムを作成する。 ※コースの中にはreact-routerの説明はありません。react-bootstrapも利用していないです。また自分が初見で利用しております。 ReactHooksとreact…

prop-drilling問題 Reactコンポーネントの構造はツリーのようなものです。各子には親が1つだけあり、全員がメインルートコンポーネントに接続されています。この構造のおかげで、一方向の流れしかありません。propsを利用することで親から子、子から親に渡す…

useEffectとは useEffect フックを componentDidMount と componentDidUpdate と componentWillUnmount がまとまったものだと考えることができます。 https://ja.reactjs.org/docs/hooks-effect.html componentDidMount()とは コンポーネントがマウントされ…

Hooks フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 以前のバージョンでは、stateの状態管理はClass化しないといけなかったのですが、関数で書けるようになったとのことです…

開発環境の構築方法 以前のブログにざっくりまとめましたので、こちらを参考に。ざっくりしすぎてわからなかったら聞いてください。 px-wing.hatenablog.com Android Studioを起動 環境を構築すると「Start a new Flutter project」が追加されているので、そ…

ZIPダウンロード 下記のサイトから最新版のflutterのzipファイルをダウンロードする flutter.dev Cドライブ直下にsrcフォルダを作成して、ダウンロードしたzipファイルを解凍して展開する c:\src\flutter コントロールパネル＞システムとセキュリティ＞シス…

package.jsonファイルの記述 おそらくdevなどは指定してあると思いますので、"debug": "node --inspect-brk=9229 node_modules/nuxt/bin/nuxt",の記述を追記する "scripts": { ~~ (省略) ~~ "dev": "cross-env NODE_ENV=\"local\" nuxt", "debug": "node --i…

はじめに neo4j環境を構築できたので、expressからneo4jにアクセスしたいとおもい、その方法を調査していきたいと思います。 px-wing.hatenablog.com expressのサイトを見るとapocを利用している例があったのでapocで試してみます。 https://expressjs.com/j…

docker-compose.yaml 下記の設定で注意して頂きたいのはNEO4J_AUTHの値はログインするためのアカウントとパスワードとなります。 下記のサンプルの場合、アカウントが「neo4j」で、パスワードは「test」となります。 neo4j: image: neo4j:4.0 volumes: - ./d…

cypherとは グラフデータを操作するために構築されています。 パターンを使用してグラフデータを記述する 使い慣れたSQLのような句 宣言的、それを見つける方法ではなく、何を見つけるかを説明する ノードの作成 最初はCypherを使用して小さなソーシャルグラ…

docker-compose.yaml の設定 dockerhubの公式アカウントで記載されている利用方法をもとにdocker-compse用に記述してみました。 version: '3' services: neo4j: image: neo4j ports: - 7474:7474 - 7687:7687 volumes: - ./neo4j/data:/data docker-compose…

所感 自分のサービスを開発をしようとしており、bootstrapでデザインを作成すればエンジニアの自分でも、なんとなくデザインできると思いましたが、難しかった。デザイナーの人たちには頭が上がりません。フルスタックエンジニアは程遠い。 今回利用したライ…

インストール npm install socket.io express側の設定 soke関連の記述 const express = require('express') const socketio = require( 'socket.io' ) const app = express() const server = app.listen(3000, () => console.log('Example app listening on …

はじめにflutterを初めて知った状態でいろいろと触っていたときのメモのです。暖かい目でみてください。flutter.devというのが初めての人にはお試しとして使うには便利なツールであることだけ共有できれば幸いです。 初心者向け flutter.devというサイトにア…

必要なpackageをインストール npm install mysql2 npm install --save-dev sequelize-cli sequelizeの初期化 npx sequelize init 下記の２つのファイルが作成される config/config.json { "development": { "username": "root", "password": null, "database…

今回利用するライブラリは下記の３つとなります npm install jsonwebtoken npm install bcrypt npm install config パスワード暗号方法 const bcrypt = require('bcrypt'); const saltRounds = 10; // フォーム画面で入力されたパスワード const myPlaintext…

passport 公式ドキュメント インストールと前準備 ID、パスワードをセッションに格納してログイン認証する npm install passport npm install passport-local npm install --save express-session ログイン認証を一時的に試したくフォームを作るためにtempla…

morgan expressにはmorganというログのライブラリーが標準で用意されています。 実装例 lib/morgan.jsファイルを作成する const morgan = require('morgan'); const fs = require('fs') const path = require('path') morgan.accessLogStream = fs.createWri…

Auth0でログインおよびアカウント登録、ユーザー情報取得 少しの記述だけで、こちらの実装が可能です。SNS連携以外の登録の場合、登録したメールアドレスにメールを送信することができます。 あとログインフォームやメールのテンプレートは変えられるのでUX…

簡単にサイトにログインフォームを組み込みい方 「Customize」をクリックする ログインフォームの色やレイアウトを対象変更することが可能で、GUI上で設定した内容がHTMLおよびJavascirptとして出力されてサイトにタグを埋め込むだけでログイン機能が実装で…

auth0認証とは この記事を読んだ方がわかりやすい auth0のサービス Auth0: Identity is Complex. Deal with it. auth0概要（フリープラン） 無料で始めて、AUTH0で時間を節約しましょう！ 7,000の無料アクティブユーザーと無制限のログイン パスワードなし W…