【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 cons

error用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 ob

TypeScriptの型推論(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`を代入している。
あえて宣言

【JS】includes()で特定要素を複数指定したいとき

ES6で追加された `includes()` メソッドは、とても便利ですが、指定できる特定の要素はひとつしか指定できません。でも複数指定したいときはないでしょうか？この記事では特定の要素を複数指定する方法を紹介します。結論からいうと、**`includes()` に特定要素は複数指定できないでの独自関数を作ります。**

## `includes()` の使い方
まず `includes()` の使い方をおさらいしてみましょう。すでにわかっている！という人は読み飛ばしてください。

[Array.prototype.includes()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)

> includes() メソッドは、特定の要素が配列に含まれているかどうかを true または false で返します。

“`js
const numArray = [1, 2, 3];

console.log(numArray.includes(2))

Javascriptのイベントを知る

#Javascriptのイベントを知る
javaでdivclassに書いてある内容を取ってくる方法

“`csharp

お名前を記入してください

入力完了

“`

#解説
“`csharp
var btn = document.getElementById(‘btn’);
“`
これで

【Javascriptの基本的な文法を学ぼう③】条件分岐処理編

#はじめに
今回は変数定義についてみていきたいと思います！プログラミングを学習する上で条件分岐処理は基本的な内容となりますので、しっかり押さえておきましょう！

#条件分岐処理
条件分岐処理とは、`条件を満たしているかどうかで実行内容を分岐する処理です。`単に条件分岐とも呼ばれます。この仕組みで、「もし〇〇だったら△△をする」と処理を分けることができます。条件分岐処理において、分岐の条件として記述する式を`条件式`と呼び、条件式には、真偽値になる式を記述します。

#if文
Javascriptの条件分岐にはif(イフ)文という文法を使います。if文は、条件式が正しいか正しくないか、`つまりtrueかfalseかで実行する処理を分岐させることができます`。基本的なif文の書き方は以下です。条件式がtrueになる場合のみ、if 条件式{}の間に記述した処理を実行します。

>
“`javascript:例
if (条件式1) {
// 条件式1がtrueのときの処理
}
“`

#else if文
if文で条件式が偽のときに処理を行うには、else ifを使います。条件を満たさ

　for,forEach,for..in,for..ofの違いとはなんぞや

javascript繰り返し処理の種類多すぎないか？
備忘録的にまとめました。
（プログラミングを勉強し始めたばかりなので内容薄い！！どんどん内容濃くしていきたい、、）

通常のfor:relaxed:
初学者でもわかりやすい通常のfor
指定した回数で繰り返し処理をしてくれるのでめっちゃ簡単！
コードが長くなりがちだが、基本全てこれでなんとかなる。

forEach :v:
配列要素に対して繰り返し処理してくれる。
僕は、queryselecterAll()でNodeListを受け取り、それをforEachで回す事が多い。
forEachでcontinue,breakは使えないので要注意。
for ..ofと機能は殆ど変わらない。
この中では唯一、ループ構文ではなくメソッドである。
引数にインデックスを使える。

for..in:raised_hand:
オブジェクトに使用できる繰り返し処理。
for(key（変数名） in obj)という形で回していく。
基本的に要素が入った順で処理が行われるが順番は保証していないのであまり使わない方が良いのかも。
あとデータ量が多いと遅く

【Javascript】Short-Circuit Evaluation(短絡評価)について(&& and ||)

# 初めに
JavascriptにおけるShort-Circuit Evaluation(短絡評価）について、学習した内容をoutputしてみました。

前回の記事：

https://qiita.com/redrabbit1104/items/e002b51e109e120ed6d4

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

# Short-Circuit Evaluationとは
日本語では短絡評価と呼ばれるShort-Circuit Evaluation。short-circuitという名前通り、ある論理式の評価が決まって値が決定すると残りの部分の論理式を評価せずに終わるという評価方法です。ここでいう論理式とは「&&(and)」や「||(or)」演算子を使った論理式を指します。

# ||(Or)演算子におけるshort-circuit
boolean（trueまたはfalse)ではない値をor演算子を使って比べてみる（評価する）とどうなるでしょうか。
まずはtruthy valuesをor演算子で評価してみました。

“`javascript
//tr

モダンなデザインで軽量なJavaScriptのコンテキストメニューのライブラリーを作りました

## どんなものを作ったのか

Fluent Designに影響を受けた、モダンで美しく軽量なJavaScriptのコンテキストメニューのライブラリーを作りました。

コンテキストメニューが表示されるときにはちゃんとアニメーションも付いています！また、背景はブラーがかかった半透明のデザインです。


そして、ダークモードをサポートしています。ブラウザーがダークモードに設定されている場合、自動で黒を基調としたデザインに切り替わります。


## どうして作ったのか

ネットでコンテキストメニューのライブラ

【React】動的テーブル　セル結合

動的テーブルでセル結合をする

目指すかたち
civilization VI wiki

テーブルの特徴
・一つのセルに要素が２つ以上あったりなかったりする
・同要素でもまとまってないセルが存在する（コスト）

想定する動き
・DBからテーブルデータ引っ張ってきて(fetch)ならべる

問題
・DBから引っ張ってきて普通に並べると一列ずつになっちゃう

“`react:
const items = [
{A: “A1”, B: “B1” , C: “C1”},
{A: “A1”, B: “B2” , C: “C1”},
{A: “A1”, B: “B2” , C: “C2”},
{A: “A2”, B: “B1” , C: “C1”},
{A: “A2”, B: “B1” , C: “C2”},
];

cons

[phina.js] Labelの枠の色を変更する

その他のTipsは[こちら](https://qiita.com/alkn203/items/bca3222f6b409382fe20)


## ラベルの枠の色を変更する
ラベルの枠は、**strokeWidth** で太さを設定し、色は**stroke**プロパティで変更可能です。

“`js
var label2 = Label(‘Time is money’).addChildTo(this);
label2.setPosition(320, 600);
label2.fontSize = 48;
label2.fill = ‘red’;
label2.strokeWidth = 4;
label2.stroke = ‘white’;
“`

## サンプルコード
“`js
// グローバルに展開
phina.globalize();
/*
* メインシーン
*/
phina.define(“MainSce

[phina.js] ラベルの文字を変更する

その他のTipsは[こちら](https://qiita.com/alkn203/items/bca3222f6b409382fe20)


## ラベルの文字を変更する
ラベルの文字は、**text** プロパティで後から変更可能です。
以下のサンプルでは、画面がタッチされたらラベルの文字を変更しています。

“`js
// ラベル表示
var label = Label(‘Time is money’).addChildTo(this);
label.setPosition(this.gridX.center(), this.gridY.center());
// ラベル文字変更
this.onpointstart = function() {
label.text = ‘Money is time’;
};
“`

## サンプルコード
“`js
// グローバルに展開
phina.globalize()

コーディングについて～命名編 ① ～

私の参画しているプロジェクトにはコーディングルールが存在せず、
作成する必要を感じたため勉強をしました。
基礎中の基礎ばかりかと思いますが、自身の備忘録としてまとめることにしました。

# はじめに

本記事はJavaScriptをベースに記載していきます。

変数や関数の命名について大切なことは「何が入る変数なのか」、
「何をする関数なのか」ということが「一目でわかる」ということだと思います。
ですが、会社やプロジェクトで既にルールが存在するならば、
それに則るのが最も大切です。

# 変数名

## 基本的に名詞を使う

後に記載していますが、「～かどうか」のような状態を表す場合以外は名詞を使用します。

“`Javascript
const name = “名前”;
const id = “ID”;
“`

可能な限り具体的な変数名にするのがよいです。

“`Javascript
const loginUserName = “名前”;
const loginUserId = “ID”;
“`

## Bool 値の命名

「～かどうか」のような状態を表す場合はis●●やh

【JavaScript】Submit時のダブルクリック防止

Submit時にダブルクリックを防止するJSを書いたので共有。

筆者の環境ではChrome, FireFox, IE, Edgeで問題なく動いていました！（2021/05/21時点）

##JS本体##
“`javascript
var dblClickFlag = null;

function ThroughDblClick() {
// ダブルクリック（連続ポスト）の制御
if (dblClickFlag == null) {
dblClickFlag = 1;
return true;
} else {
return false;
}
}
“`
##onSubmitから呼び出す##
onSubmit属性に記述することで、True/FalseからonSubmitするか判断できます。
Falseの場合はsubmitされません。

“`html