勉強したはずなのに早期リターンの書き方の方がいいよと指摘されたときにそれなんだっけってなったので（やばい）思い出しがてらメモです。リーダブルコードにも書いてあって勉強した気がしますが記憶が抹消されていました。 早期リターン（ガード節）とは メソッドなどで処理の終端に到達する前に、条件を満たしたときにはすぐにreturn や continue/break で抜ける方法です。 書き方 ageデータがある場合に年齢を判断して乳幼児、未成年、成人を返す関数があるとします。 function checkAge(age) { let result; if (age != null) { if (age == 0) { result = "乳幼児" } else if (age < 20) { result = "未成年" } else if (age >= 20) { result = "成人以上" } } else { result = "年齢情報なし" } return result } 正常系コードがネストの深い位置にあります。今回は簡単な例ですが、処理がもっとあった場合など、他の人が処理を追う時にパッとはわかりづらい。。。 　 早期リターンの書き方で書いてみましょう。 function checkAge(age) { if (age == null) { return "年齢情報なし" } if (age == 0) { return "乳幼児" } if (age < 20) { return "未成年" } if (age >= 20) { return "成人以上" } } スッキリかけました。どの場合になにを返すのかわかりやすいです。 また、nullの判定を最初に持ってきています。もっと細かい処理があったとしてもnullの場合は後述の判定をすることなくすぐに抜けることができるので余計なコードを読み込まなくなります。

初めに JavaScriptを学ぶ上でコーディングだけでなくメカニズムを学ぶ機会があったので備忘録 的な意味も込めて記事にした。 初学者ですので間違っているとこが多々あるかもしれません。 ブラウザとJavaScriptエンジン Webブラウザの種類 - Google Chrome（グーグルクローム） - Firefox（ファイヤーフォックス） - Microsoft Edge（マイクロソフト エッジ - Internet Explorer（インターネットエクスプローラー） - Safari JavaScriptエンジンってなに？... 説明: JavaScriptが実行されるエンジン(この機能の上でJavaScriptが動く) JavaScriptエンジンにも種類があり、Chromeの場合(V8)を採用している ブラウザ名 JSエンジン Google Chrome V8 Firefox SpiderMonkey Microsoft Edge 近年V8に移行 Internet Explorer 30 Safari JavaScriptCore この表から分かる通りV8が主要になりつつある WebブラウザとJavaScriptの関係性 ブラウザにはさまざまな機能がある User Interface Browser Engine Data Storage Rendering Engine JavaScript Engine Networking UI Backed JavaScriptエンジン上でECMAScriptとWebAPIsが提供されている 関係性 JavaScriptエンジン ECMA Script Web APIs DOM API WebRTC Fetch API XHR API etc V8はOSSとして提供されているため様々な環境でJavaScriptを動かすことができる 様々な環境で動かすことのできるJavaScriptをUniversal JavaScriptという ECMAScriptとは？？ JavaScriptの基本部分の仕様を決めているのがECMAScript。 JavaScriptはCommunications社によって開発されたが、開発当初はブラウザ間の互換性がなかった そこでjavaScriptの標準化が行われた。 JavaScriptの標準化が行われ基本となる使用がECMAScriptという名前で定められた。 JavaScriptではECMAScriptによる基本機能意外にブラウザに関連する機能が加えられている まとめ JavaScriptはJavaScriptエンジンによって動作する 主要のJavaScriptエンジンはV8と呼ばれる V8はOSSで様々な環境でJavaScriptを動かすことができる 様々な環境で動くJavaScriptをUniversal JavaScriptと呼ぶ ECMAScriptはJavaScriptを標準化するために作られた基本仕様のことである JavaScriptはECMAScriptによる基本機能の他ブラウザ関連の機能が加えられている 参考

発生した問題 vscodeで .js,.tsファイルを書いている際、以下の機能が不能になった。 定義ジャンプ マウスホバー時のポップアップ その他、programmatic-language-features 全般が効かない 解決方法 ESLint の拡張機能が下記の拡張機能を無効にしてしまうらしく、 拡張機能で @builtin typescript と検索し、TypeScript and JavaScript Language Features を有効にすると直った。 参考

