JavaScript関連のことを調べてみた2021年08月25日

値が入っているものを探す

a=0;
b=undefind;
c=null;
d=1;

const result = a || b || c || d;
console.log(‘result:’ + result);

実行結果
result:1

注意
ifと同じで
0はないものとして判定される

JavaScriptの非同期通信でCSRFトークンの検証を回避する

#開発環境
– OS：macOS Big Sur 11.2.2
– Ruby：2.6.5
– Ruby on Rails：6.0.0
– テキストエディタ：Visual Studio Code

#課題
twitterのいいねボタンを押下したときのように、非同期通信でDB更新しつつWebページの見た目を変えたかった。
今回はXHRオブジェクトを作って実装。

“`clip.js
~
XHR.open(‘POST’, URL, true);
XHR.send();
“`

このリクエストが422エラーになる。もう少し詳細を追ってみると、
「ActionController::InvalidAuthenticityToken」
というエラーだった。

# CSRFとrailsのCSRF対策について
**CSRF=クロスサイトリクエストフォージェリ**とは脆弱性のあるWebアプリケーションに対し悪意のあるリクエストを送り攻撃すること。

railsではCSRF対策メソッドとして[protect_from_forgery](https://github.com/rails/rails/bl

「あすけん」の体重・体脂肪率グラフを体重・体脂肪量のグラフに変えるブックマークレット

## ブックマークレットはこちらから
https://planet-ape.net/bm/

※ページ内のリンクをブックマークバーにドラッグ＆ドロップ
## 経緯
ダイエットのために「[あすけん](https://www.asken.jp/)」で日々の食事やら体重やらの記録をつけています。
その中で[体重・体脂肪率の推移を表示するグラフ](https://www.asken.jp/my_graph/weightfat)があるのですが、
体脂肪率よりも実際に体脂肪がどれくらい増減したのかを知りたいので体重・体脂肪量のグラフも表示できないかなあ？と思い、ブックマークレットを作ってみました。
上記しているブックマークレットは[javascriptを圧縮](https://closure-compiler.appspot.com/home)してあります

JavaScript入門(変数と宣言)

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、理解した内容等を記載していく。

# 変数と宣言
JavaScriptには以下３つの変数宣言キーワードが存在する。

* const
* let
* var

# 「const」「let」 および「var」について
* varは古くから変数宣言に用いられていたキーワードで、意図しない動作を生み出しやすいことが懸念されていた。
* var自体が改善されたわけではなく、const、letが追加されたことでvarが抱えていた問題を回避できるようになった。
* すでにvarで書かれたコードの動作を考慮し、varは自体の変更はされていない。
* const,letはECMAScript 2015(以降、ES2015)から追加された。

※ ECMAScript
=>JavaScriptの動作を決めている仕様の名称
=>2015年にECMAScript 2015(ES2015)という大きなアップデートが行われた仕様が公開された

GASでZoomのURLを生成し、定期的にSlackに投げる

# はじめに
(有料プランに入れよという話だが、)
Zoomの無料プランでは同じミーティングURLを使い続けることができないため、
URLを新規に自動生成し、Slackに定期的に投げてくれるBotを作った。

# 事前準備
– Googleアカウントを用意
– Zoomアカウントを用意(あとでメールアドレスを使用します)
– Slackアカウントを用意

# ミーティングURLを発行するために、Zoomのアプリを作成
以下のZoom App Marketplaceで「**JWT**」を選択し、
指示に従ってアプリを生成したあと、表示される**API key**と**Secret**をメモる。

https://marketplace.zoom.us/develop/create

# Slackに通知するためのWebhook URLを取得
Slackに「Incoming Webhook」アプリを追加し、
指示に従ってメッセージを送信するチャネル等を選んだあと、表示される**Webhook URL**をメモる。

# GASに以下のコードを追加
“`js
// Slackにミーティ

[React]関数コンポーネントのpropsにデフォルト値を設定したいときdefaultPropsは使わずデフォルト引数を使う

Reactで関数コンポーネントを作った時、propsにデフォルト値を設定したいことがあると思います。

例えば、下記Tableコンポーネントの場合、利用箇所が4つありますが③以外は全て’hoge’と指定しています。

“`react
export default function Table({ hoge }: { hoge: string }) {
return (

{hoge}

);
}

// 利用箇所①

// 利用箇所②

// 利用箇所③

// 利用箇所④

“`

上記のように利用箇所ごとに指定しても良いのですが、よく指定される’hoge’をpropsのデフォルト値に設定したくなります。

そんなときに私はやり方がわからなかったのでGoogleで下記のように調べました。
下記は2021年8月に`react props デフォルト`で調べた結果です。

元記事を表示

【React】React ことはじめ (ただの学習ログ)

## きっかけ
– 過去にAngular, Vue.jsを使用した開発は行ったことはあるが、Reactはなかったため。

##学習の進め方
– ちょうど[基礎から学ぶ React/React Hooks](https://www.amazon.co.jp/基礎から学ぶ-React-Hooks-asakohattori/dp/486354359X)の発売日だったため、準拠しながら進めていきたい。
– 記事の記載に間違いがある場合、マサカリをお願いします…

## 学習内容
### Reactとは?
– UIを構築するためのJavascriptライブラリ
– Vue.js,Angularはフレームワーク(いづれも公式サイトにフレームワークの記載あり)
– Reactの特徴
– コンポーネント指向
– ソフトウェア開発をコンポーネントに分けて進める考え方。コンポーネント=画面構成要素(ボタン、入力フォーム…etc)
– Vue.js, Angularでもコンポーネント指向を採用
– 仮想DOMによる高速レンダリング

元記事を表示

Next.jsがSIGSEGVで落ちる

原因は分からんがなおったのでメモ．

# エラー内容

`next dev`で下記エラーメッセージを吐いて落ちてた．

“`:エラーメッセージ
error Command failed with signal “SIGSEGV”.
“`

### 環境・技術等
– Next.js
– TailwindCSS
– TypeScript
– M1 Mac

# 解決方法

色々試してるうちに`next/image`とM1 Macの相性が悪いのかなあという結論になって放置してたが，あるときTailwindCSSを無駄にimportしてることに気付き，修正したらなおった．

“`tsx:_app.tsx(修正前)
import “~/styles/style.css”;
import “tailwindcss/tailwind.css”;
“`

“`tsx:_app.tsx(修正後)
import “~/styles/style.css”;
“`

詳細な原因はまだあまり調査できてないです．
分かる方いれば教えていただけると助かります…

# 追記
別のプロダクトで試したらなおり

元記事を表示

[JavaScript]ファイルが読み込まれないエラー(404)

# はじめに
本記事では、JavaScriptのファイルが読み込まれないエラーについて記述します。
本日私が体験したエラーです。

# エラー画像


404については、こちらを参照ください。
[私がよく利用しているステータスコード一覧](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/400)

#　ミスしたコード達

“`javascript
function pullDownSearchForm() {

const pullDownButton = document.getElementById(“back-btn”);
const searchForm = document.getElementById(“pull-down”

元記事を表示

ふわっと出てくるアニメーション　Javascript HTML CSS

初めに

今回は、スクロールすると、ふわっと要素が出てくるアニメーションを実装しました。
スクロールすると「画像」「記事の閲覧と検索」「説明文」がふわっと出てきます。
こういうのが下に４つくらい続くイメージです。


ここを参考に実装しました

以下のyoutubeを見て実装しました。
私の記事は自分で忘れないようにまとめてるだけなので、
実装したいかたは以下の動画を見ていただくと良いかと思います。
また、youtubeで紹介されてるものと私のコードは完全一致しておらず、
所々変えていますのでご注意ください！！！

まずはHTMLから

“

元記事を表示

Kiwis2 API Mock Server(簡単にJSONサーバできる)

##### What is Kiwis2 API Mock Server

Kiwis2 API Mock Serverは、簡単に設定でき、javascriptで応答電文作成できるのAPI MockServerです。

[こちら](https://kiwis2.github.io/download/download.html) て、kiwis2-mockserverをダウンロードします。

GitHub: https://github.com/kiwis2/mockserver

HomePage: https://kiwis2.github.io/

##### 1.簡単な操作

“`
APIを作成するための単純なファイルブラウザを提供します。
javascriptを直接使用して、リクエスト情報を読み取り、オンラインでレスポンス内容を編集できます。
“`


##### 2.動的URLをサポートし、コンソールでデバッグ情報を出力できますし、アクセスログをオンラインで表示できます。

“`

元記事を表示

JSONを返すとは

#JSONとは
JavaScript Object Notationの略で、***ブラウザに他のマークアップ言語(HTML,XML）と
比べたら　わかりやすく表示するものです。***

こちらの記事も参照してください。
参考記事
https://qiita.com/Hashimoto-Noriaki/items/16d6eeb794601ec422e3

#JSONで返すとは
viewの機能を使ってjsonを使いデータベースの中
をわかりやすく見れるようにすることです。
データベースの中身を見る時はjsonを返すことで見やすくなります。

例えばrenderを使って返すことができます。

“`
render json: オブジェクト
“`

例えば

“`
def index
　　　＠men = {name: taro, email: taro@example.com, job: programmer}
render json: men
“`

でhttp://localhost:3000/users.jsonでアクセスすると

“`
{
“name”: “Tar

元記事を表示

ECMAScript の Realms と Stage 3 Realms API

## Realms とは何か

Realms は JavaScript の言語仕様である ECMAScript で定義されている概念です。

https://262.ecma-international.org/11.0/#sec-code-realms

JavaScript のコードが評価されるグローバル変数や `Array`, `Map` といったビルトインクラス、そこで実行されるコードなどの状態やリソースのことを指します。

## Stage 3 Realms API

現在 Stage 3 で Realms API が提案されています。これを使うことで新しい Realms を作って、JavaScript を評価させることが出来ます。

https://github.com/tc39/proposal-realms

Web Workers のように別のスレッドで動作されるわけではなく、同じスレッドで同期的に実行されます。

“`js
const realm = new Realm();

// 最後に評価された値を取得できる
const result = realm.eva

元記事を表示

2021/8/23　学ぶ言語

####本投稿の目的
・Qiitaの使い方を学ぶ:taco:
・これから学ぶ言語でできること？を理解する:cheese:

学ぶのは以下の5言語
– HTML:sunny:
– CSS:cat:
– JavaScript
– Ruby
– RubyOnRails

スタンプが使えるだけでも既に面白いな
’#’で見出しにしたり個数を調整できるのか，ふむふむ
Quiitaの使い方で面白いと思えるくらいじゃなきゃプログラミングやっていけない気がしてきたな笑

###HTML
>HTMLとはハイパー・テキスト・マークアップ・ランゲージの略で，Webページの土台となるファイルを作成する言語です『HTML&CSSとWebデザイン』

どの教材でもHTMLの章から始まるのはHTMLありきってことなのかな。
Wikipediaに木構造のマークアップ言語とあった。

そもそもマークアップ言語の意味するところがわからないので引用
>人間であれば直感的に理解できる事柄を、タグや記号で表示し、コンピューターに認識させることを指します。https://mynavi-creator.jp/blog/articl

元記事を表示

Webサービスの認証についてまとめる

#はじめに
　APIを利用して認証機能をもつサービスを作成しようとしましたが、認証機能でつまづきました。フレームワークやライブラリを利用して実現しようとしていたのですが、そもそも認証やネットワークの根本的な知識が足りないと考え、認証についてまとめることにしました。この記事はあくまで自分の備忘録なので間違っている可能性などもあるのでご了承ください。

#認証とは
[[1]]より引用

>通信している相手が本人かどうかを確認する手段

より細かく言うと更に大きく３パターンに分けられ通信相手が正当かどうかを確認する**相手認証**、改ざんされたかの検出をする**メッセージ認証**、文書の正当性の保証と本人であることの証明をする**ディジタル認証**の３種類あります。この記事内での認証は一番使われることが多いであろう**相手認証**のことを指すとします。認証、認可などは誤解を生む言葉であり、いたずらに使うものではないと思いますが、一般的にログイン機能のことを認証と認識してる人が多いのでそういう文脈で使わせていただきます。

通信している相手が本人であるかを判断する材料は通常２つです。

**・

元記事を表示

Expressの一部であるミドルウェアのご紹介

#はじめに
Node.jsのフレームワークである`Express`の機能であるミドルウェアについて`res, req, next`などの理解が少し足りていないのでアウトプットしたい気持ちが湧いてきたので今回は備忘録として執筆しました。

### 対象者

– Expressをさわったことがある方。
– これからExpressについて学習しようと思っている方。

## まず軽くExpressとは？

冒頭でもふれたように2010年の11月にリリースされたNode.jsのWebフレームワークです。
主な特徴としては、http通信（メソッド）を利用するルーティング機能、`View`（画面）を手がけるテンプレートエンジンの使用

そして今回紹介する**ミドルウェア**の機能などがあります。

## そしてミドルウェア

元記事を表示

Nuxtでデータの保持／状態管理をする【Vuex基礎】

#はじめに
データが大量にあるので複数のDBで管理しており、どこのDBを参照するのか選択させて保持しておきたい場面があり、Vuexを調べて使ってみたのでその備忘録です。
なにかおかしな点や、もっとこうしたほうがいいよ～等あればコメントお願いします！

#Vuexとは？
Vue.js アプリケーションのための状態管理パターン + ライブラリです。
公式の説明がわかりやすいです。公式最高。

https://vuex.vuejs.org/ja/

#使い方
##インストール
以下のコマンドでインストールできます。

“`.sh
//npm
npm install vuex –save

//yarn
yarn add vuex
“`
##ストアを有効化する
Vuex ストアは Nuxt.js に付属していてすぐに使えますが、デフォルトでは無効化されています。
nuxtのプロジェクト内に`store`というディレクトリがあります。（デフォルトで`README.md`が入っています。）このディレクトリ内に隠しファイルや`README.md`ではないファイルが含まれていたら、ストアが有効化

元記事を表示

プロトタイプ継承についてアウトプット

#プロトタイプ継承とは
`別のコンストラクター関数のプロトタイプを受け継いで、機能を流用`できるようにすること。
また、プロトタイプ継承を用いることで`コンストラクター間で機能の受け渡し`ができるようになるため、効率的にプログラムを組むことができる。

“`js:例
function Person(name, age) {
this.name = name,
this.age = age
}

Person.prototype.hello = function() {
console.log(‘hello’ + this.name);
}

function Character(name, age) {
this.name = name,
this.age = age
}

Person.prototype.hello = function() {
console.log(‘hello’ + this.name);
}
“`
これだとコードが冗長となり、変更があったときにコードのメンテナンスがしづらくなってしまう

#継承
別のコンストラクター関数を受

元記事を表示

jQueryを使ってクリックする度に要素のテキストを切り替える方法

#今回の記事

①jQueryを使ってクリックする度に要素のテキストを切り替える方法をメモ
※自分の,そのままのコードを貼り付けているので、分かりづらいかもしれません。

おまけ
②　①で切り替えると他の要素を変更させる方法
Railsにて、要素を変えたいが中身にインスタンス変数などがあり、ややこしいかも

#環境
ruby 2.6

#対象のコード
*①jQueryを使ってクリックする度に要素のテキストを切り替える方法*

“`perl:HTML

▷Monthly

“`
こちらは、期間の月を表してます。こちらをクリックするたび「Yearly、Day、Week」に変更していく。

“`perl:application.html.erb

“`
jQueryを読み込みさせる。

“`perl:jQuer