yubachiri

僕の所属するmofmofでは個人開発をめっちゃ推奨してて、業務時間内に技術研鑽がてら個人開発をしてもいい時間が設けられています。最近、チームで個人開発をやる（？）的な期間があり、開発対象を決めるネタ出しを結構頑張ったのでその話をしようと思います。具体的にはリーンキャンバスの話と、スコープ決めのために取り組んだことの話をします。 リーンキャンバスなんとなくやりたいことや方向性はあったので、それがビジネス足り得るか・どんなプロダクトにするのが良いかを考えるためにリーンキャンバスを活用しました。参考: リーンキャンバスについての記事見せちゃいけないものではないけどめっちゃみてほ...

開発テーマのネタ出し奮闘ログ リーンキャンバス実例と開発スコープ決め

どれが何のためのタスクかわからない優先度が正直わからない・納得感がない目下の関心事はあれだったはずなのに、これが上にあっていいんだろうか？うーんあるある。人数が多ければフィーチャーチームとか運用チームとかあると思うけど、そうじゃない小さなチームを想定します。自分がそうなので。以前バグを「ティガレックスが出た」だとか「緊急クエスト」だとか呼んでいたのを思い出したので、モンハン（2ndG、3rdが世代なのでそこまでの知識＋ワールドもちょっとやってた）になぞらえて分類してみたい。まず、クエストの分類から。ググらず記憶の限りではこんな要素があったと思う。村クエ集会所狩猟クエ...

プロダクトバックログの分類を建設的に行うための一案 モンハン説

最近何回か試してみたらとても良かったので、やったことと良かったポイントを書きたいと思います。どんなことをしたか、実際やってみてどんな効果があったかという話がメインになりますので、ドメインモデリングをちゃんと学びたい場合は他の記事をご覧いただくのが良いと思います。おことわりワンショットで試しただけで、継続して活用しているわけではないです実際はER図を囲んで話したくらいのもので、ドメインモデリングというほど大層なことはしてないです 何をしたかER図もどきに毛が生えた程度の図を元に対話を行いました（実際取り組んだのは別のドメインですが、）フリマサイトの想定でお話しします...

ドメインモデリングのようなことをしたログ

PCを乗り換えたのでキーマップを変更しないといけなくなったんだけど、久々すぎて何もわからなかったので備忘がてら残しておきます。 使ったツールqmk-toolboxキーマップを書き込むためのツールQMK configuratorファームウェア用の書き込みファイルを作成してくれるやつ（？）GUIでぽちぽちやってくとqmk-toolboxで使うためのファイルができる 手順qmk-toolboxをインストールするreleasesからよしなにダウンロードQMK configuratorでキーマップを作成するキーボードを選択キーマップを作成...

久しぶりにqmkを使った（楽にキーマップを編集する方法備忘録）

導入よう、オレはどんうさぎだ。株式会社mofmofに所属する、しがないサラリーマンだぞ。今回は縁があって世の中の皆様の役に立つべく「ChatUSG（チャットうさぎ）」として話し相手になることになったんだ。よろしくな。ということでmofmofの岩井です。ゴールデンウィークで開発したユーザーストーリー作成サポートサービスをご紹介します。そこにどんうさぎさんも登場してもらったので挨拶してもらいました。プロフィールはこんな感じ。このサービスはこちらから利用できます。このプロダクトは、株式会社mofmofの「水曜日の個人開発」にサポートされています。https://indie...

【個人開発】価値あるユーザーストーリー作成をサポートするサービス「ChatUSG」を作りました

なんだか初歩的な気がするから気が引ける質問とか、いまさら聞きづらいこととか、ありますよね？また、コミュニティに入ったばかりだから発言しづらいみたいなこともあると思います。しかもSlackだと匿名での投稿ができないからなおさら投稿しづらい。そんな課題を解決するコマンドを作りました！！（めんどくさくてハードコードしている部分が多いので配布までこぎつけてません）※このプロダクトは、株式会社mofmofの「水曜日の個人開発」にサポートされています。https://indie-dev.mof-mof.co.jp 利用イメージ入力した内容を、mofmofのマスコットであるどんうさぎが代...

【個人開発】言いにくいことを代わりに言ってもらうSlackのスラッシュコマンド作りました

ChatGPTとペアプロして、Flutter入門して個人開発してみました。めっちゃ便利だったので、実践ログを書いてみようと思います。 自己紹介株式会社mofmofの岩井と申します！yubachiriです。mofmofは受託開発の会社なんですが、なんやかんやあって水曜日の一部は個人開発をする制度があります。今回はその時間を使って個人開発を行った＆その中でChatGPTを活用したらめっちゃ良かったので、個人開発に取り組む・取り組みたい方向けに実践ログ＆活用した雑感をお伝えしようと思いました。（弊社メンバーの開発物とか開発ログ的な記事とかはここにまとまってるので、もし興味があれば覗...

個人開発を加速させるChatGPTペアプロ実践ログ Flutterに入門してみました

こんな感じのサービスつくりました。嘘です。ほんとはこっち （事情があり、記事内でサービスURLを紹介することは控えます。理由は後述します）作ったもの紹介①調べたい駅名を入力して検索②結果が…

【個人開発】引っ越し先の住みやすさをサクッと知れるサービスを作りたかった（Next.js, Yahoo!ローカルサーチAPI, Geocoding.jp）

Microsoftのドキュメントに従ってエクスポートとインポートを試したところ、バックアップの作成は正常に行えたもののインポートが謎のエラーで完了せず困ったので対応したメモ。 通常のエクスポート・インポートwsl --export <エクスポート対象ディストリビューション名> <出力先ファイル>wsl --import <新規ディストリビューション名> <インストール先> <上記で出力したファイル>このインポートがエラーで落ちてしまっていた。 対処ドキュメントではtarでエクスポート・インポートしているが、vhd...

WSLのインポートが完了しない（回り続ける・原因不明で終了する）

パッケージ側で定義されているもの・自動生成されるものに乗っかっているだけでも十分に便利なTypeScript。ですが、思わぬエラーに悩まされる・エラーメッセージが読み解けなかったり、やりたいことを実現する手段がわからないこともしばしばあります。そんな時に役立つなんやかんやが書いてある記事を目指して書きます。 ※随時アップデート d.tsファイルとは型定義ファイルです。アンビエント宣言というものを書くのに使われます。例えばTypeScriptをインストールする際に付属している型定義ファイルlib.d.tsには windowやdocumentなどのアンビエント宣言が書かれています。...

もっとTypeScriptと仲良くなる 逆引き.ts

サクサク実装できて超好きです。Tailwindと比較してごちゃごちゃしないのとtsで補完が効くのめっちゃいい。ただ実装するにあたって「これどうしたら解決できるんだろう」「これはどうやって実装するんだろう」と思うことがいくつかあったので、書いてみる。以下のドキュメントに従ってセットアップしたアプリケーションで実装＆動作確認。yarn create react-app my-app --template @chakra-ui/typescripthttps://chakra-ui.com/getting-started/cra-guide コンポーネントをラップするあらかじめス...

Chakra UI Tips 実装するにあたってかゆかったこと

S3への画像アップロードをトリガーに、それを加工するようなLambdaを1コマンドでつくれるやつです！通知を設定する方法Lambdaで外部ライブラリを使う方法SAMでLambdaをデプロイする方法あたりの情報がひとつにまとまった記事が見つけられなかったので書きます。ファイル準備ディレクトリ作成mkdir sam-lambda-s3ファイルとか作成touch template.yamlmkdir function pythontouch function/function.py function/requirements.txttemplate.yml(CloudFormationのやつ)概ね公式の内容通りですが、一部調整してます。CloudFormation を使用して、既存の S3 バケットで Lambda 用の Amazon S3 通知設定を作成する方法を教えてください。 https://aws.amazon.com/jp/premiumsupport/knowledge-center/cloudformation-s3-notification-lambda/先に内容の概要を紹介S3NotificationLambdaFunctionS3からの通知を受け取るLambda処理自体はfunction/function.pyLibraryLayerS3NotificationLambdaFunctionで使うライブラリを置いておくLambdaLayerpython/ 以下がデプロイされるように設定しているLambdaInvokePermissionS3NotificationLambdaFunctionのPermissionLambdaIAMRoleS3NotificationLambdaFunctionのIAMロールCustomResourceLambdaFunctionS3通知を設定するLambdaLambdaTriggerS3通知の設定template.yamlAWSTemplateFormatVersion: 2010-09-09Transform: 'AWS::Serverless-2016-10-31'Description: S3から通知を受けるLambdaを作成するParameters:  NotificationBucket:    Type: String    Description: 通知を設定するS3バケット名  S3NotificationLambdaFunctionName:    Type: String    Description: S3からの通知を受ける関数名  Prefix:    Type: String    Description: 通知対象のファイルのPrefix(フォルダ等)Resources:  S3NotificationLambdaFunction:    Type: 'AWS::Serverless::Function'    Properties:      FunctionName: !Ref S3NotificationLambdaFunctionName      CodeUri: function/      Handler: function.lambda_handler      Role: !GetAtt LambdaIAMRole.Arn      Runtime: python3.9      Timeout: 5      Layers:        - !Ref LibraryLayer  LibraryLayer:    Type: "AWS::Serverless::LayerVersion"    Properties:      LayerName: PythonLibraryLayer      ContentUri: python/      CompatibleRuntimes:        - python3.9      RetentionPolicy: Delete  LambdaInvokePermission:    Type: 'AWS::Lambda::Permission'    Properties:      FunctionName: !GetAtt S3NotificationLambdaFunction.Arn      Action: 'lambda:InvokeFunction'      Principal: s3.amazonaws.com      SourceAccount: !Ref 'AWS::AccountId'      SourceArn: !Sub 'arn:aws:s3:::${NotificationBucket}'  LambdaIAMRole:    Type: 'AWS::IAM::Role'    Properties:      AssumeRolePolicyDocument:        Version: 2012-10-17        Statement:          - Effect: Allow            Principal:              Service:                - lambda.amazonaws.com            Action:              - 'sts:AssumeRole'      Path: /      ManagedPolicyArns:        - 'arn:aws:iam::aws:policy/AmazonS3FullAccess'        - 'arn:aws:iam::aws:policy/AmazonRekognitionFullAccess'      Policies:        - PolicyName: root          PolicyDocument:            Version: 2012-10-17            Statement:              - Effect: Allow                Action:                  - 's3:GetBucketNotification'                  - 's3:PutBucketNotification'                Resource: !Sub 'arn:aws:s3:::${NotificationBucket}'              - Effect: Allow                Action:                  - 'logs:CreateLogGroup'                  - 'logs:CreateLogStream'                  - 'logs:PutLogEvents'                Resource: 'arn:aws:logs:*:*:*'  CustomResourceLambdaFunction:    Type: 'AWS::Lambda::Function'    Properties:      Handler: index.lambda_handler      Role: !GetAtt LambdaIAMRole.Arn      Code:        ZipFile: |            from __future__ import print_function            import json            import boto3            import cfnresponse            SUCCESS = "SUCCESS"            FAILED = "FAILED"            print('Loading function')            s3 = boto3.resource('s3')            def lambda_handler(event, context):                print("Received event: " + json.dumps(event, indent=2))                responseData={}                try:                    if event['RequestType'] == 'Delete':                        print("Request Type:",event['RequestType'])                        Bucket=event['ResourceProperties']['Bucket']                        delete_notification(Bucket)                        print("Sending response to custom resource after Delete")                    elif event['RequestType'] == 'Create' or event['RequestType'] == 'Update':                        print("Request Type:",event['RequestType'])                        LambdaArn=event['ResourceProperties']['LambdaArn']                        Bucket=event['ResourceProperties']['Bucket']                        Prefix=event['ResourceProperties']['Prefix']                        add_notification(LambdaArn, Bucket, Prefix)                        responseData={'Bucket':Bucket}                        print("Sending response to custom resource")                    responseStatus = 'SUCCESS'                except Exception as e:                    print('Failed to process:', e)                    responseStatus = 'FAILED'                    responseData = {'Failure': 'Something bad happened.'}                cfnresponse.send(event, context, responseStatus, responseData)            def add_notification(LambdaArn, Bucket, Prefix):                bucket_notification = s3.BucketNotification(Bucket)                response = bucket_notification.put(                  NotificationConfiguration={                    'LambdaFunctionConfigurations': [                      {                          'LambdaFunctionArn': LambdaArn,                          'Events': [                              's3:ObjectCreated:*'                          ],                          'Filter': {'Key': {'FilterRules': [                            {'Name': 'Prefix', 'Value': Prefix}                          ]}}                      }                    ]                  }                )                print("Put request completed....")            def delete_notification(Bucket):                bucket_notification = s3.BucketNotification(Bucket)                response = bucket_notification.put(                    NotificationConfiguration={}                )                print("Delete request completed....")      Runtime: python3.9      Timeout: 50  LambdaTrigger:    Type: 'Custom::LambdaTrigger'    DependsOn: LambdaInvokePermission    Properties:      ServiceToken: !GetAtt CustomResourceLambdaFunction.Arn      LambdaArn: !GetAtt S3NotificationLambdaFunction.Arn      Bucket: !Ref NotificationBucket      Prefix: !Ref Prefix画像処理にPillowを使いますrequirements.txtPillowインストールpip3 install -r function/requirements.txt -t pythonfunction.pyを編集import jsonimport boto3import osfrom PIL import ImageWIDTH_INDEX = 0HEIGHT_INDEX = 1def lambda_handler(event, context):    s3 = boto3.client('s3')    created_images = event["Records"]    for image in created_images:        created_image_path = image["s3"]["object"]["key"]        bucket_name = image["s3"]["bucket"]["name"]        temp_file_path = u'/tmp/' + os.path.basename(created_image_path)        print(f'target_image is {created_image_path}')        s3.download_file(Bucket=bucket_name, Key=created_image_path, Filename=temp_file_path)        target_image = Image.open(temp_file_path)        image_width = target_image.size[WIDTH_INDEX]        image_height = target_image.size[HEIGHT_INDEX]        is_width_shorter = image_width < image_height        upper_coordinate = 0        left_coordinate = 0        lower_coordinate = 0        right_coordinate = 0        if is_width_shorter:            left_coordinate = 0            right_coordinate = image_width            upper_coordinate = image_height / 2 - image_width / 2            lower_coordinate = image_height / 2 + image_width / 2        else:            upper_coordinate = 0            lower_coordinate = image_height            left_coordinate = image_width / 2 + image_height / 2            right_coordinate = image_width / 2 - image_height / 2        cropped_image = target_image.crop((left_coordinate, upper_coordinate, right_coordinate, lower_coordinate))        cropped_file_temp_path = u'/tmp/cropped-' + os.path.basename(created_image_path)        cropped_image.save(cropped_file_temp_path)        s3.upload_file(Filename=cropped_file_temp_path, Bucket=bucket_name, Key=f'cropped/{created_image_path}')    return {        'statusCode': 200,        'body': json.dumps('Success!')    }awsコンソールからs3のバケットを作成する（すでに自由に使えるバケットがあるならスキップでOK）ビルドとデプロイsam buildsam deploy --guided以下にダイアログの例を置いておきます。NotificationBucketは作成したバケット名を指定する必要がありますが、それ以外はよしなに進めればOKです。$ sam deploy --guidedConfiguring SAM deploy======================        Looking for config file [samconfig.toml] :  Found        Reading default arguments  :  Success        Setting default arguments for 'sam deploy'        =========================================        Stack Name [sam-lambda-s3]: デフォルトでOK        AWS Region [ap-northeast-1]: デフォルトでOK        Parameter NotificationBucket []: <作成したバケット名を入力>        Parameter S3NotificationLambdaFunctionName []: <Lambdaの関数名を自由に入力>        Parameter Prefix []: original/ (このフォルダ以下に画像が追加されると通知が行われ、Lambdaが実行されます。特に好みがなければoriginalと入れておきましょう。)        #Shows you resources changes to be deployed and require a 'Y' to initiate deploy        Confirm changes before deploy [y/N]:        #SAM needs permission to be able to create roles to connect to the resources in your template        Allow SAM CLI IAM role creation [Y/n]:        #Preserves the state of previously provisioned resources when an operation fails        Disable rollback [y/N]:        Save arguments to configuration file [Y/n]:        SAM configuration file [samconfig.toml]:        SAM configuration environment [default]:デプロイが完了したら、S3に画像上げて→Lambdaが動き→加工された画像が/croppedに入ってるのを確認してみましょう。以上です。

AWS SAMを使ってS3通知→Lambda(Python Pillow)で画像加工する環境をつくる

誰向けの何これから事業やプロダクトを立ち上げようとしている人向けエセ昔話風にあるあるな落とし穴を話す記事注意全てフィクションです。架空の戦国時代です。あるあるを想像して書きました。具体的な…

人はなぜ刀の柄にロケットランチャーを仕込みたくなるのか

環境変数を読むとかTailwind入れるとかあたり若干ややこしかったので、備忘録がてらRemixの環境構築について書きます。Firebaseのプロジェクトはあらかじめ作っておいてください。 Firebase導入まで プロジェクト準備このあたりを見ながらプロジェクトを立ち上げます。https://remix.run/docs/en/v1/tutorials/blognpx create-remix@latestcd 作ったプロジェクト名npm run dev必要なパッケージも導入しておきましょう。npm i dotenv firebase zustandtouch ...

Remix / Firebase / Tailwind 環境構築する

割と雰囲気で使っていたのでちゃんと理解したいと思います。 Refとは基本的なRefに関しての話と、useRefを使った話の二段構成になります。まずは基本的な話から。公式ドキュメントを読んでみましょう。https://ja.reactjs.org/docs/refs-and-the-dom.html基本的にはあまりRefに頼らないようにしましょう、ということが随所に書かれています。コンポーネントに親子関係がある場合、基本的に子コンポーネントの詳細は隠蔽されていますが、Refを利用すると親が子の詳細を知らなくてはならない=依存関係が生まれてしまうためですね。Refの概要として...

ReactのRefを理解したい

mofmofでは毎日朝会をやっていて、発言の順番は全メンバーをシャッフルしたものをGASでSlack通知してます。これの課題が「全メンバー」って部分で、稼働日でないメンバーや子供の送迎や通院などで朝会欠席するメンバーも含まれてるんですよね。なので「この人とこの人いる？あ、いない？じゃあ飛ばして…ああ、自分の番か」という大変な認知負荷が朝っぱらからかかることになっています。つらい。つくったものZoomのWebhookで、Zoomに人がくるたびFirebaseのFunctionsを呼ぶ来た人をFirestoreに突っ込んでおくスケジュール設定しておいたFunctionsからSlack通知するといった具合です。現状の致命傷は、スケジュール通りに起動してはいるものの通知が遅いってことですね。朝会は9:45-10:00なんですが、通知が来るのが9:50なんですよね。遅いでしょ…。あとサボったのでシャッフルしてないです。それはさておき、ZoomのWebhookやFunctionsの紹介をしていきます。FirebaseZoomの設定をするためにWebhookの通知先が必要なので、先にFirebase側の作業をしておきます。一般的なセットアップの手順は省略します。FunctionsとFirestoreが使えるようにしてください。Functions使うためには従量課金プランにしておかないといけないので、その点だけご注意ください。パッケージとして dayjs と node-fetch を使うので入れておきます。functionsディレクトリで以下のコマンドを実行してください。npm install dayjsnpm install node-fetch@2そしたらindex.jsを編集しましょう。    const functions = require("firebase-functions");    const admin = require("firebase-admin");    const dayjs = require("dayjs");    const fetch = require("node-fetch");    admin.initializeApp();    const db = admin.firestore();    exports.add = functions.https.onRequest((req, res) => {      const headers = req.headers;      if (headers.authorization !== "<あとで埋めます>") {        return res.status(403).send("Invalid");      }      const participatedUserName = req.body.payload.object.participant.user_name;      functions.logger.info("userName", participatedUserName);      const targetDate = dayjs().format("YYYY-MM-DD");      db.collection("dates").doc(targetDate).get().then((documentSnapshot) => {        if (documentSnapshot.exists) {          const participated = documentSnapshot.data().users;          documentSnapshot.ref.set({            users: [...participated, participatedUserName],          });        } else {          db.collection("dates").doc(targetDate).set({            users: [participatedUserName],          });        }      });      res.send("completed!");    });    exports.notify = functions.pubsub      .schedule("every day 9:47")      .timeZone("Asia/Tokyo")      .onRun((context) => {        console.log("running");        const targetDate = dayjs().format("YYYY-MM-DD");        db.collection("dates")          .doc(targetDate)          .get()          .then((querySnapshot) => {            const participants = [];            querySnapshot.data().users.forEach((user) => {              participants.push(user);            });            fetch("<あとで埋めます>", {              headers: { "Content-type": "application/json" },              body: JSON.stringify({ "text": participants }),            }, function (err, res, body) {              console.log(body);            });          });        return null;      });一旦これでOKです。ZoomやSlackから発行される部分は<あとで埋めます>になってます。addのほうはうまいこと参加者をFirestoreに突っ込み、notifyのほうはいい感じにSlack通知をしてくれます。addのエンドポイントがほしいので、デプロイしておきましょう。    firebase deploy --only functionsデプロイ完了したら https://ドメイン/~/add というURLが発行されるはずなので、それを控えておきます。ZoomZoom App Marketplaceからログインします。https://marketplace.zoom.us/したらヘッダから Build App をクリックしましょう。開いたページの、Webhook OnlyのCreateをクリックします。モーダルが出てくるので適当に名前を埋めてください。このあたりは適宜埋めてください。Event Subscriptionsのスイッチをクリックしてアクティブにしましょう。したらEventsを追加します。 Add Events をクリックするとモーダルが表示されるので、Meeting > Participant/Host joined meeting にチェックを入れます。先ほどfunctionsをデプロイしたときに発行されたURLをここに入れましょう。ここまでの作業が終わったらこんな画面になっているはずです。できたらSaveしてください。するとValidation Tokenが発行されるはずです。これをコピーして、addの冒頭に入れてあげましょう。    exports.add = functions.https.onRequest((req, res) => {      const headers = req.headers;      if (headers.authorization !== "<あとで埋める>") { // ここです        return res.status(403).send("Invalid");      }以上で完了です。再度デプロイしておきましょう。このWebhookは現在ログイン中のZoomアカウントで有効になっているので、自分でZoomを立ち上げてmeetingに入ってみましょう。Firestoreのdates > YYYY-MM-DD > users に自分の名前が入るはずです。Slackhttps://slack.com/intl/ja-jp/help/articles/115005265063-Slack-%E3%81%A7%E3%81%AE-Incoming-Webhook-%E3%81%AE%E5%88%A9%E7%94%A8このあたりを参考に、Webhookを設定してください。発行されたURLをfunctions > notify > あとで埋めます に設定すれば完了です。    fetch("https://hooks.slack.com/services/~~~", {これで時間になったらFirestoreを読んでSlack通知してくれるFunctionsが完成しました。以上です！

