jQueryリダイレクトが遅くて画面が表示する。

#ある条件の時リダイレクト、別の画面に移動してくれと依頼発生
リダイレクトってどうやるんだろう…から調べていきました。
.htaccessの設定を操作する、サーバーサイドで操作する等が出てきて、
どうしようかなと思っていたところ。
jQueryでリダイレクト設定できるというのを見つけたので実装しました。

####環境
MovableType 7
MtappjQuery
jQuery 3.4.1

“`ruby:jQuery　リダイレクト設定
window.location.href = “https://sample.com”
“`

windowはいるのか要らないのかよくわかってないです…。
なくてもできると思います。

“`ruby:jQuery　初期実装
$(document).ready(function(){
if((mtappVars.me.name == “sample1” || mtappVars.me.name == “sample2”) && mtappVars.scope_type == “user” && mtappVars.scre

[Rails]非同期（Ajax）でのコメント機能実装

## この記事の目的
非同期処理（ajax）でのコメント投稿機能を学んだのでアウトプットします
## 目標
[](https://gyazo.com/13b13c9847585f462000a341b671e8b8)
## 要件
コメント投稿は非同期で行う
## 環境
・Ruby 2.7.1

・Rails 5.2.6
## 前提
・UserとPostは作成済み

・bootstrapとjquery-railsが入っている

## 設計
ER図
[](https://gyazo.com/919c4a7bc8f4e5e4c7ff50fb2efcdab1)

ルーティング

“`
POST /posts/:post_id/comments comments#creat

TypeORMでSQLiteを指定してQueryFailedError: SQLITE_CONSTRAINT: NOT NULL constraint failed エラーが出たときの対処法

## 解決方法
解決策は４つあります。４つ目が本命です。

### 1. synchronizeをやめる

これでエラーはなくなるけど、エンティティが同期されなくなるので不便。。。

“`json:ormconfig.json
{
“synchronize”: true
}
“`

### 2. カラムをnullableにする

これも根本的な解決じゃない。。。

“`typescript:entity/user.ts
@Column({ nullable: true })
name: string;
“`

### 3. SQLiteを使わない

身も蓋もないですが、ありだと思います。

### 4. トランスパイルする

私の環境では、`ts-node`を使わないようにすると、エラーが解決されました。
以下の手順を行ってください。

#### STEP 1

`tsconfig.json`のCompilerOptionsに`”skipLibCheck”: true`を指定する。
これは、STEP3の`tsc`コマンド実行時にエラーを表示させないためです。
基本的に推奨

【JavaScript】スコープの学習の振り返り④

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/9e0f9201945c8d79dd45

#目的

* スコープについての理解を深める

#本題
###1.即時関数（IIFE）

即時関数とは**関数定義と同時に一度だけ実行される関数**のこと。

→実行結果が呼び出し元に返される。

基本構文

““javascript
let result = (function (仮引数){
return 戻り値;
})(実引数);
““

戻り値はresultに返ります。

““javascript

function a() {
console.log(“called”);
}
a();

