- 1. Node.jsでtmpに一時ディレクトリを作るにはfs.mkdtempSyncを使う
- 2. JS 第一引数の配列を第二引数で要素ごとに連結して返す
- 3. JS 配列の最後だけ取り出す
- 4. Worpressのbody直下にスクリプトを入れる方法
- 5. Laravel + Vue.jsの導入方法
- 6. Webpack: asyncWebAssembly+importAwait
- 7. Swiperでloopかつlazyの時に最後のスライドの画像を事前読み込みする方法
- 8. 配列のソート
- 9. Amplify Frameworkの新しい認証UIコンポーネント（@aws-amplify/ui-react）を試そう
- 10. 【javascript】テトリスの作成に向けて
- 11. addEventListenerを使用する際に注意するべきこと
- 12. 簡易SPARQLエンドポイント検索アプリをjQueryからVue.jsに書き直しました
- 13. border-radiusでムニュムニュするだけのページ作成
- 14. オブジェクトのKeyの値を変更する
- 15. 【JS】constは定数を定義できないよ。
- 16. 【JS】変数名に使える名前のルールを学ぶ
- 17. TypeScriptのnever型について
- 18. 【プラグイン導入】SyntaxError Cannot use import statement outside a module【Nuxt.js】
- 19. storybookでPHPを利用してAPIデータを取得する
- 20. ワイニート 「ヤフージャパンのロゴ変えたろ」
Node.jsでtmpに一時ディレクトリを作るにはfs.mkdtempSyncを使う
Node.jsで/tmpに一時的なディレクトリを作るには、[fs.mkdtempSync]を使います。
[fs.mkdtempSync]: https://nodejs.org/api/fs.html#fs_fs_mkdtempsync_prefix_options
“`javascript
const fs = require(‘fs’)const dir = fs.mkdtempSync(‘/tmp/foo’)
console.log(dir)
//=> “/tmp/foo4xeXpJ”
“`
JS 第一引数の配列を第二引数で要素ごとに連結して返す
## lodashのjoin関数を作ってみた
配列後方毎に連結させる想定でいた
~~~~javascript
const join = (array, join = “,”) => {
let index = array.length – 1
let linking = “”
for (let i = 0; i < index; i++) { linking += array[i] + join } linking += array[index] return linking } console.log(join(["a", "b", "c"], "~")) // => a~b~c
~~~配列前方毎に連結させる方がすっきり書けるっぽい。
~~~~javascript
const join = (array, join = “,”) => {
const arrayCopy = […array]//array最初の要素を取り出す
let linking = arrayCopy.shift()for (let i =
JS 配列の最後だけ取り出す
# lodashのlast関数を作ってみた
~~~javascript
const last = (array) => {
const index = array.length – 1
return array[index]
}console.log(last([1, 2, 3, 4, 3, 0]))
// => 0
~~~
Worpressのbody直下にスクリプトを入れる方法
“`functions.php
/**
* bodyタグ開始に挿入
*/
add_action( ‘wp_body_open’, function() {
?>
Laravel + Vue.jsの導入方法
LaravelのBladeにVueコンポーネントを組み込む方法をまとめます。
## 環境
+ laradock
+ php: 7.3
+ Laravel: 7.2## Vue.jsをインストールする
“`php:laravel/package.json
“vue”: “^2.6.11”,
“vue-template-compiler”: “^2.6.11”
“`“`
$ docker-compose exec workspace npm install
“`## Vueコンポーネントを作成する
試しにハートボタンを作成します。“`laravel/resources/js/components/SampleLike.vue
10
Webpack: asyncWebAssembly+importAwait
wasmのダイナミックimportsとモジュール解決してくれる内部プラグインがWebpack v5.0から入っていた。
“`javascript:webpack.config.js
module.exports = {
entry: “./example.js”,
output: {
webassemblyModuleFilename: “[hash].wasm”,
publicPath: “dist/”,
filename: “output.js”
},
module: {
rules: [
{
test: /\.wasm$/,
type: “webassembly/async”
}
]
},
experiments: {
asyncWebAssembly: true,
importAwait: true
}
};
“`“`javascript:example.js
import await { add } from “./add.wasm”;console.log(add(22, 2200));
Swiperでloopかつlazyの時に最後のスライドの画像を事前読み込みする方法
# 概要
[Swiper](https://swiperjs.com/)には画像の遅延読み込みモードが標準で付いている。
以下のように設定することで、事前の全画像読み込みは控えつつ、今いるスライドの前後のスライドの画像だけロードしてくれるようになる。“`.js
var mySwiper = new Swiper(‘.swiper-container’, {
preloadImages: false
lazy: {
loadPrevNext: true,
},
});
“`
参考: https://swiperjs.com/api/#lazyが、以下の条件の時、一つ前に表示されたループスライド(=本来の最後のスライド)の画像がうまく読み込みされなかった。
“`.js
var mySwiper = new Swiper(‘.swiper-container’, {
preloadImages: false
lazy: {
loadPrevNext: true,
},
loop: true,
slidesPerView: 3.3
配列のソート
###文字列のソート
sort()で事足りると思ったが、大文字や小文字のアルファベットがあった時に期待しているような並びにならなかった。““js
var items = [“Orange”, “banana”, “apple”, “Peach”];
items.sort();
// [“Orange”, “Peach”, “apple”, “banana”]
““比較関数を指定してやるといいようだ。
““js
var items = [“Orange”, “banana”, “apple”, “Peach”];
items.sort(function(a, b){
a = a.toString().toLowerCase();
b = b.toString().toLowerCase();
if(a < b){ return -1; }else if(a > b){
return 1;
}
return 0;
});// [“apple”, “banana”, “Orange”,
Amplify Frameworkの新しい認証UIコンポーネント（@aws-amplify/ui-react）を試そう
## Amplify Frameworkとは
AWSがOSSとして提供している開発プラットフォーム。CLIでコマンドを叩くだけで認証やAPI、ストレージなどをAWS上にいい感じに構築してくれるスグレモノ。最初の環境構築方法などは[他の記事](https://qiita.com/t_okkan/items/38aca98993bf06598af6#%E8%AA%8D%E8%A8%BC%E6%A9%9F%E8%83%BD%E3%81%AE%E8%BF%BD%E5%8A%A0)やサイトに書かれているのでそちらを参照していただきたい。
ただし、今回は
“`npm install aws-amplify-react“`
でaws-amplify-reactをReactアプリに組み込むことはせず、代わりに
“`npm install @aws-amplify/ui-react “`
を叩いて@aws-amplify/ui-reactを使用する。## 認証画面の表示がおかしい・・・
本題に進む前にAmplify Frameworkを触っていて起きたことについて少しだけ書くと、
数多
【javascript】テトリスの作成に向けて
javascriptでのテトリス作成において必要になった知識をまとめていきます。
#ランダムな整数値の生成
これでmin以上max以下の整数を得られる“`javascript
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max – min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
}
“`
>出典：[Math.random()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random)#多重ループを抜け出す
ラベルをつけることでループを抜け出せる“`javascript
var grid = [
[1, 2, 3],
[4, 5,
addEventListenerを使用する際に注意するべきこと
jsの実装中にエラーが起きたのでまとめます。
##addEventListnerとは
addEventListenerとは、イベント発火の際に実行する関数を定義するためのメソッドです。
以下のようにして実行できます。
“`javascript
要素.addEventListener(‘イベント名’, 関数);
“`エラーが起きたときのコード
“`javascript
function calc() {
const value = document.getElementsByClassName(“price-input”);
value.addEventListener(‘input’, (e) => {
console.log(“”)
});
}window.addEventListener(“load”, calc);
“`エラー内容
“`javascript
Uncaught TypeError: value.addEventListener is not a function
at calc (calculati
簡易SPARQLエンドポイント検索アプリをjQueryからVue.jsに書き直しました
RDFデータベースをSPARQLと呼ばれるクエリ言語で検索できるWeb API「SPARQLエンドポイント」を公開するオープンデータサイトが行政を中心に増えています。例えば、
– [ジャパンサーチ](https://jpsearch.go.jp/api/sparql-explain/)
– [統計LOD](http://data.e-stat.go.jp/lodw/sparqlendpoint)
– [gBizInfo](https://info.gbiz.go.jp/api/index.html)
– [大阪市オープンデータ](https://data.city.osaka.lg.jp/api/)
– [京都市オープンデータ](https://data.city.kyoto.lg.jp/%E4%BA%AC%E9%83%BD%E5%B8%82%EF%BD%93%EF%BD%90%EF%BD%81%EF%BD%92%EF%BD%91%EF%BD%8C%E3%82%A8%E3%83%B3%E3%83%89%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81
border-radiusでムニュムニュするだけのページ作成
#動機
border-radiusってせいぜい使っても50%で球体が書けるねって話で終わってしまっていて、もっといろいろ書きたくなった。#実装
まあ、何も言わず見てくれい
https://emptyset.sakura.ne.jp/munu/
こんな感じのヤツがひたすらムニュムニュする。#動作原理
タイマでランダムにborder-radiusを生成してCSSを修正し、transitionさせる。#結論
transitionって面白いな。
何も使い道が思いつかないけど。
オブジェクトのKeyの値を変更する
個人メモ
“`javascript
array: [
{ id: 1, text: ‘test’ },
{ id: 2, text: ‘test’ },
{ id: 3, text: ‘test’ },
{ id: 4, text: ‘test’ },
{ id: 5, text: ‘test’ }
]
“`この配列の`test`を`testText`というKey名に変える。
“`javascript
changeKey () {
const array = this.array.map(value => {
return {id: value.id, testText: value.text}
})
return array
}
【JS】constは定数を定義できないよ。
# constとは
**再代入できない変数**を定義する。なので、オブジェクトの内容などは変えることができる。“`js
const name = {
key: “変更前”,
};
console.log(name.key);
// 値を変えてみる
name.key = “変更後”;
// 正常に動作する
console.log(name.key);“`
このように、中身は変えることができる。とはいえ再代入はできない。
“`js
const name = “変更前”;
console.log(name);const name = “変更後”; // => Uncaught SyntaxError: Identifier ‘name’ has already been declared
“`つまり定数ではない。
# オブジェクトの中身も固定化したい
この場合は`freeze`メソッドを使えばOK。
“`js
const name = Object.freeze({
key: “value”,
});
name.key = “ここで変更できない”;
【JS】変数名に使える名前のルールを学ぶ
# ルールの概要
– _（アンダーバー）,$(ダラー),数字,半角アルファベットをの組み合わせ
– 数字からは開始できない。
– 予約語は使えない。# 例
“`js
const _ = “test1”;
const $ = “test2”;
const a = “test3”;
const 1aaa = “test4”;
const let = “test5”;console.log(_); // => test1
console.log($); // => test2
console.log(a); // => test3
console.log(1); // => Uncaught SyntaxError: Invalid or unexpected token
console.log(let); // => let is disallowed as a lexically bound name
“`
TypeScriptのnever型について
## never型って？
typeScriptにおける`bottom`型です。
### bottom型って何よ
>型理論、数理論理学において値を持たない型のことである↑wikiからの抜粋です。
**値を持たない型**, これだけだと???となりそうですが、>戻り値の型がボトム型である関数は、いかなる値も返さない。
こちらの説明だと少しわかりやすいかと思います。
つまり、
“`ts
const foo = () => {
while(true){}
}“`
上記のように`while(true)`で戻り値がない場合(= returnが絶対に走らない場合)などは、関数`foo`の戻り値の型は`never`と言えます。
【プラグイン導入】SyntaxError Cannot use import statement outside a module【Nuxt.js】
#参考対象者
– 外部ライブラリをNuxt.jsに導入したい方
– npmでプラグイン等を管理している方#環境
“`package.json
{
“name”: “nuxt-proj”,
“version”: “1.0.0”,
“private”: true,
“scripts”: {
“dev”: “nuxt”,
“build”: “nuxt build”,
“start”: “nuxt start”,
“generate”: “nuxt generate”
},
“dependencies”: {
“nuxt”: “^2.14.0”
},
“devDependencies”: {}
}“`
#状況
外部ライブラリの“`vue-flag-icon“`を導入したいが、SyntaxErrorになってしまう。
“`
SyntaxError
Cannot use import statement outside a module
“`#エラーにならない、プラグイン導入方法（node_mo
storybookでPHPを利用してAPIデータを取得する
別ドメインのAPIデータを取得するような仕組みの場合、phpを使用して同ドメインのデータとして取得したい場合があると思います。
storybookでこれを実現する方法を紹介します。## フォルダ構成
npxでインストールしたものとAPI用のphpフォルダを置いた状態で前提として進めます。“`
/.storybook
/stories
/php/
/api/
items.php
/package.json
“`## ローカル環境でPHPを使う場合
APIを取得するだけであればphpのビルドインサーバー使うのが楽だと思います。php -S 0.0.0.0:8000 -t ./php
0.0.0.0（localhost）
## storybookでproxyを使う方法
### 1. 【http-proxy-middleware】をインストールする
npm i http-proxy-middleware -D
### 2. storybookのconfigに【middleware.js】を置く
configのフォルダ(デフォルトだ
ワイニート 「ヤフージャパンのロゴ変えたろ」
## ヤフージャパンのトップを見つめるワイ
ワイ 「ヤフージャパンのロゴ変えたいな」
ワイ 「久々**Chrome拡張機能**でも書くか」
娘 「**ユーザスクリプト**書くのね」
娘 「**manifest.json**と**JavaScriptのファイル**が必要だね」“`manifest.json
{
“name”: “ヤフージャパンのロゴを変えてみる”,
“version”: “1.0.0”,
“manifest_version”: 2,
“description”: “ヤフージャパンのロゴを変えてみる”,
“content_scripts”: [
{
“matches”: [“https://www.yahoo.co.jp/”],
“js”: [“index.js”]
}
