JavaScript

JavaScriptで配列の要素やハッシュ(連想配列)のバリューを変数に変換する方法

JavaScriptを使うときに、配列の要素の1つ1つをバラバラにして変数に渡したい、という場合がある。 let array = ["tarou", 19, "Japan"]; const name = array[0]; const age = array[1]; 上記のように書くのも良いが、配列の要素数が増えればその文だけコ…

JavaScriptでHTMLを表示・非表示の選択をしたい時の良い感じの書き方

JavaScriptでHTMLの表示・非表示を操作したい時には、今まで以下のように書いていた。 if(isDisplay) { let dom = `<div id="sample">hoge</div>`; } else { let dom = `<div id="sample" style="display:none;">hoge</div>`; } 上記は、isDisplayがtrueの時は表示して、falseの時は非表示にすると言うもの。上記のようにシンプル…

Nuxt.jsでnpm run devをした時に「SyntaxError: Invalid regular expression flags」というエラーが出た時の対処法

Nuxt.jsでローカルサーバーを立ち上げるためにnpm run devをした時に、「SyntaxError: Invalid regular expression flags」というエラーが出たので、この対処法を紹介していく。 開発環境 Nuxt 2.4.0 Node 8.9.4 Mac NodeのバージョンはNodeBrewで管理 具体…

jQueryの代替ライブラリとして「min.js」がオススメなので紹介する

jQuery不要論が出て久しいですが、趣味でWEBサイトを作っていると、Vue.jsを使うまでもないけど素のJavaScriptで書きたくない、かといってjQueryを使いたくない、という場合があります。 ボク自身もこのような状況にモヤモヤしていましたが、色々漁っている…

素のJavaScriptでappend,prepend,after,beforeが実装されていたので紹介する

すでに「jQueryはオワコン」と言われて久しく、僕自身もjQueryを使わずに素のJavaScriptでゴリゴリ書いていますが、たまにappendとかprependなどのjQueryのメソッドが使いたい時があります。 色々調べてみると、JavaScriptの方でappendとかprependを実装でき…

JavaScriptでファイルダウンロードを実現するための5ステップ

今回は、JavaScriptだけでファイルダウンロードを実現したので、その方法を紹介していくよ。 1,まずはHTMLを作成 まずは、ひな形となるhtmlファイルを作成する。今回はシンプルな構造でbodyにはaリンクのみ配置している。 <html lang="ja"> <head> <meta charset="utf-8"> <title>Download Sample</title> </head> <body> <a href="#" id="download">Click Me!</a> </body> </html> …

JavaScriptにおいてif文を一行で記述する方法

underscore/underscore.js at master · jashkenas/underscore 上記のコードを読んでいて「読みやすいな」と感動したので、if文を一行で完結に書く方法をまとめました。 if文を一行でかく方法 JavaScriptにおけるifの書き方は通常以下の書き方が考えられる。 …

JavaScriptのmap関数の使い方

JavaScriptのArray.prototype.mapは、配列の全ての要素に対して処理をしていき、その結果を新たな配列に返す関数。 var root = [1,4,9]; var array = root.map(Math.sqrt); console.log(root); // [1, 4, 9] console.log(array); // [1, 2, 3] また、自分でm…

オセロをMinMax法を導入する方法(JavaScript編)

JavaScriptでオセロを作っていて、そのオセロのCOMにMinMax法を導入したので方法を紹介。 ただし、コードは結構汚いです。 MinMax法とは? MinMax法とは、オセロや将棋等のゲームで、コンピュータがどのように考えて手を指すかと言う思考方法(アルゴリズム…

JavaScriptのsetTimeOut関数には戻り値があるよって言う話

色々調べてみると、JavaScriptのsetTimeOut関数には戻り値があることが分かったのでメモをしておきます。 setTimeOutの戻り値とは 「WindowOrWorkerGlobalScope.setTimeout() | MDN」の記事によると、setTimeOut()の戻り値はタイマーを識別する正の整数と分…

JavaScriptの配列で参照渡しではなく値渡しをする方法と注意点

Javascriptの配列において参照渡しではなく値渡しをする時に苦労したので、メモを書いておきます。 JavaScriptの配列で値渡しにする方法 JavaScriptの配列で値渡しにする方法は、主に以下の2つがある。 sliceメソッドを使う まずは、以下の様にsliceメソッ…

javaScriptにおけるfromCharCode()とcharCodeAt()の使い方

JavaScriptで文字列を扱う時にfromCharCode()とcharCodeAt()が便利だったので、まとめておきます。 fromCharCode()とcharCodeAt()の使い方 fromCharCode()は、ASCiiコードの番号を指定することで文字列を表示できるString.prototypeの関数で、charCodeAt()は…

JavaScriptのクロージャについて理解したのでまとめ

一度「クロージャを理解したぜ」と思ったが、デザインパターンを勉強する際に理解が乏しく引っかかる箇所が多かったので、再度入門。 JavaScriptのクロージャって何? クロージャとは、ローカル変数を参照している関数の中にある関数のこと。 これだけだと意…

Jqueryのクリックとかミスしたこととかのメモ

1、jQueryのクリック操作について 以前はjQueryのクリック操作において、以下の様にする癖があった。 linkAndRemoveButton.click(function(){ bookmarks.popup.removeBookmark(id,p); }); しかし、これだとnative jsで言うonclickのような処理になってしまい…