ZoomのAPIとFirebaseで参加者シャッフルSlack通知をつくった

今回は、Reactでチャートを描画するライブラリ、Rechartsを使ってレーダーチャートを描画します。早速余談ですが地名からじゃんけん力を算出してじゃんけんできるサービスをつくりました。グー力(りょく)とかが算出されます。残念ながら対人戦はできません。https://next-fws.vercel.appが、こんな数字見せられても心底意味がわからないのでRechartsを使ってレーダーチャートで表現することにします。チャートにしたところで意味がわからないことに変わりはないのですが。導入描画実データを入れて描画するまとめ導入Reactでチャートを描画できるライブラリはいろいろあるみたいです。中でも今回利用するRechartsは断トツでスター数が多いようですね。参考: https://qiita.com/quzq/items/8dc0ab885ab6a3c9cd77今回はレーダーチャートを作成しますが、もちろん他の色々なチャートを描画することができます。棒グラフや折れ線グラフはもちろん、FunnelChart(ピラミッドみたいなやつ)やTreemap(市場規模マップとかで見るようなやつ)等も描画できます。面白い。さて、まずはrechartsを入れます。https://recharts.org/en-US$ yarn add recharts描画まずは公式のサンプルを描画してみましょう。下記コードを適当なコンポーネントにコピペしてください。import {  Radar,  RadarChart,  PolarGrid,  PolarAngleAxis,  PolarRadiusAxis} from "recharts";const data = [  {    subject: "Math",    A: 120,    B: 110,    fullMark: 150  },  {    subject: "Chinese",    A: 98,    B: 130,    fullMark: 150  },  {    subject: "English",    A: 86,    B: 130,    fullMark: 150  },  {    subject: "Geography",    A: 99,    B: 100,    fullMark: 150  },  {    subject: "Physics",    A: 85,    B: 90,    fullMark: 150  },  {    subject: "History",    A: 65,    B: 85,    fullMark: 150  }];const radar = (  <RadarChart    cx={300}    cy={250}    outerRadius={150}    width={500}    height={500}    data={data}  >    <PolarGrid />    <PolarAngleAxis dataKey="subject" />    <PolarRadiusAxis />    <Radar      name="Mike"      dataKey="A"      stroke="#8884d8"      fill="#8884d8"      fillOpacity={0.6}    />  </RadarChart>)このraderコンポーネントを使うと、こんなチャートが表示されるはずです。実データを入れて描画するpropsを渡して、それを表示するようにします。渡す値は各都市のじゃんけん力です。こんな感じでコンポーネント化components/RadarChart.jsimport { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart } from "recharts";const RadarChartComponent = (props) => {  const data = [    {      subject: "グー",      A: props.gu,      fullMark: 2    },    {      subject: "チョキ",      A: props.choki,      fullMark: 2    },    {      subject: "パー",      A: props.pa,      fullMark: 2    }  ];  return (    <RadarChart      cx={300}      cy={250}      outerRadius={150}      width={500}      height={500}      data={data}    >      <PolarGrid/>      <PolarAngleAxis dataKey="subject"/>      <PolarRadiusAxis/>      <Radar        name="janken"        dataKey="A"        stroke="#8884d8"        fill="#8884d8"        fillOpacity={0.6}      />    </RadarChart>  )}export default RadarChartComponentちなみにRadarChartのdataのfullMarkはうまく動かない説がありました。https://github.com/recharts/recharts/issues/933これを表示してみます。      <div style={{ display: 'flex' }}>        <RadarChart          gu={result.guPower}          choki={result.chokiPower}          pa={result.paPower}        />        <RadarChart          gu={result.enemyGuPower}          choki={result.enemyChokiPower}          pa={result.enemyPaPower}        />      </div>良いですね。しかしまだ比較するのがちょっと面倒です。重ねてしまいましょう。components/JankenResults.jsimport { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart } from "recharts";const JankenResults = (props) => {  const data = [    {      subject: "グー",      choice: props.gu,      enemy: props.enemyGu,      fullMark: 2    },    {      subject: "チョキ",      choice: props.choki,      enemy: props.enemyChoki,      fullMark: 2    },    {      subject: "パー",      choice: props.pa,      enemy: props.enemyChoki,      fullMark: 2    }  ];  return (    <RadarChart      cx={300}      cy={250}      outerRadius={150}      width={500}      height={500}      data={data}    >      <PolarGrid/>      <PolarAngleAxis dataKey="subject"/>      <PolarRadiusAxis/>      <Radar        name="choice"        dataKey="choice"        stroke="#8884d8"        fill="#8884d8"        fillOpacity={0.6}      />      <Radar        name="enemy"        dataKey="enemy"        stroke="#82ca9d"        fill="#82ca9d"        fillOpacity={0.6}      />    </RadarChart>  )}export default JankenResultsRadarChartコンポーネントの子にRadarを複数置きます。dataKeyをちゃんと指定してあげるのがポイントですね。結果はこんな感じそれぞれの力関係がわかりやすくなりましたね。ちなみに、RechartsのレーダーチャートではRadarChartコンポーネントに渡す子コンポーネントによって描画オプションをカスタマイズすることができます。他のライブラリだと、RadarChartコンポーネントに渡すpropsによってカスタマイズしたりしてますね。例えばこんな感じにすると、    <RadarChart      cx={300}      cy={250}      outerRadius={150}      width={500}      height={500}      data={data}    >      <PolarGrid/>      <PolarAngleAxis dataKey="subject"/>      <Radar        name="choice"        dataKey="choice"        stroke="#8884d8"        fill="#8884d8"        fillOpacity={0.6}      />      <Radar        name="enemy"        dataKey="enemy"        stroke="#82ca9d"        fill="#82ca9d"        fillOpacity={0.6}      />      <Legend />    </RadarChart>各チャートの色が何を表しているのかラベルを表示したり、尺度(？)ポイント(？)が表示されなくなったりします。渡せるものはここに書いてあります。https://recharts.org/en-US/api/RadarChartまとめというわけで、チャートの描画でした。とても簡単ですね。ちなみに今回題材にした超絶都市じゃんけんは、弊社のイベント mof1week にて作ったものです。1週間でなにか作るというイベントです。スキーマファーストのGraphQLサーバに触れてみたいなと思い、Goとgqlgenをキャッチアップして作りました。フロントはNextで適当に。プロダクトはクソみたいなものですが、知らない技術に触るのは楽しかったです。以上、Reactでレーダーチャート描画でした。

【Recharts】Reactでレーダーチャートを描画する

普段はApolloを使っているのですが、GQlessというものがあると聞き試してみました。パッと見てめちゃくちゃ便利そうだったので、そのあたり紹介できればと思います。コードはここに置いておきました。https://github.com/yubachiri/play-gqless特長環境構築動かしてみるまとめ特長アプリケーションに書いたコードをもとに、よしなにクエリを発行してくれます。公式トップに書いてあるのはこれ。https://gqless.com/const App = () => {  const { me, users } = useQuery();  return (    <div>      Hello {me.name}!      {users({ limit: 10 }).map((user) => (        <User key={user.id || 0} user={user} />      ))}    </div>  );};これを書くと、このqueryを投げてくれます。query {  me {    name  }  users(limit: 10) {    id    name  }}使うものだけきっちりとってきてくれるわけですね。事前にschemaから型を自動生成させておくため、useQueryが何を返すのかもIDEに補完させることができます。では、GQlessの使い方を見ていきましょう。create-react-appして、GitHubのAPIを叩いて試してみることとします。環境構築create-react-appで、typescriptが使えるreactプロジェクトを作成します。$ yarn create react-app gqless-sample --template typescriptプロジェクトのディレクトリで下記コマンドを実行し、パッケージを追加。$ yarn add typescript @types/node @types/react @types/react-dom @types/jestこのあたり、詳しくはここを参照してください。https://create-react-app.dev/docs/adding-typescript/次にgqlessを入れます。$ yarn add gqless$ yarn add -D @gqless/cli graphqlしたらpackage.jsonのscriptsにこれを追記。"generate": "gqless generate"こんな感じになります。  "scripts": {    "start": "react-scripts start",    "build": "react-scripts build",    "test": "react-scripts test",    "eject": "react-scripts eject",    "generate": "gqless generate"  },次に、型を自動生成させる設定をします。あらかじめGitHubでトークン生成して、srcの下に .env.jsonファイルを作って書いておきます。GitHub > Settings > Developer settings > Personal access tokens より、repoとuserにチェックを入れたものを作っておけばOKです。jsonではなく該当箇所にベタ書きでも可です。その場合はうまいこと読みかえてください。.env.json{  "GITHUB_TOKEN": "生成したトークン"}$ yarn generateすると、gqless.config.cjs ができるのでこれを編集します。introspqectionのendpointを、GitHubのAPIに変えます。 https://api.github.com/graphql/** * @type {import("@gqless/cli").GqlessConfig} */import { GITHUB_TOKEN } from './src/.env.json'const config = {  endpoint: "/api/graphql",  enumsAsStrings: false,  react: true,  scalars: { DateTime: "string" },  preImport: "",  introspection: {    endpoint: "https://api.github.com/graphql",    headers: {      Authorization: `bearer ${GITHUB_TOKEN}`    },  },  destination: "./src/gqless/index.ts",  subscriptions: false,  javascriptOutput: false,};module.exports = config;完了したらもう一度generateコマンドを実行します。$ yarn generateこれによって型ファイルが作成されます。ここまで完了したら、再びパッケージ追加です。$ yarn add @gqless/react @gqless/subscriptions以上で準備完了になります。動かしてみるApp.tsxを編集して、yarn startします。import React from 'react';import logo from './logo.svg';import './App.css';import { useQuery } from './gqless';function App() {  const { viewer, $state } = useQuery()  return (    <div className="App">      <header className="App-header">        <img src={logo} className="App-logo" alt="logo"/>        {$state.isLoading ? <p>loading</p> : (          <p>{viewer.name}</p>        )}      </header>    </div>  );}export default App;useQueryがGQlessの関数ですね。生成された型を見つつ、よしなにクエリを発行してくれるものです。こんな画面になります。Reactロゴの下に自分の名前が表示されます。また、サブリソースの取得はこんな感じになります。引数に取得条件を渡してあげると、そこを見てクエリを発行してくれます。import React from 'react';import logo from './logo.svg';import './App.css';import { useQuery } from './gqless';function App() {  const { viewer, $state } = useQuery()  return (    <div className="App">      <header className="App-header">        <img src={logo} className="App-logo" alt="logo"/>        {$state.isLoading ? <p>loading</p> : (          <>            <p>{viewer.name}</p>            {viewer.followers({ first: 5 }).nodes?.map((follower, index) => {              return <p key={follower?.id || index}>{follower?.name}</p>            })}          </>        )}      </header>    </div>  );}export default App;クエリはこんな感じ。query($first1:Int) {  viewer {    __typename     id     name     followers0: followers(first:$first1) {      __typename       nodes {        __typename         id        name      }    }  }}.graphqlファイルを書かなくても済む点、graphql-codegenと違い先に型を作ってくれる点がスマートな感じしますね。また、ページで使うフィールドのみを機械的に要求してくれるのも良きです。まとめまだ確認していませんが、mutationやsubscription等も問題なく対応しているようです。また、キャッシュも備えているとのこと。Apolloから乗り換えるかはわかりませんが、シンプルなアプリであれば工数が削減できかつエコな実装ができそうですね。以上、GQlessの紹介でした。

【GQless紹介】スマートなGraphQL client GQlessを使ってqueryを発行する

