- 1. 外部のJSファイルを読み込む方法
- 2. キャンバスについて
- 3. three.jsを触ってみた
- 4. オブジェクトリストから削除リストにある項目以外を抽出する
- 5. 【超簡単】FullCalendar + React で カレンダーを表示
- 6. 初めてQiita APIでデータ取得したら、下衆な探偵になっていた
- 7. Gopherくんの動く壁紙を作ったｗｗｗ
- 8. JavaScriptの配列
- 9. TinyMCEにPDFアップロード機能を実装する方法
- 10. Axios で ApolloServer からデータ取得する
- 11. React で ReferenceError: Cannot access ‘XXX’ before initialization が発生する
- 12. Map（Microsoft BingMaps API ）の基本を学ぶ。動画まとめ
- 13. jsのmapのentryをイテレーション的な感じで処理したい
- 14. コールバック関数とは【個人的なお勉強アウトプット】
- 15. 無名関数（クロージャ）とは【個人的なお勉強アウトプット】
- 16. [Javascript][CSS]画像を別窓で開き、左右に回転できるようにする
- 17. Stripe Checkoutで事前に料金を登録せず（アドホック）に決済ページを作成する
- 18. Figma Pluginの開発でi18n(国際化)する方法
- 19. 【JavaScript】Event.stopPropagation()・Event.preventDefault()
- 20. ESLintでimportの整列・追加・削除を自動化する
外部のJSファイルを読み込む方法
外部のJavaScriptファイルを読み込む方法をまとめます。
以下、
`index.js`→呼び出すファイル
`import.js`→呼び出されるファイル
とします。
## import/export
import/exportを使う方法です。
まず呼び出されるファイルにて、渡したい値に`export`を設定します。
“`javascript:import.js
export const nameText = `太郎`;
“`複数の値を渡す場合などは、最後にまとめて設定することもできます。
“`javascript:import.js
const nameText = `太郎`;const genderText = `男`;
export { nameText, genderText };
“`続いて呼び出すファイルにて、importを設定します。
“`javascript:index.js
// 読み込みたい値を設定する
import { nameText } from ‘./import.js’;const testElement
キャンバスについて
_HTMLコード_
“`
“`
上記コードのように、HTMLで「canvas要素」をID名「can」で記述し、
それをJavascript（ファイル名「example.js」）でいじっていきたいときの、
canvasについてのお話です。# サイズ
まずキャンバスのサイズについては
[「canvasサイズについて」](https://qiita.com/tagotyan/items/52fb22a6140c8c0a227e)
を参照してください。
今回キャンバスサイズは５００×５００にしています。次に実際にキャンバスへ描画していくのですが、
「今から２Dで絵を描いていきますよ〜」とPCに伝えないといけません。# 要素の取得
_JSコード_
“`
let can=document.getElementById(“can”);
let con=can.getContext(“2d”);
“`
ということで
three.jsを触ってみた
# はじめに
three.jsというwebGLを扱えるライブラリがあったので軽く触ってみました。
試しに動かしてみる程度から始めたいので下記CDNを使用しています。
用語の理解など間違っている部分があれば指摘していただけるとありがたいです。“`
“`# 実際に試してみる
* htmlはcanvasタグを用意して、表示させるアニメーション、CGなどをcanvas内で扱う流れみたいです。“`sample.html
“`* レンダラー
オブジェクトリストから削除リストにある項目以外を抽出する
[teratailの質問](https://teratail.com/questions/m43rf4vgtj91xw)に回答したコードを、Qiitaにも残しておきます。
元のデータを変更せずに、項目削除したオブジェクトリストを新たに作る方法です。
1. オブジェクトリストを`map`して別のオブジェクトリストを作る
1. 各オブジェクトから`Object.entries`で`[key, value]`リストを列挙する
1. 削除**しない**項目を`filter`で抽出する
1. `Object.fromEntries` でオブジェクトにする“`js
const members = [
{ firstname: ‘Taro’, lastname: ‘Yamada’, age: 20 },
{ firstname: ‘Hanako’, lastname: ‘Hanako’, age: 10 },
];const secrets = [ ‘lastname’, ‘age’ ];
const anonymous = members.map(member =>
【超簡単】FullCalendar + React で カレンダーを表示
# React + TypeScript + FullCalendar で カレンダーを作成する
## FullCalendar とは
[FullClanedar](https://fullcalendar.io/)はオープンソース(一部有料)のJavaScriptカレンダーライブラリで、
軽量かつ豊富なカスタマイズ性能を持っていますReact,Angular,Vueなどと組み合わせて使うことができます
…とまあ、詳細はいろいろ記事あったのでコピペみたいになっちゃうので各自ggってみてください
どんな感じか、実際に作って確認してみましょう
## 導入
### インストール手順
“`shell
$ npm install –save @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list
“`### カレンダーの表示
“`tsx:App.tsx
import FullCalendar from ‘@f
初めてQiita APIでデータ取得したら、下衆な探偵になっていた
# 背景
取得データの読み方もそれをどう活用するのかもわからない。そんな私がまずはやってみようという試み。自分の興味に従い、楽しく体感＆理解！# 真面目に調べるつもりが、野次馬根性にあっさり負ける
私が今「ハーフミラー」を使ったメディアアート作品を作っているので、「ハーフミラー」というワードを使った記事を書いている人がどれだけいるのかな？と、まずは検索。
すると、記事を書いた人のLocation＝場所がわかることが判明。私と同じ対象、しかも多分Qiita内ではニッチであろうハーフミラーに興味を持ち記事にまでする人がどのエリアに出没しているのかが図らずもわかってしまい、俄然野次馬根性が湧く。
ここで興味の対象が、「ハーフミラー」から一転、「記事を書いた人がいるらしい場所」調べに。# 初手は真面目に「ハーフミラー」の記事検索／その方法
１．「ハーフミラー」と検索して出てくる記事の日付および件数をQiitaAPIで取得。思いのほか多かった。
２．さらに、記事を書いている人たちがどのエリアに生息しているのか覗き見ちゃう。どれどれ、みんなどこにいるんだ。# コード
まずはconsol
Gopherくんの動く壁紙を作ったｗｗｗ
# 動く壁紙とは？
Windowsでゲームをプレイする方なら知っているかもしれませんが、[Wallpaper Engine](https://store.steampowered.com/app/431960/Wallpaper_Engine/?l=japanese)という壁紙を設定するアプリがあります。(Steamで300円程度)
このアプリでは、自分好みの壁紙をダウンロードしたり、自分で壁紙を作成することもできます。
そして壁紙として登録できるのは画像だけでなく、動画やUnityで作成したプログラムなんかもあります。
[Wallpaper Engineで動かせるプログラムをUnityで作る](https://qiita.com/mochi5420/items/010d5571c441f4bc6a4c)自分もこのWallpaper Engineで、コロコロ動くBB-8(スターウォーズに出てくるロボット)の壁紙を使ってます（かわいい）。
さて、そんなある日（？）[本物の golang を… 本物の Gopher を、お見せしますよ。](https://qiita.com/mat
JavaScriptの配列
# 配列とは
***配列とは情報をしまっておくためのタンスのようなイメージ***です。# 配列を作る方法
配列を作る方法は下のやり方です。“`js
const array = new.Array();
const array = [];
“`
⚫︎補足
arrayは配列です。#配列の書き方
配列の書き方をみていきます。“`js
const scores = [100, 90, 70]; //数字を入れる
const sportts = [‘野球’, ‘テニス’, ‘柔道’]; //文字を入れる
const my_weapon = [‘Lightsaber’, 2, ‘Raygun’, 3]; //文字と数字を組み合わせる
“`
あとはconsole.logで出力できます。次にデータを取る方法です。
“`js
const scores = [100, 90, 70];
console.log(scores[0]);//100と出力
“`0が１番目から始まるルールがあります。
次にデータを取る方法です。
“`js
const scores =
TinyMCEにPDFアップロード機能を実装する方法
# デモ
See the Pen
TinyMCE PDF File Upload Example by qwe001 (@qwe001)
on CodePen.<
Axios で ApolloServer からデータ取得する
簡単な内容だが、備忘録。
## Apollo Server とは？
GraphQL サーバーを簡単に作れる技術。
簡単なデータの読み取りと書き込みは、“`javascript: index.ts
import {ApolloServer} from “apollo-server”
import {IResolvers} from “@graphql-tools/utils”let hello = [ {text: “Hello world!”} ]
const typeDefs = gql`
type Hello {
text: String
}
type Query {
hellos: [Hello!]!
}
type Mutation {
addHello(text: String!): Hello!
}
`const resolvers: IResolvers = {
Query: {
hellos: () => {
return hello
}
},
Mutation:
React で ReferenceError: Cannot access ‘XXX’ before initialization が発生する
# 現象
コンポーネント間で相互に参照しているような関係で発生します。
このエラーは React に限りません。例えば以下の状況で発生します。
– `ComponentA.tsx`： `ComponentB.tsx` を表示
– `ComponentB.tsx`： `ComponentA.tsx` の定数を利用“`react:ComponentA.tsx
import React, { VFC } from ‘react’
import ComponentB from ‘~/components/ComponentB’export const widthA = 30
const ComponentA: VFC = () => {
return (
<>This is ComponentA.
)
}export default ComponentA
“`“`react:ComponentB.tsx
Map（Microsoft BingMaps API ）の基本を学ぶ。動画まとめ
### 自己紹介
ジーズアカデミー学校長 山崎と申します。
**「Microsoft BingMaps API 」** を授業用で数年前に録画してたものを公開します。
情報が少ないので少しでも役に立つのではと思います。:::note info
クレジット登録が必要ないので学生が使うにも良いと思います
:::## ◆動画集一覧
:::note warn
【サンプルコード】ダウンロードして動画で学んでください
https://github.com/yamazakidaisuke/bingmaps_sample
:::| タイトル | 動画? |
| —- | —- |
| 「 BingMaps入門」始めるよ！
| https://youtu.be/4py0m6XLrnA |
jsのmapのentryをイテレーション的な感じで処理したい
map内の要素をフィルタしたいときがあって調べました。
## 解決法
`Array.from()`でarrayを生成すると、mapの各要素(`entry`と呼ぶ)が以下のようにマッピングされるのでそれを利用する。
– key -> entry[0]
– value -> entry[1]### サンプルコード
“`js
const sampleMap = new Map();
sampleMap.set(“id1”, { name: “name1”, hoge: “hoge1” });
sampleMap.set(“id2”, { name: “name2”, hoge: “hoge2” });
sampleMap.set(“id3”, { name: “name3”, hoge: “hoge3” });const filteredList = Array.from(sampleMap)
.filter((entry) => entry[1].name !== “name1”)
.map((entry) => ({
id: entry[0],
コールバック関数とは【個人的なお勉強アウトプット】
関数に引数として渡される関数
対象の関数のなかで実行してほしい内容を渡すイメージ# わかりやすい記事
https://wa3.i-3-i.info/word12295.html
無名関数（クロージャ）とは【個人的なお勉強アウトプット】
関数には名前をつける。
ただ、名前をつけるのもそれなりに面倒、その場限りで使う関数もある。
そんな時は名前をつけなくてもよい。
それが無名関数。# わかりやすい記事
https://wa3.i-3-i.info/word15754.html
[Javascript][CSS]画像を別窓で開き、左右に回転できるようにする
# 概要
とある案件のおまけみたいな機能として「メインのリストとは別に画像表示専用の別窓を開き、その画像を左右回転できるようにしたい。」というシステムの作成を依頼されたため作成。
せっかく書いたわりに作った事自体を忘れそうなのでネットに忘備録も兼ねて投げます。
なお、画像保存・展開する部分（サーバー側）は今回は触れない。# 要件
– ユーザーのモニタサイズは固定で、操作はPC限定なのでスマホの考慮は必要ない
– 画像の縦横は未定
– 画像サイズは非常に大きい場合もあるのでcanvasに表示できない
– 左右回転時に画像の一部が切れてしまってはいけない
– jQueryは使わない# 実際のプログラム
## 別窓に開くところ
リストから下記HTMLのボタン部分をクリックしたら画像表示窓が開くという構成予定。“`html:list.html
Stripe Checkoutで事前に料金を登録せず（アドホック）に決済ページを作成する
今回の記事では、オーダーメイドな製品やパーソナライズした商品など、顧客によって価格や商品内容が異なるケースでのCheckoutの利用方法を紹介します。
# Checkoutでは、料金データを利用する
Stripe Checkoutを利用することで、簡単に決済ページを組み込むことができます。
サンプルコードでは、一般的に「事前に作成した料金のID」を設定してCheckoutのセッションを開始します。
“`js
const session = await stripe.checkout.sessions.create({
success_
Figma Pluginの開発でi18n(国際化)する方法
先日、また新しく[Figmaプラグイン](https://www.figma.com/community/plugin/1080046874598231357/Status-Changer)をリリースしたんですが、これを開発した際に各エリア別の情報を出さなければならないことがあり、少しだけトンチを使ったので備忘録として残しておきます。
（尚、メニューからの呼び出しとかは多言語化できませんでの悪しからず、また記事中にJSと出てるのはTSに置き換えても問題ないのですが便宜上JSと記述しています。）## どうしてプラグインごとき？でも多言語化しなければならないか？
今回どうして多言語化しなければならないか？と言ったら**時刻**を扱うからです。
そうじゃなくても通貨とかインチ、cm、フィート、kg、ポンド、華氏、摂氏とか結構面倒です。日本人でも多いと思いますが、もし**私がアメリカ人だった時に表記が**「**2022/01/02 23:00**」**とかだったら**「**読みづらいなぁ**」**と感じる**と思います。
UI/UXを作る？ツールなのにそのプラグインのU
【JavaScript】Event.stopPropagation()・Event.preventDefault()
## Event.stopPropagation()
キャプチャリング・バブリングの過程において、イベントの伝播を停止する。
ただし、リンクの参照先への移動やチェックボックスのチェックなど、ブラウザデフォルトのイベントは停止できない。### キャプチャリング
下記イベント処理のフェーズのうち、イベントがターゲット要素まで下りるフェーズ。1. キャプチャリングフェーズ
同上1. ターゲットフェーズ
イベントがターゲット要素に到達したフェーズ1. バブリングフェーズ
ターゲット要素から祖先要素までバブリングしていくフェーズ### バブリング
要素上でイベントが発生した場合、イベントが発生した要素の祖先要素までイベントハンドラが実行されること。## Event.preventDefault()
ブラウザがデフォルトで定義しているイベントを無効にする。## サンプル
### 通常
チェックボックスをクリックすると、メッセージ表示とチェックボックスにチェックがつくイベントが実行される
ESLintでimportの整列・追加・削除を自動化する
## 概要
ESLintのプラグインとVS Codeの設定でimportの追加・削除・整列を自動化して幸せになれる記事です。
**こんな人におすすめ**
– チーム間でimportの順番などのルールが決まっておらず。人によってフォーマットがバラバラなのが実は気になっている。
– 未使用のimportを消すのを忘れがち。
– コンポーネントやライブラリの関数を書いたら勝手にimportしてくれたら嬉しい。
– import周りを触るのがシンプルにめんどい。## 使用するプラグインと設定
– `source.addMissingImports`
– importの自動追加に使用する
– VS Codeで設定する
– `eslint-plugin-import`
– importの整列に使用するプラグイン
– `eslint-plugin-unused-imports`
– 未使用のimportを削除に使用するプラグインESLintのプラグインはnpmからインストールしておきましょう。
## source.addMissingImportsの設定
