技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

JavaScript

Nuxt3でvalidationする方法

Nuxt3でvalidationする方法 インストール npm i vee-validate @vee-validate/i18n @vee-validate/rules vee-validate -> veeValidate @vee-validate/i18n -> バリデーションエラーメッセージに日本語化 @vee-validate/rules -> バリデーションルールを利用す…

JavaScriptでディープコピーとシャローコピーについて

JavaScript(Vue.js)で実装している時に参照先のデータがうまく参照できないケースが発生しました。 そこで、データを参照する為ようのコピーを作成したのですが、その時にディープコピーとシャローコピーについて理解が出来ておらず詰まったのでそれぞれの違…

JSON.parse()とJSON.stringify()の違い

JSON.parse()とJSON.stringify()の違い JavaScriptのブラウザーでは組み込みの JSON オブジェクトが利用でき、それには以下の 2 つのメソッドが備わっています。 ■ parse(): JSON 文字列を引数に取り、それに対する JavaScript オブジェクトを返します。 ■ s…

フロントエンドの環境設定

フロントエンドの環境設定 概要 Babel : ES6 -> ES5への変換 Node.js : JSライブラリ管理 webpack: 1つにまとめる(読み込み速度UP) polyfill: 下位互換 vue-cli: 必要ソフトをパッケージ化 Npm ■ Npmとは Node.jsはJavaScriptを実行する環境です。 本来、Ja…

ESLintとPrettierの違いについて

ESLintとPrettierの違いについて ESLintとPrettierはどちらもソースコードの品質を高めるツールになります。 ESLint JavaScriptのための静的検証ツール ファイル内のバグチェックやコーディングスタイルの一貫性を保つ 例) letを使っているが再代入していな…

JavaScriptの引数について

呼び出し時の引数が多いとき 関数の仮引数に対して引数の個数が多い場合、あふれた引数は単純に無視されます。 function add(x, y) { return x + y; } add(1, 3); // => 4 add(1, 3, 5); // => 4 デフォルト引数 lhiroki1205.hatenablog.com 可変長引数 仮引…

JavaScritpの暗黙的型変換について

JavaScritpの暗黙的型変換について JavaScriptでは演算子による演算や関数の処理過程で暗黙的な型変換が行われます。 例 // 異なる型である場合に暗黙的な型変換が行われる console.log(1 == "1"); // => true console.log(0 == false); // => true console.…

非同期処理について

非同期処理について プログラムは実行すると、コードを上から順に1行ずつ実行していきますね。 その処理の1つに時間のかかる処理があると、その実行が完了するまで、次の行には進みません。 どんな時に困るのでしょうか? 例)サーバーと通信を行った際に、…

オブジェクト、プロパティ、メソッド