今回はJavaScriptの『join( )』について丁寧に解説していきます。 今回も基本イメージについてサラッとと解説して、そこから具体的にコードでも解説して行こうと思います join( )とは？ まず先に注意点になりますが英語の「join」という単語に引っ張られすぎて単純に「何かが加わる」と捉えない方が理解しやすいかなと思います。 大事なpointとしては２点。 【point①: 配列を文字列に変換する】 ここが最重要です。『配列→文字列』に変わるんです！ イメージとしては『配列に丁寧に並べられた要素をぎゅぎゅっと詰めて1つにくっつける』でOKです 【point②: 1つにくっつける際、間に指定したものを挟める】 こちらは注意点で言及したようなjoinの意味から理解しやすい箇所かと思います。 何も指定しなければ要素がぎゅっと結合するとこを「:」や「-」や「,」で区切ったり改行もできたりします。その際『''』(クォーテーション)で囲う必要があるので注意! コードで解説 まずは配列を用意 const today = [2021, 10, 10]; この用意した配列にjoinでいろんな処理したものをconsole.logで表示させていきます。 ①何も入れない(空文字) console.log(today.join('')); // 20211010 　　　(このようにぎゅぎゅっと１つになります) ②「/」を入れる console.log(today.join('/')); // 2021/10/10 ③「空白(スペース)」を入れる console.log(today.join(' ')); // 2021 10 10 (①との違いに注意) ④「-」を入れる console.log(today.join('-')); // 2021-10-10 ⑤「,」を入れる console.log(today.join(',')); // 2021,10,10 //　ちなみに引数のデフォルトも ',' です //　なので引数に何も渡さなくても結果は同じ console.log(today.join()); // 2021,10,10 ⑥「\n」を入れる(改行させる) console.log(today.join('\n')); // 2021 // 10 // 10 ちなみに「\」は　option + ¥　です。 まとめ join()は①配列を文字列に変換する。その際にぎゅっとまとまるというイメージさえ掴めれば難しくないはずです。 今回の投稿も誰かの役に立つことを願っています

はじめに こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！ 今回はv-bindについてアウトプットしていきます！ V-bindとは v-baindとは要素に含まれる属性を動的に設定・変更することが出来る設定方法です。 オプションに指定したデータを、データバインディングすることでテキストが表示されます。 データバインディングとはデータと描画を同期する仕組みのことです。 書き方 基本的な書き方は以下のようになります。 <div id ="app"> <input type ="text" v-bind:value="message"> </div> Vue.js var app = new Vue({ el:'#app', data:{ message:'Hello vue.js!' } }) このように、inputのvalue属性にmessageプロパティをバインドすることで、上記のようにinputの入力欄にHello vue.js! と表示することができます。 ※属性にマスタッシュ構文は使用できません まとめ 属性へのデータバインディングでは、 ❌　マスタッシュ構文 {{ 〇〇〇〇〇〇 }}　 ではなく、 ⭕️　v-bind:value="〇〇〇〇〇〇" を使用しましょう！ 最後に 今回はv-bindについてアウトプットしました。 もし認識の仕方が間違っていましたら、コメント等頂けると幸いです。 今後ともQiitaにてアウトプットしていきます！

ECMA エクマと読む 情報通信分野の標準化を行う団体である 参考：ECMAとは ECMAScript ECMAが定義するJavaScriptに関する標準規格である。 標準規格とは言わば基準のことで「JavaScriptに関する動作はこれに従ってくださいね」と言うもの 各種ブラウザでJavaScriptが独自の動作をすることが問題となり、ECMAScriptが登場した模様 It is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers.　(Google翻訳：これは、さまざまなWebブラウザ間でWebページの相互運用性を確保することを目的としたJavaScript標準です) - ECMAScript 現在ECMAScriptのバージョンは下記のものがある Edition 略称 公開日 ECMAScript 1 ES1 1997年6月 ECMAScript 2 ES2 1998年6月 ECMAScript 3 ES3 1999年12月 ECMAScript 4 ES4 破棄 ECMAScript 5 ES5 2009年12月 ECMAScript 5.1 ES5.1 2011年6月 ECMAScript 2015 ES2015 / ES6 2015年6月 ECMAScript 2016 ES2016 / ES7 2016年6月 ECMAScript 2017 ES2017 / ES8 2017年6月 ECMAScript 2018 ES2018 / ES9 2018年6月 ECMAScript 2019 ES2019 / ES10 2019年6月 ECMAScript 2020 ES2020 / ES11 2020年6月 ECMAScript 2021 ES2021 / ES12 2021年6月 参考： JavaScriptとECMAScriptの違い ECMAScript ES6 上記表によると、ES6はECMAScript 2015の略称となる 各種ブラウザとECMAScriptについて 各種ブラウザとECMAScriptの対応状況については下記サイトが参考になる ECMAScript 6 compatibility table その他の用語 TC39 TC = Technical Committee = 専門委員会のこと TC39はECMAScriptを策定している委員会のことである ECMAは色々な技術に関する標準化を行っている。39番目の委員会がECMAScriptに関するもの TC39のgithub -> Ecma TC39 参考：TC39 ECMA-262 ECMAScriptの事 262はEcma Internationalでの管理番号 (参考：ECMA-262)

