【JavaScript】submitイベント

#プログラミング勉強日記
2020年11月8日
submitイベントについて、すっごく短くまとめる。

#submitイベントとは
ユーザーが\や\をクリックしたり、
フィールド内でenterを押すと、イベントが発生する。

#submitイベントの書き方

“`index.html

“`

“`script.js

document.getElementById(‘form’).onsubmit = function() {
console.log(‘クリックされました’);
}

“`
form要素のid属性を取得して、submitイベントが発生したら、コンソールにクリックされましたと文字列を表示する。

#注意点
input要素のid属性やbutton要素を取得しても、submitイベントは発生しない。
submitイベン

WordPressでjQueryが読み込まれない時に見るポイント

WordPressでjQueryを読み込んだときに、動かないことがたまにあります。
その際に、見ておくべきポイントを抑えておきましょう！

# $を使ってないですか？
静的サイトでjQueryを使用していた方だとこのようにコードを書いているのではないでしょうか？

“`script.js
$(document).ready(function(){
ここにjQueryの処理を書く
});

//または

$(function(){
ここにjQueryの処理を書く
});
“`
ちなみにここで書かれている`$(document).ready(function(){ `はHTMLの読み込み完了後に処理を実行するという記述になります

でも、実はWordPressでは＄を使うと動かない仕様になっています。
WordPressでは他のライブラリも使用しており、jQuery同様に$を使用するものがあるため衝突をさけるために機能しないようにされているようですね。
なので、このように書き換える必要があります。

“`script.js

jQuery(function(){

Gatsbyスターターを使ってリンク集をつくる

前回に引き続きGatsbyの報告です

今回完成したサイトは[こちら「パソコンのべんきょうのためのリンク」] (https://takamina-link3.netlify.app/)

# 前回作ったサイト
前回もリンク集を作りました。その時の記事が次です。
[「Gatsby -> github -> netlifyでリンク集をデプロイしました」](https://qiita.com/horumont/items/75950ff3e6fa3017e239)
その続きで、さらにちょっといいやつを作れそうだったので、
お助けを受けながらやってみることにしました。
## 前回オッケー?のところ
– 私の初デプロイ！(railsチュートリアルは除く)
– HTML CSSだけでつくったことはあるが、素人感満載でもやもやだったが、今回はちょっと動きのあるものになっていい感じ！

## 次の課題
– 学校の環境で開くと、どうやってもレイアウト崩れる
– 画像がないので、できたら入れたい。

# over40web club勉強会

で、@pitangさんのアドバイスで、画像もあつかえる新たなスタ

ブラウザで上書き保存ができるぞぉぉぉぉぉ

以前までChromeのOrigin TrialsにNative File System APIとして実装されていたローカルファイルへアクセスするAPIが、ついにChrome86から標準機能として搭載され、名前も実装もだいぶ変わっていたので記事に残しておきます。

> このAPIはChromeバージョン86以降のみ対応しています。他ブラウザ、Chrome85以前では動きませんのでプロダクション環境に実装する予定の方はご注意ください（というかおやめください）。

# File System Access API
File System Access APIは主にローカルファイルの読み取り、書き取りを目的としたAPIです。実はファイルだけでなくフォルダの読み取り/書き取りもできますが、今回はファイルの読み取り/書き取りの方法を紹介します。

## ファイルを読み取る
これまでローカルファイルを読み取るには[この記事](https://www.html5rocks.com/ja/tutorials/file/dndfiles//)みたいに自分でHTMLタグを足したり、ファイル内容を切ったり貼っ

JavaScriptⅠの学習まとめ

#はじめに
本日で二度目のQiita投稿です。私は現在、Progateや書籍を使ってプログラミングの勉強をしています。
そこで、今回からProgateで学んだ文法事項や知識をここに記録として残していきます。

一つの言語を何回かに分けて残していこうと思います。

#目次
1.文字列や数値の出力
2.数値と計算
3.変数と定数
4.値同士の連結のさせ方
5.条件分岐

#1.文字列や数値の出力
##文字列の出力
文字列の出力は**console.log(“出力したい文字列”);** と書きます。
console.log();のカッコ内の文字列は必ず、**ダブルクォーテーション(“)**もしくは、
**シングルクォーテーション(‘)**で囲みましょう。(どちらで囲っても結果は変わりません)
囲わないとエラーを吐くので注意！！

“`javascript

//文字列を出力
console.log(“私はワカメです”);
=> 私はワカメです

console.log(“1234”);
=> 1234

