数字、アルファベット、カタカナの全角半角変換は、JavaScriptで簡単に実現できます。今日はその実装方法をブログに書きたいと思います。 目次 全角 → 半角（英数字） function hankaku2Zenkaku(str) { return str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 0xFEE0); }); } // 使用例 hankaku2Zenkaku('１２３ａｂＣ'); // '123abC' 文字コード上で、全角英数字から65248引くと半角英数字になります。 また、処理範囲を正規表現で[Ａ-Ｚａ-ｚ０-９]と指定していますが、例えば[０-９]とすれば、変換対象を全角数字に限定できます。 半角 → 全角（英数字） function zenka

こんにちは、@yoheiMuneです。 数値を3桁カンマ区切りにしたいという要件を、JavaScriptでどのように実現するのかについて、ブログに書きたいと思います。 目次 解決したいこと 「数字は3桁カンマ区切りで表示したいんだよね〜」と言われた時に、サクッと対応できる方法をお伝えしたいと思います。 方法1：toLocaleString()を利用 実装方法 もっとも簡単に対応するなら、toLocaleString()関数を使うと便利です。数値型の変数に利用できます。 var num = 12345; num.toLocaleString(); // "12,345" toLocaleString()はロケール（=言語、国、地域、などを表現する、例：ja）に合わせた数値表現を行うためのメソッドです。ロケールによって表示が異なりますが、日本語や英語の場合には3桁カンマ区切りとなります。 ブラ

こんにちは、@yoheiMuneです。 JavaScriptで日付を扱う際に、数行コードを書けば、任意の日付を取得できます。今日はその実装方法をブログに書きたいと思います。 目次 解決したいこと JavaScriptを用いて、今日、明日、昨日、月末、月初、などの任意日付を取得したいけど実装方法が分からない、という悩みを解決したいと思います。LP制作やアプリ制作で日付を扱いたいこともしばしば。そんな時に役立てたらと思います。 本日を取得する JavaScriptで日付を扱う場合、Dateクラスを利用します。Dateクラスのインスタンスを作成すると、現在日時を取得できます。そこから、本日を取得します。 // Dateクラスのインスタンスを作成. var now = new Date(); // 本日を取得する. var todayString = now.getFullYear() + '年'

こんにちは、@yoheiMuneです。 最近のお仕事で、iframe内のコンテンツの高さを取得する機会があったので、実装方法をブログに書きたいと思います。 何をしたいのか iframe内のコンテンツの高さを取得して、その高さをiframeタグ自体に設定したい、ということで実装しました。今回の案件では、iframe内のコンテンツの高さがブラウザの横幅によって変わるため、iframeタグの高さをCSSなど固定値で指定することができず、JavaScriptでページ表示時に動的に設定することにしました。 なお今回の実装は、iframe内のコンテンツが、サイトと同一ドメインであることを想定しています。別サイトの場合にはセキュリティ制約により、JavaScriptからiframe内にアクセスできません。 実際の実装は以下の通りです。iframe内の高さを取得し、その高さをiframeタグに設定していま

こんにちは、@yoheiMuneです。 サーバーとのAPI連携を実装していると、APIでのやりとりではスネークケース（例：user_name）を使い、JavaScript内の変数ではキャメルケース（例：userName）を使うことが多くあります。その際の変換を行う処理を、ブログに書いておきたいと思います。 目次 スネークケース → キャメルケース（文字列） スネークケースからキャメルケースに変換する場合、以下の関数を使うと実現できます。 // スネークケースからキャメルケースに変換（文字列）. function toCamelCase(str) { return str.split('_').map(function(word,index){ if (index === 0) { return word.toLowerCase(); } return word.charAt(0).toUp