オブジェクト、プロパティ、メソッド オブジェクト -> データと機能をまとめたもの プロパティ -> オブジェクト内のデータ メソッド -> オブジェクト内の機能 例)niceGuyというオブジェクトを作る let niceGuy = { name: inoue playSoccer: function() {...…

RubyとJavaScriptの == と === の違い

Rubyの == と === の違い Rubyで等値を判断する為のメソッドで有名なのは以下の通り 1. equal? 2. == 3. eql? 4. === == ・同じデータ型で、かつ同じ値だったら、trueを返す ・値が同じであっても、データ型が異なればfalseを返す 1 == 1 => true 1 == "1" #…

confirmで確認してから削除する方法

confirmで確認してから削除する方法 ユーザーがリソースを削除するときに、「削除しても良いですか?」みたいな確認フェーズがある方がUXの観点で見ると良いと思われます。 これを実現するには単純でif confirm('削除しても良いですか?)でOKであれば削除、…

匿名関数とコールバック関数について

匿名関数について 関数は値として利用することが可能です。 function isTweetable(text) { return text.length < 140; }; 関数式に書き換え(関数を変数式に入れ込んだもの) const isTweetable = function(test) { return text.length < 140; }; こんな感じ…

関数について

関数とは? タスクや値計算を実行する分の集まり 関数には短縮記号が存在します。 例) const foo = { alert: function() {}, <-- 1 alert() {} <--2 } 1,2のどちらでもOK ■ 基本の書き方 function foo(仮引数){ // 処理 return 関数の返り値; } 返却する値…

ローカルストレージとセッションストレージとは?

データストレージとセッションストレージとは? Webストレージにはローカルストレージとセッションストレージを利用するケースがありますが。 よく内容を理解していなかったのでメモを残します。 先に結論 sessionStorage はセッション中(ページの再読み込…

命名規則(javascript)

class → UpperCamelCase 関数 → lowerCamelCase 変数 → lowerCamelCase or snake_case

イベントハンドラー一覧についてまとめられているサイト紹介

イベントハンドラー一覧についてまとめられているサイトです。 phpjavascriptroom.com

関数のデフォルト引数について

関数のデフォルト引数について ES6の関数のデフォルト引数について function makeAjaxRequest(url, method = 'GET') { return method; } function echo(x = "デフォルト値") { return x; } console.log(echo(1)); // => 1 console.log(echo()); // => "デフ…

constとletについて(Es6)

const constは定数なので、変わる予定のない物を変数に入れる letは変わる予定があるものを変数に入れる constで宣言した変数に違う値を入れようとするとエラーになる。 const name ='hiroki'; let title = 'hogehoge'; const => 再代入できない、再定義でき…

配列の便利メソッド(forEach, map, filter, find, everyとsome)

配列の便利メソッド JavaScriptでの配列で有名メソッド。 forEach map filter find every some reduce 従来の配列でのコードの書き方 var colors = ["red", "blue"] for( var i = 0; i < colors.length; i++) { console.log( colors[i]); } forEach forEach…

要素を追加する(insertBefore)

要素を追加する(insertBefore) 新しい要素をHTML文書に追加するにはinserBeforeメソッドを使用します。 例えば、createElemetnで作成した要素はまだどこにも所属していないので、そういう要素をinsertBeforeを使ってHTML要素に追加します。 var practice = d…

フォームの残り文字数を表示する方法をJavaScriptで実装

フォームの残り文字数を表示する方法をJavaScriptで実装 よく見る残り文字数は〇〇ですっていうやつをJSで実装する方法 実装方法 index.html . . <html lang="ja"> <head> <meta charset="UTF-8"> <title>ほげー</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <button id="button">お問い合わせ</button> <form action="" id="form"> <p></p></form></body></html>

JavaScriptの主要イベント一覧

JavaScriptの主要イベント一覧 ■ マウス操作 click -> 要素をクリックした時 dbclick -> 要素をダブルクリックした時 mouseout -> マウスポインタが要素上から出た時 mouseover -> マウスポインタが要素上に乗った時 mouseup -> マウスポインタを話した時 mo…

JavaScriptの主要イベント一覧

JavaScriptの主要イベント一覧 ■ マウス操作 click -> 要素をクリックした時 dbclick -> 要素をダブルクリックした時 mouseout -> マウスポインタが要素上から出た時 mouseover -> マウスポインタが要素上に乗った時 mouseup -> マウスポインタを話した時 mo…

繰り返し処理

繰り返し処理 javascriptの繰り返し方法を簡易備忘録 while while (year <= 2000) { 行いたい処理 } do ... while do { 行いたい処理 }while (year <= 2000) whileとdo ... whileの違いは? do ... whileは最低でも1回以上繰り返したい場合に使用。 do ... …

JavaScriptでじゃんけんゲームを作る2

[関数version]JavaScriptでじゃんけんゲームを作る2 lhiroki1205.hatenablog.com こちらで作成したじゃんけんゲームをJavaScriptの関数を使ってリファクタリングしたいと思います。 関数にする箇所 (自分)じゃんけんの手を入力する -> getHumHand関数に変…

JavaScriptでじゃんけんゲームを作る

JavaScriptでじゃんけんゲームを作る JavaScriptの条件分岐を活用してじゃんけんゲームを作成 じゃんけんゲームの仕組み (自分)じゃんけんの手を入力する (CP)CPのじゃんけんの手を取得 (自分)どちらが勝ったかの判定 (CP)結果を表示 めちゃシンプル…

JavaScriptの超基本文法

JavaScriptで扱うデータ型は7種類 文字列(String) -> ”Hello World 数値(Number) -> 100,152 真偽値(Boolean) -> true,falseの2値 シンボル(Symbol) -> インスタンスが固有で不変となるデータ null -> null値を意味する特殊キーワード undefined -> 値が未…