console.log(“12” + “34”);
=> 1234
“`
上記のよ

データ取得ライブラリ「React Query」のススメ

## はじめに

今日のアプリケーションではデータの取得は複雑になりました。
リトライやキャッシュ、ローディングの表示など色々考える必要があります。
今回ご紹介する「React Query」では、そういった問題を解決し、
よりアプリケーションにフォーカスして実装できるようになります。

## 機能

– キャッシュ
– ポーリング（一定周期ごとにデータの再取得）
– ページネーション
– リトライ
– 並列実行
– Typescriptサポート

## インストール方法

“`javascript
npm i react-query
“`

## 基本的な使い方

React QueryはフックAPIを通して利用します。
useQuery関数には、キャッシュのキー、データの取得方法を設定します。
実行すると、data: 取得したデータ、isLoading: ローディング中かどうかが取得できます。

“`jsx:pages/qiita.js
import { useQuery } from ‘react-query’

export default function Qii

datetimepicker オプションまとめ

# 目次
**基礎編：**
[Lv.1 **日付のフォーマットを指定** ](Lv.1 **日付のフォーマットを指定** )
[Lv.2 **過去の日付は選択できないようにする** ]( Lv.2 **過去の日付は選択できないようにする** )
[Lv.3 **現在から◯日後からではないと選択できないようにする** ](Lv.3 **現在から◯日後からではないと選択できないようにする** )
[Lv.4 **デフォルトの時間を00:00にする** ](Lv.4 **デフォルトの時間を00:00にする** )

**応用編：**
[Lv.5 **10時〜18時の時間帯のみ選択できるようにする** ](Lv.5 **10時〜18時の時間帯のみ選択できるようにする**)
[Lv.6 **日曜日は選択できないようにする** ](Lv.6 **日曜日は選択できないようにする** )

# 基礎編

## Lv.1 **日付のフォーマットを指定**

“`coffeescript:common.js.coffee
$.datetimepicker

【Tips】Webアプリに隠しコマンドを入れる

若干、釣りタイトルのようになってしまったが、ここで述べることは、URLに**GETパラメータ**（隠しコマンド）を忍ばせ、それをJavaScriptで評価して処理を振り分けよう、という話である。

ただし、ここで述べる方法は Internet Explorer では動作しない。IE は完全終了に向けて動き始めているし、割り切り事項とした。

“`javascript:JavaScript
// 使用ブラウザ（ユーザーエージェント）を取得
var ua = window.navigator.userAgent.toLowerCase();