こんにちは、@yoheiMuneです。 JavaScriptで日付を扱う場合に、デフォルトではDateクラスくらいしかなくて使いづらい。その問題を解消するライブラリはいくつか存在しますが、その中でMoment.jsが非常に使いやすいので、今日はその使い方をブログに書きたいと思います。 目次 はじめに 本記事は、moment.jsを用いた日付処理について記述しています。ライブラリを用いない日付処理については「[JavaScript] 今日、明日、昨日、月末、月初などを取得する」でブログを書いたので、もし良ければご参考ください。 Moment.jsとは Moment.jsは、Javascriptで日付を扱うためのライブラリです。文字列からパースしたり、月末月初を求める演算ができたり、任意のフォーマットで出力できたり、と様々な機能があります。日付の演算やパース処理をする際には、必ず使いたいライブ

こんにちは、@yoheiMuneです。 今日はTips的な話ですが、hexで定義されたカラーコード（例：#FF00FF）を、rgbaカラーコード（例：rgba(255, 0, 255, 1)）に変換するための、JavaScriptコードを書く機会があったのでブログにも残したいと思います。 目次 やりたかったこと 外部から指定されるカラーコードがhex定義（例：FF0000）なのですが、それを元に背景色を指定したい、それも透過で指定したいという要件でした。そのためにhexからrgbaに変換するためのコードを実装した次第です。 hexからrgbaに変換するコード 実際には、以下のようなコードで実装することができました。 /** * hexカラーコード定義をrgbaに変換する. */ function hex2rgba (hex, alpha = 1) { // ロングバージョンの場合（例：#F

こんにちは、@yoheiMuneです。 今日はinputのfileタグで、ディレクトリを選択したり、その情報をJSで読み取ったりする方法をブログに書きたいと思います。 目次 inputのfileタグでディレクトリを指定可能にする 2017年2月現在ChromeとFirefox（バージョン50以上）で、<input type="file"/>でディレクトリ選択をすることができます。具体的には以下のようにwebkitdirectory属性を追加します。 <input id="file" type="file" name="upfile[]" webkitdirectory> これだけでディレクトリ選択ができるようになります、すごいですね。 Javascriptで内容を読み取る ディレクトリでファイル選択されたものは、以下のようにJSから読み取ることができます。 document.getElem

こんにちは、@yoheiMuneです。 Javascriptでもユニコードは大変ですね。今日は絵文字などユニコードが含まれた文字の文字数を正しく取得する方法をブログに書きたいと思います。 目次 String.prototype.lengthでは正しく取得できない 文字数を取得するには、"aaa".lengthのようにlength関数を使いますが、絵文字などの2文字で1文字を表すサロゲートペア（Surrogate Pair）では意図せず2文字とカウントされてしまいます（サロゲートペアについてはMixiのエンジニアブログでわかりやすく解説されています）。 // アルファベットはOK "aaa".length // => 3 // 日本語も基本的にOK "あああ".length // => 3 // 絵文字（ユニコード）は「2」となる "🌋".length // => 2 困ったぞという話です

こんにちは、@yoheiMuneです。 人のコードを見ていて初めて知ったのですが、jQueryにはhoverイベントがあるんですね。なかなか便利だったので今日はそれについてブログを書きたいと思います。 目次 jQueryのホバーイベント jQueryのホバーイベントは、以下のように利用することができます。 $(element).hover(hoverInの処理, hoveroutの処理); 例えば以下のような実装が可能です。 HTML <div id="myBox" style="display:inline-block; border:1px solid red; padding: 10px; background:yellow;"> <div style="width:100px; height:100px; background:blue;"></div> </div> // hov

こんにちは、@yoheiMuneです。 Function.prototype.bindの第2引数以降を使うと、conclickなどに任意の値を渡せるんですね。便利だったのでブログに書いておきたいと思います。 目次 bindの第2引数以降を使って任意の値を関数に渡す 通常、呼び出す関数のthisを指定するために使うことが多いbindですが、以下のように実装すると、onclickなどのイベントハンドラーで関数に任意の値を渡すことができます。 // なんらかの値 var user = { id : 1, name : 'Yohei'}; // コールバック関数 // userを引数で渡すことができます。 function handleClick(user, e) { alert('選択されました：' + JSON.stringify(user)); } // onclickを指定する var b

