JavaScriptで覚えておくとよいデータ構造 - 配列・オブジェクト - いろいろ解析日記
JavaScriptで必要なデータ構造の覚書です。 目次 配列 配列を生成する。 配列にデータを追加する。 配列にデータを格納する。 配列からデータを取得する。 配列中のすべてのデータに同じ処理をする。 オブジェクト オブジェクトを生成する。 オブジェクトにデータを格納する。 オブジェクトからデータを取得する。 オブジェクト中のすべてのデータに同じ処理をする。 関連記事 配列 配列は複数件のデータを扱うためのデータ構造です。 ■配列を生成する。 配列の生成は以下のように行います。 var 配列の名前 = []; var 配列の名前 = [ データ, データ, … ]; 配列の生成では、配列の名前を指定します。 もし、生成時にデータを格納する場合に、[]内にデータを指定します。 なお、JavaScriptでは配列の生成時にサイズを指定しません。 例えば、空の配列array1を生成するには、以
とにかくシンプルで簡単で高速なViewのコンポーネントを作れるHorn.jsを作った - mizchi's blog
JavaScriptでリアクティブっぽくとにかく短くシンプルにビューが書けるライブラリを作った。 mizchi/horn.js https://github.com/mizchi/horn.js 名前は背骨とか角とかっぽければ何でもよかった。 方針 Angularっぽいユーザー定義のdirective Knockout.js っぽいデータバインド Backbone風の軽量なAPI 依存はjQueryのみ とにかく短くビューのコンポーネントの塊を書けるのを目的とした。UnityとかFlashのコンポーネントに影響を受けている気がする。 HTMLのテンプレートによって、ビューがどういう属性を持つか決定される。それをJavaScriptから使う。 インストール bower install horn 使い方 こんな感じでテンプレートを用意する <div data-template-name="st
JavaScriptでiOSアプリが書けるライブラリJavaScriptBridgeを公開しました - 24/7 twenty-four seven
kishikawakatsumi/JavaScriptBridge · GitHub 前にiOS 7から導入されたJavaScriptCore.frameworkを使ってUIKit標準のクラスを操作する話を書きました。 JavaScriptだけでiOSのUIを書いてみる - 24/7 twenty-four seven JavaScriptCoreを使ってJavaScriptからObjective-Cのオブジェクトを操作するのは、あらかじめJSExportプロトコルで公開しておく必要があるなど、あまり実用的ではありませんでしたが、このライブラリを導入すうることで、そういった事前準備がすでに済んでいる状態で使いはじめることができます。 また、JavaScriptからObjective-Cのクラスを定義できるなどいくつかの拡張を加えてあり、UIViewControllerのサブクラスで画面を定
WEB+DB PRESS Vol.78に「フロントエンドの国際化」について書いた！ - teppeis blog
先週発売されたWEB+DB PRESS Vol.78のJavaScript連載にて、「フロントエンドの国際化」をテーマに記事を書きました！ 内容はこんな感じです。 国際化の基本 I18NとL10N ロケール タイムゾーン フロントエンドにおける国際化 メッセージリソースの管理 数値や日付のフォーマット CLDRとICU JavaScriptにおける文字コードの罠 JavaScriptにおけるタイムゾーンの罠 JavaScript国際化関連ライブラリ i18next Numeral.js Moment.js & Moment Timezone ECMAScript 6 Internationalization API 前半ではソフトウェアの国際化で使われる基本概念と、最近のフロントエンド領域で国際化を行うときに課題となるポイントを解説しています。 中盤ではいくつかの定番ライブラリを紹介し、最
すごい便利になった！javascript入門の基礎知識と小技まとめ
作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ
JavaScriptで自動化！Pacifista入門 - Qiita
皆さん環境構築とか、システムの設定作業とかって、どのように作業していますか？ 古きは環境構築手順書を使って行なっていましたが、昨今の自動化ブームに伴って、 chefやcapistrano、fabricなどのツールを検討されている方も多いと思います。 ただ、最近はやりの自動化ツールって、RubyとかPythonを多少知っている必要があったり、 独自DSLや特殊な用語を覚える必要があったりと、学習コストが高くてとっつきにくくないですか？ まわりにススメても「あー便利そうだねけど難しそうだね」で終わってしまうパターンが多々あります。 そこでPacifistaですよ Pacifistaは「環境構築をまるごとプログラミングする。それもシンプルに」を目的としたOSSの自動化ツールです。 Pacifistaには、以下の特徴があります。 JavaScriptでコードを書く事が出来る。 JavaScript
私が愛するオブジェクト指向とそれを使わない理由 - takuto_hの日記
この記事では、私がオブジェクト指向のどこを愛しどこを素晴らしいと感じていて、そのうえでなぜオブジェクト指向を使うことを避けているのかを書き留めておきます。関数型言語使いの方で、「オブジェクト指向の何がいいのかわからない」「オブジェクト指向難しすぎ・複雑すぎ」とおっしゃる方にぜひ読んでいただきたいと思っています。また、「オブジェクト指向言語完璧に理解したわ」と思っている方にも読んでいただきたく思います。 なお、ここでのオブジェクト指向の定義は、「各言語でオブジェクト指向と呼ばれているものすべて」とします。JavaやScalaやJavaScriptやSmalltalkやRubyやCommon LispやOCamlがオブジェクト指向と呼んでいるものすべての総称です。もっとまともな定義が知りたい方は以下の記事がおすすめです。 オブジェクト指向の概念の発明者は誰ですか？(改訂版) - Smallta
Web系の会社を解雇されて思った事
試用期間3ヶ月が過ぎようとしたある日(5/27)の事。社長からいきなり「今月一杯で辞めてもらう」という宣言を食らった。通例解雇の予告は30日前に行われねばならず、いくらなんでも急過ぎるだろと思ってしまう。ここからは入社してからの経緯を簡単に話そうと思う。 今回入社したのは社員数10人未満の小さい会社だった。まずCakePHP+MySQLを使ったCMS回りの機能の追加の他、初めてJavaScriptやJQueryを担当する事となった。全く触った事の無い言語だった。基本を覚えながら、分からない事は先輩に聞きながらの作業で、いよいよ一案件が完成し、JQueryのほうも○×ゲームを作る位は覚えた。 しかしながら既存のソースコードの改修が苦手なのもあって、案件のJavaScript回りで時間がかかってしまった。例えば最後の案件はJavascriptのクラスを使った案件だった。上記のリンクのコードを見
IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス
Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
Google Sites: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
JavaScriptのプログラミングスタイルはどうあるべきか？ 重鎮Douglas Crockford氏が脳の働きとの関係を語る（前編）。QCon Tokyo 2013
JavaScriptのプログラミングスタイルはどうあるべきか？ 重鎮Douglas Crockford氏が脳の働きとの関係を語る（前編）。QCon Tokyo 2013 4月23日に都内で開催されたエンジニア向けのイベント「QCon Tokyo 2013」。基調講演に登壇したのは、JavaScriptの重鎮であるDouglas Crockford氏。「プログラミング・スタイルと私たちの脳」という大胆なタイトルで、JavaScriptプログラミングにおいてバグをどう減らしていくのかについて解説しています。 基調講演の内容をダイジェストで紹介しましょう。 プログラミング・スタイルと私たちの脳 PayPalのDouglas Crockford氏。 プログラミングスタイルはプログラムの一部ですが、コンパイラからは無視されます。だからある人はプログラミングスタイルが重要ではないと考えていますが、しか
JavaScriptのテストを開発工数に入れてもらうには？
2013年4月27日、六本木ヒルズ森タワーのグーグルにて「第38回HTML5とか勉強会」が開催された。HTML5とか勉強会とは、HTML5に関心のあるエンジニアやWebデザイナ向けの勉強会だ。今回のテーマはJavaScriptのテストフレームワーク。別室のサテライト会場を用意しなくてはならないほど会場は多くの参加者であふれた。テーマへの関心の高さがうかがわれる。テストフレームワークを使いこなす現場のプロたちの解説により、その最新事情と基本的な使い方が分かった。 JavaScriptテストの必要性と最新事情 サイボウズの佐藤鉄平氏は、JavaScriptのテストの基礎知識と全体像について語った。 公開スライド 佐藤氏は、結合テストやユニット（単体）テスト、そのほかにユーザビリティテストなど、そもそもテストにはどんな種類があるのかを解説した後、ユニットテストの重要性を強調した。技術面で開発チー
実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
JavaScriptの落とし穴
4. JSのオブジェクトは 連想配列みたいなもの 1 // 空のオブジェクトを作成 2 var dog = {}; 3 4 // プロパティをひとつ追加 5 dog.name = "Pochi"; 6 7 // ブラケットでもアクセスできる 8 dog['breed'] = "Shih Tzu"; 9 10 // 関数をひとつ追加 -> メソッド 11 dog.getBreed = function () { 12 return this.breed; 13 } 5. JSのオブジェクトは 連想配列みたいなもの 1 // 同じものをオブジェクトリテラルで表記 2 var dog = { 3 name: "Pochi", 4 breed: "Shih Tzu", 5 getBreed: function () { 6 return this.breed; 7 } 8 }; 6. クラスっぽい
『JavaScriptの開発効率を高める7つのライブラリ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
JavaScript製とは思えないゲームをenchant.jsで簡単に作るには
JavaScript製とは思えないゲームをenchant.jsで簡単に作るには：enchant.jsでHTML5＋JavaScriptゲーム開発入門（4）（1/3 ページ） 大人気のHTML5＋JavaScriptベースのゲームエンジン「enchant.js」を使ってゲームアプリを作る方法を解説していく連載。今回は、手軽にアニメーションを作れるtl.enchant.jsの使い方や、スマホ向けアニメーションのチューニングポイント6つを解説する。 これが、JavaScriptのゲーム…… だと……？ 前回の「enchant.jsで重要なスプライトとシーンを使うには」では、ゲームの流れとなる部分を駆け足で解説いたしました。 今回は、よりゲームをリッチに見せる、複雑なアニメーションの作り方を理解していきましょう。この機能を使うと、こんなもの（サンプル）を簡単に作ることができます。ぜひ「JavaSc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Functional JavaScript
JavaScriptライブラリ「tmlib.js」でローグライクを作ってみた
Jade について。