- 1. デジタル時計を作って見た
- 2. 写経元にしたURL
- 2.1. Remix チュートリアル 翻訳してみた その1
- 2.2. Hardhat と mocha でテストをした時に pending で終了してしまう問題
- 2.3. 二次元連想配列 foreachで取り出す(Javascript)
- 2.4. [JavaScript]日付、時間の書く順番をその国、言語圏の記法にする
- 2.5. [JavaScript]数字をカンマ区切りにすることができる地味に便利な機能
- 2.6. ES6_スプレッド構文
- 2.7. フロントエンド環境構築(Typescript)
- 2.8. 【個人開発】教員向け授業計画作成サービスを作ってみた。
- 2.9. Webブラウザの日本語の改行問題 -改行を実現するHTML/CSS-(1)
- 2.10. 【JavaScript】カスタム例外の書き方
corsエラーが出た
## 行っていたこと
ローカル開発でフロントエンドとバックエンドを接続する際にエラーが起きた。
`fetch`でデータを引っ張る時にブラウザのコンソールでエラーを発見!フロント側:`http://localhost:8111`(webpack)
バックエンド側:`http://localhost:8080`(express)## エラー内容
Access to fetch at … from origin …has been blocked by CORS policy:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to
fetch the resource with CORS disabled.CORSにブロックされた…
## 対応
`yarn add
ISO 8601とJavaScriptのDate
備忘録的にメモ
## ISO 8601
時刻を表すフォーマットはたくさんありますが、よく使用されるISO 8601。
ISO 8601では以下のように時刻を表します。| 拡張表記 | 基本表記 | タイムゾーン | 表す時間 |
|:-:|:-:|:-:|:-:|
| 2022-02-27T15:08:10+09:00 | 20220227T150810+0900 | JST(日本時間) | 日本時間2022年2月27日15時8分10秒 |
| 2022-02-27T06:08:10Z | 20220227T060810Z | UTC(協定世界時) | 2022年2月27日6時8分10秒 |拡張表記が結構APIとかで使われる気がする。
*(”+09:00″はローカル時であることを表すだけなので、そこから9時間引いて計算し直す必要は無い…!)*
## Dateでの扱い方
すべてUTCに変換すると、タイムゾーンを気にする必要は特にない。
`getTime()`をメソッドを用いると協定世界時の1970年1月1日00:00:00からの経過ミリ秒が得られる。
JavaScriptのスコープについて簡単な説明
## JavaScriptにおけるスコープとは?
スコープとは、一言で言うと、見える範囲となります。
また、JavaScriptにおける具体的な意味としては、「その場所から、必要な変数の値を参照できるか?」ということになります。例えば、あるファンクションの外側から、そのファンクションの内側で宣言されたローカル変数の値を参照することはできません。その場合は、「(その変数に対して)スコープがない」ということになります。
逆に、ファンクションの内側からは、ファンクションの外で宣言されたグローバル変数を参照することができますので、その場合は、「(その変数に対して)スコープがある」ということになります。
基本的には、3つのタイプのスコープがあります。
1. ブロックスコープ(Block Scope)
2. ファンクションスコープ(Function Scope)
3. グローバルスコープ(Global Scope)ブロックスコープですが、letとconstで変数を宣言する場合、letとconstはブロックスコープを提供しますので、そのコードブロックの中だけがスコープの範囲となります
【Vue】Youtubeの埋め込み動画を表示する
サイトにYoutubeの埋め込み動画を乗っける方法です。
Vue.js上でやっていくので、コンポーネント化して汎用的に使えるような実装を目標にします。## Youtubeの埋め込み情報を取得する
動画上で右クリック → “埋め込みコードをコピー” で取得できます。
下のようなコードが取得できます。これを任意の場所に張り付けるだけです。簡単でしょ?
“`
プーチン??を破壊するAI①
ロシアは世界最先端のAIを開発し、嘘の情報を生成モデルで生成しています。この生成モデルは戦争にさえ使用されています。人間はAIにゲームやMNISTで敗北しました。
この画像は、Open AIが開発した**DALL・E**をロシアがハッキングし[ruDALL-e](https://towardsdatascience.com/rudall-e-or-from-russia-with-ai-5fbd098fc77b)というマルチモーダルAIで生成したものです。
この戦争を終わらせるには、独裁者プーチンを破壊するしかありません。プーチンによってロシア国民・ウクライナ国民が犠牲になっています。
BigDogにAIを搭載しプーチンを見つけ破壊すれば、これ以上犠牲者がでなくなるでしょう

Vue(Vite)# 開発環境の準備
ローカルには何も入れないで仮想環境上で開発していきます。
## VSCode で開発用の空フォルダを開く

フォルダ名は hls_capture としました
## 仮想環境用の Dockerfile を用意
“`dockerfile:Dockerfile
FROM node:lts
“`を用いて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
Document
<
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 changed0 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で1つずつ取得する流れについて自身の理解を整理。
“`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