こんにちは、@yoheiMuneです。 担当プロジェクトでソースレビューをしていて、とある人が書いてきた掲題の件について始めて見た書き方で、とても良かったのでブログに書きたいと思います。 全角英数字→半角英数字をJavaScriptで書く JavaScriptの文字コードはUnicode（UTF-16）ですが、その文字コード表の特性を活かすことで、全角英数字を半角英数字に変換することができます。具体的には、 全角英数字の文字コードから「0xFEE0」（＝65248）を引くと半角英数字の文字コードになる という特性です。これをJavaScriptで実装すれば、全角→半角の変換を実現することができます。 具体的に実装してみると以下のような処理になります。 // 全角→半角に変換する（7行で実装できる） function zenkakuToHankaku(str) { var hankaku =
クロージャとは クロージャは、言葉で説明するのが大変難しい概念です。 あなたは、自転車の乗り方を、口だけで説明できるでしょうか？ あなたは、螺旋(らせん)の形を、言葉だけで説明できるでしょうか？ ずばり、できないでしょう。 しかし、自転車に乗ることはできますし、針金で螺旋の形を作ることはできるでしょう。 「クロージャ」もこれと同じです。 だから、Wikipediaのこんな解説を見ても落ち込まないでください。 クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決する関数のことである。 理解できないですよね？ 私もそうでした。 クロージャを既に知っている人にしか、この文章は理解できないでしょう。 クロージャを作るのは難しくない しかし、説明するのは難しくても、作るのは意外と簡単。それが
JavaScript (Node.js) で開発する上で避けては通れない 非同期処理、コールバックについて考えてみたい。 自分なりのお勧めの方式を書いてみた。 いろいろなものを試した結果である。 ※この記事でのお勧めの方法は ES2015 (ES6) で実装された generators (yield) の技術を使用しています。 実はまだ Babel(6to5) 等を利用するか Node.js v4～v8 でしか 実質的に使用できない技術だと思います。悪しからず。 (早く全てのブラウザに広く普及する事を祈っています) まだブラウザでは独自ライブラリか Promise (Deferred) 等を使っています。 ※2015/10/15: 記事の内容を npm aa (async-await) に対応させました。 ※2015/04/19: 記事の内容を npm co@4 に対応させました。 ※20
JavaScript で日付扱うライブラリ moment.js で日付型 Date のタイムゾーンを JST に変更するスニペットをご紹介します。 var currentDate = new Date(); var timezone = "Asia/Tokyo"; var currentDateJst = moment(currentDate).tz(timezone).format('YYYY/MM/DD HH:mm:ss'); 参考情報 Timezone Offset - Moment.js | Documentation
だれもが一度はひっかかったことがあるであろうこれ var hoge = function() { var str = arguments.join(','); console.log(str); }; hoge('a', 'b', 'c'); 実際に runstant で動かすと join は関数じゃないよ って エラーがでているのがわかるかと思います. [runstant] これは arugments は配列っぽいけど配列ではない為, 配列系のメソッドが使えずに起きるエラーです. ただ arguments に配列のメソッドを適応したいって場面はよくあると思うので その解決方法を紹介します. arguments を Array に変換 Array.prototype.slice.call に arguments を渡すことで 配列に変換することができます. var hoge = funct
たまに耳にする React を自分なりに少し調べてみたので、まとめがてらメモを残します。 ちなみに初めて React を知ったのは 天下一クライアントサイドJS MV*フレームワーク武道会でした。 Reactとは Facebook のチームが開発している、ユーザインタフェースを構築する為の JavaScript ライブラリです。公式ページ ⇒ http://facebook.github.io/react/ その特徴は（公式ページどおりですが）、 MVCの Viewのみ サポート なので恐らく 他のライブラリと容易に組み合わせ られる Virtual DOM (仮想DOM) 1方向 の Reactive バインディング Reactive .. きっと、(見えないところでシステムが)動的に View を更新する、という雰囲気でしょうか.. 公式ページを見ると、やり方によっては双方向にもできる
JavaScript のグローバル変数とグローバルオブジェクト Webブラウザ上では window はグローバル変数だ。 そのプロパティは全てグローバル変数だ。 この window というグローバル変数は特別なオブジェクトでグローバルオブジェクトと呼ばれる。 var a = []; for (var i in window) { if (window[i] === window) { a.push(i); } } console.log(a.join(', '));
こんにちは、@yoheiMuneです。 今日は、javaScriptのイベントの一つであるDOMContentLoadedイベントを学んだので、 それについてブログを書きたいと思います。 DOMContentLoadedイベントについて JavaScriptをページ初期表示時に実行する場合に、loadメソッドを使うことが多いかと思います。 （私はそうでした） window.addEventListener("load", function(){ // 初期表示時の処理を書く }, false); 初期表示時にJavaScriptを動かすなら、loadイベントとあまり考えずに使っていました。 けど、DOMContentLoadedイベントというものがあることを今日知りました。 DOMContentLoadedイベントは、HTML解釈終了時に呼び出されるイベント onloadイベントは、画像ロ
レスポンシブしてますか？ ネット上の「レスポンシブが簡単に実装できる」ネタでまともなものが一つもなく、ゴミみたいな情報をありがたがる奴が多すぎておじさんとしては違和感を覚える今日この頃です。 いや、言い過ぎた。 ネット上の記事を全て見てるわけではないので正しく導いてくれるステキな記事はあるはずです。 まぁこの記事もゴミの一つですけど… 今回は間接的にレスポンシブに関する話題 iOS, Android ブラウザでの portrait / landscape です。 以前に同じテーマの記事を投稿していて今読み返すと恥ずかしくて直視できない内容で本当に申し訳なく思います。 スマホ（タブレットもだけど）のportrait / landscapeを調べたい コンテンツ全体が成り行き（%指定）で仕上がっていればJavaScriptをワザワザ登場させるまでもありません。 しかし実コンテンツではなかなかそ
正規表現によるマッチング。location.hrefにmach()使ってドメイン部分を取り出す。 http://www.google.co.jp/ → www.google.co.jp http://example.com/ → example.com file:///D:/→ D http://localhost/hoge/index.html → localhost http://127.0.0.1:8000/ → 127.0.0.1 ※表示の都合上、全角の「？」が混じっているので注意 var str = "http://www.google.co.jp/"; var domain = str.match(/^[httpsfile]+:\/{2,3}([0-9a-z\.\-:]+?):？[0-9]*?\//i)[1]; alert(domain); 変数domainは配列になり、dom
最近iPad向けにcssアニメーションを頻繁に使う仕事をやった。 -webkit-transitionじゃなくて-webkit-keyframesで動かすタイプ。 アニメーションを開始するタイミング、終了するタイミング、ループするタイミングでイベントを登録できることを知ったのでメモ。便利。 //アニメーション開始時 //delayを指定していた場合は、遅れて開始するタイミングで発生するらしい elem.addEventListener('webkitAnimationStart', function(){ //開始時の処理 }); //jQueryなら $(elem).bind('webkitAnimationStart', function(){ //開始時の処理 }); //終了時 elem.addEventListener('webkitAnimationEnd', function
「そもそもオブジェクトをループで回したい場面なんてねぇよ！」 「潔く標準のメソッド使えよ！」といったツッコミを想定の上で書いております. ご承知の上でお読みください. フロー ふとオブジェクトをループで回したいってときに私がたどるフロー for in 使うか? いや keys で key 配列とってきて forEach で回したほうがカッコよくね？ obj.keys().forEach(...) ... あれ? エラー?? keys って Object の static メソッドかよ!! Object.keys(obj).forEach(...) これを今回は↓ forIn(...) 使お♪ で済ませちゃおうって tips です. よくやっちゃうダサいパターン for in でまわす. hasOwnProperty() 忘れがち. var human = { name: "phi", ag
Adobeのサポートデータベース関係のぐりもんを書いたり添削してもらったりした結果、新たに覚えたことがあるので、せっかくだからメモっておきます。 以下だらだらと続くけど、実はMozilla Developer Center見れば全部書いてあるので、そっち見たほうがいいと思います。 match - MDC exec - MDC String.matchとRegExp.exec String.matchとRegExp.execは、どちらも正規表現を使って文字列のマッチングを行うメソッド。 検索を行って、マッチした文字列を得たいときに使う。マッチするかどうか（と、マッチした位置）だけを調べたいときは、余分な処理をしないString.searchまたはRegExp.testを使ったほうが速い。 String.match(RegExp)とRegExp.exec(String)は、正規表現にgオプショ
クロージャは何の役に立つのか？ 前回の記事で、クロージャは「状態を保持する関数」であると書きました。 これを応用すると、いろいろ便利なことができます。 jQueryとクロージャは相性バツグン jQueryを使った経験があれば、誰でも下記のようなコードを書いたことがあるのではないでしょうか？ $('#btn').click(function(){ alert('hello'); }); ここで、clickメソッドに渡されているのは無名関数function(){...}です。 そう、無名関数と言えばクロージャの出番です！ クロージャの応用例：２回目にクリックすると警告が出るボタン ショッピングカートの「注文する」ボタンで、２重クリックすると２回決済されてしまうというサイトをたまに見かけます。 jQuery + クロージャを使うことで、これを防止してみましょう。 HTML <form name=
こんにちは。きんくまです。 スマホ向け、フルスクリーンコンテンツを作るときの個人的なメモです。 フルスクリーンの定義はいろいろとあると思いますが、 今回想定した条件は ・ウインドウに対して、コンテンツの高さが足りても足りなくてもよい（＝スクロールが発生してもしなくてもよい） ・横スクロールなし、縦スクロールのみ ・ヘッダーフッターメニューが画面に対してposition:fixedでついている といったものです。 作ってて、画面中央に何かを表示したいときの座標を求めるときに、正確な値を取得する方法がよくわからなかったので、やってみようと思いました。 ・ウインドウの幅・高さ ・コンテンツの幅・高さ がわかれば、中央ぞろえを計算することができます。 そのとき、どのプロパティがどういうものかを実際にデモを作って調べてみました。 検証用のhtml すんごく個人用なので、display:noneに書き
テストコードは以下。 パターン1 "hogehogehogehogehoge".replace(/h/g,"H"); "hogehogehogehogehoge".replace(/h/g,"H"); パターン2 var r=new RegExp(); r.compile("h","g"); "hogehogehogehogehoge".replace(r,"H"); "hogehogehogehogehoge".replace(r,"H"); パターン3 "hogehogehogehogehoge".replace(/h/g,"H"); "hogehogehogehogehoge".replace(/h/g,"H"); "hogehogehogehogehoge".replace(/h/g,"H"); "hogehogehogehogehoge".replace(/h/g,"H"); "
Javascriptでは、関数を定義するのに２通りのやり方があります。(注１) 関数を定義する方法その１ (普通のやり方) <script> function speak(){ alert("hello"); } speak(); // "hello"と出力 </script> はい、普通ですね。 次はJS特有のやり方です。 関数を定義する方法その２ (無名関数を使う) <script> var speak = function (){ alert("hello"); } speak(); // "hello"と出力 </script> ２行目に注目。 この式の右辺、function( ){...}の部分を無名関数といいます。 右辺で無名関数を生成して、それを変数speakに代入しています。 こうすると、変数speakはまるで関数のような振る舞いをします。（というか関数になります） spe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く