JavaScript関連のことを調べてみた2022年02月26日

Rails6とaxiosを連携させてデータを受け渡す！

## 実現したいこと フロントエンドのデータをバックエンドに渡したい！ ↓詳しく↓ JavaScriptのデータを[axios](https://github.com/axios/axios)を用いてDBに保存したい！
## 開発環境＆前提条件 Ruby 3.0.2 Rails 6.1.4.4 データを保存するDBテーブル等は作成済み
## 1. axiosの導入 **インストール** “`terminal:ターミナル $ npm install axios “`
**CDN** “`html:任意のファイル “`
## 2. Javascriptへaxiosの記載 “`javascript:任意のJSファイル // ↓受け渡したいデータを格納 const data = { score: gameScore, user_id: “<%= current_user.

MessagingAPI + GASでメッセージ送信（+定期実行設定）

# はじめに MessagingAPI + GAS で簡単なBotを作る過程で学んだことについてまとめる。 # push送信 “`js:main.gs const TOKEN = “自分のアクセストークン”; const LINE_PUSH_ENDPOINT = “https://api.line.me/v2/bot/message/push”; const HEADERS = { “Content-Type”: “application/json; chrset=UTF-8”, “Authorization”: “Bearer ” + TOKEN //Bearerの後ろの半角スペースを忘れずに！ } //pushメッセージ用処理 function postMessage() { const postData = { “to”: “自分のuserId”, “messages”: [{ “type”: “text”, “text”: “送信するメッセージ” }] } const params = { “

時計を写経の後に作ってみた

デジタル時計を作って見た

手を動かしながら考える経験積むために時計を作ってみた CSSは度外視の現在の時刻表示をするもの (今回、Qiita初投稿なのだけど、こういう書き方なんですな　慣れなきゃ)

写経元にしたURL

https://qiita.com/delph/items/9c702cdf03a5679d93e0 （@delphさん、丁寧な説明で分かりやすかったです。ありがとうございます）

コード

