JavaScriptはブラウザから簡単に使えるし、jQuery Pluginも簡単に追加できるので、つい基礎をおろそかにしたまま使っていて、ちょっと凝ったことをしようとした時にいつもハマっていました。ということで今回は、独習JavaScriptの第二版を購入して読み進めつつ、ネットのお勧めのドキュメントを見て、補足しながら勉強していったのでそのメモです。 (03/09 21:50) JavaScriptの習熟度を上げるための勉強フローを追加 🍄 [動画] ドットインストールJavaScript入門 JavaScriptを本当に使ったことがない初学者の方にお勧めしたいのがドットインストールの動画。説明が環境構築からスタートしてくれるので、つまずことなく最初の一歩を踏み出すことができます。 😸 [Web] JavaScript基礎文法最速マスタ 『JavaScript基礎文法最速マスター』
JavaScriptを使ってアニメーションを書くときに有用なテクニックの、基本中の基本をご紹介します。おそらく、このブログを見ている人のほとんどにとっては釈迦に説法だと思います。今回、requestAnimationFrameの話すらしません。その点、ご留意ください。 まず、JavaScriptでアニメーションをする場合に気をつけないといけないのが、一度JavaScriptの実行（Context）を抜けないとブラウザに描画が反映されないということです。簡単に言うと、 <html><head><title>bad sample</title><script> onload = function() { var e = document.getElementById("e"); for(var i = 0; i <= 100; i += 5) { e.style.left = e.style.
こんにちは。ミクシィUX統括部にて、mixi Touchの開発を担当しております戸高です。 JavaScriptでの開発を行う事が多いのですが、iOSのブラウザ（Mobile Safari）のfocusの挙動について少しクセがあり、 調べてみましたので、お知らせいたします。 通常、<textarea>や<input type=”text”>等のフォーム要素に対して、フォーカスを与えたい場合、focus()メソッドを使用します。 iOSのブラウザ（以下、Mobile Safari）にて、以下のコードを実行してみます。 （分かりやすい様にjQueryを使用させて頂きました） なお、検証端末にはiPhone4S iOS5.0(9A334)を使用しています。 HTML <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” con
Bower入門 これから Bower について書いてきます。Bowerの使い方から実際に使う上で考慮することまで含めて書きます。 長くなりそうなので単に使うだけの基礎編とモジュールを作る上で気をつけることをまとめた応用編に分けて書きます。 Bower とは Twitter社が作ったフロントエンド用のパッケージマネージャです。 Java で言う Maven、 Ruby で言う gem、 Perl で言う cpan のようなものです。 Node.jsには npm と呼ばれるパッケージマネージャがありますが、それに強く影響を受けています。 パッケージマネージャを利用することでライブラリを自分で管理する必要がなくなり、管理するファイルの数を減らすことができます。 また、パッケージマネージャを利用することでライブラリのバージョン管理をしやすくなります。 さらに自分のライブラリを Bower comp
既に LEAP Motion を手に入れている人にはお馴染みかと思いますが、 JavaScript だけで、LEAP Motion を使いブラウザを操作することが可能です。 実際にChrome拡張で実装してみました (ε・◇・)з o O ( 未来キタ
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
日頃からJavascriptで開発をしているのにも関わらずあまりテストを書かないので、ここは本格的にテストを書こうと調べてみました。JavascriptのテストフレームワークといったらJsUnitなのかなーと思っていたが、調べてみると結構いろんな種類のテストフレームワークがあったりして、その中で得に人気なのかどうやらJasmineらしい。 Jasmine ～ JavaScript Test フレームワーク より引用: 今回は, JavaScript のテストを行うためのフレームワークJasmine の紹介です。 JavaScript のテストといえば, JSUnit が有名です。 JSUnit は, JUnit とに似たような, Matcher が利用できたりしてわかりやすいのですが, 開発やメンテナンスがストップしており, またWebプロジェクトに組み込まないと利用できないことが ちょっ
やばい、こいつ可愛い。使い方もむっちゃ簡単でこんなcoolなチャートが出来るなんて。ポートフォリオにも、情報を説明する時にも、どんな時にでも役に立つ事間違いなし!開発者に感謝しつつ、そんな「Chart.js」を紹介していきたいと思います! Chart.jsとは? デザイナーや開発者がの簡単にグラフを表示出来るjsで、表示方法はHTML5のcanvasを利用して表示させます。コード的にはオブジェクト指向のコードで誰でも簡単に編集でき表示ができるようになっています。 詳しくは本家サイトへ Chart.js Chart.js・ドキュメント 目次に戻る こんな感じのチャートが作れます 目次に戻る Chart.jsの実装方法 初めにChart.jsをダウンロードしよう Chart.js に行き、赤枠に囲ってある Download をクリックして下さい。 次に GitHub に飛びますので赤枠で囲って
RequireJS はみんな使ってるらしーし、 何かかっこいいし、意識高そうだし、使っとくか！ ・・・と、思って試しに使い始めてみたのですが、 自分が作るような小規模なものの場合、 大変な割に良い事あんまりないので使うのを止めました。 以下、忘れそうなのでその理由をメモって置きます。 基本的に、1枚のJSファイルが1モジュール、ファイル名がコードに影響する。それもあって、結合・圧縮は r.js という専用のツールが必要になる。Grunt の concat とか uglify とか使えない。 AMD の仕様では、「JSファイルのリストを順番通りに読み込み/実行する」ということができない。実際何が困ったかというと、分割した mocha テストケースを順番通りに実行できなくなったということ。結果は変わらなくても、順番通りに実行されないと結果が見辛いし、問題が起こった時に発見が難しい。ただしこれは
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合
アプリ制作の技術者から学ぶ当連載や、中村洋基氏をはじめとするクリエイターが登壇する11月17日（土）開催のセミナー、中国・上海のWeb制作会社訪問ツアーなどの豪華賞品が当たるアプリアワードを行う「TapApp(タップ＊アップ)プロジェクト」と連動した連載第3回は、実際にソーシャルゲームのコーディングを行っているサイバーエージェント(以下、CA)のデベロッパーに、すぐに使えるJavaScript高速化のテクニックについて聞いた。 高速化がもとめられるスマホ用Webアプリ開発の現場 スマートフォン用ゲームというと、ネイティブアプリケーションの形で提供されるものをまず思い浮かべるかもしれないが、最近ではソーシャルゲームを中心に、ブラウザ上で動作するWebアプリケーションとして提供されるタイトルが続々と登場している。ユーザーがアプリをダウンロードする手間がなく、iPhone、Androidなど複数
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ONE COORDINATE, ONE POSITION The Wall enables to create an endless grid. You choose the number of elements, The Wall will see to the rest. Every moment you may know the position of your wall or move it where you like better by clicking or dragging it. What could be simpler? CUSTOMIZED CONTENTS With The Wall you decide the position of your contents punctually. Every plug is ready to hold your conte
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
