- 1. Bootstrap5でJavaScriptからモーダルを閉じる方法
- 2. Rails × chart.js でサウナ活動(投稿)データに連動するラベル付きの円グラフを作ってみた。
- 3. JavaScript クエリパラメータをエスケープ処理
- 4. 【JavaScript】【HTML】console.logの出力結果をブラウザ(Webページ)上に表示する方法
- 5. 【Angularアプリケーション開発 #5】双方向バインディング
- 6. GASで重たい処理中にローディング表示する
- 7. 【TypeScript】オブジェクトの仕様と型について
- 8. お店探しのWebARを作りました。(フロントサイド編）
- 9. webページを自動でスクロールするためのブックマークレット
- 10. Javascriptでオブジェクトリテラル（Object）のキーを変更する(ES6)
- 11. レガシー環境でvue_v2.6 の仮想DOMで表を生成する
- 12. ESLintでimport自動整形に関して ESLint × Prettierの設定しているなら「なし」に落ち着く予感
- 13. [JavaScript] async 中にawait でキー入力待ちする
- 14. 【AWS CDK】API GatewayからLambdaを通さずに直接DynamoDBにアクセスしGetItemするAPIを作ってみた
- 15. trello-api ボードに紐づいているカスタムフィールドの値をJSONで取得する
- 16. 【js】Intersection ObserverAPIを使用してみたメモ
- 17. 【jQuery】フォームの二重送信の防止
- 18. window.alert の文字列をコピペしたい
- 19. ESLint・Prettierを併用してコードスタイルのチェックはPrettierにまかせてみた
- 20. 【海外イベント紹介】 The COVID Tracking Project: 0 to 2M API Requests in 3 Months
Bootstrap5でJavaScriptからモーダルを閉じる方法
### Vue.jsでモーダルを開いたままメソッドを発火させると、モーダルが閉じない事象が発生。
[Javascript から Bootstrap Modal を操作する](https://qiita.com/magic_xyz/items/01f38814ea8b0907ba49)
を参考に修正するが、Bootstrap5からJqueryが入っていないために純粋なJavascriptでコーディングすることとする。“`
document.body.classList.remove(‘modal-open’)
const elements = document.getElementsByClassName(‘modal-backdrop’)
Array.prototype.forEach.call(elements, function (element) {
element.classList.remove(‘modal-backdrop’);
})
“`
これで問題なく動作するようになりました。
Rails × chart.js でサウナ活動(投稿)データに連動するラベル付きの円グラフを作ってみた。
# 0. はじめに
こんにちは、[まつけん](https://twitter.com/matsuken_web314)です。
[サウナ記録を管理するアプリ](https://totonoi.org/)(転職活動用のポートフォリオ)に組み込んだ
**投稿に連動する円グラフ**をどうやって実装したのかを解説する記事です。(下の画像参照)
↓ポートフォリオの解説記事です↓
https://qiita.com/matsuken314/items/2ae660c7635cca726283
## この記事のゴール（とりあえず）
– [chart.js](https://www.chartjs.org/docs/latest/)の円グラフがどういう風にWebアプリに組み込まれるのか分かる
– gemの
JavaScript クエリパラメータをエスケープ処理
## はじめに
クエリパラメータに、扱えないマルチバイト文字などが含まれる可能性がある場合は、
表記可能な文字列に変換するエスケープ処理が必要です。このような変換処理を「URIエンコード」と言います
方法は主に三つ。# [encodeURI()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURI)
URIの予約文字以外の記号をエンコードするグローバル関数
decodeURI()で元の文字列に戻せます。>エスケープされないもの:
>
> A-Z a-z 0-9 ; , / ? : @ & = + $ – _ . ! ~ * ‘ ( ) #“`JavaScript
var set1 = “;,/?:@&=+$#”; // 予約文字
var set2 = “-_.!~*'()”; // 予約されていない記号
var set3 = “ABC abc 123”; // 英数字 + 空白console.log(encodeURI(set1))
【JavaScript】【HTML】console.logの出力結果をブラウザ(Webページ)上に表示する方法
スタックオーバーフローで「[console.logの出力結果をブラウザ上で表示したい](https://ja.stackoverflow.com/questions/88784/console-log%e3%81%ae%e5%87%ba%e5%8a%9b%e7%b5%90%e6%9e%9c%e3%82%92%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e4%b8%8a%e3%81%a7%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84/88805#88805)」という質問に対して回答した内容をまとめたものです。
console.logに対して、DOM操作でHTML上の要素を操作す関数式を代入することによって実現しました。サンプルコードは以下のものです。以下のコードはブラウザ上に1～100の数値を改行して出力します。
“`html