// 上記と下記は同じ結果が出力される
(function(){
console.log(“called”);
return

これからReact始めたい人のための今日だけでできるTODO#18 useCallback

## useCallbackとは？
関数をメモ化するフックです。
`React.memo`を利用した場合でも親コンポーネントからコールバック関数をpropsで受け取った場合子コンポーネントは再レンダリングされます。

コンポーネントが再レンダリングされるたびにコールバック関数が再生成されるため処理が同じでも新しい関数を生成されているとみなされるからです。

例えば下記のような場合
（※[前回のコード](https://qiita.com/tanimoto-hikari/items/2f8765c85235455ea5af)をこコンポーネントにpropsで関数を渡す形で修正しました）

“`js:App.js
import React, { useState } from ‘react’;
import { Counter } from ‘./Counter’;

const initialCount = 0;

export default function App() {
const [countA, setCountA] = useState(initialCount);

Node/Vue-CLI/Viteを使わずに最速でVueのSPAを作る

#はじめに

本記事は、Node/Vue-CLI/Viteを使わず、CDNを用いることで最速のVueのSPA環境を構築する記事となります。

環境汚染を気にせず簡易的にVueの実行環境を作りたい方、CUIの知識が薄くてもVueの実行環境を作りたい方、そしてNodeを構築できないサーバでSPAを作りたい方、向けです。

注意：JS-Fiddleは使いません。あくまでローカルでの構築です。

注意：VueのSyntax等は触れません。あくまで環境構築記事です。

###背景
自分の大学では無料のサーバが全生徒に用意されているのですが、権限等々の問題からnodeの環境を構築することができず、htmlやCSS程度しか実行することができません。

就活も進む中、せっかくなのでプロフィールページのようなものをSPAで作りたいと思うものの、わざわざアクセス数などしょうもないページを有料で作るのもなんだかなということで、この制約の多い環境でもSPAを作ろう！という意図の下、このような技術を得る経緯となり

TypeORMのMigrationでCannot use import statement outside a moduleエラーの対処法

## TL;DR
あまり綺麗ではないですが、これで解決しました。
`typeorm`コマンドを使用せず、直接`ts-node`で`typeorm`を呼び出します。

“`bash
$ ts-node ./node_modules/typeorm/cli.js migration:generate -n ‘User’
“`

NestJSを使用しているときにこのエラーに遭遇した場合は、ページ下部の[ormconfig.jsonの書き換え](#手順3)を試してみてください。

## よくみたらドキュメントに書いてあった…

* [TypeORM > If entities files are in typescript](https://typeorm.io/#/using-cli/if-entities-files-are-in-typescript)

ドキュメントの推奨している方法だと、、、

### STEP 1
ts-nodeをグローバルにインストール

“`bash
$ npm install -g ts-node
“`

### STEP 2
`package.j

画像をたくさん読み込む

##画像の取り込みをコントロールする

“`javascript:javascript
var images = document.getElementsByTagName(‘img’);
var count = 0;
for (var i = 0; i < images.length; i++) { var img = new Image(); img.onload = function() { count += 1; } img.onerror = function() { count += 1; } img.src = images[i].src; }; var waiting = setInterval(function() { if(count == images.length) { clearInterval(waiting); ここに画像を取り込んだ後の処理を書く } }, 100); ``` ----------------------------- 参考 https://note.affi-sapo-sv.com/j

JavaScriptでPythonのrange関数を実装する

# はじめに

これらと同じことをJavaScriptでやる。

“`py
for i in range(10):
print(i)
“`

“`py
# [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
list(range(10))

# [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
list(range(1, 11))

# [0, 5, 10, 15, 20, 25]
list(range(0, 30, 5))

# [0, 3, 6, 9]
list(range(0, 10, 3))

# [0, -1, -2, -3, -4, -5, -6, -7, -8, -9]
list(range(0, -10, -1))

# []
list(range(0))

# []
list(range(1, 0))
“`

# 仕様

– すべて数値型の range(end) と range(start, end[, step]) の引数を受け取る。
– 渡された引数がない場合はエラーを投げる。
– 最初に載せたPythonのコードと

JavaScriptで簡単なダークモード切替機能を作る

# 概要・目的
　こんにちは、プログラミング初心者です。
　今回はHTML＆CSSとJavaScriptのDOM操作だけで簡単に実装できる、夜目に優しいダークモードを搭載する方法を紹介したいと思います。

## ダークモードって？
　一般的なWebサイトは、背景が白、文字色が黒を基調とした配色になっています。今ご覧になってるQiitaもそうですね。
　それに対してダークモードとは、主に背景が黒、文字色が白を基調とした配色です。目に優しい・見やすいなどの特徴があり、YoutubeやGoogleのアプリ、iPhoneのメールボックスなどでダークモードへの切替ができるようになってます。
　一見、実装するのが難しそうにも思えますが、普通のWebサイトであればCSSとJavaScriptだけで簡単に実装できると思ったので、今回はその紹介・解説をいたします。

### 実装環境
– 対象：　　HTMLとCSSで制作したWebサイト
– 実行日：　2021年10月6日
– 環境：　　windows10、Chrome

#① 元サイトの準備
　今回、記事を書くに至って紹介用のサイトを用意しました。
　

Angularでのルーティング設定とHTTPステータス404（Not Found）対策

お勉強したのでメモ書きです。
主にAngularでのHTTPステータス404の対策について記載しているので、興味があれば読んでみてください。

[参考(Angular公式サイト)](https://angular-jp.translate.goog/guide/deployment?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=nui,sc)
[参考のなったサイト](https://weblabo.oscasierra.net/apache-rewritecond-base/)
[参考のなったサイト2](https://www.webdesignleaves.com/pr/html/htaccess.html)

# ルーティング
ルーティング情報をRoutes配列で定義する
pathやredirectTo、ガード等を定義できる
ここではroutes配列でルーティングを定義している

“`app-routing.module.ts
import { NgModule } from ‘@angular/core’;
import { Rou

生JSでハンバーガーメニューを作ろう

## はじめに

過去にjQueryで実装したハンバーガーメニューを生のJavaScriptに書き換えた。
備忘録的な意味も込めて書いていく。
~~実はjQueryほとんど学習してないない~~
~~使わないから~~

## 仕様について
今回作成したハンバーガメニューはスマホ時のみ表示
aタグのhref属性に移動したいidを記入する
\#とだけ記入すると画面最上部へスムーススクロールする
という条件で作成しています。

## コード

*jsだけだとどうしようもないのでhtmlとsassも貼っておく*

**HTML**

“`html

JavaScriptでコピーボタンを実装する方法

## はじめに
JavaScriptを使ってコピーボタンを作る方法を知ったので、書いていく。
少し衝撃的だった

## 手順
1. textareaタグを生成する
1. textaretaタグの中にコピーしたい文言を入れ込む
2. bodyタグを取得してappendChildでtextareaを入れ込む
3. select()で選択状態にする
4. execCommand(‘copy’)でコピー
5. textareaを消す

## コードの例
“`javascript
const textarea = document.createElement(‘textarea’)
textarea.textContent = password

const body = document.querySelector = (‘body’)
body.appendChild(textarea)
textarea .select()
document.execCommand(‘copy’)
body.removeChild(textarea);
alert(‘copied password’)
`

[GAS]GoogleAdSenseAPI v2 スプレッドシート記入スクリプト

##背景

AdSenseAPIv1.4が2021年10月12日付で終了するのでそれに伴ってGASを書き直さなければならない

https://developers.google.com/adsense/management/reference/rest

##スクリプト
“`javascript:v1.4

function writeAdsenceReport() {
var spreadSheet = SpreadsheetApp.getActive();
var sheet = spreadSheet.getSheetByName(“raw(AdSence)”);
var adClientId = ‘ca-pub-xxxxx’;
var startDate = Moment.moment(spreadSheet.getSheetByName(“Variables”).getRange(1, 2).getValue()).add(1, ‘days’).format(‘YYYY-MM-DD’);
var endDate = Moment.moment(sp

HTML/CSS/javascriptに関して覚書

#大前提#
__可読性の高いコードを書こう__
学生の頃はこんなこと1mmも教わらなかったけど本当に大事だな～と42tokyo在籍時に感じた。
#HTML#
BEMでの命名について
・-first等枝番や-small等形容詞的な命名はNG
せっかくメンテナンスしやすいようにBEMを採用してるのに、仕様変更で変わる可能性のある枝番や形容詞的なクラス名は意味がない。

#javascript#
・$(function() { });
DOMが準備されてからjQueryを実行するおまじない。

・メソッドチェーン
返り値でjQueryオブジェクトを返すメソッドの後にのみメソッドを連結できる。

・addClass()
対象のDOMにクラスを追加する（引数のクラスには.を付けないので注意）
css()よりもjavascriptがわの記述量が少なく使いまわしが効く。

・find()
指定されたDOM要素から引数に渡された要素を取得する。

・setTimeout()
第一引数に関数、第二引数に秒数（ミリ秒単位）を渡す。

・on()
取れる引数は、イベント名,セレクタ,データ,関数

・mod

QiitaのAPIをつかって、Quiita住民の生態について考察してみた。

はじめに

１ヶ月まえくらいまで、Quiitaってなんやねん！？って言う状態だったプログラミング初心者の初めての投稿です。
先週からはじめてプログラミング教室の宿題でとりあえず、QiitaAPIをつかってQiitaに投稿しよう！ということで、
とりあえずやってみました。

目的

Quiita APIをつかって、投稿されている日時をしらべ、投稿が多い曜日や時間を検討・考察してみる

環境

Visual Studio Code: 1.60.2
Node.js: 14.16.0
OS: Darwin x64 19.6.0

サンプルコード

とりあえずQiita APIの説明書みながら作ってね！といわれたんですが、
この　説明書　めっちゃ字が細かくてみにくい・・・・
同じプ

【JavaScript】スコープの学習の振り返り③

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/58838204ff058eb9abc8

#目的

* スコープについての理解を深める

#本題
###1.クロージャー

クロージャーとは**レキシカルスコープの変数を関数が使用している状態**のこと

####クロージャーを使った実装
#####A.プライベート変数

ここではincrementを使って数字が１つずつカウントアップされていく仕組みを作ります。

““javascript
// 数字を1,2,3と増やしていきたい
increment();
increment();
increment();

// 関数でincrementを定義
function increment(){
let num = 0;
// 変数numが１ずつ増えていく
num = num +

Typscriptについて簡易まとめ

Typescript {
・型定義できるJS
・JSの上位互換。
・インターフェース、クラスが使える
・null/undefined safeにできる
・型定義ファイルがあれば外部ライブラリも形を利用できる
・ジェネリック使える

記述したコードをコンパイルするとJSのコードに変換するため、JSとはライブラリ群を含め100%互換性を持っている。
メリット {
コードが短く読みやすい
JSとの互換性が高い
エラー防止
動作が早い
}

ちょっとした JavaScript 確認コードのための下敷きコード

ちょっとした JavaScript 確認コードのための下敷きコードをここにメモ。
JavaScript を .js ファイルに記入して、.htmlファイルを Webブラウザで開くことにより実行できます。

### simplejs.js

“`js
// Simple JavaScript
console.log(‘Hello JavaScript World.’);
document.write(“

Hello JavaScript world

“);
“`

### simplejs.html

“`html

Qiita版『自民党総裁選』開催してみた 結果は‥

## Node.jsでQiitaAPIを使ってみたい!
　QiitaAPIを少し勉強したので、Node.jsで何か作ってみたいな。と考えていたところ
　とて面白いQiita記事を発見。早速参考にして自分なりに応用してみました。
　[「テレワーク」と「新型コロナ」には相関性があるのか確かめてみた。](https://qiita.com/twtjudy1128/items/836efaf748b8b76a6b82)

## 『ネット民に人気』は本当か？
　河野さんの紹介文でよく目にした「ネット民に人気」。
　それどうやって調べているのかな、とかねてから疑問でした。
　このAPIを使えば、**期間中全Qiita記事内の名前出現回数を計測できる**ので、
　ほかの候補者と比較すべく、「Qiita版総裁選」を開催してみました。

## サンプルコード
“`js

const axios = require(“axios”);

async function main() {
let response = await axios.get(