使う言語は以下二つ “`html:clock-easy.html <

Remix チュートリアル 翻訳してみた その1

# はじめに リリースされたばかりのRemixのチュートリアルを日本語に翻訳してみました。 英語で取り掛かりにくかった方の身かなになれたら幸いです。 基本的にDeepLを使った翻訳と機械翻訳すぎる部分は私の拙い英語力で翻訳しております。 公開後も読みにくい翻訳の部分を修正していきます。 Quickstart https://remix.run/docs/en/v1/tutorials/blog#quickstart # クイックスタート このクイックスタートでは、言葉少なに、素早くコードを書くことを目指します。もしあなたがRemixがどのようなものか15分で知りたいのであれば、これはそのためのものです。 `〇 ヘイ、私はリミックスCDのデリックです。 あなたが何かをすることになったとき、必ず私を見ることになるはずです。` これはTypeScriptを使用していますが、コードを書いた後に必ず型をペタペタと貼り付けています。これは通常のワークフローとは異なりますが、TypeScriptを使用していない方もいらっしゃるので、そのような方のためにコードを乱雑にしたくはなかったので

Hardhat と mocha でテストをした時に pending で終了してしまう問題

hardhat でテストをしている時に `pending` が発生してテストが実行されませんでした。 “`sh Todo CRUD – Should return the new TODO once it’s changed 0 passing (2ms) 1 pending “` 使っていたテストコードはこちら。 “`javascript const { expect } = require(“chai”); const { ethers } = require(“hardhat”); describe(“Todo CRUD”, function() { it(“Should return the new TODO once it’s changed”), async function () { const Todo = await ethers.getContractFactory(“todo”); const todo = await Todo.deploy(); await todo.deployed();

二次元連想配列 foreachで取り出す(Javascript)

Javascriptの二次元連想配列の要素をforeachで１つずつ取得する流れについて自身の理解を整理。 “`Javascript let NBA =[ {region:’oklahoma’, team:’Thunder’, player:’KD’},//キー値=[0] {region:’sanantonio’, team:’Spurs’, player:’parker’},//キー値=[1] {region:’washington’, team:’Widzards’, player:’hachimura’}//キー値=[2] ] for (let count = 0; count < NBA.length; count++) { Object.keys(NBA[count]).forEach(function(key) { console.log(key + '=' + NBA[count][key]); });

[JavaScript]日付、時間の書く順番ををその国、言語圏の記法にする

# toLocaleDateString() 国や言語圏によって年、月、日を書く順番は違います。 “`toLocaleDateString.js //現在時刻の取得 let date = new Date(); //アメリカ式表記 console.log(date.toLocaleDateString(“en-US”)); // 2/25/2022と月・日・年の順に表示される //イギリス式表記 console.log(date.toLocaleDateString(“en-GB”)); // 25/02/2022と日・月・年の順に表示される //アラビア語圏 console.log(date.toLocaleDateString(“ar”)); // 25‏/2‏/2022と日・年・月の順に表示される(日と年の間に/がないことと一番最後に/があることに注意) console.log(date.toLocaleDateString(“ar-EG”)); // ٢٥‏/٢‏/٢٠٢٢とアラビア数字になる //対応していないかもしれない言語を要求した場合 //下は日本語

[JavaScript]数字をカンマ区切りにすることができる地味に便利な機能

# toLocaleString() toLocalString()は数字をカンマ区切りにし、文字列に変換します。 “`toLocaleString.js let a = 10000; console.log(a.toLocaleString()); //’10,000’とカンマ区切りで表示される let b = 1000.12; console.log(b.toLocaleString()); //’1,000.12’と表示 “`

ES6＿スプレッド構文

**1 スプレッド構文** 『…』で配列を展開することができます。 “` const arr = [1,2]; console.log(arr); // 配列を展開 console.log(…arr); “` スプレット構文で合計処理をする. …は順番処理として覚えれば問題ありません。 “` // sumFun関数を作る const sumFun = (num1, num2) => console.log(num1 + num2); // sumFun(arr[0],arr[1]); // スプレット構文で書く sumFun(…arr); “` 配列をまとめることもできます。 “` const arr1 = [1,2,3,4,5]; const [num1, num2, …arr2] = arr1; console.log(num1); console.log(num2); console.log(…arr2); “` スプレッド構文で配列をコピー、結合することもできます。 “` const arr4 = [10,20,30]; // …でar

フロントエンド環境構築(Typescript)

## fe環境構築 以前作成した下記記事に加えて、開発で導入したものを記載します。 https://qiita.com/sh19982580/items/5f71856c7949c494d769 ## dependencies ##### コマンド `yarn add dotenv`：見せれない情報を.env ファイルで管理することで公開させない `yarn add winston`：複数のトランスポート（出力先）をサポートするロギングライブラリ ## devDependencies ##### コマンド `yarn add -D @types/node`：ts を使う時、node_modules の型定義ファイル `yarn add -D cspell`：スペルチェック → cspell.json 手書き、cspell.txt 作成 `yarn add -D eslint`：単純な構文エラーやプロジェクト固有のコーディング規約を定義することができる → 自由にルールを設定できる、rules で上書きすることでルールを緩くできる(.eslintrc.js) `yarn

【個人開発】教員向け授業計画作成サービスを作ってみた。

# はじめに  こんにちは、まーです。 【Twitter】 Tweets by KPz234iNYoOQZF5 【今回作成したサービス】 https://teachingplan.msy-a.com/ 今回は、以前Laravel＋Vue.jsで作成した**授業計画（指導案）作成サービス**をご紹介したいと思います。 # 要件概要 ### ○導入 日々多忙な教員にとって毎回の授業内容（指導案）を**スピーディー**に作成することはとても重要になります。 特に、教育実習生や教員になったばかりの先生は、授業の経験値がなく、毎時間授業の計画を考えることは大きな負担です。自分自身の教育実習に行った経験、教員の友人からのヒアリングから間違いないと思います。 授業計画を効率的に作成することは、**授業の質**に関わ

Webブラウザの日本語の改行問題 -改行を実現するHTML/CSS-（1）

日本語のWebサイト（ランディングページ等）をつくっていると、読みにくい所で改行されるパターンがありますよね？実際この記事もブラウザの横幅によって単語の途中なのに改行されています。普通に文章を読んでいる時には良いのですが、これがランディングページのヘッドラインで起きるとものすごいカッコ悪いです。 たとえばPhotoshopのページで「写真のレタッチ、合成、カラー変更」というヘッドラインが以下のようになってたらいかがでしょうか？この場合はできれば、「合成、」の後で改行されている方が自然で読みやすくなっています。（ちなみにこれは、Chrome Developer Toolsで編集して、わざと見にくくしたので、実際にはキレイに改行処理しています）。  よーしそれじゃあ`
`入れれば良いんだなと真っ先

【JavaScript】カスタム例外の書き方

JavaScriptにおけるカスタム例外の書き方をメモしておく。 # カスタム例外の書き方 カスタム例外を作成することで、例外処理でどのようなエラーが発生したか細かく判別できるようになる。カスタム例外は、組み込みの“Error“クラスを継承して、その中にコンストラクタを定義する。サンプルが以下のようになる。 “`javascript:カスタム例外クラス class MyError extends Error { constructor(message) { super(message); this.name = “MyError”; } } “` ここで、“this.name = “MyError”;“を記述して“name“プロパティを正しい名前に上書きしている。これを記述しないと“error.name“は“Error“のままになってします。ただし、“instanceof“でのエラー判別は正常に動作する。これを使って例外処理を書いてみると以下のようになる。 “`javascript:例外処理 try { throw new MyErro

連想配列（オブジェクト）のキーと値を入れ替える。【javascript】

解決に時間がかかったためメモ。 # 連想配列のキーを値に、値をキーにしたかった “` const obj = { a : ‘aaa’, b : ‘bbb’, c : ‘ccc’ } “` これを “` const obj = { aaa : ‘a’, bbb : ‘b’, ccc : ‘c’ } “` こうしたい # Object.entries, Object.fromEntries を使う “` const array = Object.fromEntries( Object.entries(tmp).map(function (value) { return [value[1], value[0]]; }) ); console.log(array); “` “` array => { aaa : ‘a’, bbb : ‘b’, ccc : ‘c’ } “` できた。 Object.fromEntries が ES2019 から追加されたとのこと。 # 参考 ・https://qiita.com/c-shira

Tailwind CSSでスイッチ(トグル)ボタン作ってみた

最近はTailwind CSSを使用していて、とても快適だなと感じておりましてその流れで今回はよく使用されるであろうON・OFF切り替えできるスイッチボタンを生のCSSを使わずにTaliwind CSSのみで作成してみました！

やること

CSSを使わずに、Tailwindで用意されている「peer」という兄弟の状態に基づいて要素のスタイルを設定できるものを使用します。

なお今回はVue.jsファイルを用いて進めたいと思います。

Symbolブロックチェーンのネームスペースを完全に理解する。

今回はSymbolブロックチェーンのネームスペースについて解説します。 公式ドキュメントはこちらです。 https://docs.symbol.dev/ja/concepts/namespace.html まずはSymbolで定義されるネームスペースの特徴について、初心者と上級者にわけてざっくりと説明します。 ###### 初心者の方 アドレスやモザイクトークンに分かりやすい名前を付けることができ、**送金ミスを減らす**ことができます。 ネームスペースはインターネットのドメインと同様に期間でレンタルします。 XYMには**symbol.xym**という分かりやすいネームスペースがあらかじめ定義されています。 ###### 上級者の方 ウォレットはネームスペースを**名前解決することなく**そのままトランザクションに署名できます。 トランザクションが承認されたときの**レシートを参照する**ことで、そのときのネームスペース所有者を特定できます。 改ざん不可能なDNSが実現可能（検証が可能）です。 # 基本操作 ネームスペースの作成、更新、変換まわりを抑えておきましょう

【GAS】送信された内容によって自身、他のフォームの質問の選択肢を増やすことができるフォーム。及び在庫管理システム

# このシステムを作るに至った背景（読み飛ばし可） ある日、製品を処理した結果の処理前と処理後の製品の在庫の増減を記録する、GASとgoogleフォーム（以下”フォーム”）、googleスプレッドシート（以下”スプレッドシート”）を用いたシステムを作りました。データとして製品それぞれの名前、納品先会社名、処理前と処理後の在庫数がスプレッドシートに記入してあり、フォームに入力者の名前、処理した数、NGの数、会社、製品名等を入力して送信するとその内容がデータに反映され、その結果によってスプレッドシートの該当製品の各在庫数が変動するというものです。このシステムにおいて、フォームの選択肢である製品の種類は取引先の企業が増えるたび、製品が増えるたびに増えていきます。その製品と会社名をその都度フォームに手動で追加するのは手間なので、新しい製品をフォームで追加すると自動でフォームの選択肢にその製品が追加されるスクリプトを書きました。 ※なお、現在は他の方法（フォームをその都度フォームの設計図となる情報から作り直す）を採用したのでこの仕組みは採用していません。 ※この記事に関しては相談、了承済み、被監

【JavaScript】DataTransfer.files (FileList) の順番はドラッグしたときに掴んだファイルによって変わる

# 結論 文章だと説明しにくいので例をあげます。 以下のファイルを選択したとします。 `1.txt` `2.txt` `3.txt` `4.txt` 上記の状態から「どのファイルを掴んでドラッグを始めたか」によって `FileList` の順番が変わります。 `1.txt` を掴んでドラッグを始めた場合 `1, 2, 3, 4` `2.txt` を掴んでドラッグを始めた場合 `2, 3, 4, 1` `3.txt` を掴んでドラッグを始めた場合 `3, 4, 1, 2` `4.txt` を掴んでドラッグを始めた場合 `4, 1, 2, 3` てっきりファイル名昇順だと思い込んでいたのでハマりました?

「Adblockが有効だと特定の要素が消えちゃう！」が起きないサイトを作る方法

[Adblock](https://chrome.google.com/webstore/detail/adblock-plus-free-ad-bloc/cfhdojbkjhnklbpkdaibdccddilifddb?hl=ja)とは、ブラウザの拡張機能で、Webサイトに表示される広告を自動で非表示にしてくれるというものです。 ※ この記事では、「Adblockは悪か」、といった話題には触れず、以下の前提で進めます。 – 世の中にはAdblockを導入しているユーザーが居る – そういったユーザーでもサイトを利用できる状態にしたい – ＝ 広告以外の要素が意図せず非表示になるのを防ぎたい この拡張機能が有効なユーザーがサイトを表示したい場合、広告ではない要素まで消えてしまうという事象が起きることがあります。 例えば今だと、某有名レシピサイトさんの右カラムが丸ごと消失してしまうようです。 # 関係ない要素が消える理由 Adblockには、いくつかの仕組みで広告を検知しているようですが、そのうちの一つが、id名による検知です。 要素のid名に`#ad_*`のようなもの

【Chromeデベロッパーツール・全て学べる】動画集

### 自己紹介 ジーズアカデミー講師 山崎と申します。MicrosoftMVPがChromeを解説するという動画です（笑） ※EdgeもコアはChromiumですから、デベロッパーツールは同じですからね。 今回、私のJavaScriptの授業（初級者向け）でのサポート動画をYoutube配信したものをまとめました。 :::note info 一つ一つが奥が深く解説が長いので「ブックマーク」して見ることをおススメいたします ::: ## ◆動画集一覧 HTML/CSS/JavaScripを使った制作には「Chromeデベロッパーツール」は必須スキルです！ デザインの調整、他サイトの構造見たり、エラーの確認、デバッグ等で良く使います。 ※一部新しい機能は、今後追加していきます。 :::note warn デベロッパーツールは奥が深いので、初学者には「#1,#2」だけをおススメします。 デベロッパーツールは奥が深い～ ::: | タイトル | 対象 | 動画? | | —- | —- | —- | | #1「 Elements/Console 」