生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | POSTD
(編注：2016/07/29、いただいたフィードバックをもとに記事を修正いたしました。) 免責事項： 私はJSX、Flux、 ES6 、そして webpack を非常に気に入っています。これらのツールについては他のシリーズで話します。 React.jsが騒ぎを起こしているのはご存知の通りです。確かに、 XMLHttpRequest 以来の良いツールです。しかし、調査に数時間を費やした挙句、あまりに多くの用語に 圧倒された だけで終わっていないでしょうか。JSX、flux、ES6、webpack、react-routerが使える今、 *他に必要なのは React の使い方を説明してくれる人だけです。* 喜んでください、それがまさに当シリーズでやろうとしていることです。信じられませんか？大丈夫、 2分後、 初めてのReactアプリを作った後には納得いただけるでしょう。何もダウンロードせずに、で
フロントエンド速度改善をしようとして参考にしたもの - $shibayu36->blog;
最近フロントエンドの速度改善をほんの少しだけやって、いろんな資料を参考にしたので、今後また速度改善をする時に備えて、参考になった資料をまとめておく。今回パフォーマンス改善やった項目としてはExpiresヘッダ付ける、gzip圧縮かける、JSをbodyの一番下にとか基本的なことしかやらなかったので、そのあたりはこの記事ではまとめていません。 今回は「測定する」「ブラウザがどう表示しているか知る」「改善を検討する」の流れで調べていったのでその順にまとめる。 測定する 何はともあれ測定しないと何も始まらないので、まずは測定の仕方について調べた。 PageSpeed Insights( https://developers.google.com/speed/pagespeed/insights/ )と、webpagetest( http://www.webpagetest.org/ ) はとりあえ
The Little Book on CoffeeScript - Classes
クラス JavaScriptのクラスは純粋主義者にとってニンニクがドラキュラに対して与えるものと同様な影響を持っていました。とはいえ、正直に言ってあなたがそのような傾倒をお持ちでしたらCoffeeScriptの本を呼んだりはしないでしょう。しかし、クラスは他の言語と同じようにJavaScriptでもとても便利であると判明しました。そしてCoffeeScriptは素晴しい抽象化を提供します。 その裏では、CoffeeScriptはJavaScriptのネイティブなprototypeをクラスを作成するのに用いています。少しの構文糖を静的なプロパティの継承とコンテキストの永続化のために用いています。開発者としてのあなたに見えるのはclassキーワードだけです。 class Animal この上の例ではAnimalがクラス名であり、かつ結果としてインスタンスの作成に用いる変数です。裏側ではCoff
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
絶対に読んでおきたい、JavaScriptのおすすめ書籍7冊 - Qiita
フロントエンドエンジニアにとって、JavaScriptは今や開発の中心にあると言ってもいいと思います。 JavaScriptに対していまいち自信のない人向けに、おすすめしたい本をまとめてみました。 これで、日本のJS界隈がもっと賑わって、仲間が増えると嬉しいです(今でもかなり賑やかですが)。 基礎 JavaScript本格入門 JavaScriptの本の中では一番易しいんじゃないかな、と思います。 これ以上に読者ターゲットのレベルを落とした本は、解説が不十分だったり、レシピ集のような側面が強かったりで、勉強には向いていません(網羅的でないということ)。 この本は解説のみで、深い仕様やテクニックには踏み込みません。それだけに読みやすく仕上がっていると思います。 この本でJavaScriptに興味をもつことができたら、よりディープな本に進んでみるといいと思います。 パーフェクトJavaScri
脱初心者のためにこれだけは知っておきたいJavaScriptネタ
脱初心者のために これだけは知っておきたい JavaScriptネタ Tsuyoshi Akase 福岡Haxe勉強会 feat. HTML5+α @福岡 第0x00回
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
JS で AR | Yomotsu net
WebGL フォーラムのバレンタインデー企画でAR ぽい example を作ったのですが載せるのを忘れていたので。 WebCam と WebGL が使える環境でお楽しみいただけます。 Chocolate For You! 利用したライブラリーは three.js js-aruco 一式 aruco.js cv.js svd.js posit1.js とその他です。 js-aruco を始めとする、JS の CV 及び、AR 関連のライブラリーは数年前からあるので、あまり新しいことではありません。 js-aruco では、認識できるマーカーは次のいずれかのパターンを行に持つ 5 x 5 の正方形を認識します。 white - black - black - black - black white - black - white - white - white black - white -
JavaScriptでARに js-aruco - opukopuのメモ帳
やってみました。 大学で学祭に展示するためのゲームを作れと言われたけど、クソゲーを量産することしかできないので、ゲームとしての面白さより奇抜さで勝負することに。 それでARを使う、はずだった。 JavaScriptでARができるjs-arucoというのがあるらしいのでせっかくなのでJSで挑戦。 どんなOSでも動くし(ブラウザ?Chromeでしょう皆) まあ、ChromeとFirefoxで動けば十分。いまはIEでも動くの…かなぁ でもどうせならだれでもいつでも遊べるようなものが作りたいのでJSでできるなら理想的でした。 入手方法 https://code.google.com/p/js-aruco/ ここのProject HomeというタブをSourceに変えます。 そうするとSubversionを使ってDLする方法があります。 私はGitしか使ったことがないので調べたところ、svn che
javascriptでのAR - PHP,MySQL,Flex,JSな日々＋イラストとか
javascriptでのARをしてみたのでちょっとメモ。 サンプルはこちら http://moeten.info/js/20140713_arTest/ 上記ページをスマートフォンのChromeなどで表示して、下のマーカーを写すと認識されます。 ソースコードはこちら index.html（ほとんどjs-aruco - JavaScript library for Augmented Reality applications - Google Project Hostingのソースのままです） <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta http
HTML5でWebRTCを使ってみよう！「カメラを使ってみよう」編
こんにちは！ がねこまさしです。これから数回に渡って、WebRTCについて書かせていただきます。 内容は2013年10月にNode学園祭2013で発表したプレゼンを、再構成したものになる予定です。 ※こちらの記事は2014年に書かれました。2016年6月現在のアップデート記事がありますので、そちらもご参照ください。 WebRTCとは？ WebRTCとは”Web Real-Time Communication”の略で、Webブラウザ上でビデオ/オーディオの通信や、データ通信を行うための規格です。HTML5で新しく策定されたもので、複数の技術の連携で成り立っています。 ちなみに策定には複数の団体が絡んでいています。 API → WWW ビデオ/オーディオのコーデック → IETF WebRTCで何ができるの？ WebRTCには大きく分けて2つの要素があります。 カメラ、マイクといったメディアへ
HTML5のCanvas入門 - Img画像を編集してみよう -
開発もQAも自動テスト！「LOST JUDGMENT：裁かれざる記憶」のQAテスター参加で進化した「テスト自動化チーム（仮）」の取り組みについてSEGADevTech
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 先日の「OpenIL vol.2」にて「5分でわかるVue.js」というLTを発表しました。 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 前編 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 後編 この記事は、その時のLTの資料を元にブログ化したものです。 jQueryは頑張れば頑張るほど辛くなる jQuery、簡単に動きのあるサイトを作れてとても便利ですよね。 // 何か画面に反映する $(".hoge").html("変更したい内容"); // 変更時に何か処理して変更する $(".foo").on("change", function() { $(".bar").html("変更したい内容"); }); イベントを受け取って、色々と処理をし
AngularJS on Rails | GMOメディア エンジニアブログ
最近は子供中心の生活になっている、技術推進室の中村です。 先日RailsとAngularJSの連携について調べていましたので、それについて簡単に紹介したいと思います。 AngularJSとは、Googleが作成したJavaScriptのMVCフレームワークです。同じようなフレームワークでBackbone.jsがありますが、Backbone.jsが機能が少ない軽量なフレームワークなのに対し、AngularJSは機能が豊富なフレームワークです。 以降では、このAngularJSをRailsで使う方法を紹介したいと思います。 環境構築今回使用するRailsのバージョンは4.0.2です。またAngularJSのバージョンは1.2.1を使います。 まずはサンプル用のRailsアプリケーションを作成します。 $ rails new angularjs_sample 作成されたら、次にangularjs
今、AngularJSというフレームワークがヤバい - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年11月05日10:36 JavaScript 勉強会 今、AngularJSというフレームワークがヤバい 先週の土曜日、ランサーズさんで行われた 第３弾 週末ランサーズ に参加して個人的に今アツい AngularJS について話してきました。 AngularJS は ng-repeat が便利だったり、コードの見通しが良くなるなどいろいろなメリットがあると思うのでうまく使えば大変メリットがあると思います。特に、データの状態（要素の追加・削除や、状態のon/off など）を制御すればそれに合わせて view の表示はすべて AngularJS がやってくれるというのは素晴らしいですね。 ちなみに、以下の資料の中で ng-app とか ng-repeat とか出てきますが（これは directive と呼ばれます）、この ng というのは AngularJS の２文字目と３文字目を表
AngularJSをはじめる前に#AngularJS入門その1 | DevelopersIO
AngularJSをはじめよう ここにあるように、最近はWebアプリを作成する際にJavaScriptのフレームワークを使用するのが当たり前といっていいくらい、 さまざまなフレームワークが存在します。 弊社ブログでもember.jsの記事等、JavaScriptのいろいろなライブラリ・フレームワークを紹介していますが、 私が近頃AngularJSを使用する機会があり、とても使いやすかったので、改めてここで紹介しようと思います。 AngularJSとは もう一度「AngularJSとはなにか」という部分を簡単におさらいを。 AngularJSはGoogleとコミュニティより開発しているオープンソース(MIT)のJavaScript用MVWフレームワークです。 テンプレート言語としてHTMLを使用できたり、双方向データバインディングやDI(依存注入)が使用できたりと、 近年複雑化するWebアプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのレベル別書籍のまとめ
フロントエンドに秩序を取り戻す方法 〜はてなブログ編集画面をリニューアルするためにやったこと〜 // Speaker Deck
GitHub - jcmellado/js-aruco: JavaScript library for Augmented Reality applications
