Web関連¶

asdf¶

asdf asdf自体のインストール¶

https://asdf-vm.com/guide/getting-started.html

asdf グローバルなバージョン指定¶

URL

1	`asdf global <lang-name> <version>`

asdf 自動でインストールするパッケージの設定¶

~/.default-npm-packagesに書き込めばよい
Pythonの場合は~/.default-python-packagesなどとすればよい

asdf 導入できる言語を調べる¶

URL

asdf plugin list all
asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git

asdf ある言語のインストールできるバージョンを調べる¶

asdf list all <lang-name>
asdf list nodejs

asdf 特定言語・特定バージョンのアンインストール¶

URL

asdf uninstall <lang-name> <version>
asdf uninstall nodejs 22.8.0

asdf 特定言語のバージョンの一覧¶

URL

asdf list <lang-name>
asdf list nodejs

asdf 特定言語のバージョンをインストール¶

URL

asdf install <lang-name> <version>
asdf install nodejs latest
asdf install nodejs 16.17.0
asdf install nodejs 18.12.0

asdf 特定ディレクトリでバージョン選択¶

コマンドasdf local nodejs 20.7.0を実行する
そのディレクトリにファイル.tool-versionsが置かれ, バージョンが指定される.
手動で.tool-versionsを作ってもよい.

asdf local <lang-name> <version>
asdf local nodejs 16.17.0
asdf local nodejs 20.7.0

Chrome¶

拡張機能が表示されない¶

参考: 対処2
ブラウザ画面の右上にある「拡張機能(パズルのピースのアイコン)」をクリック
表示された拡張機能の一覧から、表示したい拡張機能の「ピンマーク」をクリックして固定化

全体のスクリーンショットを撮る¶

参考
- 2022/05時点では少し違うUIになっているようなので注意する
手順
- デベロッパーツールを立ち上げる
- WindowsではCtrl+Shift+P, MacではCmd+Shift+Pを押す
- 入力欄でscreenshotと打つ
- 「フルサイズのスクリーンショットをキャプチャ」的な項目を選ぶ

Cloudflare¶

wrangler.toml¶

基本的にはコミット.
機密情報は次のように扱う
- 開発用：.dev.varsに格納
- 本番用：wrangler secret put <key>で設定

CSS¶

CSS CSS道場的な何か¶

CSS `style`タグでHTMLに直接指定¶

    <style>
      body {
        background-color: #00ff00
      }
    </style>

CSS アプリのようにフッタを画面下部に張り付ける¶

URL

#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   z-index: 99;
   backgroundColor: white;
}

CSS 外部ファイルの読み込み¶

1	`<link rel="stylesheet" href="https://cdn.simplecss.org/simple-v1.css">`

CSS 長い文を途中で切る¶

.shortcut {
    width: 300px; /* 要素の横幅を指定 */
    white-space: nowrap; /* 横幅のMAXに達しても改行しない */
    overflow: hidden; /* ハミ出した部分を隠す */
    text-overflow: ellipsis; /* 「…」と省略 */
}

CSS ブロック要素を中心に置く¶

1	`margin: auto`

Drizzle ORM¶

厳禁パターン：`drizzle-kit push && drizzle-kit migrate`¶

drizzle-kit pushでschema.tsの内容を作ってしまう
マイグレーションでスキーマ投入があるとエラーになる.

結論：テーブル生成+マイグレーション¶

テーブル生成は別途コマンドで実行する必要がある. D1(SQLite)を前提にする.

pnpm前提で, プロジェクトルートのpackage.jsonから, プロジェクトルートの.wrangler-persist/v3/d1にID = local-dbのSQLiteファイルを生成するとする.

mkdir -p .wrangler-persist/v3/d1
touch .wrangler-persist/v3/d1/local-db.sqlite
drizzle-kit migrate

mkdir -p .wrangler-persist/v3/d1
touch .wrangler-persist/v3/d1/local-db.sqlite
pnpm db:migrate

drizzle-kitを実行するときに--config=./drizzle.config.tsを指定する必要がありうる.

スキーマからマイグレーションファイル生成¶

drizzle-kitを実行するときに--config=./drizzle.config.tsを指定する必要がありうる.

1	`drizzle-kit migrate`

データベースの状態確認（Drizzle Studio）¶

1	`drizzle-kit studio --config=./drizzle.config.ts`

JavaScript/TypeScript¶

asdf¶

asdf専用の項を参照.

axios CSRF token mismatch¶

参考
特にLaravelのサーバーが提供するAPIを叩いたときにエラーでこれが出たとき
Laravel側に設定を追記してみよう
app/Http/Middleware/VerifyCsrfToken.phpに次のように追記

protected $except = [
        '/api/*'
];

CORSエラー時の対処¶

URL
基本的にはバックエンドの設定

JavaScript: シャローコピーはスプレッド構文で¶

constoriginal={a:1,b:2,c:3};
const copy = { ...original };
console.log(copy);            // { a: 1, b: 2, c: 3 }
console.log(copy===original); // false

JavaScript: ディープコピー¶

プロパティにDateオブジェクトや関数, undefinedなどがない場合はJSON.stringify()で書ける
一般にはLodashなどライブラリを使う

const patty = {
  name: 'Patty Rabbit',
  email: 'patty@maple.town',
  address: { town: 'Maple Town' },
};
const rolley = JSON.parse(JSON.stringify(patty));
rolley.name = 'Rolley Cocker';
rolley.email = 'rolley@palm.town';
rolley.address.town = 'Palm Town';
console.log(patty);

//{
// name:'PattyRabbit',
// email:'patty@maple.town',
// address:{town:'MapleTown'}
//}

JavaScript: 配列に対する`range`, 反復処理¶

