- 0.0.1. Vue Jest Error: Not implemented: navigation の対策 [document.createElementの場合]
- 0.0.2. Reactの講座で学んだ事をまとめてます!
- 0.0.3. flow概要(javascriptの静的チェッカー)
- 0.0.4. JavaScript「〜を含む」メソッドの使い分け
- 0.0.5. React で超絶楽にエラー画面を出せるよ
- 0.0.6. [React×TypeScript]型 ‘xxx | undefined’ を型 ‘xxx’ に割り当てることはできません。
- 0.0.7. 共通テスト試作問題『情報Ⅰ』のプログラミング言語(DNCL2)を作ってみた
- 0.0.8. モーダル機能
- 0.0.9. 【もりたけんじ問題集】練習問題16~20
- 0.0.10. javascriptのアクセサ(getterとsetterプロパティ)
- 0.0.11. 【Publisher】Create an interactive web report with HTML and JavaScript
- 0.0.12. Parsing error: Cannot find module ‘next/babel’のエラーの解決方法 メモ
- 1. Example
- 1.0.1. OpenAPI (Swagger) まとめ
- 1.0.2. Firestore の TTL がリリースされたので挙動を調べてみた
- 1.0.3. Asanaのサイドバーを一時的に広げる
- 1.0.4. JavaScriptで空白行なのにUncaught SyntaxError: Unexpected tokenに悩まされた
- 1.0.5. 【JavaScript】美味しそうな技?
- 1.0.6. 【MapLibre GL JS】OpenStreetMapを表示する
- 1.0.7. 【Publisher】Create a custom report with HTML and JavaScript
- 1.0.8. JavaScriptでバイト配列を扱う
Vue Jest Error: Not implemented: navigation の対策 [document.createElementの場合]
# 問題
“`
Error: Not implemented: navigation
“`jestで使用される jsdom はナビゲーションをサポートしていないため
window.location.href などを実行すると、このメッセージが表示される### エラーを起こすコード(例)
クリックでファイルをダウンロードするコード
**component**
“`javascript
download(fileId) {
const url = `https://hogehoge.com/{fileId}`;
const link = document.createElement(‘a’);
link.id = ‘downloadFileLink’;
link.href = url;
link.download = url;
link.click();
}“`
**jest**
“`javascript
test(‘ダウンロード後完了メッセージが表示される’, async () => {
wrapper = mount(compo
Reactの講座で学んだ事をまとめてます!
# まずは、Javascriptを学ぼう!!
Javascriptの変数の定義の仕方:
~~~Javascript
var val1 = “var変数”;
console.log(val1);
//=> var変数val1 = “var変数を上書き”
console.log(val1)
//=> var変数を上書きvar val1 = “var変数を再宣言”
console.log(val1);
//=> var変数を再宣言
~~~varの変数宣言では何でも出来てしまう
###### =>プロジェクトが大きくなってくると意図しない所で変数を再宣言,上書きしてしまう!!そこで、、、
###### let , constという宣言が追加された##### let: 上書きは出来るが再宣言出来ない
~~~Javascript
let val2 = “let変数”;
console.log(val2)val2 = “let変数を上書き”;
console.log(val2)let val2 = “let変数を再宣言”
//=>Identifier ‘val2’ ha
flow概要(javascriptの静的チェッカー)
flowについて学習する必要があったのでメモ
## flowとは
Facebook(現meta)が初めて発表したJavaScript用の静的型チェッカー。## インストール
“`
npm install –save-dev flow-bin
“`
プロジェクトファイルにflowを加える
“`package.json
“scripts”: {
“flow”: “Flow”
}
“`## セットアップ
プロジェクトフォルダのルートに、.flowconfigという名前のコンフィグファイルを作成する
“`
npm run flow init
“`
以下のコマンドでプロジェクト全体のコードをチェックできる
“`
npm run flow check
“`Flowの型チェックはオプトイン。
Flowでチェックしたいjavascriptのファイルの先頭に@flowコメントを加える“`
@flow
“`## 型推論
型チェックは2つの方法を使う– アノテーションを使う方法
予測する型をコードの一部として指定し、型チェッカーがその予測に基づいてコードを
JavaScript「〜を含む」メソッドの使い分け
今回はJavaScript「〜を含む」メソッドの使い分けについてまとめたいと思います。
## ■メソッドの種類と使い分け
| メソッド | 検索ワード | 戻り値 |
| ——– | ——————————– | ——- |
| includes | 通常の文字 | boolean |
| indexOf | 通常の文字 | 文字列、出現位置 |
| test | 正規表現 | boolean |
| match | 正規表現 | 文字列、出現位置 |
| search | 通常の文字 or 正規表現どちらでも | 文字列、出現位置 |:::note info
基本的にbooleanだけを返すメソッドの方が軽いと思われる。
そのためマッチパターンや出
React で超絶楽にエラー画面を出せるよ
こんにちは。[ぬこすけ](https://twitter.com/nuko_suke_dev)です。
皆さんは React でエラー画面を出す時どうしていますか?
おそらく、こんな感じで頑張っているんじゃないかと思います。“`react
function MyWidget() {
const [isError, setIsError] = useState(false);useEffect(() => {
// 何かしらデータを取得する処理
fetchSomething()
.then(() => {
// データの取得に成功した時の処理
})
.catch(() => {
setIsError(true);
})
}, [])if (isError) {
returnエラーです}
return正常です}
“`いたって普通のコードです。
が、コンポーネントごとでこのようなエラーのための処
[React×TypeScript]型 ‘xxx | undefined’ を型 ‘xxx’ に割り当てることはできません。
React.js×TypeScriptでの実装中に、`型 ‘xxx | undefined’ を型 ‘xxx’ に割り当てることはできません。`というエラーにぶち当たった。
これは、undefinedを制限し、安全な型を子コンポーネントに渡すことで解決できる。
# 起きたエラー
例えば以下のような構成で`Parent.tsx`から`Child.tsx`にPropsで値を渡す場合を考える。
“`
.
├── Parent.tsx
└── Child.tsx
“`“`react:Parent.tsx
import { useEffect, useState } from ‘react’;
import Child from ‘./Child’;export type User = {
name: string;
age: number;
birthplace: string;
};const Parent = () => {
const [inputUser, setInputUser] = useState();
return
共通テスト試作問題『情報Ⅰ』のプログラミング言語(DNCL2)を作ってみた
[共通テスト「情報」サンプル問題のプログラミング言語を作ってみた](https://qiita.com/nodai2h_ITC/items/ac11eb49eaab5803b09e) の続編です。共通テスト(旧センター試験)に追加が決まった「情報」の問題で使われている擬似プログラミング言語を実際に実行できる環境を作成しました。言語処理系をイチから作るのではなく JavaScript に変換して実行させることで実装を簡単化しています。実際に動くものは ↓ からどうぞ。
[DNCL2- 大学入試共通テスト「情報」問題言語](https://nodai2hitc.github.io/ictl/)
# はじめに
共通テスト「情報」[試作問題](http://www.ipsj.or.jp/education/9faeag0000012a50-att/sanko2.pdf)、[サンプル問題](https://www.dnc.ac.jp/albums/abm.php?f=abm00040342.pdf&n=12_%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E5%9
モーダル機能
“`html
×