2020終わり頃のApollo Client 3から、 reactive variables なるものが追加されたようです。リアクティブな変数を持たせることができるようになったということです。New in Apollo Client 3, reactive variables are a useful mechanism for storing local state outside of the Apollo Client cache. Because they're separate from the cache, reactive variables can store data of any type and structure, and you can interact with them anywhere in your application without using GraphQL syntax.https://www.apollographql.com/docs/react/local-state/reactive-variables/これを使うと、ReduxやRecoilで実現しているようなストアがApolloで手軽に実現できます。Apolloを使っていて、通常のキャッシュで管理しない値を遠いコンポーネントでも同期させたいなと思ったらこれを使うのも手ですね。公式の謳い文句を意訳すると、こんなニュアンスになります。GraphQLの操作なしに、アプリケーションのどこからでもリアクティブ変数を読み書きできます。Apollo Clientのキャッシュと違いデータ正規化は行われず、好きな形式でデータを持たせることができます。リアクティブな変数に依存している値がある場合、それが変更された際には関連するすべてのアクティブなクエリが自動的にリフレッシュされます。柔軟お手軽に、リアクティブな変数をどこからでも触れるというわけですね。環境構築準備実装今回は、こんな感じのタブナビゲーションを作ってみることにします。環境構築読んで雰囲気をつかむだけならスキップでOKです。Apollo導入済みのテンプレートを活用するので、ほとんど準備することはありません。これ: https://github.com/vercel/next.js/tree/canary/examples/with-apollo$ yarn create next-app --example with-apollo apollo-store$ cd apollo-store$ yarn dev任意のディレクトリで上記コマンドを実行してください。 http://localhost:3000 でデフォルトで実装されているページが表示されるはずです。今回利用する useReactiveVar は3.2で追加されたものなので、必要であれば@apollo/clientのバージョンを上げておきましょう。執筆時は3.1.1がインストールされていたので、3.3.0に上げて使いました。$ yarn upgrade @apollo/client@3.3.0準備まずは、components以下のApp.js以外と、pagesの_app.js, index.js以外を消してしまいましょう。したらベースとなるアプリをつくります。全部コピペでOKです。components/App.jsexport default function App({ children }) {  return (    <main>      {children}      <style jsx>{`        * {          font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',            'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',            monospace, serif;        }        body {          margin: 0;          padding: 0;        }        main {          padding: 25px 50px;        }        p {          font-size: 14px;          line-height: 24px;        }      `}</style>    </main>  )}components/Tab.jsimport Link from "next/link";export default function Tab({ name }) {  return (    <>      <Link href={`/${name}`}>        <div className={`tab_item ${true && 'active'}`}>{name}</div>      </Link>      <style jsx global>{`        .tab_item {          display: flex;          justify-content: center;          width: 100%;          padding: 20px;          background-color: lightgray;          cursor: pointer;        }        .active {          background-color: lightgreen !important;        }      `}</style>    </>  )}components/Tabs.jsimport Tab from "./Tab";export default function Tabs() {  return (    <div className="tab_container">      <Tab name="home"/>      <Tab name="about"/>      <Tab name="detail"/>      <Tab name="setting"/>      <style jsx global>{`        .tab_container {          display: flex;          justify-content: space-between;          width: 100vw;          position: fixed;          bottom: 0;        }      `}</style>    </div>  )}pages/home.jsimport App from "../components/App";const Home = () => (  <App>    <div>home</div>  </App>);export default Home;pages/about.jsimport App from "../components/App";const About = () => (  <App>    <div>about</div>  </App>);export default About;同様にdetailとsettingも作ってください。pages/_app.jsiimport { ApolloProvider } from '@apollo/client'import { useApollo } from '../lib/apolloClient'import Tabs from "../components/Tabs";export default function App({ Component, pageProps }) {  const apolloClient = useApollo(pageProps)  return (    <ApolloProvider client={apolloClient}>      <Component {...pageProps} />      <Tabs/>    </ApolloProvider>  )}ここまでやると、こんな画面になると思います。さて、問題はこちらです。components/Tab.jsimport Link from "next/link";export default function Tab({ name }) {  return (    <>      <Link href={`/${name}`}>        <div className={`tab_item ${true && 'active'}`}>{name}</div>アクティブなタブの判定部分ですね。通常はURLを監視しておいて判定したり、グローバルなストアで管理したりするものだと思います。今回はここの処理にApolloを活用してみようと思います。実装lib/apolloClient.js を編集します。import { makeVar } from '@apollo/client'export const activeTabName = makeVar('')function createApolloClient() {  return new ApolloClient({    ssrMode: typeof window === 'undefined',略    cache: new InMemoryCache({      typePolicies: {        Query: {          fields: {            activeTabName: {              read() {                return activeTabName()makeVarをimportしつつ、cacheに渡してあげます。components/Tab.jsimport { useReactiveVar } from "@apollo/client";import { activeTabName } from "../lib/apolloClient";export default function Tab({ name }) {  const activeName = useReactiveVar(activeTabName)  return (    <>      <Link href={`/${name}`}>        <div className={`tab_item ${name === activeName && 'active'}`}>{name}</div>      </Link>useReactiveVarとactiveTabNameをimportし、読み出したものを条件にします。あとは、activeTabNameの書き換えですね。pages/home.jsimport App from "../components/App";import { activeTabName } from "../lib/apolloClient";const Home = () => {  useEffect(() => {    activeTabName('home')  }, [])  return (    <App>      <div>home</div>    </App>  )};export default Home;importしたactiveTabNameに値を渡せば更新してくれます。他のページも同じように書き換えれば完成です。

Apolloをストアとして活用する Next.jsのwith-apollo exampleをベースに解説

注: 「いつ使うべきなのか、どう重要なのか」は多くの先人が解説してくださっているため、この記事は具体例をもとに挙動を端的に理解することを目的にしています。参考にした記事:https://qiita.com/uehaj/items/99f7cd014e2c0fa1fc4ehttps://qiita.com/soarflat/items/b9d3d17b8ab1f5dbfed2サンプルコードimport React, { useCallback, useState } from "react";// React.memo〇const MemoizationWithGood: React.FC<{ func: () => void }> = React.memo(  ({ func }) => {    console.log("---render good---");    return <button onClick={func}>good</button>;  });// React.memo〇 / useCallback×const MemoizationWithBad: React.FC<{ func: () => void }> = React.memo(  ({ func }) => {    console.log("---render bad---");    return <button onClick={func}>bad</button>;  });// React.memo× / useCallback〇const Component: React.FC<{ func: () => void }> = ({ func }) => {  console.log("---render---");  return <button onClick={func}>normal</button>;};export default function App() {  const [countA, setCountA] = useState<number>(0);  const [countB, setCountB] = useState<number>(0);  const goodFunc = useCallback(() => {    console.log("func called");  }, []);  const withDependencyFunc = useCallback(() => {    console.log(countB);  }, [countB]);  const badFunc = () => {    console.log("func called");  };  return (    <div>      <p>        A: {countA} B: {countB}      </p>      <div>        <MemoizationWithGood func={goodFunc} />        <MemoizationWithGood func={withDependencyFunc} />        <MemoizationWithBad func={badFunc} />        <Component func={goodFunc} />      </div>      <div>        <button onClick={() => setCountA(countA + 1)}>count up A</button>        <button onClick={() => setCountB(countB + 1)}>count up B</button>      </div>    </div>  );}codesandboxで触ってみると、挙動がちょっとわかると思います。https://codesandbox.io/s/dark-dew-bjs4p?file=/src/App.tsxコードの内容ですが、定義されている関数は1. useCallbackを使った関数2. useCallbackを使わない関数3. stateに依存した関数利用しているコンポーネントは1. React.memoを使ったコンポーネント2. React.memoを使っているが、useCallbackを使わない関数を受け取る予定のコンポーネント3. React.memoを使わないコンポーネントとなっています。それぞれを組み合わせていて、stateが更新されたときにどのコンポーネントが再描画されるかわかるようになっています。各ログ出力の内容を自分にわかりやすいように変えてみたり、各コンポーネントに渡す関数を変えてみたり、依存をいじってみたりするとよりよく分かるんじゃないかと思います。

ReactのuseCallbackを3分くらいでふわっと理解する

以前は純Railsで開発を行うことが多かったんですが、最近はgraphql-ruby + SPAを採用することも増えています。というわけで、今回はRailsをGraphQLサーバにするgem、graphql-rubyを使ったCRUDを紹介しようと思います。Dockerに乗せたサンプルアプリを用意したので、ぜひ活用してください。（かなり面倒な）環境構築をスキップすることができます。やることgraphql-rubyを使った簡単なCRUD実装やらないことGraphQLとは？の説明や前提知識の解説環境構築の解説フロントの実装（リクエストはpostmanから投げます）サンプルアプリの実装についてサンプルアプリ概要setup取得処理: query更新処理: mutation実践編準備mutation編query編おまけ: 関連編おまけ: graphiql編まとめ実装を読んで理解する → 書いてみる という流れで解説します。サンプルアプリの実装について軽く概要紹介とセットアップを行います。サンプルアプリ概要AuthorizationヘッダにJWTを入れてリクエストを投げるといい感じにUserを作ってくれるようになっています。モデルはUserのみ。idとemailとnameだけ持ってます。user取得のqueryと、userのname変更のmutationが実装されています。それに必要なquery_typeやmutation_typeの設定、user_typeの作成も済んでいます。(雑にサンプル用に改修したのでいらないものが残ってたりしますがご了承ください)setupまずはこちらのプロジェクトをcloneしてください。なお、Dockerが必要になります。https://github.com/yubachiri/graphql-ruby-sample-appまた、http://localhost:3000 にPOSTを投げられるようにしておいてください。記事内ではpostmanを利用します。以下のコマンドでセットアップが完了し、サーバが起動するはずです。$ cp .env.example .env$ make setup$ make up早速動作確認をしたいのですが、リクエストのヘッダにJWTを入れる必要があるのでこれも作っておきましょう。こちら でJWTを作りましょう。AlgorithmはRS256、payloadは適当なemailのみ渡せばOKです。こんなイメージです。これをAuthorizationヘッダに入れておきます。一番下のやつ。これを見ているのは app/controllers/concerns/secured.rb なので、興味がある方は見てみても良いかもしれません。リクエストを受け取るのは app/controllers/grpahql_controller で、ここでsecuredをincludeしてます。routesは /graphql のpostのみ。では、まずは既存の実装から概要を説明します。取得処理: queryuserに関する取得処理(query)は実装されているので、早速試してみましょう。JWTを読んで勝手にcurrent_userを作っているので、一度でもリクエストを投げていればuserは取得できるはずです。bodyにこれを入れて、 http://localhost:3000/graphql にPOSTを投げてみましょう。query users {    users {        id        email    }}結果自動で振られるUUIDと、JWTに入れていたemailで作成されたuserが取得できました。post '/graphql', to: 'graphql#execute' # graphql_controller.rbclass GraphqlController < ApplicationController  include Secured  before_action :authenticate_api_key!, only: :execute if Rails.env.production?  protect_from_forgery with: :null_session  def execute    variables = ensure_hash(params[:variables])    query = params[:query]    operation_name = params[:operationName]    context = {      user_signed_in: user_signed_in?,      current_user: current_user,    }    result = AppSchema.execute(query, variables: variables, context: context, operation_name: operation_name)    render json: result  rescue => e    raise e unless Rails.env.development?    handle_error_in_development e  end以下略securedでcurrent_userをうまいことしてからexecuteに入ります。AppSchema.execute が実処理になります。先ほどbodyに入れた文字列を見て、うまいこと処理を行います。これです。query users {    users {        id        email    }}queryなので、 app/graphql/types/query_type.rb を見にいきます。users { というところを見ます。なので query_type のうち、これが呼ばれます。field :users, [Types::Objects::UserType], null: falsedef users  User.allend内容を解説します。まず一行目について。field :フィールド名, 戻り値の型, return nullを許容するか: boolean という宣言になっています。フィールド名と同名のメソッドが実処理です。User.allを返していますね。class Types::Objects::UserType < Types::BaseObject  field :id, ID, null: false  field :email, String, null: falseenduserモデルはnameも持っているのですが、typeに定義されていないので返すことができません。試しにリクエストを投げてみましょう。UserTypeにnameは定義されていないという旨のエラーが返ってきました。ここにnameを足すと、正常に取得できるようになります。class Types::Objects::UserType < Types::BaseObject  field :id, ID, null: false  field :email, String, null: true  field :name, String, null: trueendここまでの流れをおさらいすると、リクエストgraphql_controllerquery_typeのfieldを見るquery_typeのdefで定義された処理を行う値を返すその値をtypeで検証する6の時点では、returnされたオブジェクトをobjectから触ることができます。class Types::Objects::UserType < Types::BaseObject  field :id, ID, null: false  field :email, String, null: false  field :name, String, null: true  def email    object.id + object.email  endendこれで、emailで返されるのがid+emailの値になります。奇妙。nameがnullのままなのが気になるので、次はuserにnameを登録する処理を見てみます。更新処理: mutationGraphQLでは、追加・更新・削除はmutationが担当しますね。# app/graphql/types/mutation_typemodule Types  class MutationType < Types::BaseObject    field :update_user, mutation: Mutations::UpdateUser  endendmutation_typeにはfieldが一つ定義されていますね。これは先ほどのquery_typeと同じように、クエリ文字列から探しにくるものです。mutation updateUser { ... で呼ぶことができます。で、実装の方はこうなっています。# app/graphql/mutations/update_userclass Mutations::UpdateUser < Mutations::BaseMutation  null false  argument :name, String, required: true  field :user, Types::Objects::UserType, null: false  def resolve(name:)    context[:current_user].update!(name: name)    { user: context[:current_user] }  endend上から順に解説します。null falsemutationの戻り値にnullを許容するかという設定です。nilを返すとエラーになります。nilを許容するならtrueにすれば良いですし、デフォルトはtrueになっているので特に何も書かなくてもOKです。https://graphql-ruby.org/mutations/mutation_classes.htmlargumentは読んだままで、受け取る引数の定義です。複数受け取りたいときは同じような並べればOKです。argument :名前, 型, 必須設定という構成ですね。required: trueも省略はできません。fieldは、このmutationが返す値の設定です。こちらも引数同様、複数並べることができます。field :名前, 型, nullを許容するかです。value } のようにuserをkeyにしたjsonを返すようにしないと怒られます。resolveは実処理です。ここにロジックを書きます。では、postmanから実行してみましょうか。こんなものを投げてます。コピペで動くと思います。mutation updateUser($input: UpdateUserInput!) {    updateUser(input: $input) {        user {            id            email            name        }    }}{    "input": {        "name": "hoge"    }}気を付けるのは、引数の定義の部分ですね。形としては、mutation 好きな名前($input: アッパーキャメルmutation名 + Input!) {  mutation名(input: $input) {    戻り値のような構造になります。GraphQLの仕様についてはここでは解説しないので、うまいことググってください。エストから引数を渡すにはこんな感じの書き方をする必要があるんじゃないかと思います。少なくとも勝手にinputで囲われるのは確かです。 (追記) と思ってたんですが、勘違いかもしれません。普通に $id: ID! とかでも受け取れるみたいです。これを実行すると、inputに応じたnameに更新されたuserが返される実装になっています。また、inputをvalidationに引っかかる値にして例外を発生させると、graphql-rubyがGraphQLの仕様に準じたレスポンスを返してくれます。{    "input": {        "name": "this is too long name"    }}こんなレスポンスになります。{    "data": null,    "errors": [        {            "message": "Name is too long (maximum is 10 characters)",            "locations": [                {                    "line": 3,                    "column": 5                }            ],            "path": [                "updateUser"            ],            "extensions": {                "code": "RECORD_INVALID",                "record": {                    "model": "User",                    "id": "ba84fc51-6302-48c0-8c7b-8ca7f61f6e92",                    "errors": {                        "name": [                            "is too long (maximum is 10 characters)"                        ]                    },                    "messages": [                        "Name is too long (maximum is 10 characters)"                    ]                }            }        }    ]}と、以上がmutationの解説になります。実践編おなじみ、やることリストの登録を題材にやっていきます。といっても追加と読み出しだけなのでとても軽いです。準備ということでモデルを作成しましょうか。$ docker-compose run --rm app rails g model todo title:string user:referencesuserのidがuuidなので、migrationファイルをちょっと編集します。class CreateTodos < ActiveRecord::Migration[6.0]  def change    create_table :todos, id: :uuid do |t|      t.string :title      t.references :user, type: :uuid, null: false, foreign_key: true      t.timestamps    end  endenduserの関連を定義するところで、type: :uuid を追記しておきましょう。でmigrateしてください。has_many :todos も書いておいてください。mutation編さて、準備ができたらまずはcreateのmutationを実装してみましょう。railsコマンドでファイル作成ができます。$ docker-compose run --rm app rails g graphql:mutation create_todomutation_typeへの追記と、実装を行うファイルの作成が行われます。# mutation_typemodule Types  class MutationType < Types::BaseObject    field :create_todo, mutation: Mutations::CreateTodo # これが追記されているはず    field :update_user, mutation: Mutations::UpdateUser  endend作成されるmutationファイル# app/graphql/mutations/create_todo.rbmodule Mutations  class CreateTodo < BaseMutation    # TODO: define return fields    # field :post, Types::PostType, null: false    # TODO: define arguments    # argument :name, String, required: true    # TODO: define resolve method    # def resolve(name:)    #   { post: ... }    # end  endendこれを下記の内容に変えてください。module Mutations  class CreateTodo < BaseMutation    field :todo, Types::Objects::TodoType, null: false    argument :title, String, required: true    def resolve(title:)      todo = context[:current_user].todos.create!(title: title)      { todo: todo }    end  endendこのままだとTodoTypeがなくて怒られるので、そっちも作りましょう。こちらもコマンドがあります。$ docker-compose run --rm app rails g graphql:object objects/todo作成される app/graphql/types/objects/todo_type.rb を編集します。module Types  module Objects    class TodoType < Types::BaseObject      field :id, ID, null: false      field :title, String, null: false    end  endendここまでできたら動くはずなので、試してみましょう。mutation createTodo($input: CreateTodoInput!) {    createTodo(input: $input) {        todo {            id            title        }    }}{    "input": {        "title": "first todo"    }}そしたら作ったtodoを取得する、query編です。query編query_typeの編集module Types  class QueryType < Types::BaseObject    ~略~    field :users, [Types::Objects::UserType], null: false    def users(page: nil, items: nil)      User.all    end    # 以下追記    field :todos, [Types::Objects::TodoType], null: false    def todos      context[:current_user].todos.all    end    field :todo, Types::Objects::TodoType, null: true do      argument :id, ID, required: true    end    def todo(id:)      context[:current_user].todos.find(id)    end  endend戻り値は[]で囲むことで、複数返ることを表現できます。なお取得時はN+1問題を回避するためgraphql-batchを使うようにすると素敵です。https://github.com/Shopify/graphql-batchqueryの実装はこれだけなので、実際に取得してみましょう。自分の全todoの取得(あらかじめcreateTodoで作成しておいてください)query todos {    todos {        id        title    }}idを指定して取得するquery todo($id: ID!) {    todo(id: $id) {        id        title    }}{    "id": "自分のtodoのidを指定してください"}良いですね。ばっちり取得できました。おまけ: 関連編関連の取得も楽々です。ユーザー情報と、ユーザーに紐づくtodoを一気に取得してみましょう。# user_typeclass Types::Objects::UserType < Types::BaseObject  field :id, ID, null: false  field :email, String, null: true  field :name, String, null: true  # 追記  field :todos, [Types::Objects::TodoType], null: trueendqueryを投げてみるquery userWithTodos {    currentUser {        id        email        name        todos {            id            title        }    }}結果良きですね。また、例えば更新順にして返したい場合は、こんな感じで実装してあげればOKです。class Types::Objects::UserType < Types::BaseObject  ~略~  field :todos, [Types::Objects::TodoType], null: true  def todos    object.todos.order(updated_at: :desc)  endendおまけ: graphiql編今回はpostmanからリクエストを送っていましたが、もっと簡単な方法があります。それが、 routes.rbで/graphql の他に定義されているアレです。使ってみましょう。http://localhost:3000/graphiqlこんな画面が開くと思います。ここにクエリ文字列を書き、再生ボタンのようなものを押すとリクエストの結果を右側に表示してくれます。諸々のファイルを見て入力補完してくれたり、画面右側には自動生成のドキュメントを置いておいてくれたりします。超すごい。便利。認証回りの流れをふわっと見ていただきたかったのでpostmanを使っていましたが、気軽に触って遊ぶならこれで十分すぎる感じもあります。ぜひ活用してください。まとめgraphql-rubyでのcreateとreadを実装してみました。updateとdeleteも似たようなmutationを書けば良いので、実質CRUDをすべて解説しました（したことにしてください）。環境構築からやるとなると、サーバもフロントも大変ですが…。その分快適な開発体験が得られます。良き。

【Rails】GraphQL爆速入門 サンプルアプリでgraphql-rubyのCRUDをちゃんと理解する

Next.jsで使える認証ライブラリ、next-authでGoogle認証を試してみます。ちなみに今回の内容はこのあたりに何もかも書いてあります。https://next-auth.js.org/getting-started/examplehttps://next-auth.js.org/providers/googlehttps://developers.google.com/identity/protocols/oauth2実装next-auth導入認証情報の設定実装おまけ以上実装next-auth導入typescriptを導入したNext.jsのアプリを用意しておきます。https://github.com/yubachiri/next-tsnpm i next-auth でnext-authをインストール。そしたら実装を進めていきましょう。認証情報の設定まずはクライアントID・シークレットIDを用意します。GCP > APIとサービス > 認証情報 より、「OAuthクライアントID」を作成してください。OAuth同意画面の設定を求められたらよしなに作成してください。このへんが参考になると思います。https://developers.google.com/identity/protocols/oauth2今回はローカルで触ってみるところまでにするので、クライアントID作成時に設定することとなる 承認済みの JavaScript 生成元 と 承認済みのリダイレクトURI はそれぞれ下記の内容にします。生成元: http://localhost:3000URI: http://localhost:3000/api/auth/callback/googleです。そしたらクライアントIDとクライアントシークレットをメモっておきます。実装適宜ファイルを作成したり編集したりしてください。pages/api/auth/[...nextauth].tsimport NextAuth from 'next-auth'import Providers from 'next-auth/providers'const options = {  providers: [    Providers.Google({      clientId: process.env.GOOGLE_CLIENT_ID,      clientSecret: process.env.GOOGLE_CLIENT_SECRET    })  ],}export default (req, res) => NextAuth(req, res, options)pages/_app.tsximport { Provider } from 'next-auth/client'export default function App ({ Component, pageProps }) {  return (    <Provider session={pageProps.session}>      <Component {...pageProps} />    </Provider>  )}.envGOOGLE_CLIENT_ID=メモった内容GOOGLE_CLIENT_SECRET=メモった内容ここまで書くと、認証処理が動くようになっています。動作確認できるようにしましょう。pages/index.tsximport React from 'react'import { signIn, signOut, useSession } from 'next-auth/client'export default function Page() {  const [ session, loading ] = useSession()  return <>    {!session && <>      Not signed in <br/>      <button onClick={signIn}>Sign in</button>    </>}    {session && <>      Signed in as {session.user.email} <br/>      <button onClick={signOut}>Sign out</button>    </>}  </>}これでGoogle認証が完了するところまでは実装が完了しました。お疲れ様です！以上です！おまけだけだと味気ないので、ちょっとカスタマイズしてみます。ログイン画面をいじってみましょうか。2ステップでいけます。[...nextauth].ts に pages を追加import NextAuth from 'next-auth'import Providers from 'next-auth/providers'const options = {  providers: [    Providers.Google({      clientId: process.env.GOOGLE_CLIENT_ID,      clientSecret: process.env.GOOGLE_CLIENT_SECRET    })  ],  // 追加  pages: {    signIn: '/auth/signin'  }}export default (req, res) => NextAuth(req, res, options)pages/auth/signin.tsx を追加import React from "react";import { providers, signIn } from "next-auth/client";export default function SignIn({ providers }) {  return (    <>      <h2>ログイン</h2>      {Object.values(providers).map((provider) => (        <div key={provider.name}>          <button onClick={() => signIn(provider.id)}>            Sign in with {provider.name}          </button>        </div>      ))}    </>  )}export async function getStaticProps(context) {  return {    props: {      providers: await providers(context),    },  }}です。next-authがts対応してない？っぽい？のでところどころ警告出ますが…。こんな画面になります。ちなみにこの対応前に表示されていたものはnext-authが自動生成したものみたいですね。NextAuth.js automatically creates simple, unbranded authentication pages for handling Sign in, Sign out, Email Verification and displaying error messages.The options displayed on the sign up page are automatically generated based on the providers specified in the options passed to NextAuth.js.https://next-auth.js.org/configuration/pagesとあります。というわけで自由にログインページを編集できるようになりました。なお、この実装だとログイン後もこのページに留まるような形になります。気になる場合は手を入れてください。以上今回はこんなところです。とても少ないコードでログイン機能を実装できましたね。もちろんGoogle以外にも多くのプラットフォームをサポートしていたり、メール/パスワード認証やJWTにも対応しているみたいです。なんでも来いって感じですね。今回は触れてませんがTypeORMやPrisma等を通してDB接続もいい感じに連携できるみたいです。

Next.jsでログイン機能の実装 NextAuth.js

最近ホットなBlitzに入門します！チュートリアル(アンケートサービスみたいなものを作ります)に沿って進めていきますので、困ったら公式見てください()https://blitzjs.com/docs/tutorialただ、バージョンが違うと自動生成されるコードが違ったりする可能性があるので、その点は注意してください。導入ページを触ってみるモデルの作成Questionの削除についてフロント一覧新規作成/編集アンケートサービス仕上げフォームの設置 子モデルのcreate処理詳細画面で選択肢も表示するようにする 関連の取得処理投票機能の実装 更新処理以上導入まず、 npm install -g blitz とかでBlitzをインストールします。インストールが完了したら、プロジェクトを作成します。任意のディレクトリで、blitz new mysitenewの後ろに書くのはプロジェクト名です。お好みでどうぞ。enterを押すと、ファイルの生成が始まります。Railsと似たような構造になっていますね。すごい親近感。では、ディレクトリ移動して起動してみましょう。cd mysiteblitz starthttp://localhost:3000 にアクセスすると、このような画面が表示されます。ページを触ってみるちょっと編集してみましょう。 app/pages/index.tsx を下記の内容に置き換えてください。const Index = () => (  <div>    <h1>Hello, world!</h1>  </div>)export default IndexこれだけでOKです。Nextのルーティングに則っているので、ルートパスで表示される内容がこれになります。モデルの作成チュートリアルではsqliteを利用します。接続情報は schema.prismaに記載する形になっていますね。今回利用するモデルは、質問を表現するQuestionと、選択肢のリストであるChoiceの2つです。まずはQuestionの作成。Railsと同様、generateコマンドでコントローラー / ビュー / Railsのモデルに相当するCRUDが作成できます。$ blitz generate all question text:string "choices:choice[]"✔ Model for 'question' updated successfully:> model Question {>   id        Int      @default(autoincrement()) @id>   createdAt DateTime @default(now())>   updatedAt DateTime @updatedAt>   choices   Choice[]> }Now run blitz db migrate to add this model to your databaseCREATE    app/questions/pages/questions/[questionId]/edit.tsxCREATE    app/questions/pages/questions/[questionId].tsxCREATE    app/questions/pages/questions/index.tsxCREATE    app/questions/pages/questions/new.tsxCREATE    app/questions/components/QuestionForm.tsxCREATE    app/questions/queries/getQuestion.tsCREATE    app/questions/queries/getQuestions.tsCREATE    app/questions/mutations/createQuestion.tsCREATE    app/questions/mutations/deleteQuestion.tsCREATE    app/questions/mutations/updateQuestion.tsgenerateの後に書いてある all は、生成するリソースの指定に使います。modelqueriesmutationspagesの4項目のうち、どれを生成しますか？というものですね。詳しくはこちら https://blitzjs.com/docs/cli-generateコマンドについては公式に注意書きがあるのですが、zshを利用している場合は "choices:choice[]" とダブルクォーテーションで囲まないとエラーになってしまいます。続けて、Questionにぶら下がるchoiceを生成します。$ blitz generate resource choice text "votes:int:default[0]" belongsTo:question✔ Model for 'choice' created successfully:> model Choice {>   id         Int      @default(autoincrement()) @id>   createdAt  DateTime @default(now())>   updatedAt  DateTime @updatedAt>   text       String>   votes      Int      @default(0)>   question   Question @relation(fields: [questionId], references: [id])>   questionId Int> }Now run blitz db migrate to add this model to your databaseCREATE    app/choices/queries/getChoice.tsCREATE    app/choices/queries/getChoices.tsCREATE    app/choices/mutations/createChoice.tsCREATE    app/choices/mutations/deleteChoice.tsCREATE    app/choices/mutations/updateChoice.tsここまでできたらDBに反映します。マイグレーション名を聞かれた場合は適当でいいですが、ここでは init db にしてあります。$ blitz db migrate✔ Name of migration … init dbサーバに接続して触ってみましょう。$ blitz console⚡️ > db.question.create({data: {text: "What's new?"}})⚡️ > await db.question.findMany()[  {    id: 1,    createdAt: 2020-12-08T07:36:00.216Z,    updatedAt: 2020-12-08T07:36:00.216Z,    text: "What's new?"  }]直感的な操作ができて良いですね。prismaすごい。Questionの削除についてprismaが子モデルの削除までサポートしてないので、 deleteQuestion のmutationをちょっと触っておきましょうという記述が公式にあります。app/questions/mutations/deleteQuestion.tsexport default async function deleteQuestion({where}: DeleteQuestionInput, ctx: Ctx) {  ctx.session.authorize()  await db.choice.deleteMany({where: {question: {id: where.id}}})  const question = await db.question.delete({where})  return question}これでサーバ側は準備完了なので、フロント側触っていきましょう。フロント一覧app/questions/pages/questions/index.tsx を触ります。チュートリアル記載の下記コードだと動かなかったです。export const QuestionsList = () => {  const [questions] = useQuery(getQuestions, {orderBy: {id: "desc"}})  return (    <ul>      {questions.map((question) => (        <li key={question.id}>          <Link href="/questions/[questionId]" as={`/questions/${question.id}`}>            <a>{question.name}</a>           </Link>        </li>      ))}    </ul>  )}ここに書いてない内容として、まず useQuery をimpotしないと動きません。頭に書いておきましょう。import { useQuery } from "blitz"そして僕の環境では questions.map が落ちました。useQueryに渡している getQuestions を確認してみます。generateコマンドで自動生成されたものですね。app/questions/queries/getQuestions.tsimport { Ctx } from "blitz"import db, { Prisma } from "db"type GetQuestionsInput = Pick<Prisma.FindManyQuestionArgs, "where" | "orderBy" | "skip" | "take">export default async function getQuestions(  { where, orderBy, skip = 0, take }: GetQuestionsInput,  ctx: Ctx) {  ctx.session.authorize()  const questions = await db.question.findMany({    where,    orderBy,    take,    skip,  })  const count = await db.question.count()  const hasMore = typeof take === "number" ? skip + take < count : false  const nextPage = hasMore ? { take, skip: skip + take! } : null  return {    questions,    nextPage,    hasMore,    count,  }}returnされているのはこいつらですね。  return {    questions,    nextPage,    hasMore,    count,  }なので、indexのquestionsに入ってるのはObjectだということになります。よくないですね。export const QuestionsList = () => {  const [{questions}] = useQuery(getQuestions, { orderBy: { id: "desc" } })  // もしくは [data]  return (    <ul>      {questions.map((question) => (      // もしくは {data.questions.map( ~としましょう。全体像はこんな感じです。app/questions/pages/questions/indeximport { Suspense } from "react"import Layout from "app/layouts/Layout"import { Link, useQuery, BlitzPage } from "blitz"import getQuestions from "app/questions/queries/getQuestions"export const QuestionsList = () => {  const [data] = useQuery(getQuestions, { orderBy: { id: "desc" } })  return (    <ul>      {data.questions.map((question) => (        <li key={question.id}>          <Link href="/questions/[questionId]" as={`/questions/${question.id}`}>            <a>{question.text}</a>          </Link>        </li>      ))}    </ul>  )}const QuestionsPage: BlitzPage = () => {  return (    <div>      <p>        <Link href="/questions/new">          <a>Create Question</a>        </Link>      </p>      <Suspense fallback={<div>Loading...</div>}>        <QuestionsList />      </Suspense>    </div>  )}QuestionsPage.getLayout = (page) => <Layout title={"Questions"}>{page}</Layout>export default QuestionsPageこのページは app/questions/pages/questions/index なので、 http://localhost:3000/questions にいけば見れます。トップにこのページへのリンクを置いておきましょうか。pages/index.tsximport { Link } from "blitz"const Index = () => (  <div>    <h1>Hello, world!</h1>    <Link href="/questions">質問一覧</Link>  </div>)export default Index新規作成/編集自動生成されたコードでquestionの作成・編集が実装されているのですが、存在しない name というカラムを操作しようとしているので変更しておきます。app/questions/pages/questions/new.tsx  return (    <div>      <h1>Create New Question</h1>      <QuestionForm        initialValues={{}}        onSubmit={async () => {          try {            // 以下変更            const question = await createQuestionMutation({              data: {text: "Do you love Blitz?", choices: {create: [{text: "Yes!"}]}},            })            alert("Success!" + JSON.stringify(question))            router.push(`/questions/${question.id}`)app/questions/pages/questions/[questionId]/edit.tsx  return (    <div>      <h1>Edit Question {question.id}</h1>      <pre>{JSON.stringify(question)}</pre>      <QuestionForm        initialValues={question}        onSubmit={async () => {          try {            // 以下変更            const updated = await updateQuestionMutation({              where: {id: question.id},              data: {text: "Do you really love Blitz?"},            })これで一覧・詳細・作成・編集が動くようになっているはずです。アンケートサービス仕上げ質問作成時に、選択肢も登録できるようにします。フォームの設置 子モデルのcreate処理QuestionForm.tsximport React from "react"type QuestionFormProps = {  initialValues: any  onSubmit: React.FormEventHandler<HTMLFormElement>}const QuestionForm = ({ initialValues, onSubmit }: QuestionFormProps) => {  return (    <form      onSubmit={(event) => {        event.preventDefault()        onSubmit(event)      }}    >      <input placeholder="Name" />      <input placeholder="Choice 1" />      <input placeholder="Choice 2" />      <input placeholder="Choice 3" />      <button>Submit</button>    </form>  )}export default QuestionForm更新時に入力内容を送信するよう改修app/questions/pages/questions/new.tsximport Layout from "app/layouts/Layout"import { Link, useRouter, useMutation, BlitzPage } from "blitz"import createQuestion from "app/questions/mutations/createQuestion"import QuestionForm from "app/questions/components/QuestionForm"const NewQuestionPage: BlitzPage = () => {  const router = useRouter()  const [createQuestionMutation] = useMutation(createQuestion)  return (    <div>      <h1>Create New Question</h1>      <QuestionForm        initialValues={{}}        onSubmit={async (event) => {          try {            // 主にこのあたりを変更            const question = await createQuestionMutation({              data: {                text: event.target[0].value,                choices: {                  create: [                    { text: event.target[1].value },                    { text: event.target[2].value },                    { text: event.target[3].value },                  ],                },              },            })            alert("Success!" + JSON.stringify(question))            router.push("/questions/[questionId]", `/questions/${question.id}`)          } catch (error) {            alert("Error creating question " + JSON.stringify(error, null, 2))          }        }}      />      <p>        <Link href="/questions">          <a>Questions</a>        </Link>      </p>    </div>  )}NewQuestionPage.getLayout = (page) => <Layout title={"Create New Question"}>{page}</Layout>export default NewQuestionPage詳細画面で選択肢も表示するようにする 関連の取得処理現状ではquestionの情報しか取得できないので、questionに紐づく選択肢も取得できるようにqueryを改修しましょう。getQuestions.tsimport { Ctx } from "blitz"import db, { Prisma } from "db"type GetQuestionsInput = Pick<Prisma.FindManyQuestionArgs, "where" | "orderBy" | "skip" | "take">export default async function getQuestions(  { where, orderBy, skip = 0, take }: GetQuestionsInput,  ctx: Ctx) {  ctx.session.authorize()  const questions = await db.question.findMany({    where,    orderBy,    take,    skip,    include: {choices: true}, // 追加  })  const count = await db.question.count()  const hasMore = typeof take === "number" ? skip + take < count : false  const nextPage = hasMore ? { take, skip: skip + take! } : null  return {    questions,    nextPage,    hasMore,    count,  }}getQuestion.tsimport { Ctx, NotFoundError } from "blitz"import db, { Prisma } from "db"type GetQuestionInput = Pick<Prisma.FindFirstQuestionArgs, "where">export default async function getQuestion({ where }: GetQuestionInput, ctx: Ctx) {  ctx.session.authorize()  const question = await db.question.findFirst({ where, include: {choices: true} }) // includeを追加  if (!question) throw new NotFoundError()  return question}これで、choiceを含んだ状態で取得できるようになりました。question詳細ページで表示しましょう。[questionId].tsx  return (    <div>      <h1>{question.text}</h1>      <ul>        {question.choices.map((choice) => {          return (            <li>              {choice.text} - {choice.votes} votes            </li>          )        })}      </ul>投票機能の実装 更新処理questionに対してアクションできるようにしていきます。選択肢の横にボタンを設置して、それをクリックするとカウントされるような形です。[questionId].tsx// 追加import updateChoice from "app/choices/mutations/updateChoice"export const Question = () => {  const router = useRouter()  const questionId = useParam("questionId", "number")  // refetchを追加  const [question, { refetch }] = useQuery(getQuestion, { where: { id: questionId } })  const [deleteQuestionMutation] = useMutation(deleteQuestion)  // 更新のmutationを追加  const [updateChoiceMutation] = useMutation(updateChoice)  // 更新の処理を追加  const handleVote = async (id, votes) => {    try {      const updated = await updateChoiceMutation({        where: { id },        data: { votes: votes + 1 },      })      refetch()    } catch (error) {      alert("Error creating question " + JSON.stringify(error, null, 2))    }  }  // ボタン押下で更新処理を呼びだすように  return (    <div>      <h1>{question.text}</h1>      <ul>        {question.choices.map((choice) => {          return (            <li>              {choice.text} - {choice.votes} votes              <button onClick={() => handleVote(choice.id, choice.votes)}>Vote</button>            </li>          )        })}      </ul>ボタン押下時に更新処理が走り、完了後に最新の状態を取得することで投票数が同期されるようになっています。ということで、完成形はこちら！以上チュートリアルを一通りこなしてみました。ハマりポイントは公式の記載と自動生成コードの差分くらいですかね。短いスパンでアップデートされていく時期だと思うので、ざらにありそうな気がします。railsコマンドでいうところのdestroyコマンドがない（？）とか、db:rollbackもない…（？）（僕が見つけられてないだけ説もある）あたりがちょっと痒かったですが、ゆくゆくは実装されるんでしょうか。とまあRailsを普段触っている身としてはかなり親近感があってかつ直感的に利用できる機能が多いです。全部jsで完結できるのもまあいいっちゃいいですね。個人的にはサーバは全然Railsでもいいんですが。これから成長していくのが楽しみです。個人開発でも使おうと思います。generateやmigrateで何が起きるのか & recipeを使ってtailwindを導入する記事も書いたのであわせてどうぞ。Blitzのgenerateやrecipeを試す ｜ もふもふ技術部

盛り盛りなReactのフレームワーク Blitz入門

公式チュートリアル中ではあまり深く触れられない「generateやmigrationで何が行われているのか」や、recipeを使ってライブラリを導入してみるといったことを書きます。Blitz入門記事はこちら盛り盛りなReactのフレームワーク Blitz入門 ｜ もふもふ技術部generate resourceやmigrationの挙動を見てみるRecipeを使ってBlitzを拡張する Tailwind編generate resourceやmigrationの挙動を見てみるBlitz上でクエリの発行やmigration周辺を担当してくれるORM、Prismaを軽く見ていきます。まずはチュートリアル完了時点のDB schemaを見てみましょう。// This is your Prisma schema file,// learn more about it in the docs: https://pris.ly/d/prisma-schemadatasource db {  provider = "sqlite"  url = "***"}generator client {  provider = "prisma-client-js"}// --------------------------------------model User {  id             Int       @default(autoincrement()) @id  createdAt      DateTime  @default(now())  updatedAt      DateTime  @updatedAt  name           String?  email          String    @unique  hashedPassword String?  role           String    @default("user")  sessions       Session[]}model Session {  id                 Int       @default(autoincrement()) @id  createdAt          DateTime  @default(now())  updatedAt          DateTime  @updatedAt  expiresAt          DateTime?  handle             String    @unique  user               User?     @relation(fields: [userId], references: [id])  userId             Int?  hashedSessionToken String?  antiCSRFToken      String?  publicData         String?  privateData        String?}model Question {  id        Int      @default(autoincrement()) @id  createdAt DateTime @default(now())  updatedAt DateTime @updatedAt  text      String     choices Choice[] }model Choice {  id         Int      @default(autoincrement()) @id  createdAt  DateTime @default(now())  updatedAt  DateTime @updatedAt  text       String     votes      Int      @default(0)  question   Question @relation(fields: [questionId], references: [id])  questionId Int      }init時のschemaも db/migrations 下にあると思うので見比べてみると良いでしょう。UserとSessionが生成されているはずです。modelを生成する blitz generate コマンドによって schema.prisma が更新され、migration実行時にそのスナップショットがとられるということになっています。上記の挙動を確認するために、試しにQuestionにコメントを付けるためのCommentモデルを生成してみましょう。$ blitz generate resource comment text:string belongsTo:question✔ Model for 'comment' created successfully:> model Comment {>   id         Int      @default(autoincrement()) @id>   createdAt  DateTime @default(now())>   updatedAt  DateTime @updatedAt>   text       String>   question   Question @relation(fields: [questionId], references: [id])>   questionId Int> }Now run blitz db migrate to add this model to your databaseCREATE    app/comments/queries/getComment.tsCREATE    app/comments/queries/getComments.tsCREATE    app/comments/mutations/createComment.tsCREATE    app/comments/mutations/deleteComment.tsCREATE    app/comments/mutations/updateComment.tsschema.prisma// This is your Prisma schema file,// learn more about it in the docs: https://pris.ly/d/prisma-schemadatasource db {  provider = "sqlite"  url      = env("DATABASE_URL")}generator client {  provider = "prisma-client-js"}// --------------------------------------model User {  id             Int       @default(autoincrement()) @id  createdAt      DateTime  @default(now())  updatedAt      DateTime  @updatedAt  name           String?  email          String    @unique  hashedPassword String?  role           String    @default("user")  sessions       Session[]}model Session {  id                 Int       @default(autoincrement()) @id  createdAt          DateTime  @default(now())  updatedAt          DateTime  @updatedAt  expiresAt          DateTime?  handle             String    @unique  user               User?     @relation(fields: [userId], references: [id])  userId             Int?  hashedSessionToken String?  antiCSRFToken      String?  publicData         String?  privateData        String?}model Question {  id        Int      @default(autoincrement()) @id  createdAt DateTime @default(now())  updatedAt DateTime @updatedAt  text      String     choices Choice[] }model Choice {  id         Int      @default(autoincrement()) @id  createdAt  DateTime @default(now())  updatedAt  DateTime @updatedAt  text       String     votes      Int      @default(0)  question   Question @relation(fields: [questionId], references: [id])  questionId Int      }model Comment {  id         Int      @default(autoincrement()) @id  createdAt  DateTime @default(now())  updatedAt  DateTime @updatedAt  text       String     question   Question @relation(fields: [questionId], references: [id])  questionId Int      }既存のschemaにCommentが追記されました。続けてmigrateしてみます。migration名はadd commentで。$ blitz db migrate✔ Name of migration … add comment📼  migrate save --name add commentLocal datamodel Changes:// This is your Prisma schema file,// learn more about it in the docs: https://pris.ly/d/prisma-schema// --------------------------------------model Comment {  id Int @default(autoincrement()) @id  createdAt DateTime @default(now())  updatedAt DateTime @updatedAt  text String  question Question @relation(fields: [questionId], references: [id])  questionId Int}Prisma Migrate just created your migration 20201209020644-add-comment inmigrations/  └─ 20201209020644-add-comment/    └─ steps.json    └─ schema.prisma    └─ README.md略これにより db/migrations 以下に新たにファイルが追加されました。schema.prisma はこの時点でのschema、README.md は前回のmigrationとの差分が記載されています。今回であれば、Commentが追加された旨が書いてありますね。この一連の操作は、 db/migrations/migrate.lock に記録されます。# Prisma Migrate lockfile v120201208064339-initial-migration20201208073113-init-db20201209020644-add-commentRailsではschema_migrationsテーブルに保存されてるやつですね。up / downはここを見て行うんでしょうか。Recipeを使ってBlitzを拡張する Tailwind編Blitzにはコマンドひとつでライブラリを導入できる、Recipeというコマンドがあります。Railsでいうところの gem install devise と rails g devise:install を一気にやってくれるようなイメージでしょうか。現在公式で用意されているrecipeはこちら。 https://github.com/blitz-js/blitz/tree/canary/recipesまた、recipeは自分で作ることもできるようです。今回はtailwindを試してみます。途中で何回か確認でenterを押す必要があります。ファイル名これでいい？とか聞かれます。$ blitz install tailwind✅ Installed 3 dependencies✅ Successfully created postcss.config.js, tailwind.config.js✅ Successfully created app/styles/index.css✅ Modified 1 file: app/pages/_app.tsx✅ Modified 1 file: app/pages/_app.tsx🎉 The recipe for Tailwind CSS completed successfully! Its functionality is now fully configured in your Blitz app.試しに [questionId].tsx で使っているボタンにスタイルを当ててみます。  return (    <div>      <h1>{question.text}</h1>      <ul>        {question.choices.map((choice) => {          return (            <li>              {choice.text} - {choice.votes} votes              <button                className="border border-indigo-500 bg-indigo-500 text-white px-4 py-2 m-2 hover:bg-indigo-600"                onClick={() => handleVote(choice.id, choice.votes)}              >                Vote              </button>ちゃんと反映されましたね。すごく手軽！

Blitzのgenerateやrecipeを試す

あるものがどれくらいクリックされたかを計測したかったんですが、多少詰まったのでポイントを置いておきます。技術スタックは- Nuxt: 2.12.2- TypeScript: 3.8.3- @nuxtjs/google-analytics: 2.2.3といった具合です。詰まったのは、あちこちで紹介されている this.$ga.event() が落ちるという部分でした。tl;drまっさらな状態からイベント計測できるところまでを紹介しますが、取り急ぎ上記問題を解決したい方はこちら。プロジェクトルートにこんな感じのファイルを置けば上記問題は解決します。ファイル名は *.d.tsです。適当に公式で紹介されているように my-property.d.ts とか置いておけばOKです。import Vue from 'vue'declare module 'vue/types/vue' {  interface Vue {    $ga: any  }}NuxtにGoogle Analyticsを導入するまずはGoogle AnalyticsをNuxtに導入しましょう。GitHub: https://google-analytics.nuxtjs.org/ドキュメント: https://google-analytics.nuxtjs.org/Setupページの手順通りにやればOKです。モジュール導入yarn add --dev @nuxtjs/google-analyticsnuxt.config.jsに追記export default {略  buildModules: {    ['@nuxtjs/google-analytics', { id: 'UA-XXXXXXXX-XX' }]'UA-XXXXXXXX-XX'となっている部分は、ご自身のトラッキングIDに置き換えてください。トラッキングIDの確認方法はこちらhttps://support.google.com/analytics/answer/1008080?hl=jaこれで完了です。イベントを計測する例えば、あるリンクがクリックされたことを計測したい場合はこのようなイメージになります。<  a  @click="handleClick"  href="http://www.example.com">  リンク</a>handleClick() {  this.$ga.event({    eventCategory: 'link',    eventAction: 'click',    eventLabel: 'example link',    eventValue: 'http://www.example.com'  })}クリックされたときに、 this.$ga.event を実行すればOKです。https://google-analytics.nuxtjs.org/usage/event-tracking引数はオブジェクトで、 eventCategory と eventAction が必須になっています。event(eventCategory, eventAction, eventLabel, eventValue) のように並べて書いても良いです。これでクリックイベントが計測できます。…が、TypeScriptを使っていると(？)、 this.$ga が読めずに落ちることがあります。プラグインの型拡張Vue公式で紹介されている「プラグインで使用するための型拡張」対応をすれば通ります。https://jp.vuejs.org/v2/guide/typescript.html#%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%A7%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E5%9E%8B%E6%8B%A1%E5%BC%B5プロジェクトルートに my-property.d.ts を置きます。名前はなんでもいいです。import Vue from 'vue'declare module 'vue/types/vue' {  interface Vue {    $ga: any  }}これで通るようになるはず。以上、NuxtにGoogleAnalyticsを導入しつつts対応をしてみました！

Google Analyticsのイベント計測を行う Nuxt + typescript (vue-class-component)

GraphQLのクライアントとしてデファクトスタンダードともいえる立ち位置にあるApollo。最近はサーバをgraphql-rubyで書いてフロントはReactで書くというのをよくやるんですが、tsとgraphqlの相性が良かったり、apolloのhooksが非常に便利だったりと、書いてて健やかな気持ちになるんですよね。今回はそんなフロントエンドの肝、Apollo Clientについて解説していきます。特にキャッシュあたり。内容- graphql-ruby + Reactのアプリケーションを使ってApolloのキャッシュ周りを触る(graphql-rubyは記事内では触れません)- セットアップや実装の話というよりはApolloの便利ポイント・挙動の解説メインです。- graphql-codegenで自動生成されたコードをベースに実装しています https://graphql-code-generator.com/Apollo実例交えてキャッシュの更新紹介新規追加の場合更新の場合まとめApolloApollo Client is a comprehensive state management  library for JavaScript that enables you to manage both local and remote  data with GraphQL. Use it to fetch, cache, and modify application data,  all while automatically updating your UI.https://www.apollographql.com/docs/react/自身のことを「状態管理のライブラリです」と謳っています。hooksも用意されておりとても便利です。かなりスッキリと、状態に応じたUIの出し分けを行うことができます。function Feed() {  const { loading, error, data } = useQuery(GET_DOGS);  if (error) return <Error />;  if (loading || !data) return <Fetching />;  return <DogList dogs={data.dogs} />;}https://www.apollographql.com/docs/react/why-apollo/#declarative-data-fetching よりuseQuery から返されている値はすべてリアクティブなもので、それぞれ- ロード状況- エラーの有無・内容- リクエストの結果がリアルタイムに更新されます。そして、「状態管理のライブラリです」と言っているだけあってキャッシュ機能(+ローカルステート管理)が強力です。見ていきましょう。実例交えてキャッシュの更新紹介「ログインなしでTODOを登録できるアプリ」を題材に紹介したいと思います。まず前提として、Apolloはリクエストを投げた結果返ってきたレスポンスを正規化してキャッシュしておいてくれます。最初に、一覧取得クエリについて。query todos {  todos {    id    content    __typename  }}開発ツールを使うと、Apolloの中身が見れます。https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfmApolloは各Objectが持つ __typename と id をもとに、アイテムを一意に扱います。レスポンスに含まれる各TODOはそれぞれ "Todo" という __typename と、サーバ側でつけられたuuidを id として持っていますね。Apolloがこのレスポンスを見て正規化を行いキャッシュした結果が二枚目の画像でした。新規追加の場合では、新規TODOを追加してみます。mutation実装  const [mutate] = useAddTodoMutation({    variables: {      input: {        content: content,      },    },    update(cache, result) {      cache.modify({        fields: {          todos(existing = []) {            const newTodo = result.data?.addTodo?.todo            const writeRef = cache.writeQuery({              query: TodoDocument,              data: { todo: newTodo },            })            return [...existing, writeRef]          },        },      })    },  })mutation addTodo($input: AddTodoInput!) {  addTodo(input: $input) {    todo {      id      content      __typename    }    __typename  }}引数で受け取るAddTodoInputはこちらです。export type AddTodoInput = {  content?: Maybe<Scalars['String']>;  clientMutationId?: Maybe<Scalars['String']>;};graphql-rubyが吐き出すschemaを元にgraphql-codegenで自動生成した型です。今回の話で肝になるのはここです。    update(cache, result) {      cache.modify({        fields: {          todos(existing = []) {            const newTodo = result.data?.addTodo?.todo            const writeRef = cache.writeQuery({              query: TodoDocument,              data: { todo: newTodo },            })            return [...existing, writeRef]          },        },      })    },(writeQueryで使ってるTodoDocumentはこれ)export const TodoDocument = gql`  query todo($id: ID!) {    todo(id: $id) {      id      content    }  }`何をしているかというと、Apolloがキャッシュ内の各オブジェクトの __typename と id を見て、レスポンスの内容と一致するものを自動で更新してくれます。Apollo任せにすることができないので、自分でコードを書いておく必要があります。キャッシュ更新の方法は、- todo一覧取得クエリを再度投げる- キャッシュを直接更新するこちらのふたつがあるのですが、今回はキャッシュ更新の方で実装しています。updateオプションの引数で現状のキャッシュとレスポンスのオブジェクトが受け取れるので、これを利用してキャッシュを更新します。https://www.apollographql.com/docs/react/data/mutations/#updating-the-cache-after-a-mutationこれによって、戻り値を元に一覧のキャッシュが更新され、同時にTODO一覧表示も自動で更新されます。(撮りなおしたのでidに齟齬がありますが補完していただければ幸いです)更新の場合次に既存TODOの更新です。更新の際はキャッシュの更新も勝手にやってくれるので楽ですね。更新処理はこれしか書いてません。追加mutationと比べると、こちらにはレスポンスを受けとってキャッシュを触る処理がありませんね。  const [mutate] = useUpdateTodoMutation({    variables: {      input: {        id: id,        content: content,      },    },  })先ほど追加したTODOを更新するためにこれを実行した結果はこうなります。ROOT_QUERYにあるtodosの[3]はidが 85aa469b~ となっているTODOへの参照になっています。また、レスポンスに含まれているTODOも同じidを持っていますね。updated todo に更新されていることがわかります。まとめというように、Apolloは自動でうまいことキャッシュを扱い、少ない労力で表示を同期させてくれます。キャッシュやレスポンスからidが欠けていたり、名前が微妙に違ったりすると想定通りに更新してくれず沼にハマることもありますが、使いこなせばこんなに便利なものはないです。また一覧の部分で今回紹介しなかった、refetchで一覧キャッシュを更新する方法ですが、エストが飛ぶので、キャッシュ直接更新の方がユーザー体験は良いのではないかと思います。refetchについてはこちら https://www.apollographql.com/docs/react/data/queries/#refetching以上、Apolloとキャッシュについてでした。

Apolloのキャッシュ更新入門 writeQuery / cache.modify / 自動

元々graphql-rubyとReactで生きていたんですが、どうやらHasuraなるものが良いらしいと知り、掲題のスタックで社内書籍管理サービスをつくってみました。楽しかったのでちょっと書いてみます。具体的には認証つきHasuraからusersを取得できるところまで。Apolloは使わず、FetchでPOST投げちゃいます。また、コード自体は本番運用に耐えうるものでは全くないので、概念を理解する・触りを体験して全体像をつかむくらいの用途にとどめてください。なお、Firebaseを利用する場合はCloudFunctionsを利用するので従量課金のBlazeプランにする必要があります。(といっても個人で遊ぶ分には無料枠で事足りる)認証にAuth0を利用するのであればそこは考慮しなくてOKです。でもあれ真面目に使うとなると高いですよね？TL;DRHasuraはRDB版Firestoreみたいな感覚元々PostgreSQLのみ対応だったんだけど最近MySQLも対応したっぽい？Firebaseとか活用すると手軽に認証付きGraphQLサーバが手に入るめっちゃ便利なGraphiQL駆動でHasuraの命名規則に則ったクエリつくれるのが結構なDXHasura: https://hasura.io/TL;DRHasuraとはHasuraとFirebaseのアカウント作るHasuraFirebaseReactからHasuraにリクエストを投げるプロジェクトつくるHasuraでテーブル作成とクエリお試しReactからfetchする認証設定Hasura側 環境変数設定ADMIN_SECRETの設定JWT_SECRETの設定Firebase側Custom Claim設定ログイン権限設定以上Hasuraとは立ち位置的にはActiveRecord/graphql-rubyがやっていることを代替するような気持ちで利用していました。GraphQLでリクエストを受ける → SQLを発行 → データ取得 → レスポンス返すこれを勝手にやってくれます。すごい。Hasuraの規則に則ることで、よしなにSQLを発行してくれる形です。例えばユーザーを追加するmutationであればこんな形。mutation CreateUser($email: String = "") {  insert_users_one(object: {email: $email}) {    id    email  }}insertテーブル名なんやら という命名規則に則ってリクエストを送ると、Hasuraがうまいことやってくれます。この命名規則も暗記する必要はなく、GraphiQLのサポート機能としてHasuraが提供してくれているので、ポチポチクリックするだけでクエリが構築できます。すごい楽。(GraphiQLの機能なのかHasuraの機能なのかは知らないです 教えてください)Schemaももちろん落とせるので、codegenとかばっちりできます。最高。HasuraとFirebaseのアカウント作るまずはアカウント類を作ります。Hasuraここからアカウントを作成します。Try Hasuraから、Free Tierで進めます。https://hasura.io/お好みの方法でアカウント作成を完了してください。完了すると、ダッシュボードが表示されるはずです。続けてプロジェクトを作成します。画面上部の new project から進めます。(アカウント作成の手順にプロジェクト作成が含まれていた気がします…が、下記の手順と同様の内容で進められると思います。)最初の画面ではどのDBを使うか選べます。 Try with Heroku でいきましょう。Herokuログインが求められたりするので、確認しつつ進めます。完了するとプロジェクト詳細の画面に移ります。とりあえずやることはないので一旦放置。Firebase認証に利用するので、Firebaseのアカウントも作成します。https://firebase.google.com/?hl=jaガイドに従い、よしなに進めてください。というかこの記事読んでる方はすでにアカウント持ってそうな気もする。続けてプロジェクトも適当に作りましょう。できたらAuthenticationでGoogle認証をonにしておきます。OK！ではReact触っていきましょうか。ReactからHasuraにリクエストを投げるプロジェクトつくるcreate-react-appでプロジェクトを作ります。$ npx create-react-app --typescript hasura-demo一応立ち上がることを確認。$ yarn startHasuraでテーブル作成とクエリお試ししたらHasura側でテーブル作成と適当なデータ作成をします。DATAタブから、Add Tableしましょう。テーブル定義はこんなところでOK。idとemailをtextで入れておきます。ページの最下部にAdd Table ボタンがあるので、クリックして完了。ついでにテストデータも入れておきましょう。Insert Rowタブから適当に登録しておきます。なお、ユーザー登録はあとでFirebaseのFunctionsに任せるようにします。さて、ここまででステップ1完了です。実際にデータを取り出してみましょう。GRAPHIQLタブから、graphiql左のメニューをポチポチするとクエリが作れます。メニューはDBだかschemaだかを見て勝手にいい感じにしておいてくれます。すごい。ReactからfetchするこれをReactから雑に取得してみます。App.tsxをこれにしてください。エンドポイントはHasuraのコンソールに書いてありますので置き換えましょう。src/App.tsximport React from 'react';function App() {  const queryStr = "query MyQuery { users { id email } }"  const query = { query: queryStr }  const fetchUsers = () => {    fetch('https://<yours>.hasura.app/v1/graphql', {      method: 'POST',      body: JSON.stringify(query)    }).then(response => {      response.json().then(result => {        console.log(result.data)      })    })  }  return (    <div>      <button onClick={fetchUsers}>        fetch      </button>    </div>  );}export default App;ボタンが一つだけある質素な画面になります。ボタンを押すとコンソールに結果が出ます。良いですね。が、現状ではエンドポイントを知っていれば誰でも取り放題なので、これから認証設定をしていきます。認証設定Hasura側 環境変数設定ADMIN_SECRETの設定Hasuraは、プロジェクトの環境変数に適切な値を設定することで認証を動作させることができます。プロジェクト一覧から、プロジェクトの歯車ボタンをクリック。URLはこちらです。 https://cloud.hasura.io/projectsメニューからEnv varsを選択New Env Varフォームに admin を入力してADMIN_SECRETを選択自身で硬い値を設定しましょう。この値をAuthorizationヘッダに含めると、admin権限でHasuraを利用できます。サーバからHasuraにアクセスする際に利用するものですかね。今回はFirebaseのFunctionsからHasuraにリクエストを投げる際に利用します。Reactからは使いません。JWT_SECRETの設定次に、Firebaseの方も環境変数に設定します。このページでFirebaseのプロジェクトIDを入れるといい感じの設定を生成してくれます。https://hasura.io/jwt-config/生成されたjsonは JWT_SECRET に設定します。これで認証設定はだいたいOKです。ヘッダのx-hasura-admin-secretに正しいadmin_secretが設定されていればadmin権限でのリクエスト、AuthorizationヘッダにJWTが設定されていればそれによる認証を行うようになりました。この状態で先ほどのfetchボタンを押すと怒られるはずです。僕のコンソールのnetworkではこんな感じになります。errors   [ {…} ]    0   Object { message: "Missing Authorization header in JWT authentication mode", extensions: {…} }        extensions  Object { path: "$", code: "invalid-headers" }            path    "$"            code    "invalid-headers"    message "Missing Authorization header in JWT authentication mode"次はリクエスト時のヘッダ設定をしていきましょう。Firebase側Custom Claim設定Functionsを利用して、ユーザー作成時にカスタムクレームを設定します。Hasuraに「リクエストを行ったユーザーの権限」を伝えるための作業です。なにはともあれFirebase initです。FirebaseのCLIが入ってない場合は入れておきましょう。https://firebase.google.com/docs/cli?hl=jaまた、FirebaseのプロジェクトはBlazeプラン にしておいてください。$ firebase initFunctionsだけチェックしておけば大丈夫です。プロジェクトはさっき選んだやつにします。あとはお好みでどうぞ。今回は特にいじる機会もそうないのでjsにしちゃいました。必要なライブラリを入れておきます。といってもaxiosくらいです。Apollo使ってもいいですがやりたいことが非常に軽いので。$ cd functions$ yarn add axiosfunctions/index.jsはこれにします。axiosのurlとadmin_secretは自分のものに変更 しておいてください。このあたりはこれらの記事を参考にさせていただいてます。https://qiita.com/ryo2132/items/7c74ecaf3a001b28a02chttps://www.graat.co.jp/blogs/cjwstb63d0daz0830mzctngvkconst functions = require('firebase-functions');const admin = require('firebase-admin');const axios = require('axios');admin.initializeApp(functions.config().firebase);const createUser = `mutation createUser($id: String = "", $email: String = "") {  insert_users_one(object: {id: $id, email: $email}, on_conflict: {constraint: users_pkey, update_columns: []}) {    id    email  }}`exports.processSignUp = functions.auth.user().onCreate(user => {  let customClaims;  customClaims = {    'https://hasura.io/jwt/claims': {      'x-hasura-default-role': 'user',      'x-hasura-allowed-roles': ['user'],      'x-hasura-user-id': user.uid    }  }  return admin.auth().setCustomUserClaims(user.uid, customClaims)    .then(() => {      let queryStr = {        "query": createUser,        "variables": {id: user.uid, email: user.email}      }      axios({        method: 'post',        url: '<url>',        data: queryStr,        headers: {          'x-hasura-admin-secret': "<secret>"        }      })      admin        .firestore()        .collection("user_meta")        .doc(user.uid)        .create({          refreshTime: admin.firestore.FieldValue.serverTimestamp()        });    })    .catch(error => {      console.log(error);    });});できたら$ firebase deploy --only functionsしましょう。この際、jsの書き方やFirebaseのプランで怒られることが多いです。ログインFirebase Authenticationを使ってログインします。特にあえて書くこともないので、このあたりを参考に実装しましょう。https://firebase.google.com/docs/auth/web/google-signin?authuser=0また、ここで Firestoreを使うことになるのでコンソールから有効にしておきます。リージョンはお好みで。ログインできるようになったら、IDトークン=JWTを取得してそれをヘッダに突っ込んじゃいましょう。諸々設定し、ログイン/ログアウト・Hasura認証が通るようになったコードがこちらです。(まだusersは取得できません)import React, { useState } from 'react';import firebase from './firebaseConfig'function App() {  const [idToken, setIdToken] = useState<string>('')  const queryStr = "query MyQuery { users { id email } }"  const query = { query: queryStr }  const login = () => {    const provider = new firebase.auth.GoogleAuthProvider()    firebase.auth().signInWithPopup(provider)  }  const logout = () => {    firebase.auth().signOut()  }  firebase.auth().onAuthStateChanged(user => {    if(user) {      user.getIdToken().then(token => {        setIdToken(token)        console.log(token)      })    }  })  const fetchUsers = () => {    fetch('<url>', {      method: 'POST',      headers: { Authorization: `Bearer ${idToken}` },      body: JSON.stringify(query)    }).then(response => {      response.json().then(result => {        console.dir(result.data)      })    })  }  return (    <div>      <button onClick={login}>        login      </button>      <button onClick={logout}>        logout      </button>      <button onClick={fetchUsers} disabled={!idToken.length}>        fetch      </button>    </div>  );}export default App;firebaseConfig.tsimport * as firebase from "firebase/app"import 'firebase/auth'firebase.initializeApp(<config>)export default firebase一点注意なのですが、アカウント作成直後はidTokenにHasura用のカスタムクレームが入ってないことがあります。FirebaseのAuth側での反映に多少ラグがあるためです。コンソールに表示されるidTokenを下記のページでdecodeし、こんな感じの内容が含まれているか確認してください。https://jwt.io/"https://hasura.io/jwt/claims": {    "x-hasura-default-role": "user",    "x-hasura-allowed-roles": [        "user"    ],    "x-hasura-user-id": "firebaseが付与するuid"},なければログアウトとログインを試してください。いずれこれが入ってくるはずです。ここまで確認出来たら最後の仕上げです。権限設定さきほどのJWTでは、userのroleに"user"が入っていたり、uidが入っていたりします。Hasuraではこれをもとにアクセス権限の制御を行います。例として、ユーザーが自分自身のレコードしか取得できないようにします。Hasuraのコンソールで、DATAタブからuserテーブルを選択Permissionsタブを選択userロールを追加selectのセルをクリックRow select permissionsをクリック画像の通りにセレクトColumn select permissionsをクリックそれぞれチェックを入れるこんな感じにしたら完了です。保存しましょう。これにより、ユーザーが自身のレコードしか取得できなくなります。実際にReactからfetchボタンを押してみると、最初に手動で登録したレコードを含まない、自身の情報のみの配列が取得できるはずです。なにかうまくいかない場合は、- ヘッダがきちんと登録されているか- カスタムクレームを含んでいるか- Firebase上のuidとDBのidが一致しているか等確認してみてください。(経験談)この権限設定はかなり柔軟で、社内書籍管理サービスのusersはこんな設定にしていたりします。自身と、自身が所属する企業のユーザーをselectできるようになっています。以上というわけで、React / Hasura / Firebaseのさわりでした。ちまちまと単純なCRUD書かなくて済むのが非常に楽です。権限管理もポチポチやるだけで済むのも良いですね。(初回いい感じにカスタムクレームを扱うあたり全然理解していないので教えてもらえると…)次のステップとしてはmutationも同様に作ってみたり、schema落としてcodegenしたり、Apollo使って真面目に作ったりするとよきかと思います。

React + Firebase + Hasuraで体験する快適なGraphQL生活

元々graphql-rubyとReactで生きていたんですが、どうやらHasuraなるものが良いらしいと知り、掲題のスタックで社内書籍管理サービスをつくってみました。楽しかったのでちょっと書いてみます。具体的には認証つきHasuraからusersを取得できるところまで。Apolloは使わず、FetchでPOST投げちゃいます。また、コード自体は本番運用に耐えうるものでは全くないので、概念を理解する・触りを体験して全体像をつかむくらいの用途にとどめてください。なお、Firebaseを利用する場合はCloudFunctionsを利用するので従量課金のBlazeプランにする必要があ...

Vue3.0で使えるようになるComposition APIでのフォームバリデーションを実装します。一般的なユーザーの登録フォームをもとに見ていくので、割と網羅的な内容になっていると思います。実装完了したコードはこちら。必要なライブラリの導入CLIインストールプロジェクト作成・ライブラリ追加CompositionAPIの設定補足: vue-composableについてフォームの作成バリデーションの実装基本形の実装エラー時メッセージの設定数値チェックの実装フォーマットチェックの実装完成形まとめ必要なライブラリの導入今回使うのはこれらです。@vue/cli@4.4.1vue2.6.11composition-apivue-composable利用するVueは2.6.11です。Vue3.0でなくても、@composition-apiをインストールすればComposition APIが利用できます。バリデーションに利用するライブラリは、vue-composableです。VuelidateやVeeValidateはVue2.0系向けで、まだ3には対応していないようでした。CLIインストールまずは最新のCLIを入れます。古いものが入っている場合、削除してしまいましょう。$ npm install @vue/cli@4.4.1 -gプロジェクト作成・ライブラリ追加Vueプロジェクトを作成し、Composition APIとvue-composableを導入します。プロジェクト作成時のオプションはお好みで問題ないです。なお、今回はTypeScriptを利用しています。$ vue create validate-sample$ cd validate-sample$ yarn add @vue/composition-api vue-composableここまでできたら一旦起動してみましょう。$ yarn run servehttp://localhost:8080 で立ち上がります。このような画面が表示されればOKです。CompositionAPIの設定プラグインとしてComposition APIを利用することを設定します。src/main.tsでimportとVue.useをしましょう。import Vue from 'vue'import App from './App.vue'import VueCompositionApi from "@vue/composition-api"; // 追記Vue.config.productionTip = falseVue.use(VueCompositionApi); // 追記new Vue({  render: h => h(App),}).$mount('#app')補足: vue-composableについてvue-composableは、Composition APIで利用するためのコンポーネント群です。日時を扱うものや、文字列のフォーマット、ページネーション機能等も備えています。非常に汎用性の高いものになっていますので、バリデーション以外の機能にも興味がある方はぜひご覧ください。vue-composableフォームの作成バリデーションを試すために、まずは一般的なフォームを作成します。項目は一般的なユーザーの登録フォームを想定しています。氏名年齢生年月日プロフィール電話番号住所(省力化のため都道府県選択のみ)以下のコードを /src/App.vueにコピペすればOKです。<template>  <div id="app">    <form @submit.prevent="submit">      <div class="mt">        <label for="name-input">氏名</label>        <input          type="text"          v-model="state.name"          id="name-input"        />      </div>      <div class="mt">        <label for="age-input">年齢</label>        <input          type="number"          v-model="state.age"          id="age-input"        />      </div>      <div class="mt">        <label for="birth-input">生年月日</label>        <input          type="date"          v-model="state.birthDay"          id="birth-input"        />      </div>      <div class="mt">        <label for="profile-input">プロフィール</label>        <textarea          v-model="state.profile"          rows="4"          cols="40"          id="profile-input"        ></textarea>      </div>      <div class="mt">        <label for="tel-input">電話番号</label>        <input          type="text"          v-model="state.telNumber"          id="tel-input"        />      </div>      <div class="mt">        <label for="address-input">都道府県</label>        <select          v-model="state.address"          id="address-input"        >          <option>都</option>          <option>道</option>          <option>府</option>          <option>県</option>        </select>      </div>      <div class="mt">        <input type="submit"/>      </div>    </form>  </div></template><script lang="ts">import {defineComponent, reactive} from '@vue/composition-api'type State = {  name: string;  age: number;  birthDay: Date;  profile: string;  telNumber: string;  address: string;}export default defineComponent({  setup() {    const state = reactive<State>({      name: "",      age: 20,      birthDay: new Date(),      profile: "",      telNumber: "",      address: "都"    });    function submit() {      alert('called submit')    }    return {      state,      submit    }  }})</script><style>#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}.mt {  margin-top: 20px;}</style>画面はこのような表示になります。不格好ですが、十分でしょう。各入力欄の基本形はこちらです。ラベルとinputのセットですね。これを項目の分だけ並べた形です。<div class="mt">  <label for="name-input">氏名</label>  <input    type="text"    v-model="state.name"    id="name-input"  /></div>では、バリデーションの実装をしていきましょう。バリデーションの実装公式ドキュメントはこちらです。基本形の実装vue-composableのuseValidationを利用し、バリデーションの定義をしていきます。nameの必須バリデーションを設定したscriptがこちら。<script lang="ts">import {defineComponent, reactive} from '@vue/composition-api'import {useValidation} from 'vue-composable' // 追加type State = {  name: string;  age: number;  birthDay: Date;  profile: string;  telNumber: string;  address: string;}const required = x => !!x // 追加export default defineComponent({  setup() {    const state = reactive<State>({      name: "",      age: 20,      birthDay: new Date(),      profile: "",      telNumber: "",      address: "都"    });    // 追加    const form = useValidation({      name: {        $value: state.name,        required      }    })    function submit() {      alert('called submit')    }    return {      state,      form, // 追加      submit    }  }})</script>useValidationで、バリデーションの設定を生成しています。構文は下記の通りです。useValidation({  <プロパティ名>: {    $value: <監視する対象の値>,    <バリデータ>  }})監視する対象にはリアクティブな値を入れましょう。reactiveで生成しても、refで生成してもOKです。バリデータは、$valueとcontextを受け取る関数を指定します。先ほどの例では、x => !!x を指定しました。受け取った値を真偽値に変換しています。一点補足で、現時点では公式トップにCurrently there's no exported validators.との文言が表示されています。将来的に標準のバリデータが提供されるということでしょうか。現時点ではライブラリからバリデータが提供されていないので、今回はrequiredバリデータを自前実装しています。さて、これが正常に動作しているか確認してみましょう。先程のフォームの氏名の部分をこのコードに置き換えます。<div class="mt">  <label for="name-input">氏名</label>  <input    type="text"    v-model="form.name.$value"    id="name-input"  />  <p>any invalid?: {{form.name.$anyInvalid}}</p></div>form.name.$valueでリアクティブな値にアクセスできるようになっています。これをv-modelにセットしました。pタグの中に書いてあるform.name.$anyInvalidは、そのプロパティが有効か無効かを返します。氏名が空の場合はrequiredがfalseを返すため、$anyInvalidはtrueになります。実際にフォームを触って確かめてみてください。エラー時メッセージの設定不正な値の場合、その旨をユーザーに伝える必要があります。先程のバリデーションに、エラーメッセージを追加しましょう。export default defineComponent({  setup() {    const state = reactive<State>({      name: "",      age: 20,      birthDay: new Date(),      profile: "",      telNumber: "",      address: "都"    });    const form = useValidation({      name: {        $value: state.name,        required,        $message: "必須項目です"      },$messageを追加します。この値はform.name.$messageでアクセスすることが可能です。下記のように氏名の部分を書き換えると、不正な値があった場合メッセージが表示されるようになります。一番下にpタグを追加した形ですね。<div class="mt">  <label for="name-input">氏名</label>  <input    type="text"    v-model="form.name.$value"    id="name-input"  />  <p v-if="form.name.$anyInvalid">{{form.name.$message}}</p></div>数値チェックの実装先ほどは氏名の必須チェックを実装しましたが、次は年齢の数値チェックをします。const required = x => !!x// 追加const numerically = v => {  return v.match(/\d+/)};export default defineComponent({  setup() {    const state = reactive<State>({      name: "",      age: 20,      birthDay: new Date(),      profile: "",      telNumber: "",      address: "都"    });    const form = useValidation({      name: {        $value: state.name,        required,        $message: "必須項目です"      },      // 追加      age: {        $value: state.age,        numerically,        $message: "数値を入力してください"      },validatorに、新たに定義したnumericallyを設定します。templateのv-modelもform.age.$valueを利用するよう更新しておきましょう。これでname同様バリデーションが効くようになっているはずです。最後に電話番号のバリデーションを実装しましょう。フォーマットチェックの実装useValidationに、telNumberについてのバリデーションを追加します。const required = x => !!xconst numerically = v => {  return v.match(/\d+/)};// 追加const telNumberFormat = v => {  return v.match(/\d{2,3}-\d{1,4}-\d{4}$/)}export default defineComponent({  setup() {    const state = reactive<State>({      name: "",      age: 20,      birthDay: new Date(),      profile: "",      telNumber: "",      address: "都"    });    const form = useValidation({      name: {        $value: state.name,        required,        $message: "必須項目です"      },      age: {        $value: state.age,        numerically,        $message: "数値を入力してください"      },      // 追加      telNumber: {        $value: state.telNumber,        required: {          $validator: required,          $message: "必須項目です"        },        format: {          $validator: telNumberFormat,          $message: "電話番号の形式が不正です"        }      }ネストさせ、複数のバリデーションを行うことができます。電話番号では必須チェックとフォーマットチェックを行うようにしました。それぞれ、form.telNumber.required.プロパティ名 / form.telNumber.format.プロパティ名でアクセスできます。完成形最後にsubmitボタンの活性制御を追加すれば完成です。<template>  <div id="app">    <form @submit.prevent="submit">      <div class="mt">        <label for="name-input">氏名</label>        <input          type="text"          v-model="form.name.$value"          id="name-input"        />      </div>      <div class="mt">        <label for="age-input">年齢</label>        <input          type="number"          v-model="form.age.$value"          id="age-input"        />      </div>      <div class="mt">        <label for="birth-input">生年月日</label>        <input          type="date"          v-model="state.birthDay"          id="birth-input"        />      </div>      <div class="mt">        <label for="profile-input">プロフィール</label>        <textarea          v-model="form.profile.$value"          rows="4"          cols="40"          id="profile-input"        ></textarea>      </div>      <div class="mt">        <label for="tel-input">電話番号(ハイフン含)</label>        <input          type="text"          v-model="form.telNumber.$value"          id="tel-input"        />      </div>      <div class="mt">        <label for="address-input">都道府県</label>        <select          v-model="state.address"          id="address-input"        >          <option>都</option>          <option>道</option>          <option>府</option>          <option>県</option>        </select>      </div>      <div class="mt">        <input          :disabled="form.$anyInvalid"          type="submit"        />      </div>      <div>        <p v-if="form.name.$anyInvalid">氏名: {{form.name.$message}}</p>        <p v-if="form.age.$anyInvalid">年齢: {{form.age.$message}}</p>        <p v-if="form.birthday.$anyInvalid">生年月日: {{form.birthday.$message}}</p>        <p v-if="form.profile.$anyInvalid">プロフィール: {{form.profile.$message}}</p>        <p v-if="form.telNumber.$anyInvalid">電話番号: {{form.telNumber.required.$message}} {{form.telNumber.format.$message}}</p>      </div>    </form>  </div></template><script lang="ts">import {defineComponent, reactive} from '@vue/composition-api'import {useValidation} from 'vue-composable'type State = {  name: string;  age: number;  birthDay: Date;  profile: string;  telNumber: string;  address: string;}const required = x => !!xconst numerically = v => {  return v.match(/\d+/)};const telNumberFormat = v => {  return v.match(/\d{2,3}-\d{1,4}-\d{4}$/)}export default defineComponent({  setup() {    const state = reactive<State>({      name: "",      age: 20,      birthDay: new Date(),      profile: "",      telNumber: "",      address: "都"    });    const form = useValidation({      name: {        $value: state.name,        required,        $message: "必須項目です"      },      age: {        $value: state.age,        numerically,        $message: "数値を入力してください"      },      birthday: {        $value: state.birthDay,        required,        $message: "必須項目です"      },      profile: {        $value: state.profile,        required,        $message: "必須項目です"      },      telNumber: {        $value: state.telNumber,        required: {          $validator: required,          $message: "必須項目です"        },        format: {          $validator: telNumberFormat,          $message: "電話番号の形式が不正です"        }      }    })    function submit() {      alert('called submit')    }    return {      state,      form,      submit    }  }})</script><style>#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}.mt {  margin-top: 20px;}</style>このコードは多少雑な作りになっていますが、うまくアレンジして利用してみてください。まとめ基本形からちょっとした応用まで紹介したので、これをベースに拡張していけば大抵の要件には対応できるかと思います。非常に柔軟性が高く使い勝手の良い機能ですし、そこまで癖のない馴染みある構文ですね。一部触れなかった構文もありますので、興味のある方はぜひ公式ドキュメントも読んでみてください。 https://pikax.me/vue-composable/composable/validation/validation.html以上、vue-composableを利用したバリデーション実装でした。

VueのComposition APIでフォームのバリデーション実装

Vueの新バージョン、3.0のbeta版が出たらしいので、みんな大好きTODOリストを作って書き味を試してみようと思います。なお、完成したコードはこちらにおいてあります。よければ参考にしてください。https://github.com/yubachiri/vue3-todo-sampleCLIのインストールVue3を触れる環境構築プロジェクト作成Vue3 ベータ版の導入実装HelloWorldするTODOアプリ作るまとめCLIのインストール僕のCLIはだいぶ古かったです。過去にVueを利用してしばらく触ってない場合は、念のため最新のものを入れておきましょう$ npm uninstall vue-cli -g$ npm install @vue/cli@4.4.1 -g$ vue versionバージョン指定をしない場合、2020/5/29時点では3.0.1が入りました。が、4.0.1で修正されているバグに遭遇したり、vue-nextが入らなかったため、最新版を指定しています。参照: Create new project - TypeError: api.assertCliVersion is not a functionVue3を触れる環境構築プロジェクト作成$ vue create sample-project選択肢が出ますが、defaultでOKです。プロジェクトが作成できたら、試しに起動してみましょう。$ cd sample-project$ npm run servehttp://localhost:8080/ でこの画面が表示されればOKです。Vue3 ベータ版の導入公式プラグインを入れます。CLIのバージョンが低いとエラーが出るので、確認しておきましょう。$ vue add vue-nextこれで準備完了です。実装していきましょう。実装HelloWorldするまずは挨拶から。これを App.vueに丸々コピペしてください。今回はApp.vueしか触りません。<template>  <div id="app">    <p>      {{state.greet}}, {{state.version}}    </p>  </div></template><script>import { defineComponent, reactive } from 'vue'export default defineComponent({  setup() {    const state = reactive({      greet: "Hello",      version: "Vue 3"    })    return {      state    }  }})</script><style>#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}</style>今までのVueとは一味違った構文ですね。従来 data()で書いていたstateは、reactiveで定義できるようになっています。なお、defineComponentはts採用時に効果を発揮するものだそうです。コンポーネント内での型推論が可能になるとのこと。今回はプロジェクトの作成をデフォルト設定で行ったので、恩恵を受けられません。 参考 composition-api#typescript表示される画面はこちら。いいですね。ではTODOしていきましょう。TODOアプリ作るまずはタスクの登録。<template>  <div id="app">    <input type="text" v-model="state.input" />    <button @click="addTodo">      Add TODO    </button>    <p v-for="todo in state.todos" :key="todo">      {{todo}}    </p>  </div></template><script>import { defineComponent, reactive } from 'vue'export default defineComponent({  setup() {    const state = reactive({      input: "",      todos: [],    })    function addTodo() {      state.todos = [...state.todos, state.input]      state.input = ""    }    return {      state,      addTodo,    }  }})</script>templateには以下の変更を行いました。- textをバインドしたinputを設置- 入力された値を配列に追加するためのボタンを設置scriptの方は、- todoを格納する配列を定義- todoを追加する関数を定義関数は従来 methodsで定義していましたね。自由度が上がっているように見えます。やりようによっては以前より見通しの良いコードになりそうです。関数は定義したらreturnするようにしましょう。あとは、todoの完了管理ができるようになったら完成です。簡単ですね。<template>  <div id="app">    <input type="text" v-model="state.input" />    <button @click="addTodo">      Add TODO    </button>    <p v-for="(todo, index) in state.todos" :key="index">      {{todo}}      <button @click="completeTodo(index)">        Complete      </button>    </p>    <p>Completed</p>    <p v-for="(todo, index) in state.completedTodos" :key="index">      {{todo}}    </p>  </div></template><script>import { defineComponent, reactive } from 'vue'export default defineComponent({  setup() {    const state = reactive({      input: "",      todos: [],      completedTodos: [],    })    function addTodo() {      state.todos = [...state.todos, state.input]      state.input = ""    }    function completeTodo(index) {      state.completedTodos = [...state.completedTodos, state.todos[index]]      state.todos.splice(index, 1)      state.todos = [...state.todos]    }    return {      state,      addTodo,      completeTodo    }  }})</script>templateの変更- 各todoに完了ボタンを設置- 完了したtodoを表示scriptの変更- 完了したtodoを格納する配列を定義- todoを完了する関数を定義です。雑ですが十分でしょう。まとめ構文がガラッと変わりますが、stateや関数の定義あたりはReactのfunction componentっぽさを感じて割と好みです。型推論が真価だと思うので、これはts入れるべきでしたね。vue createで手動設定を選び、ちゃっちゃと入れちゃうのが吉。

Vue3 Composition APIのreactiveに触れる

最近熱い感があるNoCodeサービスを使って、webサービス開発にトライしたいなぁと思っていました。こんなサービスあったらいいなと思っても、ガッツリ作るのは腰が重かったり、既存サービスは課金しないと十分に使えなかったり…。NoCodeでサクッと作って、もっと拡張したいと思ったら改めて0から真面目に作るなんてフローが取れたら絶対幸せになれる。俺が幸せにするって約束するよ…！！というわけで僕が欲しいサービスがちゃちゃっと作れないか検証しようと思います。今回利用するNoCodeサービスは言わずと知れたZapier。TL;DRZapierとはアカウント登録 ~ Twitterからデータ取得登録するTwitter連携ツイートの取得Firebaseとの統合 ツイートをFirestoreに突っ込むまでFirebase認証Firestore連携動作確認保存するツイートを絞り込むまとめTL;DR大いなる野望を達成するために、ツイートをFirestoreに突っ込む処理をZapierでサクッと作ります。具体的には、Zapierの利用開始から、ツイートをフィルターにかけつつFirestoreに保存するまでを紹介します。Zapierにアカウント登録するTwitter連携の設定をするFirebaseとの連携ツイートしたらFirestoreに突っ込むフィルター設定といった流れ。普通に自前で実装したらだいぶ工数がかかる処理も、Zapierを利用すれば短時間で実現可能です。Zapierとは公式Connect your apps and automate workflows(公式より引用)自動化しようぜ的なことが書いてあります。Zapierは色々なサービスやアプリケーションを連携させ、設定したタスクを自動で実行してくれるサービスです。特定の文面を含むメールがGmailに届いたらSlackに通知させる、とか。自分好みのワークフローを設定し、業務効率化を助けてくれるサービスですね。そして、ZapierにはFirebase Integrationが用意されています。これは無限の可能性がありますね…！アカウント登録 ~ Twitterからデータ取得登録する登録は、Google / Facebook / Emailの三択ですね。今回はGoogleを選択しました。Googleを選択して進むと、職業選択の画面(スキップ可能っぽい？)と、連携したいサービス選択画面になります。デフォルトでGoogleのサービスたちが選択されていますが、それに加えてTwitterとFirebase / Firestoreを選択しておきました。完了するとDashboardに飛ばされます。さて、まずはTwitter連携しましょう。Twitter連携サイドメニューから、My Appsを選択します。セレクトボックスからTwitterを選択しましょう。AutoFollowはなんとなくNoにしてContinue。すると連携許可の確認画面が出るので、認証しましょう。完了すると、My Appsの画面にTwitter連携が表示されます。ツイートの取得次はタスクの登録ですね。サイドメニューから Zapsを選択 → 画面中央、Make a New Zapを選択します。次の画面では、- Choose App: Twitter- Chose Trigger Event: My Tweetを選択し、CONTINUEです。Choose Accountはさっき連携した自分のアカウントを選択すればOKです。最後のFind Data画面では(スクショ撮り損ねました)、画面中央のボタンを押すと自分のツイートを3件ほど取得するテストをしてくれます。ここまで完了したら、Twitterをごにょごにょするのは完了です。Firebase連携に進みましょう。Firebaseとの統合 ツイートをFirestoreに突っ込むまで※Firebaseのプロジェクトがない場合は適当に作っておきます。また、Cloud Firestoreの初期化もしておきましょう。Firebase認証さて、引き続きZapの設定画面です。1つめのタスク設定が完了し、2つめのタスクを設定できるようになっています。Firebase / Firestoreを選択しましょう。Choose Action Eventは、Create Cloud Firestore Document in Firebase / Firestoreを選択します。するとFirebaseへの認証を求めらるので、設定していきましょう。プロジェクトIDを入れ、認証が完了したら Customize Record という画面が表示されます。Firestore連携まずは、Collectionの指定です。一点注意ですが、Firestoreを作りたてホヤホヤだとZapier側でエラーが表示されます。Firestoreに何かしらのCollectionがないといけないんですね。なので適当にデータを一件入れつつ、こんな具合にtweetsコレクションを作成しておきます。すると、Zapier側からそれを指定することができます。Convert Numericsはどっちでもいいです。お好みで。Firestoreにデータを突っ込む際に、数値で入れるか文字列で入れるかが選べるみたいですね。DocumentIDも、今回はFirestoreに自動生成させるので空欄でOKです。最後、Data欄ですね。左のフィールドは、contentと書いておきましょう。右のフィールドはクリックすると、ツイートのうちどのフィールドをFirestoreに登録するのかが選べます。Textを選択しましょう。ここまでできたら完了です。CONTINUEをクリックします。動作確認最後の画面です。動作確認ができるようになっています。TEST&REVIEWボタンを押すと実際に処理が走り、Firestoreにデータを入れてくれます。ちゃんとツイートのtextがFirestoreに保存されていたらOKです！確認できたらDone Editingで終了します。これで、ツイートしたらFirestoreに内容が保存されるという自動処理の設定が完了しました。最後の作業です。編集画面、もしくはZapsの画面で、今回作成したZapを稼働させましょう。offになっているスライドボタンをクリックして、onにすればTwitterの監視を始めてくれます。あと、お好みでZapに名前をつけてあげるのも良いと思います。保存するツイートを絞り込むツイートをなんでもかんでもFirestoreに突っ込んでもいいんですが、例えば特定のワードを含むツイートだけを保存したいなんて気持ちになったとき。そんな気持ちにもZapierは応えてくれます。さっき作ったZapを開き、TwitterとFirebaseのタスクの間にあるプラスボタンを押し、Filterを選択します。したら条件を設定する画面が出てきます。今回は己の欲望のみを取得するようにしたいので、「したい」を含むツイートのみを取るような設定にします。こんな具合ですね。試してみます。https://twitter.com/yubachiri/status/1260762545419243522?s=20https://twitter.com/yubachiri/status/1260762957438431235?s=20完璧だ…。まとめZapierの利用開始から、ツイートをフィルターにかけつつFirestoreに保存するまでを紹介しました。Zapierは扱えるアプリの選択肢がかなり豊富かつ、カスタマイズの自由度が非常に高いです。無限の可能性がありますね。ここまでの処理を自前で実装するとなると数倍の時間がかかると思いますが、慣れてしまえばこのくらいのワークフローはごく短時間で組めてしまいますね。すごい。ゴリゴリと業務効率化やQOL向上に役立てていきましょう。以上、Zapierを使ったTwitterとFirestoreの連携でした。

【NoCode】ZapierでツイートをFirestoreへ保存する

環境react: 16.13.1webpack: 4.42.0dotenv: 8.2.0webpack設定ファイル内でのdotenvをいい感じに設定する参考までにpackage.jsonの…

webpack使ってるReactをNetlifyに上げたら環境変数が読めなくて困った

dockerでrspec実行してたのですが、毎回アホみたいにファイルのロードが長かったのでなんとかしようと思いました。Springを活用するspring-commands-rspec (http…

RSpecの起動をスピードアップする files took n seconds to load が気になるあなたへ

VuePressを使ってみようかと思ったんですが、まだちょっと整備されていないっぽい？のでもう実績のあるNuxtとContentfulの組み合わせでやろうかと。ちょっと触ってみたので、そのログです。それぞれ公式はこちら！contentfulのnuxt integrationガイド: https://www.contentful.com/developers/docs/javascript/tutorials/integrate-contentful-with-vue-and-nuxt/nuxt公式: https://ja.nuxtjs.org/参考にした記事: https://qiita.com/isihigameKoudai/items/3e45ade7c438176a4cc9TL;DRプロジェクト作成contentfulにコンテンツ作成Nuxtからコンテンツの取得TL;DRプロジェクトつくりますcontentfulにコンテンツをおきますコンテンツを埋め込みますローカルで結果を確認します10分くらいあればできそう。結果は下記に置いてあります。https://github.com/yubachiri/nuxt-contentfulプロジェクト作成環境構築はNuxtの公式を参考にしつつ頑張りましょう。なんか聞かれたらだいたいenter。SPAモードでOKです。一点、 dotenv の導入だけはチェックしておいてください。$ npx create-nuxt-app nuxt-contentful-sample$ cd nuxt-contentful-sample一旦動かしてみましょう。$ cd nuxt-contentful-sample$ npm run build$ npm run starthttp://localhost:3000で動いているはずです。動いたら次へ。contentfulにコンテンツ作成https://www.contentful.com/アカウント作成適当にspace作成headerの"Content model"より、Add content typeするName: sample_postAdd fieldするTextを選択nameと入力createをクリックsaveをクリックheaderの"Content"より、コンテンツを作成Add sample_postをクリックnameを適当に入力Publishをクリックとても雑ですがこれでコンテンツ作成までOKです。Nuxtからコンテンツの取得Contentfulのcliを入れます。$ npm install --save contentfulちょっとコードを触っていきます。nuxt.config.jsrequire('dotenv').config();const { CTF_SPACE_ID, CTF_CDA_ACCESS_TOKEN } = process.env;export default {...  env: {    CTF_SPACE_ID,    CTF_CDA_ACCESS_TOKEN  }}plugins/contentful.js(新規作成)const contentful = require('contentful');const config = {  space: process.env.CTF_SPACE_ID,  accessToken: process.env.CTF_CDA_ACCESS_TOKEN}const client = contentful.createClient(config);export default client;.envBASE_URL=http://localhost:3000CTF_SPACE_ID=<あとで埋めます>CTF_CDA_ACCESS_TOKEN=<あとで埋めます>pages/index.vue<template>  <div>    <ul>      <li v-for="post in posts">        {%raw%}{{ post.fields.name }}{%endraw%}      </li>    </ul>  </div></template><script>  import client from '~/plugins/contentful.js'  export default {    asyncData() {      return client.getEntries()        .then(entries => {          return {            posts: entries.items          }        })    }  }</script>です！.envの<あとで埋めます>の部分も埋めていきましょう。さっき作ったcontentfulのプロジェクトのページにいき、 header > Settings > API key をクリックしてください。Example Keyがあるはずなので、それを選択。なければAdd API keyから作成しましょう。その中に記載されている Space ID と Content Delivery API - access token が欲しいものです。それぞれ CTF_SPACE_ID と CTF_CDA_ACCESS_TOKEN に書きましょう。CTF_SPACE_ID=hogehuga123CTF_CDA_ACCESS_TOKEN=foobar4567これで万事OKなはず。$ npm run build$ npm run devすると、localhost:3000にコンテンツの name のリストが表示されるはずです。以上！

Nuxt.js + Contentful でサクッとブログのベース的なものをつくる ローカルで動作するところまで

mofmofの新規事業立ち上げ第二弾で、SwiftでARを扱ったのでAR入門＆ちょびっとだけ得た知見を書き殴ろうかと思います。tl;dr環境手を動かす前に！ 15秒座学プロジェクト準備プロジェクト作成編下準備の設定編ARに触れていく編 特徴点検出までARに触れいていく編 オブジェクトの設置ARに触れいていく編 北に置きたい位置情報の取得下ごしらえ。動かすいかがでしたか。tl;dr特徴点検出ARKitとSceneKitがざっくり動く北にオブジェクト置くまっさらな状態からここまでやります。完成形はこんな感じ。環境新しめのmac新しめのiPhone新しめのXcodeこれを書いてる私はmojave、iOS12、Xcode10みたいな感じでやりました。対応機種はこんな感じ。公式スクショしてきました。詳しくはこちら (2019/07/22)手を動かす前に！ 15秒座学今回主に触るものの概要説明です。ARKitカメラを通して特徴点を検出、それを基準に空間トラッキングしてくれるiPhoneの各種センサを用いて自己位置の推定もしているSceneKit3Dオブジェクトを扱うフレームワークオブジェクトの位置とか回転とか、物理演算担当ARKitとこいつとで現実世界にオブジェクトがあるような表現を頑張っているプロジェクト準備プロジェクト作成編Xcodeを立ち上げて、Create a new projectしましょうSingle View Appでnext適当にプロジェクト名を入れます任意の場所でcreate下準備の設定編カメラの利用許可は必須なので、設定しておきますInfo.plistを開きます一番上に表示されている Information Property Listにカーソルをのせると右端に出てくるプラスマークをクリックしますPrivacy - Camera Usage Descriptionを選択しますValueの欄に「AR機能を利用するためにカメラを使用します。」と書いておきますなくても実機デバッグは可能ですが、Required device capabilitiesを設定しておきますRequired device capabilitiesにカーソルをのせると表示されるプラスマークをクリック追加されたItemのValueに”arkit”と入力補足: Device Capbilityの役割とか(任意) 北にオブジェクトを置くときはiOSの位置情報サービスを利用するので、利用許可の設定をします一番上に表示されている Information Property Listにカーソルをのせると右端に出てくるプラスマークをクリックしますLocation When In Use Usage Descriptionを選択しますValueの欄に「北を検出するために位置情報を使用します。」と書いておきます参考:準備OK！ARに触れていく編 特徴点検出まで最初に、ARを表示するためのViewを設置します。ARKit SceneKit Viewを置き、広げておきましょう。ちなみにSceneKitは3D用、SpriteKitは2D用という違いがあります。したらコードで触るために、なんやかんやいじっていきます。まずはARKitのimport追加したARKit SceneKit ViewのOutlet接続をします。import UIKitimport ARKit // 追加class ViewController: UIViewController {    @IBOutlet weak var arSceneView: ARSCNView! // control + ドラッグで追加        override func viewDidLoad() {        super.viewDidLoad()    }}ARKitはARSessionを通して諸々を制御するらしいので、arSceneViewにsessionを設定します。ARKitが特徴点を見つけてくれるところを眺めるためにデバッグオプションも追加しておきます。class ViewController: UIViewController {    @IBOutlet weak var arSceneView: ARSCNView!        override func viewDidLoad() {        super.viewDidLoad()        // 以下追加        arSceneView.session = ARSession()                arSceneView.showsStatistics = true        arSceneView.debugOptions = ARSCNDebugOptions.showFeaturePoints    }}で、セッションはviewDidApperで走らせます。ついでにセッションを止めるのも書いておきます。class ViewController: UIViewController {    override func viewDidLoad() {        略    }        // 追加    override func viewDidAppear(_ animated: Bool) {        let configuration = ARWorldTrackingConfiguration()        arSceneView.session.run(configuration)    }    // 追加    override func viewWillDisappear(_ animated: Bool) {        arSceneView.session.pause()    }}ARWorldTrackingConfigurationはARSessionのトラッキングオプションです。どんな情報を元にトラッキングするかということが設定できます。オプションはいくつかありますが、これがベーシックなものかと思います。詳しくはこちらここまでやればとりあえず動くようにはなっていると思います。実機繋いでRunしてみましょう。よーし、次はオブジェクト設置ですね。ARに触れいていく編 オブジェクトの設置画面をタップしたらオブジェクトが設置されるようにしていきます。まずはTap Gesture Recognizerの追加。Actionで繋ぎます。@IBAction func handleTap(_ sender: Any) {}中身はこんな感じにしましょう。@IBAction func handleTap(_ sender: Any) {    guard let camera = arSceneView.pointOfView else { return } // 1    let box = SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0)    let boxNode = SCNNode(geometry: box)    let relativePosition = SCNVector3(x: 0, y: 0, z: -1) // 2    boxNode.position = camera.convertPosition(relativePosition, to: nil) // 3    arSceneView.scene.rootNode.addChildNode(boxNode)}SCNBoxなSCNNodeを作って、ARSceneに追加しているところですね。位置設定周りは、カメラの座標を取得z方向に-1、つまり前方に1mを表現したSCNVector3を作成カメラの座標を、上記で準備した相対位置を加味しつつAR世界の絶対座標に変換ということを行なっています。結果、カメラの前方1mの位置が指定できているわけです。その位置にBoxのNodeを追加することでオブジェクトの設置を実装しました。ここまでできたら動かしてみましょう。画面をタップした際に、豆腐みたいなオブジェクトが現れるはずです。ARに触れいていく編 北に置きたい会社でダジャレをさらっと言うのが流行っているので勘弁してください。最後のステップですね。豆腐が北に現れるようにしていきます。今回の新規事業の肝でした。カメラの位置と向き&位置情報サービスからなんとかします。位置情報の取得下ごしらえ。やることは三つあります。1.位置情報フレームワークを追加しますtargets → generalの下部ですね。2.CoreLocationをimportします。3.delegateを設定import UIKitimport ARKitimport CoreLocation // 追加class ViewController: UIViewController, CLLocationManagerDelegate { // 追加    let locationManager = CLLocationManager()ついでにlocationManagerのインスタンスを作っておきます。準備OK。動かすoverride func viewDidLoad() {    super.viewDidLoad()        arSceneView.session = ARSession()        arSceneView.showsStatistics = true    arSceneView.debugOptions = ARSCNDebugOptions.showFeaturePoints        // 追加    locationManager.delegate = self    locationManager.startUpdatingHeading()}viewDidLoadで方角取得を起こします。そして、方角がupdateされるたびに呼ばれるメソッドはこちら。func locationManager(_ manager:CLLocationManager,didUpdateHeading newHeading:CLHeading)ここで他の箇所にも色々と変更が入ります。全容はこちら。変更箇所にはコメントを入れてあります。import UIKitimport ARKitimport CoreLocationclass ViewController: UIViewController, CLLocationManagerDelegate {    let locationManager = CLLocationManager()    var isRotationInitialized = false // フラグを追加    var northRotate: SCNVector4? // 北方向を保持する変数を追加    @IBOutlet weak var arSceneView: ARSCNView!        override func viewDidLoad() {        super.viewDidLoad()                arSceneView.session = ARSession()                arSceneView.showsStatistics = true        arSceneView.debugOptions = ARSCNDebugOptions.showFeaturePoints                locationManager.delegate = self        locationManager.startUpdatingHeading()    }        override func viewDidAppear(_ animated: Bool) {        let configuration = ARWorldTrackingConfiguration()        arSceneView.session.run(configuration)    }        override func viewWillDisappear(_ animated: Bool) {        arSceneView.session.pause()    }        @IBAction func handleTap(_ sender: Any) {        guard let camera = arSceneView.pointOfView else { return }        guard let rotation = northRotate else { return } // northRotateの初期化を確認        let box = SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0)        let boxNode = SCNNode(geometry: box)        let relativePosition = SCNVector3(x: 0, y: 0, z: -1)        camera.rotation = rotation // カメラの回転を北に向ける        boxNode.position = camera.convertPosition(relativePosition, to: nil)        arSceneView.scene.rootNode.addChildNode(boxNode)    }        func locationManager(_ manager:CLLocationManager,didUpdateHeading newHeading:CLHeading){        let nowHeading = newHeading.magneticHeading // 現在向いている方向を0度~359度で取得                if !isRotationInitialized {            // (x軸, y軸, z軸, 回転)で回転を表現            // 回転はラジアンで受け付けるため度数を変換している            northRotate = SCNVector4(0, 1, 0, (nowHeading / 180) * Double.pi)            isRotationInitialized = true        }    }    }微妙にややこしいです。AR内の表現は右手座標系となっており、回転も右ねじです。なので、SCNVector4のy軸を1にすると、反時計回りの回転が表現できます。反時計周りに起動時の度数分回せば北を向くので、それをfunc locationManager(_ manager:CLLocationManager,didUpdateHeading newHeading:CLHeading)で計算させます。起動時に真東を向いてたのなら、反時計回りに90度回せば北向くよね、ということです。カメラの回転を表すrotationは、ARのセッションが続いている間は起動時を(0,0,0,0)とするので、その時点からどれくらい回せば北を向くかが保持できていれば今回の要件が達成できます。そんなこんなで上記のようなコードになります。というわけで、画面をタップすると北に豆腐が現れるようになったと思います。完成！いかがでしたか。考えることのベクトルがwebと違っていたり、3Dプログラミングならではな知識が必要だったりで、とてもエキサイティングです。ARめちゃくちゃ楽しい。

iOSでARやる 入門から簡単なアプリ作成まで

公式TL;DROpal導入するTL;DR全部Rubyでかけるのがうま味？ Rubyに慣れ親しんだJS初心者は嬉しいかも？ なOpal入門してみます。導入からアプリがちょっと動くところまで。Opal導入する適当なプロジェクトを作成して、準備します。GemfileにOpalを追加gem 'opal-rails'app/assets/javascripts/application.js を app/assets/javascripts/application.js.rbに変更して中身も変えるrequire 'opal'require 'opal_ujs'require 'turbolinks'require_tree '.'したら、コントローラを作ってみます。$ rails g controller Sample index結果create  app/controllers/sample_controller.rb  route  get 'sample/index'invoke  erbcreate    app/views/samplecreate    app/views/sample/index.html.erbinvoke  test_unitcreate    test/controllers/sample_controller_test.rbinvoke  helpercreate    app/helpers/sample_helper.rbinvoke    test_unitinvoke  assetsinvoke    opalcreate      app/assets/javascripts/sample.js.rbinvoke    scsscreate      app/assets/stylesheets/sample.scssOpalがこんなものを作ってくれましたね。create      app/assets/javascripts/sample.js.rb# Place all the behaviors and hooks related to the matching controller here.# All this logic will automatically be available in application.js.# You can use Opal in this file: http://opalrb.org/### Here's an example view class for your controller:#class SampleView  # We should have <body class="controller-<%= controller_name %>"> in layouts  def initialize(selector = 'body.controller-sample')    @selector = selector  end  def setup    on(:click, 'a', &method(:link_clicked))  end  def link_clicked(event)    event.prevent    puts "Hello! (You just clicked on a link: #{event.current_target.text})"  end  private  attr_reader :selector, :element  # Uncomment the following method to look for elements in the scope of the  # base selector:  #  # def find(selector)  #   Element.find("#{@selector} #{selector}")  # end  # Register events on document to save memory and be friends to Turbolinks  def on(event, selector = nil, &block)    Element[`document`].on(event, selector, &block)  endendSampleView.new.setupおお、なんとなく読めます。動作確認してみましょう。自動生成のコードでは、尻のsetupメソッドでaタグにlink_clickedを呼ぶクリックイベントを定義してくれていそうなので、aタグ設置したりしてみようと思います。クラス宣言の外に下記を追加して、/sample/indexに行きましょう。Document.ready? do  Element.find('body').html = '<h1>Hello World from Opal!</h1> <a href="#">Hello</a>'endhtmlがHelloみたいな雰囲気になり、ひとつリンクが設置されているはずです。リンクをクリックするとlink_clickedが呼ばれてコンソールにputsしてくれますね。ほへー。自動生成されたコードを参考にしつつ、さっき追記したものを消してもうちょっと触ってみる。/app/views/sample/index.html.erb<h2>sample</h2><input type="text" id="sample_input" data-target="#sample_text"><input type="button" id="change_color" data-target="#sample_text" value="色変えるボタン"><div id="sample_text"></div>/app/assets/javascripts/sample.js.rb略  def setup    on(:click, 'a', &method(:link_clicked))    on(:input, '#sample_input', &method(:value_changed))    on(:click, '#change_color', &method(:change_color))  end  def link_clicked(event)    event.prevent    puts "Hello! (You just clicked on a link: #{event.current_target.text})"  end  def value_changed(event)    Element.find(event.target.data['target']).text = event.target.value  end  def change_color(event)    Element.find(event.target.data['target']).css("color", "red")  end略こんなんになる。jQueryより見た目はスッキリするし、諸々をRubyで統一できるのはもしかしたらハッピーかもしれないですね。今回はシンプルにサクッとなのでerbだったけど他のテンプレートエンジンに乗せかえるのもそんな問題なさそうです。

RubyをJavaScriptにしてしまうOpalを触ってみる

前回は画面からqueryを投げてデータを取得するところまでやってみました。今回はもうちょっと実用的な形でTODOアプリを進化させようと思います。前回Rails×GraphQLやる - もふもふ技術部TL;DR前回のやり直し導入しないとどうなるかVueとApollo導入するApollo実装編TL;DRがしかし、導入したGemのバージョンが古いので、これを最新版にアップデート＆最新の構成でもう一度前回と同じ仕様の実現までやってから、GraphQLをいい感じに扱えるApolloというライブラリを導入していじっていこうと思います。前回のやり直し前回はgemのバージョンを1.7.7指定していたのですが、今日(2019/4/15)時点では1.9.4が最新です。ジェネレータを使って生成されるファイルの内容も以前と変わっているので、最新キャッチアップをしてから先に進もうと思います。コードはこれのmasterからブランチ切ってやります。まずはGemfileの編集とbundle installですね。# graphqlgem 'graphql', '1.9.4'gem 'graphiql-rails'したらファイル生成$ rails g graphql:installすると、色々できます。create  app/graphql/typescreate  app/graphql/types/.keepcreate  app/graphql/todo_schema.rbcreate  app/graphql/types/base_object.rbcreate  app/graphql/types/base_enum.rbcreate  app/graphql/types/base_input_object.rbcreate  app/graphql/types/base_interface.rbcreate  app/graphql/types/base_scalar.rbcreate  app/graphql/types/base_union.rbcreate  app/graphql/types/query_type.rbadd_root_type  querycreate  app/graphql/mutationscreate  app/graphql/mutations/.keepcreate  app/graphql/types/mutation_type.rbadd_root_type  mutationcreate  app/controllers/graphql_controller.rbroute  post "/graphql", to: "graphql#execute"gemfile  graphiql-railsroute  graphiql-railsルーティングは自動で前回と同じ内容になりますが、types以下の構成がだいぶ変わりましたね。一旦graphiqlから動作確認してみましょう。バッチリ。続いて、Taskの型ファイルも生成しましょう。rails g graphql:object Task id:ID! title:String! status:Int! priority:Int!できたのはこちら。module Types  class TaskType < Types::BaseObject    field :id, ID, null: false    field :title, String, null: false    field :status, Integer, null: false    field :priority, Integer, null: false  endendRubyになりましたね。次は最初のタスクを取得するのとIDで検索するQueryを定義してみます。module Types  class QueryType < Types::BaseObject    field :first_task, TaskType, null: false, description: "return first task"    field :task_find_by, TaskType, null: false, description: "return a task" do      argument :task_id, Integer, required: true    end    def first_task      Task.first    end    def task_find_by(task_id:)      Task.find_by(id: task_id)    end  endend書き方もぼちぼち変わりましたね。個人的にはこっちの方が親しみを感じます。field名はキャメルケースでもスネークケースでもいいみたいです。Query投げる時はキャメルケースじゃないとだめみたいでした。以前はfield内にresolverを書いていましたが、今回はデフォルトでは同名のメソッドがresolverとして動作するみたいです。resolver_method:というオプションをフィールドに渡すとメソッドの指定ができます。こんな感じですね。field :resolver_method_exam, String, null: false, description: "this is resolver sample", resolver_method: :say_hellodef say_hello  "Hello, resolver!"endというわけで前回やったとこまで追いついたので、これを楽に扱うライブラリ、Apolloを導入します。導入しないとどうなるか適当にボタンの設置とcoffeeでajax。button#first-task-button first_task$ ->  $('#first-task-button').on 'click', ->    query = {query: '{firstTask {id title status priority}}'};    $.ajax      url: '/graphql',      type: 'POST',      dataType: 'json',      data: query    .done (result) ->      console.log(result)    .fail (error) ->      console.log(error)なんか嫌ですね。これを無限に定義しないといけないとなると、悲しい未来が見えます。なので、クライアントサイドから楽にGraphQLを扱うためのライブラリ、Apolloを使ってみます。あと色々と楽なのでVueも入れます。VueとApollo導入するwebpacker入れてvue導入gem 'webpacker'rails webpacker:installrails webpacker:install:vue/app/javascript/packs/vue_apollo_sample.jsを作成import Vue from 'vue/dist/vue.esm.js'document.addEventListener('DOMContentLoaded', () => {  const app = new Vue({    el: '#mount_target',    data: {      message: 'hello, vue'    }  })})ついでにGraphQLで色々試すためのページを作りましょうか。routes.rbresources :tasks do  collection do    get :graph, to: 'tasks#graph_index'  endendtasks_controller.rb  # 追加  def graph_index  endgraph_index.html.slim= javascript_pack_tag 'vue_apollo_sample'#mount_target  p = "{%raw%}{{message}}{%endraw%}"これで、今作ったページでVueが動作するようになっているはずです。/tasks/graphにhello, vueが表示されていればOK。したらApolloの導入ですね。vue向けのライブラリも一緒に入れましょう。yarn add graphql graphql-tag apollo-client apollo-boost vue-apolloそれぞれどんなものかざっくり。garphql: graphqlをjsで扱うためのものgraphql-tag: クエリを楽に投げるための便利ツールapollo-client: apollo本体apollo-boost: apollo-clientを簡単に扱うためのラッパーvue-apollo: vue向け統合ライブラリではいざ！Apollo実装編基本的にapollo-boostに乗っかっていきます。Vue×Apolloなところ...vue_apollo_sample.jsimport Vue from 'vue/dist/vue.esm.js'import ApolloClient from "apollo-boost";import VueApollo from "vue-apollo";import { gql } from "apollo-boost";const client = new ApolloClient({  uri: "http://localhost:3008/graphql",  request: async operation => {    operation.setContext({      headers: {        'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').getAttribute('content'),      },    });  }});const apolloProvider = new VueApollo({  defaultClient: client});Vue.use(VueApollo);document.addEventListener('DOMContentLoaded', () => {  // graphql-tagが活躍しているところ  const ALL_TASK_QUERY = gql`  query allTask{    allTask {      id      title      status      priority    }  }`  // 引数ありなクエリ  const SEARCH_TASK_QUERY = gql`  query taskSearchBy($taskName: String!){    taskSearchBy(taskName: $taskName) {      id      title      status      priority    }  }`  const app = new Vue({    el: '#mount_target',    // これを渡すことで、this.$apolloからクエリを投げることができるようになる    apolloProvider: apolloProvider,    mounted() {      self = this;      this.$apollo.query({        query: ALL_TASK_QUERY      })        .then(function (result) {          self.tasks = result.data.allTask;        })        .catch(function (error) {          console.log(error);        });    },    data: {      tasks: [],    },    methods: {      search: function (e) {        this.$apollo.query({          query: SEARCH_TASK_QUERY,          variables: {            taskName: e.target.value          }        })          .then(function (result) {            self.tasks = result.data.taskSearchBy;          })          .catch(function (error) {            console.log(error);          });      }    }  })})クエリ検索の仕様を、idからtitleの部分一致に変えました。query_type.jsmodule Types  class QueryType < Types::BaseObject    field :all_task, [TaskType], null: false, description: "return all task"    field :first_task, TaskType, null: false, description: "return first task"    field :task_search_by, [TaskType], null: false, description: "return a task" do      argument :task_name, String, required: true    end    field :resolver_method_exam, String, null: false, description: "this is resolver sample", resolver_method: :say_hello    def all_task      Task.all    end    def first_task      Task.first    end    def task_search_by(task_name:)      Task.where('title like ?', "%#{task_name}%")    end    def say_hello      "Hello, resolver!"    end  endendviewはdataのtasksを全件表示したり検索input置いたりしてます。入力されるたびに検索走ります。結果はApolloがキャッシュしてくれます。graph_index.html.slim= javascript_pack_tag 'vue_apollo_sample'#mount_target  b search:  input[type="text" @input="search"]  div[v-for="task in tasks" :key="task.id"]    = "{%raw%}{{task.title}}{%endraw%}"すると、こうなるう、動いたーーー！ Vueを導入したのもありますが、jQueryで頑張るパターンと比較してなにかつらみから解放された感がありますね。今回はサンプルということもあり1ファイルのjsで頑張りましたが、クエリ自体は別ファイルで管理するとか、Apolloのproviderは親コンポーネント/処理は子コンポーネントという構成にしたりとか、もっと人道的な工夫はできます。あと、apollo-boostはカスタマイズには向かないので、業務で使うならapollo-clientでしっかり設定していくべきとの言説を見かけました。とかとかありますがひとまず動いた！達成感！

Apollo使ってGraphQLを自由自在に操（りたい）

前回UnityでJoy-Conの入力を受け付けるとこまでやったので、今回はその入力を使ってUnityっぽい何かをしてみようと思います。TL;DRジャイロセンサーの入力を扱うビーム撃たす完成スクリプト最終形TL;DRジャイロセンサーで向きを自由自在に変えられる羊にビームを撃たせます。羊やらビームやらのオブジェクト置いて記事内のスクリプトをコピペすればすぐに実現できます。JoyConSample.csの完成形はページ最下部に置いてあります。ジャイロセンサーの入力を扱う前回、UnityでJoy-Conを使ってみる - もふもふ技術部でUnity世界にJoy-Conを召喚しました。すでにJoy-Conから諸々の値を受け取れる状態なので、これをこねくりまわします。ジャイロセンサーを扱うにあたって、今回はこちらの記事を参考にさせていただいてます。Nintendo SwitchのJoy-Conを使ってユニティちゃんの腕を動かすなにはともあれ、羊がいないと話が始まりません。可愛らしい動物たちのアセットがストアにあるので、インポートしましょう。Farm Animals Setインポートしたら、PrefabsからSheepWhiteをSceneにドラッグ&ドロップで羊を設置します。可愛い。地面は適当にGameObject > 3D Object > Planeを設置して、Standard Assets(公式が用意してるすごいアセット。ストアで無料です)のEnvironment > TerrainAssets > SurfaceTextures > GrassHillAlbedoをセットしたMaterialをくっつけました。で羊ちゃんが出現したので、こいつをジャイロセンサーで操作していきましょう。まず、羊ちゃんの名前をBeamSheepにしておきます。安直。そしたら前回作成したJoyConSample.csを変更します。羊をスクリプト内で扱えるようにするところpublic class JoyConSample : MonoBehaviour{    private static readonly Joycon.Button[] m_buttons =        Enum.GetValues (typeof (Joycon.Button)) as Joycon.Button[];    private List<Joycon> m_joycons;    private Joycon m_joyconL;    private Joycon m_joyconR;    private Joycon.Button? m_pressedButtonL;    private Joycon.Button? m_pressedButtonR;    // 追加    private GameObject sheep;    private void Start ()    {        SetControllers ();                // 追加        sheep = GameObject.Find ("BeamSheep");        以下略ジャイロセンサーの値で羊の向きを変えるところprivate void Update (){    m_pressedButtonL = null;    m_pressedButtonR = null;    if (m_joycons == null || m_joycons.Count <= 0) return;    SetControllers ();    foreach (var button in m_buttons)    {        if (m_joyconL.GetButton (button))        {            m_pressedButtonL = button;        }        if (m_joyconR.GetButton (button))        {            m_pressedButtonR = button;        }    }    if (Input.GetKeyDown (KeyCode.Z))    {        m_joyconL.SetRumble (160, 320, 0.6f, 200);    }    if (Input.GetKeyDown (KeyCode.X))    {        m_joyconR.SetRumble (160, 320, 0.6f, 200);    }    // 以下追加と変更箇所    const float MOVE_PER_CLOCK = 0.01f;    Vector3 joyconGyro;    // Joy-Conのジャイロ値を取得    joyconGyro = m_joyconR.GetGyro ();    Quaternion sheepQuaternion = sheep.transform.rotation;    // Joy-Conを横持ちした時にうまいこと向きが変わるようになっています。    sheepQuaternion.x += -joyconGyro[0] * MOVE_PER_CLOCK;    sheepQuaternion.y -= -joyconGyro[2] * MOVE_PER_CLOCK;    sheepQuaternion.z -= -joyconGyro[1] * MOVE_PER_CLOCK;    sheep.transform.rotation = sheepQuaternion;    // 右Joy-ConのBボタンを押すと羊の向きがリセットされます。    if (m_joyconR.GetButtonDown (m_buttons[0]))    {        sheep.transform.rotation = new Quaternion (0, 0, 0, 0);    }    以下略ここまでやると羊が自由自在に向きを変えるようになっていると思います。カメラと羊の位置をいい感じにして再生してみましょう。Joy-Conは横持ちしてください。 Joy-Conと羊の同期にはちょいちょいズレがありますが、ご愛嬌です。Bボタンを押せば向きがリセットされます。ビーム撃たす完全に蛇足ですが、せっかくなので羊にビームを撃たせます。参考 - 【Unity】ParticleSystemでレーザービームを作るこの記事を丸々参考にして、ビームを作成します。Unityのバージョンが違うためか設定項目名は若干異なりましたが、今回はこんな感じで作りました。名前はSheepBeamにしました。次に、ビームのオン/オフ制御を楽にするためSheepNozzleを作成します。HierarchyのBeamSheep上で右クリックし、3D Object > Cube を作成します。- 名前はSheepNozzleに変更- Scaleを0.001, 0.001, 0.001にしちゃいます- 位置は羊の口元に移動させます- BeamSheepとSheepNozzleのRotationは全て0にしておきましょうできたら、SheepNozzleの下にSheepBeamを置きましょう。こうです。ここまできたらもうビームを垂れ流す羊を自由自在に動かせるようになっていることと思います。が、それは非常に迷惑なのでビームのオン/オフをスクリプトで制御しましょう。JoyConSample.csを編集します。フィールドの追加public class JoyConSample : MonoBehaviour{    private static readonly Joycon.Button[] m_buttons =        Enum.GetValues (typeof (Joycon.Button)) as Joycon.Button[];    private List<Joycon> m_joycons;    private Joycon m_joyconL;    private Joycon m_joyconR;    private Joycon.Button? m_pressedButtonL;    private Joycon.Button? m_pressedButtonR;    private GameObject sheep;    // 追加    [SerializeField]    private GameObject nozzle;制御ロジック追加private void Update (){    m_pressedButtonL = null;    m_pressedButtonR = null;    if (m_joycons == null || m_joycons.Count <= 0) return;    SetControllers ();    foreach (var button in m_buttons)    {        if (m_joyconL.GetButton (button))        {            m_pressedButtonL = button;        }        if (m_joyconR.GetButton (button))        {            m_pressedButtonR = button;        }    }    if (Input.GetKeyDown (KeyCode.Z))    {        m_joyconL.SetRumble (160, 320, 0.6f, 200);    }    if (Input.GetKeyDown (KeyCode.X))    {        m_joyconR.SetRumble (160, 320, 0.6f, 200);    }    const float MOVE_PER_CLOCK = 0.01f;    Vector3 joyconGyro;    joyconGyro = m_joyconR.GetGyro ();    Quaternion sheepQuaternion = sheep.transform.rotation;    sheepQuaternion.x += -joyconGyro[0] * MOVE_PER_CLOCK;    sheepQuaternion.y -= -joyconGyro[2] * MOVE_PER_CLOCK;    sheepQuaternion.z -= -joyconGyro[1] * MOVE_PER_CLOCK;    sheep.transform.rotation = sheepQuaternion;    if (m_joyconR.GetButtonDown (m_buttons[0]))    {        sheep.transform.rotation = new Quaternion (0, 0, 0, 0);    }    // 追加    // 右Joy-ConのAボタンでオン/オフを切り替えます    if (m_joyconR.GetButtonDown (m_buttons[1]))    {        if (nozzle.activeSelf)        {            nozzle.SetActive (false);        }        else        {            nozzle.SetActive (true);        }    }}すると、前回作成してJoyConSampleをセットしてあるExampleオブジェクトに、Nozzleをセットできるようになります。そこにSheepNozzleをドラッグ&ドロップしましょう。最後にSheepNozzleを非アクティブにして完成です。名前横のチェックを外しましょう。こうすることにより、Aボタンを押すまではビームを吐かなくなります。完成満足したスクリプト最終形using System;using System.Collections;using System.Collections.Generic;using System.Linq;using UnityEngine;public class JoyConSample : MonoBehaviour{    private static readonly Joycon.Button[] m_buttons =        Enum.GetValues (typeof (Joycon.Button)) as Joycon.Button[];    private List<Joycon> m_joycons;    private Joycon m_joyconL;    private Joycon m_joyconR;    private Joycon.Button? m_pressedButtonL;    private Joycon.Button? m_pressedButtonR;    private GameObject sheep;    [SerializeField]    private GameObject nozzle;    private void Start ()    {        SetControllers ();        sheep = GameObject.Find ("BeamSheep");    }    private void Update ()    {        m_pressedButtonL = null;        m_pressedButtonR = null;        if (m_joycons == null || m_joycons.Count <= 0) return;        SetControllers ();        foreach (var button in m_buttons)        {            if (m_joyconL.GetButton (button))            {                m_pressedButtonL = button;            }            if (m_joyconR.GetButton (button))            {                m_pressedButtonR = button;            }        }        if (Input.GetKeyDown (KeyCode.Z))        {            m_joyconL.SetRumble (160, 320, 0.6f, 200);        }        if (Input.GetKeyDown (KeyCode.X))        {            m_joyconR.SetRumble (160, 320, 0.6f, 200);        }        const float MOVE_PER_CLOCK = 0.01f;        Vector3 joyconGyro;        joyconGyro = m_joyconR.GetGyro ();        Quaternion sheepQuaternion = sheep.transform.rotation;        sheepQuaternion.x += -joyconGyro[0] * MOVE_PER_CLOCK;        sheepQuaternion.y -= -joyconGyro[2] * MOVE_PER_CLOCK;        sheepQuaternion.z -= -joyconGyro[1] * MOVE_PER_CLOCK;        sheep.transform.rotation = sheepQuaternion;        if (m_joyconR.GetButtonDown (m_buttons[0]))        {            sheep.transform.rotation = new Quaternion (0, 0, 0, 0);        }        if (m_joyconR.GetButtonDown (m_buttons[1]))        {            if (nozzle.activeSelf)            {                nozzle.SetActive (false);            }            else            {                nozzle.SetActive (true);            }        }    }    private void SetControllers ()    {        m_joycons = JoyconManager.Instance.j;        if (m_joycons == null || m_joycons.Count <= 0) return;        m_joyconL = m_joycons.Find (c => c.isLeft);        m_joyconR = m_joycons.Find (c => !c.isLeft);    }}

Joy-Conのジャイロセンサーの威力を試す

原田見習いの岩井です。師匠がUnityにお熱な傍らで、弟子の僕もここぞとばかりに時間をつぎ込みVR新規事業を模索していました。Unity超楽しい。自分のクリエイティビティの限界を感じる。とはいえUnityは超楽しいので、もうちょっとUnityの深淵に近づいてみたい。深淵に近づくとき、深淵もまた云々。TL;DRJoy-Conとは環境を整えるJoy-Conをmacに接続するJoy-Con疎通完成TL;DR複数回にわたってお届けする（予定）Joy-Conで遊ぶ編、今回はUnity世界にJoy-Conを召喚するところまでやってみます。Joy-Conとは任天堂株式会社より2017/3/3に発売されたゲームハードであるNintendo Switchのコントローラーです。こんなやつ。公式の周辺機器紹介ページなんとこやつ、各種ボタンに加えて加速度センサーやジャイロセンサー、果てはモーションIRカメラまで搭載されていて、しかもUnityでそれらを簡単に受け取り・処理するための便利なライブラリもあると！これはいちスプラトゥーンプレイヤーとして、いちスマブラプレイヤーとして、いち任天堂ファンとして触らずにはいられません！！あああ！！ちなみに、こちらの記事を全体的に参考にさせていただいてます。【Unity】Nintendo Switch の Joy-Con のジャイロ・加速度・傾きの値を取得したり、振動させたりすることができる「JoyconLib」紹介環境を整えるまずはUnityで適当に新規プロジェクトを作ります。今回はmofmofの人間がJoy-Conで遊ぶのでにしました。mofulという単語はこの世にないです（たぶん）Scriptやらを入手それぞれGitHubからZIPで入手しておきましょう。  JoyconLib  Unity-WiimoteUnityに導入JoyconLib-master > Packages > con.lookingglass.joyconlib > JoyconLib_scripts をプロジェクトのAssetsに追加します。Unity-Wiimote-master > Assets > Wiimote > Plugins > (OS) > hidapi(bundle or dll) のうち、OSに応じたものをプロジェクトのAssetsに追加します。macならhidapi.bundleをインポートすればOKです。  結果、こんな感じ  Joy-Conをmacに接続するBluetoothでつなぐことができます。Joy-Conのシンクロボタンを長押しするシステム環境設定 > Bluetooth より、それぞれ接続しましょうJoy-Con疎通さて、実際に入力値を受け取ってみます。まずはお好みでC#スクリプトをおくScriptsフォルダを作成します。したらProject > CreateからC#Scriptを新規作成しましょう。名前は適当にJoyConSampleとかで。これならたぶん他のnamespaceと被らないです。JoyConSample.csの内容はこちら、丸コピペで大丈夫です。参考記事と一部相違がありますのでご注意。using System;using System.Collections;using System.Collections.Generic;using System.Linq;using UnityEngine;public class JoyConSample : MonoBehaviour{    private static readonly Joycon.Button[] m_buttons =        Enum.GetValues (typeof (Joycon.Button)) as Joycon.Button[];    private List<Joycon> m_joycons;    private Joycon m_joyconL;    private Joycon m_joyconR;    private Joycon.Button? m_pressedButtonL;    private Joycon.Button? m_pressedButtonR;    private void Start ()    {        SetControllers ();    }    private void Update ()    {        m_pressedButtonL = null;        m_pressedButtonR = null;        if (m_joycons == null || m_joycons.Count <= 0) return;        SetControllers ();        foreach (var button in m_buttons)        {            if (m_joyconL.GetButton (button))            {                m_pressedButtonL = button;            }            if (m_joyconR.GetButton (button))            {                m_pressedButtonR = button;            }        }        if (Input.GetKeyDown (KeyCode.Z))        {            m_joyconL.SetRumble (160, 320, 0.6f, 200);        }        if (Input.GetKeyDown (KeyCode.X))        {            m_joyconR.SetRumble (160, 320, 0.6f, 200);        }    }    private void OnGUI ()    {        var style = GUI.skin.GetStyle ("label");        style.fontSize = 24;        if (m_joycons == null || m_joycons.Count <= 0)        {            GUILayout.Label ("Joy-Con が接続されていません");            return;        }        if (!m_joycons.Any (c => c.isLeft))        {            GUILayout.Label ("Joy-Con (L) が接続されていません");            return;        }        if (!m_joycons.Any (c => !c.isLeft))        {            GUILayout.Label ("Joy-Con (R) が接続されていません");            return;        }        GUILayout.BeginHorizontal (GUILayout.Width (960));        foreach (var joycon in m_joycons)        {            var isLeft = joycon.isLeft;            var name = isLeft ? "Joy-Con (L)" : "Joy-Con (R)";            var key = isLeft ? "Z キー" : "X キー";            var button = isLeft ? m_pressedButtonL : m_pressedButtonR;            var stick = joycon.GetStick ();            var gyro = joycon.GetGyro ();            var accel = joycon.GetAccel ();            var orientation = joycon.GetVector ();            GUILayout.BeginVertical (GUILayout.Width (480));            GUILayout.Label (name);            GUILayout.Label (key + "：振動");            GUILayout.Label ("押されているボタン：" + button);            GUILayout.Label (string.Format ("スティック：({0}, {1})", stick[0], stick[1]));            GUILayout.Label ("ジャイロ：" + gyro);            GUILayout.Label ("加速度：" + accel);            GUILayout.Label ("傾き：" + orientation);            GUILayout.EndVertical ();        }        GUILayout.EndHorizontal ();    }    private void SetControllers ()    {        m_joycons = JoyconManager.Instance.j;        if (m_joycons == null || m_joycons.Count <= 0) return;        m_joyconL = m_joycons.Find (c => c.isLeft);        m_joyconR = m_joycons.Find (c => !c.isLeft);    }}相違箇所の解説をします。個々のコード解説は冒頭の参考記事に詳しく記されていますのでご覧になってください。知識が浅きこと水たまりの如しなので有識者の方コメントいただければ幸いです。Joy-Conは Start()  の  m_joycons = JoyconManager.Instance.j; でインスタンス化しています。が、Joy-Conの接続にちょびっと時間がかかるため  Start()  の時点ではmac自体に（？）Unityに（？）接続されておらず、JoyconManagerからまだインスタンス化できないみたいなんですよね。なので、 Update() 時にも  m_joycons  が空なら再度インスタンス化して、改めてprivate変数にも突っ込もう作戦をとりました。そんな思いを込めたハンドメイドなメソッドが末尾のSetControllers()くんです。privateなボタンがnullだと  Update()  の if (m_joyconL.GetButton(button))  が無限にエラー吐きます。以上！あともう一つ、下記のようなエラーも発生していました。どうやら実行環境依存みたいです。FormatException: Input string was not in a correct format.File > BuildSettings > ウィンドウ左下のPlayerSettings… > InspectorのOtherSettings > 中部の Configrationのうち、Scripting Runtime Versionで設定できます。.NET4.0Equivalentで発生し、3.5に下げたら解消しました。ご参考までに。ちょっと逸れましたが続きです。Joy-Conの入力を確かめるために、空のオブジェクトを作成しましょう。Hierarchy上でCreateEmptyします。名前はすごくなんでもいいのでExampleとかつけておいてください。できたら、それをInspectorに表示し、JoyConSampleスクリプトとJoyconManagerスクリプトをくっつけましょう。ドラッグ&ドロップです。完成なんと完成。あとは再生ボタンを押せば、JoyConSample内が画面出力までやってくれます。お手軽〜！無限の可能性を感じますね。今後模索していきます。

yubachiri

開発テーマのネタ出し奮闘ログリーンキャンバス実例と開発スコープ決め

プロダクトバックログの分類を建設的に行うための一案モンハン説

ドメインモデリングのようなことをしたログ

久しぶりにqmkを使った（楽にキーマップを編集する方法備忘録）

【個人開発】価値あるユーザーストーリー作成をサポートするサービス「ChatUSG」を作りました

【個人開発】言いにくいことを代わりに言ってもらうSlackのスラッシュコマンド作りました

個人開発を加速させるChatGPTペアプロ実践ログ Flutterに入門してみました

【個人開発】引っ越し先の住みやすさをサクッと知れるサービスを作りたかった（Next.js, Yahoo!ローカルサーチAPI, Geocoding.jp）

WSLのインポートが完了しない（回り続ける・原因不明で終了する）

もっとTypeScriptと仲良くなる逆引き.ts

Chakra UI Tips 実装するにあたってかゆかったこと

AWS SAMを使ってS3通知→Lambda(Python Pillow)で画像加工する環境をつくる

人はなぜ刀の柄にロケットランチャーを仕込みたくなるのか

Remix / Firebase / Tailwind 環境構築する

ReactのRefを理解したい

ZoomのAPIとFirebaseで参加者シャッフルSlack通知をつくった

【Recharts】Reactでレーダーチャートを描画する

【GQless紹介】スマートなGraphQL client GQlessを使ってqueryを発行する

Apolloをストアとして活用する Next.jsのwith-apollo exampleをベースに解説

ReactのuseCallbackを3分くらいでふわっと理解する

【Rails】GraphQL爆速入門サンプルアプリでgraphql-rubyのCRUDをちゃんと理解する

Next.jsでログイン機能の実装 NextAuth.js

盛り盛りなReactのフレームワーク Blitz入門

Blitzのgenerateやrecipeを試す

Google Analyticsのイベント計測を行う Nuxt + typescript (vue-class-component)

Apolloのキャッシュ更新入門 writeQuery / cache.modify / 自動

React + Firebase + Hasuraで体験する快適なGraphQL生活

React + Firebase + Hasuraで体験する快適なGraphQL生活

VueのComposition APIでフォームのバリデーション実装

Vue3 Composition APIのreactiveに触れる

【NoCode】ZapierでツイートをFirestoreへ保存する

webpack使ってるReactをNetlifyに上げたら環境変数が読めなくて困った

開発テーマのネタ出し奮闘ログ リーンキャンバス実例と開発スコープ決め

プロダクトバックログの分類を建設的に行うための一案 モンハン説

ドメインモデリングのようなことをしたログ

久しぶりにqmkを使った（楽にキーマップを編集する方法備忘録）

【個人開発】価値あるユーザーストーリー作成をサポートするサービス「ChatUSG」を作りました

【個人開発】言いにくいことを代わりに言ってもらうSlackのスラッシュコマンド作りました

個人開発を加速させるChatGPTペアプロ実践ログ Flutterに入門してみました

【個人開発】引っ越し先の住みやすさをサクッと知れるサービスを作りたかった（Next.js, Yahoo!ローカルサーチAPI, Geocoding.jp）

WSLのインポートが完了しない（回り続ける・原因不明で終了する）

もっとTypeScriptと仲良くなる 逆引き.ts

Chakra UI Tips 実装するにあたってかゆかったこと

AWS SAMを使ってS3通知→Lambda(Python Pillow)で画像加工する環境をつくる

人はなぜ刀の柄にロケットランチャーを仕込みたくなるのか

Remix / Firebase / Tailwind 環境構築する

ReactのRefを理解したい

ZoomのAPIとFirebaseで参加者シャッフルSlack通知をつくった

【Recharts】Reactでレーダーチャートを描画する

【GQless紹介】スマートなGraphQL client GQlessを使ってqueryを発行する

Apolloをストアとして活用する Next.jsのwith-apollo exampleをベースに解説

ReactのuseCallbackを3分くらいでふわっと理解する

【Rails】GraphQL爆速入門 サンプルアプリでgraphql-rubyのCRUDをちゃんと理解する

Next.jsでログイン機能の実装 NextAuth.js

盛り盛りなReactのフレームワーク Blitz入門

Blitzのgenerateやrecipeを試す

Google Analyticsのイベント計測を行う Nuxt + typescript (vue-class-component)

Apolloのキャッシュ更新入門 writeQuery / cache.modify / 自動

React + Firebase + Hasuraで体験する快適なGraphQL生活

React + Firebase + Hasuraで体験する快適なGraphQL生活

VueのComposition APIでフォームのバリデーション実装

Vue3 Composition APIのreactiveに触れる

【NoCode】ZapierでツイートをFirestoreへ保存する

webpack使ってるReactをNetlifyに上げたら環境変数が読めなくて困った

開発テーマのネタ出し奮闘ログリーンキャンバス実例と開発スコープ決め

プロダクトバックログの分類を建設的に行うための一案モンハン説

もっとTypeScriptと仲良くなる逆引き.ts

【Rails】GraphQL爆速入門サンプルアプリでgraphql-rubyのCRUDをちゃんと理解する