// Internet Explorer でないなら
if (ua.indexOf(‘msie’) < 0 && ua.indexOf('trident') < 0) { // GETパラメータを取得 var params = (new URL(document.location)).searchParams; var foo = params.get('foo'); // パラメータ foo があれば

【javascript】自己満足のrange関数

自己満足なので鼻で笑ってやってください。

#概要

逆順・小数点・引数検査を意識しつつ、それなりの速度を出せたら良いな。
という想いで組んでました。
他の人のコードと比較した訳ではありませんが、今の私にはこれが限界。

幾つかコードを載せますが、やってる事はほぼ同じです。

“`javascript:
range(from, to, step);
“`

|引数|変数名|既定値||
|:–:|:–:|:–:|:–|
|1|from|0|起点の数値|
|2|to|0|起点からこの数値に向かう|
|3|step|1|負の値は指定しない|

“`javascript:出力結果
//空の配列を返すパターン
console.log( range() ); //引数が空
console.log( range(-5, false) ); //第3引数までに数値以外が指定
console.log( range(-5, 5, 0) ); //stepに0が指定

//from,toが同値
console.log( range(5, 5) ); //[5]

//引数が1つ =

JavaScript: 順列 / 組み合わせ / 重複順列 / 重複組み合わせ を まとめて関数にしてみた。

[前にも同じような記事](https://qiita.com/ttatsf/items/200fe1ba765108ba502f)を書いたけど、考えてみれば 重複順列 / 重複組み合わせ も一緒だなあと思い、まとめてみました。

“`js
// 共通の内部再帰関数
const innerPC = filterFunc => selecteds => k => options =>
(k === 0)? [selecteds]
: options.flatMap(
(e, i) =>
innerPC( filterFunc )( […selecteds, e] )( k-1 )( filterFunc(i)(options) )
)

// 順列
const permFilter = i => options =>
[…options.slice(0, i), …options.slice(i + 1)]
const perm =
innerPC( permFilter )( [] )

// 組み合わせ
con

あなたがまだ使っていないかもしれないHTML5の便利機能10選

https://twitter.com/livesports36/status/1325013585202827264

あなたがまだ使っていないかもしれないHTML5の便利機能10選

https://twitter.com/livesports36/status/1325012986944135168

[Rails 6] Raty.jsを使った星型レビュー

## 1 はじめに
星型レビューを実装するために、ググったけど
##### 「app/assetsの中`javascriptsファイル`が存在しない！！」と嘆いている、そこのアナタ！！！！！

なぜassetsにjavascriptsが無いかというと、

それは
#####開発環境がrails6だからです！
Ruby on Rails 6.0よりJavaScriptの扱いが変わってます！

###この記事はRails 6 (Webpacker標準搭載)環境でRatyを導入し、星評価機能を実装する方法を説明します！

## 2 完成イメージ
評価を星マークで表示する！


ユーザーは星ボタンをクリックすればレビューできる！

![スクリーンショット 2020-11-07 15.57.58.png](

js書く時のちょっとしたことメモ

jsについて勉強中なので、自分用のメモになります。
日々追記します。

# 頭には必ず

“`js

use strict;
“`

アラート出してもらえるようにする。

Reactで発生しうるXSS脆弱性

JSX内の式埋め込みでは、基本的にHTMLとして解釈されないようエスケープされます。ですが、危険性がゼロなわけではありません。

## Reactの標準エスケープ

“`react:App.jsx
const App = () => {
const userInputText1 = ``;
const userInputText2 = `

DIV!

`;

return (

{userInputText1}
{userInputText2}

);
}
“`

### 結果

正しくエスケープされている


## XSSの発生パターン

#

[Rails]jqueryの導入

アプリ開発でjqueryを使うことが多かったので、導入方法をまとめました。
**Railsのバージョンは6.0.0です。**

##### ターミナル
“`
yarn add jquery
“`

“`ruby:config/webpack/environment.js
const { environment } = require(‘@rails/webpacker’)
# 追記
const webpack = require(‘webpack’)
environment.plugins.prepend(‘Provide’,
new webpack.ProvidePlugin({
$: ‘jquery/src/jquery’,
jQuery: ‘jquery/src/jquery’
})
)
# ここまで
module.exports = environment
“`

“`ruby:app/javascript/packs/application.js
require(‘jquery’) # 追記
require(“@r

JavaScript製汎用テーブル（第1回：機能紹介）

JavaScript勉強の目的で、小規模のアプリをコーディングしています。
今回はその１つ「汎用テーブル」を制作したので紹介します。

資材は https://github.com/nnnmu24/generaltable
よりDLしてください。
動作確認はGoogle Chrome バージョン64で行いました。

## 機能概要
– 2次元配列で定義したデータを表に変換しブラウザに表示。
– 列のソートが可能。
– 列単位の検索が可能。
– ページングが可能。
– 列、行をチェックしその単位での表示/非表示が可能。
– 列単位でデータの型（文字列、数値、日付）を持ち、数値型、日付型は値の妥当性チェックを実施。
– 表オプション定義を追加し、カラム単位にタグ付与による装飾が可能。
– 表示に関する設定エリアを設け、入力した設定値を保存。

## 画面の説明
![Image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409741/eb6776ef-84a2-564d-3ec6-ad997cf664

【実践プログラミング①】JavaScript カレンダーを作成する / 難易度　★☆☆☆☆

#プロローグ

プログラミングを勉強し始めて数ヶ月が経ちましたが、
いざ「カレンダーを作成しなさい」「サイコロの出る目を算出しなさい」「勝つ確率を算出しなさい」などと、問題が出されると手が止まってしまいます。

そもそも問題の意味を分解することができません。
カレンダーを作成しなさい：まずnew Dateで日付を取得して・・とか。

コードを見ればやりたいことは何となくわかるけど、白紙で書けと言われたら書けない。
それって、勉強したって言えるの？と自己嫌悪に。この１ヶ月私は一体。

そこで、今日からは、自分で「OOしなさい」という問題を勝手に探したり作ったりして、
コードを書いて、書いたコードをQiitaで解説していく実践プログラミングを始めます。
（できれば毎日やりたい）

#今回の問題

「JSを使用してカレンダーを作成しよう」　難易度　★☆☆☆☆
条件：今日の日付には色をつけること

#参考記事

今回は、下記の記事を参考にJSでカレンダーを作成しました。
「[JavaScriptでカレンダーを自作したら勉強になった](https://qiita.com/kan_dai/item