- 1. Vue.jsで数値（number）が絡むフォーム入力バインディング（v-modal）を行うときにハマったこと
- 2. axiosを使ってJWT認証を行う
- 3. ボリュームメーターの作り方
- 4. 【Javascript】Nullish Coalescing Operator(??)合体演算子を試してみる
- 5. 楕円と点の当たり判定(JavaScript)
- 6. JavaScriptの論理演算子の返り値は論理値ではない
- 7. Jest・Supertestを使用したnode.js(Express)のAPIテスト 基本（テスト導入）編
- 8. YellowfinのRESTAPIをJavaScriptから使用する
- 9. DjangoからJavaScriptへの値渡し
- 10. Yellowfinのクライアント組織に属している人向けのJSAPIv3でのダッシュボード表示
- 11. Expressを使用しない単純なNode.jsサーバーの作成
- 12. グローバル変数はできるだけ使用しないようにしよう
- 13. 【Css】Mobile Slide Menu(スライドメニュー）を作ってみた
- 14. Vuexの状態管理 is not 情報の永続保存ではないということ
- 15. NuxtをコンテナにしてLambdaでデプロイするのが超簡単になった2021年
- 16. 地震の発震機構解（ビーチボール）の描画アルゴリズムをGMTから勉強
- 17. 【備忘録】React : コンポーネントを作る際にやりがちなミス①初心者向け
- 18. error用filterでlambdaのrequestId取得
- 19. Javascript 変数
- 20. TypeScriptの型推論(type inference)を理解する
Vue.jsで数値（number）が絡むフォーム入力バインディング（v-modal）を行うときにハマったこと
Vue.jsで数値が絡むフォーム入力バインディングを行うときにハマったことについて解説していきます。
## 目的の処理
1. 数値を入力するフォーム（ `type=”number”` ）を3つ作成
1. この3つのフォームに与えられた数値の合計を`total`としてフロントに反映
この処理を行うためにVue.jsにあるフォーム入力バイディング（`v-modal`）と算出プロパティ（`computed`）を使用していきます。
## 間違ったコード
“`TotalCounter.vue
axiosを使ってJWT認証を行う
##はじめに
axiosを使って自分のAPIサーバーとデータのやり取りを行う上でJWT認証トークンについて述べられている文献が少ないと思ったのでここで載せておきます。フロントエンド開発の負担軽減になれば幸いです。ついでにaxiosについても少し解説します。
##使うもの
* Python 3.82
* Django 2.1
* Django-rest-framework 3.12.4
* Npm 6.14.11
* Vue.js 2.6
* Vuex 3.6
* Axios上三つはバックエンド用です。今回はaxiosの解説なので説明しません。Vue.jsはjavascriptフレームワークで、Reactでも多分大丈夫です。Vuexは状態管理用のツールで、ユーザーのTokenをローカルストレージに保存したりそれを変更したりするときに使います。
##Axiosとは
Webサイトなどを構築する上で、サーバーサイド(データベースとやり取りを行う)とフロントエンド（ブラウザ）でデータのやり取りを行う必要があります。そこでブラウザからサーバー側へHTTPリクエストを送る役割をAxiosが担っボリュームメーターの作り方
本記事ではWeb Audioを使ったボリュームメーターの作り方を紹介します。
ボリュームメーターを作ることを通して、サウンドプログラミングの基礎的な内容にも触れています。
JavaScriptで説明しますが、他言語にも通じる汎用的な内容になっています。今回作るボリュームメーターにはマイクの音量をリアルタイムで表示させます。
音量の表し方にはいくつか種類があり、PEAKレベル・RMSレベル・LOUDNESSレベルなどがあります。
音声入力の際に重要なことはクリッピングさせないことなので、今回はPEAKメーターを作成します。## 表記について
閉区間を表わす記号として [ , ] を使います。
## 画面を用意
“`html
【Javascript】Nullish Coalescing Operator(??)合体演算子を試してみる#初めに
合体演算子について学習した内容をまとめてみました。前回の記事：
https://qiita.com/redrabbit1104/items/e002b51e109e120ed6d4
https://qiita.com/redrabbit1104/items/e9b687c6c6d13fbf7c2a※内容に間違いなどがある場合はご指摘をよろしくお願いします。
#Nullish Coalescing Operator(Null合体演算子）
論理演算子。nullish（nullに近いもの）をcoalescing(合体させた）operator(演算子）のこと。ここでnullishとは「null」と「undefined」を意味します。この「null」と「undefined」を合体させたケース（nullまたはundefinedの場合)を探して、もしその値があれば評価せず、それ以外の値は評価する演算子です。# 使ってみる
まずは、falsy values（NaN,false,0n,”,null,undefined)の場合、結果はどうなるか試してみました。楕円と点の当たり判定(JavaScript)
楕円とは、「ある二点からの距離の和が常に一定である点の集合」である。
この「ある二点」を焦点と呼び、「一定」の値は長軸（縦横のうち長い方の幅）の長さとなる。
即ち、横に長い楕円（回転はしない）に限れば、中心の座標、焦点同士の距離、長軸の長さ、という3つの情報から楕円は一意に定まる。そんな楕円に対して、ある点から当たり判定をけしかけたい。
やることは単純で、点と二焦点との距離の和が横幅より小さければ点は内部にあり、大きければ点は外部にある。“`js:script.js
//点(x1,y1)が楕円[中心(x2,y2), 焦点から中心までの距離f, 横幅w]の内部にあるかどうかを判定する関数
function detectEllipseCollision(x1, y1, x2, y2, f, w){
if(hypo(x1,y1,x2+f,y2) + hypo(x1,y1,x2-f,y2) <= w){ return true; } else { return false; } } function hypo(x1, y1,JavaScriptの論理演算子の返り値は論理値ではない
# 経緯
先日JavaScriptで以下のような記述を見かけた．
“`js
len = (obj.arr || []).length
“`今までC++をメインに使っており，論理演算子の返り値は論理値(Boolean型)であると思い込んでいたが，どうやらJavaScriptでは仕様が違うらしい．
# C++の場合
`100 && 200`を出力してみる．“`C++
#include
#include
#include
using namespace std;int main() {
int x = 100, y = 200;
cout << (x && y) << endl; // 完全な型名の取得 const type_info& id = typeid(x && y); int stat; char *name = abi::__cxa_demangle(id.name(),0,0,&stat); cout << name <Jest・Supertestを使用したnode.js(Express)のAPIテスト 基本（テスト導入）編
## はじめに
この記事ではnode.js(Express)のAPIテストの第1弾として、テストを実行できるようになる部分までを記載している。
実際にテストを作る中でトラブって困った事も[トラブった事](#トラブった事)として残している。※第2弾としてmockを使ったより実践的なテストについても記事を書いてみたのでそちらも参照頂けると幸いです。
※第2弾は現在執筆中です。## どうやってExpressのAPI(End Point)テストをjestでやるのか？
– [Step1. jest, supertestをinstallする](#step1-jest-supertestをinstallする)
– [Step2. nodeのテストを実行できるようにpackage.jsonを設定する](#step2-nodeのテストを実行できるようにpackagejsonを設定する)
– [Step3. nodeのコード(Express)をテスト可能なようにリファクタリングする](#step3-nodeのコードexpressをテスト可能なようにリファクタリングする)
– [Step.4 実際にYellowfinのRESTAPIをJavaScriptから使用する
#概要
なんだかやったことあるような気がしたんですが、SSOくらいしか試せてなくて実際に使うにはどういう流れになるか不明だったので今回まとめてみました。#ハマリポイントについて
ハマリポイントは固有のAuthorizationヘッダーの部分がなかなかユニークなので、UnixTimeStampを使う必要があったり、最初にどのAPIを使ってsecurityTokenを取得するんだ！？とかですね。。
実際にやってみた時には似たようなAPIがあったりしてわかりづらかったです。
まずは公式wikiの[このページ](https://wiki.yellowfin.co.jp/display/yfcurrent/REST+API)を見て試行錯誤です。##どのAPIを使ってsecurityTokenを取得するのか
まず、単純にSSOしてレポートやダッシュボードを表示したいというだけであれば、[CORS設定を行いwebserver越しにRESTでYellowfinサーバーにアクセスする](https://qiita.com/celery/items/69f8da9601277807cc34)や[YDjangoからJavaScriptへの値渡し
こんにちは。初投稿の記事です。
最近 Djangoを独学していて、調べてもわからないことがあって
徹夜で解決したときのコードとか書きます。####概要
Djangoのデータベースに保存したリスト変数を、ビューからテンプレートに送って
HTMLのbuttonタグを押すとリストからランダムに１件表示される。この際、Django側からJavaScriptに変数を送れないのでは？と思ったけどできるらしい。
とはいえ調べたとおりにやっても上手くいかなかったので、ゴリ押しでコード書いた。
***
ビューこんなかんじ“`python:app/views.py
from django.shortcuts import render, redirect
from django.views.generic import View
from .models import Post
from .forms import PostForm
import jsonclass IndexView(View):
def get(self, request, *args, **kwargsYellowfinのクライアント組織に属している人向けのJSAPIv3でのダッシュボード表示
#概要
件名の通りなのですが、[CORS設定を行いwebserver越しにRESTでYellowfinサーバーにアクセスする](https://qiita.com/celery/items/69f8da9601277807cc34)で試してみたとおり、デフォルト組織に属するユーザーに関しては問題なく表示できるのですが、人によってクライアント組織を分けていて、その人に向けて表示する内容を変えたいといった場合に使える方法を検証した結果、無事に表示できたのでそのメモを残そうと思います。#前提
・管理者ユーザーとアクセスユーザーが存在する。この場合管理者ユーザー(admin@yellowfin.com.au)、アクセスユーザー(admin2@yellowfin.com.au)。
・アクセスユーザーはtest1というクライアント組織に属している(参Expressを使用しない単純なNode.jsサーバーの作成
### Node.jsとは？
Node.jsとは、サーバーサイドのJavaScript実行環境です。
ブラウザGoogle Chrome用に開発されたJavaScriptエンジンV8がサーバ上でプログラムを実行できるように、ファイルやネットワークI/Oなど多くの機能を追加しています。軽量で効率よく多くのリクエストを処理するネットワークアプリケーションの構築ができるプラットフォームです。Node.jsでは“軽量で効率良い”処理を実現するために次の2つのモデルを採用しています。
– ノンブロッキングI/O
– イベントループ
JavaScriptの1つの特徴として、シングルスレッドで動作することがあげられます。Node.jsにおいても同様で、デッドロックなどを意識する必要がなくなるというメリットがあります。しかしその反面、同時に1つの処理しかできず、複数の処理をさばけません。そのためNode.jsではノンブロッキングI/Oを採用しています。
例えば、データベースにアクセスして検索結果を取得するという処理を行う場合、データベースに問い合わせてから結果が返ってくるまで、待ち時間があグローバル変数はできるだけ使用しないようにしよう
「 リーダブルコード」を読んでいてこれまで意識いなかったグローバル変数についての記述があったので備忘録として残しておきます。
“`javascript
//ダメな例
submitted = false // グローバル変数var submit_form = function (form_name) {
if (submitted) {
return; //
}
…submitted = true
“`
“`javascript
// 良い例
var submit_form = function ((form_name) {var submitted = false // ローカル変数にして、以下の関数からしかアクセスされないようにする
if (submitted) {
return; //
};}());
// 最終行の()は外側の上関数がすぐに実行されて内側の関数を返している。
// この技法は、内側の感性だけがアクセスできる「プライベート」スコープを作る効果があり、
// 読み手は「submitted変数はいつ使われる【Css】Mobile Slide Menu(スライドメニュー）を作ってみた
# 初めに
学習した内容をもとに、スマホのボタンを押すと画面がスライドしてメニューが表示される機能をCssやJavascriptを利用して作ってみました。※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。# 完成形のイメージ
Vuexの状態管理 is not 情報の永続保存ではないということ
#Vuexとは？
Vuexの概念を理解するのがむずかしい・・・
Vuexは状態管理のためのライブラリだと言われている。
よく木に例えられたりするが、自分には合わない説明だったので自分の言葉でまとめたいと思う。##利便性
なぜ、Vuexがあると良いのか、むしろないと困ってしまうのか？ということについて考えてみよう。
例えば、親子関係が複雑なVueプロジェクトがあったとする。この時、あるデータを親から子のコンポーネントへ移す時は `props`を使うであろう。しかし、この場合、その構造が複雑になればなるほどほど受け渡しの記述が多くなったり、変更があった時に大変であろう。
もし、この時一貫した情報やメソッドを保持したりする中心的な場所があれば、上記のような構造での記述や受け渡しでのミスを減らすことができる。これがVuexであり、便利なところである。NuxtをコンテナにしてLambdaでデプロイするのが超簡単になった2021年
以前書いた[LaravelをコンテナにしてLambdaでデプロイするのが超簡単になった2021年](https://qiita.com/umihico/items/514cf792d30bf3706ef5)のNuxtバージョンです。[Djangoバージョンはこちら](https://qiita.com/umihico/items/4534e1f84e8de5a62db5)
有名どころで[nuxt-serverless](https://github.com/tonyfromundefined/nuxt-serverless)など色々ありますが、こんな手間・デメリットがあったかと思います。
– 静的ファイル用にS3を用意、同期対応
– API GatewayのURLに付与されるステージ変数の対応
– `npx create-nuxt-app`を使ったセットアップを行えないそんな中、[それらのデメリットを脱却できそうな記事](https://www.serverless.com/examples/aws-node-vue-nuxt-ssr/)を見つけたので、create-next-
地震の発震機構解（ビーチボール）の描画アルゴリズムをGMTから勉強
地震の解析では、震源の断層がどのように動いたかという「発震機構」（focal mechanism）を求める。この解を可視化する際は「ビーチボール」の形で図を描く。大きな地震の後の気象庁会見でもチラッと出てきたりする[^press]。
実用上は [The Generic Mapping Tools (GMT)](https://www.generic-mapping-tools.org/) などのツールを使えば簡単に描けるものの、遊びの
【備忘録】React : コンポーネントを作る際にやりがちなミス①初心者向け
## はじめに
現在Reactの学習をしております。
基礎は一通り学び終えたのですが、その中で犯してしまったミスについて備忘録的に書いていこうと思います。
完全に私自身に寄ったミスなのであまり役に立たないかもしれませんがご理解いただいた上でお読みいただけると嬉しいです。というわけで今回は、コンポーネント（Component）化する際にやりがちなミスについてです。
## ミス
さっそく今回のミスとは、**子コンポーネントにおいて、returnの中身の要素を`
タグ`、もしくはフラグメント（`<>`や``）で囲んでいなかった**ことです。 それはもう初歩的すぎるじゃん！と言われればもう全くその通りですが:sweat:
何度も実践を重ねて私自身、この設計については慣れてきたと思っていたところ、思わぬところでつまづいてしまいました・・・。特に今回のケースでは、個人的によく忘れがちになるのでないかと思い、今回の備忘録を書いておくことにしました。
ではどんなコードを書いたのかというと
“`javascript
export conserror用filterでlambdaのrequestId取得
## 概要
ログ出力した時にCloudWatchに出ているidの取得です。公式に書いてあったfilter処理の情報から、ログ探って取得しました。
エラー時にインサイトとかで特定しやすいだろうと思ってのID抽出です。※header情報なんで、lambdaでheader取得したら流用は効きそうです。
##コード
“`
let reqestId = “”
const ctx = host.switchToHttp()
const request = ctx.getRequest()if (request.headers[‘x-apigateway-context’]) {
const context = JSON.parse(decodeURIComponent(request.headers[‘x-apigateway-context’]));
if (context[‘awsRequestId’]) {
reqestId = context[‘awsRequestId’];
}Javascript 変数
本日はJavascriptの変数について学習をしましたので、そちらについて記事に残していきます。
前回の記事でも使用しましたが、変数は値を格納するための箱のようなイメージになります。
ですので、変数の中には様々な値を格納することができます。“`javascript
let x = 4;
“`
上記のようにコードを書くと、 x は 4 という数値を格納していることになります。変数はその名の通り、格納している値を変更できます。
格納している値を変更する際は、let を使わずに定義することができます。“`javascript
let x = 4;
x = 6;
“`
この場合、最初に x は 4 という数値を格納していますが、その後に数値が変更され 6 という数値を格納していることになります。今までの例では数値のみを格納していましたが、変数は数値以外にも様々な値を格納することができます。
“`javascript
let str = “変数”; //文字列
let num = 4; //数値
let arr = [“a”, “b”]; //配列
let obTypeScriptの型推論(type inference)を理解する
# はじめに
TypeScript には型推論という機能があり、すべての変数/引数において型アノテーションを書く必要がない。
うまく使えばコード量を大幅に減らし、コードの可読性も高めることができる。## 型推論とは
https://ja.wikipedia.org/wiki/%E5%9E%8B%E6%8E%A8%E8%AB%96
> 型推論（かたすいろん、英: type inference）とはプログラミング言語の機能の 1 つで、静的な型付けを持つ言語において、変数や関数シグネチャの型を明示的に宣言しなくても、初期化のための代入式の右辺値や関数呼び出し時の実引数などといった、周辺情報および文脈などから自動的に（暗黙的に）各々の型を決定する機構のこと。
変数/引数に対して明示的に型を宣言しなくても、周辺の文脈から型を暗黙的に決定することができる仕組みのことを指す。
以下が一番シンプルな型推論の例である。“`ts
let x = 10;
// 本来ならlet x: number = 10;
“`この例では`x`という変数に対して`10`を代入している。
あえて宣言OTHERカテゴリの最新記事
- 2024.09.19
JavaScript関連のことを調べてみた
- 2024.09.19
JAVA関連のことを調べてみた
- 2024.09.19
iOS関連のことを調べてみた
- 2024.09.19
Rails関連のことを調べてみた
- 2024.09.19
Lambda関連のことを調べてみた
- 2024.09.19
Python関連のことを調べてみた