はじめに 前回までgraphqlの調査していたので、今回から実際に実装してみる Apollo clientを利用してみる Apollo Clientのインストール yarn add apollo-boost graphql react-apollo apollo-boostはもう廃止らしい Apollo Client 3.0が同様に簡単なセットア…

はじめに 知り合いから既存サイトの改修の話をもらいプログラム修正ならよいが、画像編集やレイアウト変更の話がきたので、とりあえずXDをインストールしてみた。 インストール手順 1.下記のサイトから体験版をダウンロードして、ダウンロードしたexeファイ…

はじめに Let's encryptの有効期限が切れたメールが届いてので、証明書の更新を行う Let's Encrypt certificate expiration notice for domain "<あなたのドメイン>" 証明書に必要なpackageをインストール # apk update # apk add certbot # apk add openssl…

はじめに GraphQL仕様では、2つの抽象型を使用できる。抽象型を使用すると、GraphQLスキーマの設計が大幅に改善され、クエリとミューテーションが簡素化される。 interface unions インターフェースとは？ 対応するインターフェイスを実装するオブジェクトま…

はじめに GraphQLのページネーションは利用方法は1つ目はオフセットスタイル、2つ目はカーソルスタイルがある。 Offset Pagination 下記の例は11番目から10件のデータを取得する例になります query { posts(limit: 10, offset: 10) { title, content } } Cur…

はじめに 前回、ざっくりGrapQLのqueryを触ったので、もう少し掘り下げてスカラーと型について調べる graphql.org 前回のざっくり調査 px-wing.hatenablog.com px-wing.hatenablog.com GraphQL スカラー ID ID スカラー型は一意の ID を表し、オブジェクトの…

はじめに GraphQLの調査するにあたり、フラグメントを再度確認する。 前回はざっくりしか触れなかったので。 px-wing.hatenablog.com px-wing.hatenablog.com フラグメント フラグメントは基本的に、再利用可能なクエリの一部です。 各クエリのフィールドが…

はじめに 前回のGraphQLの調査の続き px-wing.hatenablog.com エイリアス { user1: user(login: "TsuyoshiMorita-freelance"){ bio login } user2: user(login: "TsuyoshiMorita-freelance"){ bio login } } フラグメント(Fragments) フラグメントスプレッド…

GraphQL A query language for your API APIで使用するための問い合わせ言語 特徴 Ask for what you need,get exactly that (必要なものを求め、正確にそれを取得) Get many resources in a single request （1つのリクエストで多くのリソースを取得する） D…

はじめに 以前、dockerでasura環境を構築したので、簡単な操作をしてみる。 px-wing.hatenablog.com テーブル作成 Hasuraコンソールに移動し、[Data]-> [Create table]に移動し、次の列を含むプロファイルと呼ばれるサンプルテーブルを作成します。 下記の画…

はじめに TypeScriptを勉強しているとプロトタイプやプロトタイプチェーンのキーワードが出てくるので、調査してみる。 JavaScriptのプロトタイプ 必要なメモリ量を節約できる プロトタイプは、他のオブジェクトがプロパティを継承する内部オブジェクトであ…

はじめに Djangoからhasuraに移設して劇的にパフォーマンスが向上した記事をみて試したくなり、インストールしてみる。 hasura.io 公式サイトのインストール手順 下記の内容を参考にインストールしてみる hasura.io hasuraのdocker環境の準備 フォルダの作成…

はじめに TypeScriptとES6にクラスが導入されたことにより、クラスやクラスメンバーの注釈や変更をサポートするために追加の機能を必要とする特定のシナリオが存在するようになりました。デコレーターは、クラス宣言とメンバーの注釈とメタプログラミング構…