> [...Array(3)]
[ undefined, undefined, undefined ]

> [...Array(3)].map((_, n) => { console.log(`${n + 1} times`); });
1 times
2 times
3 times

> [...Array(3).keys()]
[0,1,2]

> [...Array(3).keys()].map((n) => { console.log(`${n + 1} times`); });
1 times
2 times
3 times

KaTeX: 導入¶

KaTeXへのマクロ導入¶

URL
\\gdefを使えばよい

TypeScript 関数型¶

URL

// type 型の名前 = (引数名: 引数の型) => 戻り値の型;
type Increment = (num: number) => number;

TypeScript 絶対パスでインポート¶

tsconfig.jsonで次のように指定すると@/path/toで指定できる

  "compilerOptions": {
    "rootDir": "./src", // 必要に応じて設定
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  }

Heroku¶

Heroku デプロイの参考¶

yarn create nx-workspace --package-manager=yarn nx-fullstack
nx generate @nrwl/node:application api

yarn nx run-many --target=serve --projects=nx-fullstack,api --parallel=true

"build": "yarn nx run-many --target=build --projects=nx-fullstack,api --parallel=true"

"start": "node dist/apps/api/main.js"

heroku login
heroku create

web: yarn start

git push heroku master

heroku open

Heroku バックエンドの設定¶

heroku create -a ys-jssamples-api
heroku config:set -a ys-jssamples-api PORT=80
heroku buildpacks:add -a ys-jssamples-api heroku/nodejs

HTML¶

PDFをHTMLに埋め込む方法¶

いろいろありますが Google Document の URL で PDF を埋め込むのが便利です.

<iframe
src="http://docs.google.com/gview?url=http://www.soumu.go.jp/main_sosiki/joho_tsusin/top/ninshou-law/pdf/law_1.pdf&embedded=true"
style="width:100%; height:80vh;" frameborder="0">
</iframe>

ここで ?url= の指定を適当な URL に変えると PDF が埋め込めます.

ngrok¶

ngrok CORS設定¶

参考
フロント・バックエンドともに設定が必要.
フロントエンドで次のように設定する:
- axios前提の設定.
- 他のライブラリやAPIでも同じように設定すればよいはず.

import axios from "axios";
axios.defaults.baseURL = process.env.NEXT_PUBLIC_SERVER_URI;
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
axios.defaults.withCredentials = true;

バックエンドで次のように設定する: 例はexpress.

import * as cors from "cors";
const app = express();
app.use(cors({
  origin: true,             // 許可するフロントエンド側のURL設定
  credentials: true,        // レスポンスヘッダーにAccess-Control-Allow-Credentials追加
  optionsSuccessStatus: 200 // レスポンスstatusを200に設定
}));

ngrok 開発中のローカルのサーバーをhttp/httpsで公開できる¶

URL

1	`ngrok http <port> --region ap`

ngrok 設定ファイル置場確認¶

次のコマンドを実行するとアップグレードとともに設定ファイルの場所がわかる
2022/7時点でMacだとホーム直下には作られないので注意しよう

1	`ngrok config upgrade`

Zoom 他の人も画面共有できるようにする¶

cf. URL
ミーティング中はメニューの「セキュリティ」から「画面共有」にチェックを入れる

フォント¶

Windows 8.1以降とOS X Mavericks（10.9）以降: 「游ゴシック体」と「游明朝体」が共通で収録
Noto Sans（源ノ角ゴシック）: 日中韓3か国語に対応したオープンソースフォント

Web関連¶

asdf¶

asdf asdf自体のインストール¶

asdf グローバルなバージョン指定¶

asdf 自動でインストールするパッケージの設定¶

asdf 導入できる言語を調べる¶

asdf ある言語のインストールできるバージョンを調べる¶

asdf 特定言語・特定バージョンのアンインストール¶

asdf 特定言語のバージョンの一覧¶

asdf 特定言語のバージョンをインストール¶

asdf 特定ディレクトリでバージョン選択¶

Chrome¶

拡張機能が表示されない¶

全体のスクリーンショットを撮る¶

Cloudflare¶

wrangler.toml¶

CSS¶

CSS CSS道場的な何か¶

CSS styleタグでHTMLに直接指定¶

CSS アプリのようにフッタを画面下部に張り付ける¶

CSS 外部ファイルの読み込み¶

CSS 長い文を途中で切る¶

CSS ブロック要素を中心に置く¶

Drizzle ORM¶

厳禁パターン：drizzle-kit push && drizzle-kit migrate¶

結論：テーブル生成+マイグレーション¶

スキーマからマイグレーションファイル生成¶

データベースの状態確認（Drizzle Studio）¶

JavaScript/TypeScript¶

asdf¶

axios CSRF token mismatch¶

CORSエラー時の対処¶

JavaScript: シャローコピーはスプレッド構文で¶

JavaScript: ディープコピー¶

JavaScript: 配列に対するrange, 反復処理¶

KaTeX: 導入¶

KaTeXへのマクロ導入¶

TypeScript 関数型¶

TypeScript 絶対パスでインポート¶

Heroku¶

Heroku デプロイの参考¶

Heroku バックエンドの設定¶

HTML¶

PDFをHTMLに埋め込む方法¶

ngrok¶

ngrok CORS設定¶

ngrok 開発中のローカルのサーバーをhttp/httpsで公開できる¶

ngrok 設定ファイル置場確認¶

Zoom 他の人も画面共有できるようにする¶

フォント¶

CSS `style`タグでHTMLに直接指定¶

厳禁パターン：`drizzle-kit push && drizzle-kit migrate`¶

JavaScript: 配列に対する`range`, 反復処理¶