この記事について 本記事は、なにかの問題を解決するためのものではありません。 やりたいこと Chromeの開発者ツールから、入力欄（input[type="text"]）の値の一部を変更したい 具体的に 日付部分を20210201から20210301に変更したい ただし、日付の前に特定の番号（引数で指定する）がついている場合は変更しない 実行環境 OS: Windows10 ブラウザ: Google Chrome（94.0.4606.81） 実際に書いたコード Consoleで実行するJavaScriptはこう書いた。（実際は意図通りに動いてないので、以下は正しくないのですが…） 配列で取れる入力欄要素を、forEachでループさせる 関数の引数に指定した文字列の配列に対してループを回す 入力欄の値の中に引数の値が含まれているかチェックする 含まれている場合：何もしない。次のループに移る 含まれていない場合：入力欄の値に置換をかける 2つの配列をそれぞれ走査・値を比較、それに応じてAかBの処理をおこないたい.js const lastMonth = '0201'; const thisMonth = '0301'; ((...files) => { $$('input[type="text"]').forEach((el) => { for(let i = 0; files.length > i; i++) { if(((el.value).indexOf(files[i]) != -1)) { // 引数に指定した文字列が含まれていたら何もしない return; } else { el.value = (el.value).replace(lastMonth, thisMonth); } } }) })('131', '221'); 以下のHTMLに対して上記のJavaScriptを実行する index.html <table> <caption>テストテーブル</caption> <thead> <tr> <th>項目名</th> <th>入力欄</th> </tr> </thead> <tbody> <tr> <td>テスト</td> <td><input type='text' value='入力テスト'></td> </tr> <tr> <td>名前</td> <td><input type='text' value='2021/111_20210101.pdf'></td> </tr> <tr> <td>身長</td> <td><input type='text' value='2021/121_20210101.pdf'></td> </tr> <tr> <td>年齢</td> <td><input type='text' value='2021/131_20210201.pdf'></td> </tr> <tr> <td>好きなもの</td> <td><input type='text' value='2021/211_20210201.pdf'></td> </tr> <tr> <td>よく行くカフェ</td> <td><input type='text' value='2021/221_20210201.pdf'></td> </tr> </tbody> </table> 実際の結果 引数で指定した1つ目の文字が含まれる値のみ、置換されていない 2つ目に指定した文字が含まれる値は置換されている 想定していた結果 引数で指定した文字が含まれる入力欄は、すべて置換対象に入らない 想定通りにいかない原因 まず、今回出てくる配列2つを以下の名前に置き換える - 入力欄の配列：A - 引数で指定した文字の配列：B 先述のコードでは、チェックの部分が下記の挙動になる A配列の値それぞれにB配列の値をそれぞれ書いた通りの順番でチェックする 引数に311と331と指定すれば、1番目に311、2番目に331とのチェックがおこなわれる A配列の値に含まれる文字がB配列にあっても、順番次第で置換が発生する。結果としてうまくいかない うまくいくようにしたが関数を使うやり方に変えたい どうしても想定通りに動くようにしたくて、ifとelse ifをたくさん使うコードを書いた チェックしたい文字の数だけelseifを増やす方法.js const inp = $$('input[type="text"]'); const targets = ['131', '221']; inp.map((el) => { const val = el.value; if(val.indexOf(targets[0]) != -1) { return; } else if(val.indexOf(targets[1]) != -1) { return; } el.value = val.replace('0201', '0301'); }); これだと想定通りにはなるが、targetsに値を増やせば増やすほどelse ifも増やさないといけない。定例業務に使う書き捨てのコードだからこそもっとシンプルにしたい…。 行き詰まった まとめです。 「2つの配列をそれぞれ走査して、値を比較、それに応じてAかBの処理をおこなう」というコードを書きたいのですが、うまくいきませんでした。実装方法を思いつく未来が見えないので、ひとまずあがいた記録を残す意図でここに書きました。悔しい。。

この記事は、2021/10/10時点のTypeORMの仕様に依存します。 TypeORMのバージョンが違ったり、記事の公開から長い時間が経っている場合、正確ではない可能性があります。 typeorm: v0.2.38 翻訳元: migrations.md ライセンス: The MIT License 目次 マイグレーションとは マイグレーションを作成する マイグレーションを実行する マイグレーションを自動生成する コネクションオプション マイグレーションを記述するときに利用できるAPI マイグレーションとは 本番環境でもモデルの変更をデータベースに同期する必要があるわけですが、本番環境のデータベースにデータを入れた状態で、synchronize: trueを使うのは危険です。そこで、マイグレーションを使います。 マイグレーションの正体は普通のJSファイルで、SQLを使用してデータベースのスキーマを更新したり、既存のデータベースに変更を加えるというモノです。 では、すでにデータベースと、Postエンティティがあると仮定します。 import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm'; @Entity() export class Post { @PrimaryGeneratedColumn() id: number; @Column() title: string; @Column() text: string; } このエンティティは、数ヶ月の間、本番環境で特に何も変更を加えられていませんでした。そして、その間に数千件の投稿がデータベースに保存されていました。 この状態で、titleというカラム名をnameに変更する必要が出てきました。どうすれば良いでしょうか。 正解は、以下のSQLを実行するマイグレーションを新規作成すれば良いです。（PostgreSQLの例） ALTER TABLE "post" ALTER COLUMN "title" RENAME TO "name"; このSQLを実行すれば、データベースが更新されます。TypeORMはこのようなSQLを記述する 場所 を提供し、必要なときに実行できるようにします。この"場所"のことをマイグレーションと呼んでいます。 マイグレーションを作成する 事前にCLIのインストールが必要です。 マイグレーションを作成する前に、セットアップが必要です。 { "type": "mysql", "host": "localhost", "port": 3306, "username": "test", "password": "test", "database": "test", "entities": ["entity/*.js"], "migrationsTableName": "custom_migration_table", "migrations": ["migration/*.js"], "cli": { "migrationsDir": "migration" } } オプションの詳細は以下の通りです。 "migrationsTableName": "migrations" マイグレーションテーブルの名前をオプションのmigrations以外にする場合に指定します。 "migrations": ["migration/*.js"] マイグレーションの読み込み先のディレクトリを指定します。 "cli": { "migrationsDir": "migration" } CLIを利用して作成するマイグレーションの保存先ディレクトリを指定します。 セットアップが完了したら、CLIでマイグレーションを作成することができます。 typeorm migration:create -n PostRefactoring PostRefactoringというのがマイグレーションの名前を指していて、ここには好きな名前を指定することができます。このコマンドを実行すると、"migration"ディレクトリに{TIMESTAMP}-PostRefactoring.tsという形式のファイルが作成されます。{TIMESTAMP}の部分は、マイグレーションを作成した日時のタイムスタンプです。では、ファイルを開いて、SQLを書き込んでみましょう。 マイグレーションの中身は、以下のようになっているはずです。 import {MigrationInterface, QueryRunner} from "typeorm"; export class PostRefactoringTIMESTAMP implements MigrationInterface { async up(queryRunner: QueryRunner): Promise<void> { } async down(queryRunner: QueryRunner): Promise<void> { } } upとdownという二つのメソッドがあります。upはマイグレーションそのものを書くためのもので、downはupで行った変更を取り消すためのものです。 upもdownも、QueryRunnerオブジェクトを持っています。データベースに対する操作は、全てこのオブジェクトを介して行います。Query Runnerについてはこちらを参照してください。 Postを変更するマイグレーションは以下のようになります。 import {MigrationInterface, QueryRunner} from "typeorm"; export class PostRefactoringTIMESTAMP implements MigrationInterface { async up(queryRunner: QueryRunner): Promise<void> { await queryRunner.query(`ALTER TABLE "post" RENAME COLUMN "title" TO "name"`); } async down(queryRunner: QueryRunner): Promise<void> { await queryRunner.query(`ALTER TABLE "post" RENAME COLUMN "name" TO "title"`); // reverts things made in "up" method } } マイグレーションを実行する マイグレーションを作成したら、CLIコマンドで実行することができます。 typeorm migration:run typeorm migration:createかtypeorm migration:generateコマンドをoフラグを付けずに実行した場合、.tsファイルが生成されます。（詳しくは、Generating migrationsをご参照ください。）migration:runとmigration:revertコマンドでは、.jsファイルしか扱うことができません。従って、TypeScriptファイルは、マイグレーションの実行前にトランスパイルされている必要があります。他の方法としては、typeormをts-nodeと組み合わせて使用することで、.ts拡張子のマイグレーションファイルを実行することができます。 ts-nodeのサンプル ts-node --transpile-only ./node_modules/typeorm/cli.js migration:run ts-nodeのサンプル（node_modulesを参照しない場合） ts-node $(yarn bin typeorm) migration:run これらのコマンドは、保留中の全てのマイグレーションをタイムスタンプ順で実行します。言い換えると、作成したマイグレーションのupメソッド内に書いたSQLクエリが全て実行されるということです。これで、データベーススキーマを更新することができました。 マイグレーションを取り消すときは、以下のコマンドを実行します。 typeorm migration:revert このコマンドは、実行した中で最新のマイグレーションのdownを実行します。複数のマイグレーションを取り消す必要がある時は、このコマンドを複数回呼び出してください。 マイグレーションを自動生成する TypeORMでは、スキーマに対して行った変更から、自動的にマイグレーションを生成する機能があります。 titleカラムを持つPostエンティティがあったとして、titleをnameに変更した場合を想定しましょう。以下のコマンドを実行したとします。 typeorm migration:generate -n PostRefactoring すると、以下の内容を含む{TIMESTAMP}-PostRefactoring.tsの形式のファイルが自動生成されます。 import {MigrationInterface, QueryRunner} from "typeorm"; export class PostRefactoringTIMESTAMP implements MigrationInterface { async up(queryRunner: QueryRunner): Promise<void> { await queryRunner.query(`ALTER TABLE "post" ALTER COLUMN "title" RENAME TO "name"`); } async down(queryRunner: QueryRunner): Promise<void> { await queryRunner.query(`ALTER TABLE "post" ALTER COLUMN "name" RENAME TO "title"`); } } oフラグ（--outputJsのエイリアス）を使って、JavaScriptファイルを生成することもできます。TypeScriptのパッケージがインストールされていなくて、JavaScriptのみのプロジェクトの場合は便利です。その場合は、以下の内容を含んだ{TIMESTAMP}-PostRefactoring.jsファイルが生成されます。 const { MigrationInterface, QueryRunner } = require("typeorm"); module.exports = class PostRefactoringTIMESTAMP { async up(queryRunner) { await queryRunner.query(`ALTER TABLE "post" ALTER COLUMN "title" RENAME TO "name"`); } async down(queryRunner) { await queryRunner.query(`ALTER TABLE "post" ALTER COLUMN "title" RENAME TO "name"`); } } 自分でSQLクエリを書く必要がないというのは便利ですね。ただし、この方法では、モデルに変更を加えるたびにマイグレーションを生成してください。複数行のSQLクエリを含むマイグレーションを生成するには、pフラグ（--prettyのエイリアス）を使用してください。 コネクションオプション デフォルトではないコネクションに対してrunやrevertを実行する必要がある場合は、-cフラグ（--connectionのエイリアス）を使用して、コンフィグ名を引数として渡すことができます。 ここの説明はちょっと分かりにくいので、こっちを参照→Using ormconfig.json マイグレーションを記述するときに利用できるAPI APIを使ってデータベーススキーマを変更するときには、QueryRunnerを使用します。 サンプル import {MigrationInterface, QueryRunner, Table, TableIndex, TableColumn, TableForeignKey } from "typeorm"; export class QuestionRefactoringTIMESTAMP implements MigrationInterface { async up(queryRunner: QueryRunner): Promise<void> { await queryRunner.createTable(new Table({ name: "question", columns: [ { name: "id", type: "int", isPrimary: true }, { name: "name", type: "varchar", } ] }), true) await queryRunner.createIndex("question", new TableIndex({ name: "IDX_QUESTION_NAME", columnNames: ["name"] })); await queryRunner.createTable(new Table({ name: "answer", columns: [ { name: "id", type: "int", isPrimary: true }, { name: "name", type: "varchar", }, { name: 'created_at', type: 'timestamp', default: 'now()' } ] }), true); await queryRunner.addColumn("answer", new TableColumn({ name: "questionId", type: "int" })); await queryRunner.createForeignKey("answer", new TableForeignKey({ columnNames: ["questionId"], referencedColumnNames: ["id"], referencedTableName: "question", onDelete: "CASCADE" })); } async down(queryRunner: QueryRunner): Promise<void> { const table = await queryRunner.getTable("answer"); const foreignKey = table.foreignKeys.find(fk => fk.columnNames.indexOf("questionId") !== -1); await queryRunner.dropForeignKey("answer", foreignKey); await queryRunner.dropColumn("answer", "questionId"); await queryRunner.dropTable("answer"); await queryRunner.dropIndex("question", "IDX_QUESTION_NAME"); await queryRunner.dropTable("question"); } } マイグレーションを記述するときに利用できるAPI getDatabases(): Promise<string[]> 全てのデータベース名を取得。 getSchemas(database?: string): Promise<string[]> database - データベースが指定されると、そのデータベースのスキーマを返す 全てのスキーマ名を取得。SQLServerとPostgreSQLでのみ使用可能。 getTable(tableName: string): Promise<Table|undefined> tableName - 読み込むテーブル名 指定した名前のテーブルを読み込む。 getTables(tableNames: string[]): Promise<Table[]> tableNames - 読み込むテーブル名（複数） 指定した名前のテーブルを読み込む（複数）。 hasDatabase(database: string): Promise<boolean> database - チェックするデータベース名 指定した名前のデータベースが存在するかをチェックする。 hasSchema(schema: string): Promise<boolean> schema - チェックするスキーマ名 指定した名前のスキーマが存在するかチェックする。SQLServerとPostgreSQLでのみ使用可能。 hasTable(table: Table|string): Promise<boolean> table - テーブルのオブジェクト、もしくは名前 テーブルが存在しているかチェックする。 hasColumn(table: Table|string, columnName: string): Promise<boolean> table - テーブルのオブジェクト、もしくは名前 columnName - チェックするカラムの名前 テーブルに指定したカラムが存在するかチェックする。 createDatabase(database: string, ifNotExist?: boolean): Promise<void> database - データベース名 ifNotExist - すでにデータベースが存在したとき、trueが指定されていればスキップするが、そうでなければ例外が投げられる 新しいデータベースを作成する。 dropDatabase(database: string, ifExist?: boolean): Promise<void> database - データベース名 ifExist - データベースが存在しなかったとき、trueが指定されていればスキップするが、そうでなければ例外が投げられる データベースを削除する。 createSchema(schemaPath: string, ifNotExist?: boolean): Promise<void> schemaPath - スキーマ名。SQLServerではスキーマパスをパラメータとして渡せる。スキーマパスを渡した場合、指定されたデータベースにスキーマが作成される。 ifNotExist - すでにスキーマが存在したとき、trueが指定されていればスキップするが、そうでなければ例外が投げられる 新しいテーブルスキーマを作成する。 dropSchema(schemaPath: string, ifExist?: boolean, isCascade?: boolean): Promise<void> schemaPath - スキーマ名。SQLServerではスキーマパスをパラメータとして渡せる。スキーマパスを渡した場合、指定されたデータベースにスキーマが削除される。 ifExist - データベースが存在しなかったとき、trueが指定されていればスキップするが、そうでなければ例外が投げられる isCascade - trueが指定された場合、スキーマに含まれるオブジェクト（テーブルや関数）も削除される。PostgreSQLでのみ指定可能。 テーブルスキーマを削除する。 createTable(table: Table, ifNotExist?: boolean, createForeignKeys?: boolean, createIndices?: boolean): Promise<void> table - テーブルオブジェクト。 ifNotExist - すでにスキーマが存在したとき、trueが指定されていればスキップするが、そうでなければ例外が投げられる createForeignKeys - テーブル作成時に外部キーを作成するかどうか（デフォルトはtrue） createIndices - テーブル作成時にインデックスを作成するかどうか（デフォルトはtrue） テーブルを作成する。 以降はAPIの詳細が続くので、原文を参照してください。

useRefとは？ 要素の参照を行うためのフックで、DOMへのアクセスで利用される。 コンポーネント内で変数に値を保持させることができ、値が更新されても再レンダリングされないのが特徴です。 値を保持するという点ではuseState()と同じですが、useState()は値が更新された時に再レンダリングされるのでその点が異なっています。 コード例 useEffectによってレンダリングされるたびにconsole.logにレンダリングの文字が表示されるようにしています。 App.js import React, { useState, useRef, useEffect } from 'react'; const SampleUseRef = () => { const inputRef = useRef(null); const [text, setText] = useState(''); useEffect(() => { console.log('レンダリング'); }); const handleClick = () => { setText(inputRef.current.value); }; const inputReset = () => { setText(''); inputRef.current.value = ''; }; return ( <div> <input ref={inputRef} type='text' id='target' /> <button onClick={handleClick}>set text</button> <button onClick={inputReset}>reset</button> <p>text: { text }</p> </div> ); }; export default function App() { return ( <> <SampleUseRef /> </> ); }; buttonをクリックしてテキストを更新するとconsoleにレンダリングが表示されます。 useRef currentプロパティ 下記の記述はuseRef()オブジェクトの引数に0を指定しています。 const ref = useRef(0); これはref.currentの値に0をセットしていることになります。 なのでref.currentに対して変更することが可能です。 また、呼び出しもref.currentで可能です。

はじめに Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。 前回の記事 目的 変数についての理解を深める 本題 1.厳格な等価性と抽象的な等価性 厳格な等価性：a === b 抽象的な等価性： a == b 違いは型の比較をするかどうかにあります。 例① function printEquality(a,b){ // 厳格な等価性で比較　数値と文字列で不一致（false） console.log(a === b); // 抽象的な等価性　中身は一緒なので一致（ture） console.log(a == b); } //文字列 let a = "1"; // 数値 let b = 1; printEquality(a,b); 例② function printEquality(a,b){ // 厳格な等価性で比較　数値と文字列で不一致（false） console.log(a === b); // 抽象的な等価性　中身は一緒なので一致（ture） console.log(a == b); } //文字列 let a = "1"; //数値 let b = 1; // 　下記の場合厳格な等価性ではfalse(trueは型がBoolean) let c = true; printEquality(b,c) // もし暗黙的な型変換から厳格な等価性をするとtrueになる console.log ( b === Number(c)); 例③ function printEquality(a,b){ // 厳格な等価性で比較　数値と文字列で不一致（false） console.log(a === b); // 抽象的な等価性　中身は一緒なので一致（ture） console.log(a == b); // 下記の場合は厳格な等価性がfalse, 抽象的な等価性はtrue // 文字列と数値なので厳格にはfalse let e = ""; // Number("")とコンソールで出力すると0と出力されるので抽象的にはture let f = 0; printEquality(e,f); // nullやundifinedも0とみなしtrueで返す // 基本的には厳格な等価性を使うべき 2.falseyとtruethy falseになる値の例 false,null,undifined,NaN,0,0n,"" 上記以外はすべてtureになる // 0なのでfalseと等価 let a = 0; console.log(Boolean(a)); let b = "" console.log(Boolean(b)); let c = NaN; console.log(Boolean(c)); let d = 0n; console.log(Boolean(d)); // 上記はすべてコンソールでfalseとして出力される let e = parseInt(""); console.log(e); // 上記はparseIntで整数として定義しているが空文字は数字に置き換えられないので、 // 出力結果はNan(Not a Number)となる // よって下記の場合はfalseと出力される console.log(Boolean(e)); // 変数がfalseyかどうかif文で確認する // もしaを下記のif文にかけて実行するとfalseなので"bye"と出力される if(a){ console.log("hello"); } else { console.log("bye"); } 今日はここまで！ 参考にさせて頂いた記事 【JS】ガチで学びたい人のためのJavaScriptメカニズム

はじめに Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。 前回の記事 目的 変数についての理解を深める 本題 1.厳格な等価性と抽象的な等価性 厳格な等価性：a === b 抽象的な等価性： a == b 違いは型の比較をするかどうかにあります。 例① function printEquality(a,b){ // 厳格な等価性で比較　数値と文字列で不一致（false） console.log(a === b); // 抽象的な等価性　中身は一緒なので一致（ture） console.log(a == b); } //文字列 let a = "1"; // 数値 let b = 1; printEquality(a,b); 例② function printEquality(a,b){ // 厳格な等価性で比較　数値と文字列で不一致（false） console.log(a === b); // 抽象的な等価性　中身は一緒なので一致（ture） console.log(a == b); } //文字列 let a = "1"; //数値 let b = 1; // 　下記の場合厳格な等価性ではfalse(trueは型がBoolean) let c = true; printEquality(b,c) // もし暗黙的な型変換から厳格な等価性をするとtrueになる console.log ( b === Number(c)); 例③ function printEquality(a,b){ // 厳格な等価性で比較　数値と文字列で不一致（false） console.log(a === b); // 抽象的な等価性　中身は一緒なので一致（ture） console.log(a == b); // 下記の場合は厳格な等価性がfalse, 抽象的な等価性はtrue // 文字列と数値なので厳格にはfalse let e = ""; // Number("")とコンソールで出力すると0と出力されるので抽象的にはture let f = 0; printEquality(e,f); // nullやundifinedも0とみなしtrueで返す // 基本的には厳格な等価性を使うべき 2.falseyとtruethy falseになる値の例 false,null,undifined,NaN,0,0n,"" 上記以外はすべてtureになる // 0なのでfalseと等価 let a = 0; console.log(Boolean(a)); let b = "" console.log(Boolean(b)); let c = NaN; console.log(Boolean(c)); let d = 0n; console.log(Boolean(d)); // 上記はすべてコンソールでfalseとして出力される let e = parseInt(""); console.log(e); // 上記はparseIntで整数として定義しているが空文字は数字に置き換えられないので、 // 出力結果はNan(Not a Number)となる // よって下記の場合はfalseと出力される console.log(Boolean(e)); // 変数がfalseyかどうかif文で確認する // もしaを下記のif文にかけて実行するとfalseなので"bye"と出力される if(a){ console.log("hello"); } else { console.log("bye"); } 今日はここまで！ 参考にさせて頂いた記事 【JS】ガチで学びたい人のためのJavaScriptメカニズム

はじめに JavaScriptの処理を初めて記述した。さらに、addEventListener()と組み合わせて、タイマーをスタートして、状態が遷移したらタイマーを止めるという処理を作成した。今後も使うことがあると感じたため、メモを残したい。同じようなことをしたい方の参考になれば幸いである。 やりたいこと JavaScriptでサイトに挿入した動画が何割が再生されたかをリアルタイムで計算して出力したい。apiで動画が再生された、止まったなどの状態と長さ、現在の再生位置は取得できる。長さ、現在の再生位置から再生された割合を計算する。動画は画面の読み込み時に自動で再生される。 実現方法 addEventListenerとsetIntervalを用いた。タイマー処理を画面の読み込みと同時にスタートする。apiで動画の状態を取得し、動画の再生が完了していたら処理を停止する。今回は1秒ごとに再生された割合を表示をする。 処理の流れ 諸事情でイベント名や変数名は実際のものと異なるものでメモを書く。処理の流れのイメージが伝わればと思う。 ①タイマー処理を始める。 ratio = currentTime / TotalTime; //現在の再生位置 ÷ 全体の長さ。それぞれapiで取得 let timer = setInterval(console.log(ratio), 1000); ②動画の再生が完了したかを取得し、タイマー処理を取り消す //動画オブジェクト.addEventListner(動画の再生が完了されたイベント名, やりたいこと); video.addEventListner("done", function(){ clearInterval(timer); }) ひとこと 処理を始めるべきイベントを取得→タイマーを設定→タイマー処理→処理を終えるべきイベントを取得→完了という流れは今後も使いそうだと思った。「普通はこのように書く」や「より良い書き方はこうだ」みたいなのを見つけたら、改めて記事を書きたい。

JavaScript で Tweenアニメーションが扱えるライブラリを調べてみると、よく出てくるものがいくつかあります。 今回の記事では、調べてよく出てくるライブラリの中の1つである「anime.js」を使い、「p5.js」で Tweenアニメーションを試してみた、という話です。 他の Tweenアニメーション用JavaScriptライブラリと p5.js を組み合わせた事例 anime.js を試していく前に、他の Tweenアニメーションが扱えるライブラリと p5.js を組み合わせた事例が既にあるので、以下に記載してみます。 GSAP ●GSAP Basic - OpenProcessing 　https://openprocessing.org/sketch/1227453 こちらは GSAP というライブラリとの組み合わせです。 p5.js と組み合わせて使う場合の書き方は、以下のようになるようです。 var ball; function setup() { createCanvas(windowWidth, windowHeight); ball = { x: width / 8, y: height / 2, diameter: 10, col: color(31, 190, 190), } gsap.to(ball, { x: width - width / 8, y: height / 2, diameter: height / 4, col: color(255, 127, 31), duration: 3, delay: 1, ease: "expo.inOut", }); } function draw() { background(0); noStroke(); fill(ball.col); circle(ball.x, ball.y, ball.diameter); } p5.tween ●Milchreis/p5.tween: Tween library for P5.js 　https://github.com/Milchreis/p5.tween#-examples こちらは p5.js用のライブラリです。 上記のページ内に複数のサンプルが掲載されています。 anime.js を使う anime.js について 以下の公式ページの説明によると、anime.js は「軽量さと、シンプルでパワフルなAPI」を売りにしているライブラリのようです。 ●juliangarnier/anime: JavaScript animation engine 　https://github.com/juliangarnier/anime/ 公式ドキュメントを見てみると、Tweenアニメーション以外のアニメーションも利用できるようです。 p5.js と組み合わせて使う p5.js Web Editor での下準備 この記事では、オンライン開発・実行環境である「p5.js Web Editor」を使ってプログラムを作成してみます。 まずは p5.js Web Editor で anime.js が使えるようにするために、ライブラリを読み込ませます。 そのライブラリの読み込み元は、以下に書かれている CDN を用いることにします。 ●animejs - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers 　https://cdnjs.com/libraries/animejs この CDN の「anime.min.js」を、p5.js Web Editor の index.html のタグに記載します。 メインのプログラムを書いていく ここからは p5.js Web Editor の sketch.js を編集していきます。 まずは、冒頭で記載していた他のライブラリと p5.js を組み合わせた事例を参考に、animation.js でも似たようなことが行えそうか、animation.js の公式ドキュメントを見たりしつつ確認してみます。 以下の「TARGETS」の中の「JAVASCRIPT OBJECT」という部分を見てみると、上で掲載した GSAP の事例と似たような書き方ができそうです。 ●Documentation | anime.js 　https://animejs.com/documentation/#JSobject 上記の書き方を使って、実際に作ってみたプログラムは以下のとおりです。 let ball; function setup() { createCanvas(500, 500); ball = { x: 100, y: 100, diameter: 50, col: 100 }; anime({ targets: ball, x: 300, y: 250, diameter: 150, col: 200 col: 200, easing: "linear" }); } function draw() { background(0); noStroke(); fill(ball.col); circle(ball.x, ball.y, ball.diameter); } 実行してみると、うまく Tweenアニメーションが動きました。 おわりに 今回、p5.js と anime.js を組み合わせた Tweenアニメーションを試して、無事に動作させることができました。 実は、今回の anime.js との組み合わせを試す前に「p5.tween」・「GSAP」・「TweenJS」との組み合わせは試していました（以下の動画が試しに作ってみたもので、記事にはできてないのですが...）。 p5.js でイージングを使った 5つのボールがバウンドするアニメーション（p5.tween を利用） - YouTube p5.js で Tweenアニメーション・イージングを使ってとびはねながら画面を横切るボールの描画（ライブラリで GSAP を利用） - YouTube TweenJS と p5.js を組み合わせた Tweenアニメーション - YouTube それぞれ使い勝手やできることに違いがあるので、anime.js も含めて比較などを行っていければと思っています。