はじめに interfaceに対してジェネリックスを利用する interface Database<T> { uuid: string data: T[] } const database: Database<string> = { uuid: 'dadfdas34543523425fsadfsafsadfasf', data: ['hoge'] } console.log(database) const database2: Database<number> = { u</number></string></t>…

はじめに 前回までTypeScriptのAdvaiceTypeのことを調べたので、引き続きジェネリックスの調べる px-wing.hatenablog.com ジェネリックス メンバ間で意味のある型制約を提供することです。 安全性と柔軟性を組み合わせているので便利 typescript-jp.gitbook.…

はじめに 前回、Ｃａｎｖａｓに絵を書くコンポーネントを作成したので、その延長でカラーパレットで線の色を変えてお絵描きできるコンポーネントを作成する お絵描きした絵はＪｐｅｇでダウンロードできるようにする インストール 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; /…

Nullish Coalescing TypeScriptの3.7.0から利用出来る機能 undefined またはnullの場合だけ、指定した値が設定される const userDate = downloadedDate.user ?? 'dummy-date' || の違いは、この場合、0や空文字の場合も指定された値が設定される const userD…

はじめに 前回の記事の続き px-wing.hatenablog.com 型アサーション 推論、分析された型は、任意の方法で上書きできます 純粋にコンパイラよりもその型をより良く理解していることだけでなく、後で推測するべきではないことをコンパイラに伝えています。 下…

はじめに 久しぶりにTypescriptの勉強を再開する タイプをモデル化するためのより高度な方法をいくつか調べてみた。 前回の記事 下記の記事の続編 px-wing.hatenablog.com px-wing.hatenablog.com px-wing.hatenablog.com Advanced Types https://www.typesc…

はじめに 前回、Djangoのユーザー認証回りのユーザー登録とログイン回りを実装したので、今回はログアウト、ログイン判定をしていく。 ユーザー管理 下記の機能を実装することが可能です。 - ユーザー登録(前回) - ログイン(前回) - ログアウト - 認証 - ロ…

はじめに Djangoは、認証機能と権限機能の両方を共に提供されています。標準でマイグレーションするとデフォルトで作成されるUserテーブルを利用して 認証機能を実装することができます。 docs.djangoproject.com ユーザー管理 下記の機能を実装することが可…

パスワードの変更 管理画面に入るパスワードを忘れたときの対応 # python manage.py shell >>> from django.contrib.auth.models import User >>> user = User.objects.filter(username='＜わからなくなったユーザー名を指定する＞') >>> user.set_password(…

はじめに 前回の下記の記事でDjangoでpillowのインストールまで実施したので、今回は画像がアップロードできる状態まで設定する px-wing.hatenablog.com MEDIA_ROOTとMEDIA_URLの設定 プロジェクトフォルダにあるsetting.pyファイルにファイルアップロード先…

はじめに djangoでファイル添付つきのフォームを作成するためにpillowをインストールしようとしたらエラーがでたので、調べてみた。 pillow.readthedocs.io エラーの内容 jpeg関連のライブラリが見つからないとエラーが出ていた。 The headers or library fi…

はじめに 前回、DjangoでGraphQLでDBに登録された情報にリクエストする処理を実装しましたが、今回はDBのデータを更新する処理を実装する 前回の調査記事 下記の記事をみることで環境構築とデータを取得する箇所までは実装できている px-wing.hatenablog.com…

はじめに 2020.08.04 に django3.1がリリースされたのでローカルにインストールされているDjango3.0.8からDjango3.1にバージョンアップしてみる www.djangoproject.com 現在インストールされているバージョンを確認する pip list -oコマンドで確認する # pip…

はじめに 前回、Django/GrapheneでGraphQLの実装を途中まで行い、エラーが発生した箇所で終ったので、その続きから調査を行う px-wing.hatenablog.com 前回のエラーはモデルを作成していないことによるエラーのようだったので、モデルを作成してみる 想定す…

はじめに DjangoとGrapheneを利用してGraphQLの環境を構築する。DBはsqlliteを利用する。 docs.graphene-python.org 公式ドキュメントのインストール手順を踏んでやっているが、エラーが出たので、エラーの解消はまた次回とする ライブラリのインストール pi…

はじめに pythonのpayaudioをつかってみる。PyAudioを使用すると、Pythonを使用して、Linux、Windows、macOSなどのさまざまなプラットフォームでオーディオを再生および録音ができる。 people.csail.mit.edu Windows環境で今回はサンプルを動かしてみる。 環…