こんにちは、@yoheiMuneです。 XMLHttpRequestに変わる次のAjax仕様としてfetchが策定されていますが、今日はそれを扱ったAjax通信をブログに書きたいと思います。 目次 fetchとは fetchとはwhatwgで策定されている、フロントエンドJavaScriptの次世代の非同期通信の規格で、XMLHttpRequestに取って代わるものです。例えば以下のような使い方ができます。 fetch('/user/1').then(response => { console.log(response.status); // 200 return response.json(); }).then(json => { console.log('json:', json); // json : { name : 'Yohei' } }); XMLHttpRequestに比べて

こんにちは、@yoheiMuneです。 今日はNodeJSやフロントJSで利用可能な、EventEmitterを使った、イベント駆動な実装方法をブログに書きたいと思います。 目次 本記事を試すための環境 この記事の内容は、nodejsで動作します。新し目のバージョンでお試しください（僕の環境ではv6.2.2で動作確認しています）。 また、BabelでフロントエンドビルドやWebpackでフロントエンドビルドを使えば、フロントエンドでもEventEmitterを利用可能です（いくつかのプロジェクトで利用されているのを見かけたことがあります）。 EventEmitterとは EventEmitterは直訳の通り、イベントを発火することができる機能で、主に「イベントを発火する人」と「イベントを受け取る人」の大きく2つに使い方が分かれます。具体的には、 イベントを発火する人 関数名 説明 という感

こんにちは、@yoheiMuneです。 今日はWebページで色々と編集した内容について、Javascriptを用いてその内容を動的にダウンロードする方法をブログに書きたいと思います。 目次 デモ こんな感じです。以下のテキストエリア内に書いた内容について、ボタンを押すとテキストファイルとしてダウンロードすることができます。 テキストファイルとしてダウンロードする Javascriptから動的にダウンロードする実装方法 上記の実装は以下のように行うことができます。 HTML <textarea id="content"></textarea><br> <button id="download">テキストファイルとしてダウンロードする</button> Javascript // クリック時の動作を指定する var btn = document.getElementById('download

こんにちは、@yoheiMuneです。 最近はES6で書かれたライブラリも増えてきましたね。そんな中、...valsのような表記を目にすることもあるのではないでしょうか？今日はその...についてブログを書きたいと思います。使いこなせると便利です。 ※注：Spread Operatorの翻訳でスプレッド演算子と訳されているので本記事でもそれに従っていますが、演算子と言っていいのかは少し謎です。 目次 実際に試すには 本記事のコードはNode.jsで動作します。最新のNodeJSを準備して試してみてください。 # 今回のファイル名は「spread_operator.js」とします. $ node spread_operator.js また、ブラウザで利用する場合にはBabelによるコンパイルが必要です。Babelの使い方などは「次世代JavaScriptのコンパイラ、Babelに入門」を参照し

こんにちは、@yoheiMuneです。 今日は、生成するたびに変化する迷路をJavaScriptで作ってみたいと思います。 完成版はこちらです 今回作成した迷路は、以下のGithubにアップしています。気になった方はご参照いただけたら幸いです。 ソースコード - maze.html - maze1.js サンプルアプリケーション http://yoheim.net/work/01_maze/maze.php 迷路の作り方 迷路の作り方はいろいろとあるみたいですが、今回は比較的簡単な「棒倒し」というアルゴリズムでの迷路作成を行いました。 棒倒しの考え方については以下のサイトがわかりやすかったので、そちらをご参照ください。 - 迷路自動生成アルゴリズム 迷路の作り方（JavaScript編） 上記の内容をHTMLとJSで表現したいと思います。JavaScriptについては150行もないくらいで