レトロエンジニアのための近代Webフロントエンド事情 - Qiita
フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には新しい気付きが与えられるかもしれない。 詳しい人の添削・ツッコミは大歓迎。 詳細はリンク先に任せ、私が思う「わかりやすい順序」で、調べたことをざっと紹介していく。 きっかけ 読み飛ばしてもよい。 Reactを使うとなぜjQueryが要らなくなるのか 数年前、
Chrome で高速にページを読み込む新しい技術のご紹介
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Ajaxを劇的に簡単にするReact.js
ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して
フロントエンドできない人が、フロントエンドやりすぎだ。あと、Vanilla.jsが便利だ。 - nobkzのブログ
最近、なんというか、フロントエンド勉強会に出席する度に、「フレームワークじゃねぇんだ! MVC設計がな! 」とか言い続けている気がする。たくさんフレームワークが出てきて、○○フレームワークの問題とか、開発の困難の話を聞く度に、自分の設計を棚に挙げて、「これは、フレームワークがスケールできないせいだ!」「jQueryが糞」とか言ってて、「何言ってんの?コイツ?」みたいな気分になる。 最近になって、なんでこの状況がいつまでたっても変わらないんだろう? って理由が分かってきた。フロントエンドできない人が、フロントエンドやりすぎなのだ。 なんでフレームワーク使うの? そもそも、なんでフレームワークを使うか?ってことに答えられない人が多い気がする。というか、大抵「上司が決めたから」とか「チームで決まっているから」という答えが返ってくる。そもそも、フレームワークを強制して学習させる環境になっている現場
知らないうちにMacがシステム標準でJavaScriptで操作できるようになってた (JXA) - Qiita
知ってる人には今更と思いますが、今まで知らなかったのでメモメモ。 AppleScriptの代わりにJavaScriptを使えるようになってました。 Yosemiteからの新機能だそうです。 JXAとも呼ばれています。宇宙航空研究開発機構とは無関係です。 (追記：JXAは公式の略称です →Introduction to JavaScript for Automation Release Notes) 詳しくは Appleの公式ドキュメント か、「参考」にあるリンクへどうぞ。 もう一つ記事を書いたのでこちらもよかったらどぞ。 Macのキーボード入力、マウスクリックをJavaScriptで (JXA) Script Editorで使う方法 まずScript Editorを使う方法を説明します。 好きなテキストエディタを使いたい場合は飛ばしてください。 (でも「用語説明」の表示の仕方は覚えておいて
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
爆速HTML – Elmでの仮想DOM | POSTD
新たな elm-html ライブラリでは、HTMLとCSSをElmで直接使用できます。FlexBoxも使ってみたいし、既存のスタイルシートも使い続けたいですか？ Elmは使いやすくなり、処理が 速く なりました。例えば、 TodoMVC アプリを再作成する場合、Elmの コード はとても単純で、 事前のベンチマーク でも、他の人気ライブラリに比べ処理速度が極端に速いという結果が出ています。 elm-html とMercuryは、どちらも virtual-dom プロジェクトを基にしているので、パフォーマンスが優れています。この記事では、前半で“仮想DOM”とは何か、 純粋性 と 不変性 によっていかに処理速度が上がるかということについて詳しく検証します。この検証によって、なぜOm、Mercury、Elmがベンチマークでこのような素晴らしい数字を出したかが分かるでしょう。 パフォーマンスは人
システムエンジニアの戯言
サンプルソースを公開しますので、ご自由にダウンロードしてお使いください。ソースの修正もＯＫです。 ただし、本サンプルを使用して発生した問題等は、本サイト・管理者は一切責任を負いません。 サンプルをダウンロードする 今回作成した、リッチエディタ用の操作クラスと、リッチエディタサンプルを技術文書としてまとめました。 どうぞ、ご覧ください。 Webリッチエディタ技術文書 リッチエディタは、JavaScriptライブラリで提供されているAPIを利用する事で構築できます。 ドキュメントオブジェクトの designMode というプロパティを設定すれば、キー入力による直接編集が可能となります。 さらに、専用のAPIを利用する事で、文字の装飾や画像の貼り付けリンクの埋め込みも可能です。 下記のように設定する事で、リッチエディタの基盤が完成します。 インラインフレームを編集
PDFy - PDFをホストしてPDF.jsで表示するWebサービス MOONGIFT
PDFはビジネスでよく使われるフォーマットになっています。そのためインターネット上にもコンテンツが無数にありますが、閲覧する際にはプラグインの仕組みを使っていたり、ダウンロードしたりしなければならないのが手間です。 そこでプラグインフリーで使えるPDF.jsを使ってみましょう。単純にビューワーとしてだけでなく、PDFyみたいなサービスだって作れちゃいますよ。 PDFyの使い方 Webブラウザ上でPDFが表示できます。これはプラグインフリーです。 ページ送りもあって再現性はかなり高いです。 日本語も表示可能です。 文字の選択もできます。画像の埋め込み場所も適切に再現されています。 PDFyは埋め込み表示もサポートされていて、PDFをより他のコンテンツと同じように扱えるようになります。アップロードすると、すぐにクライアントサイドで表示ができます（クライアントサイドでJavaScriptの解析を
天下一クライアントサイドJS MV*レームワーク武道会に参加<しました #ten1club - しるろぐ
天下一クライアントサイドJS MV*フレームワーク武道会 - connpassに参加してきました。 イベント見たときはもう枠こえてて、参加するにはLTしかない！みたいな感じだったので、ドキドキのLT応募。実際はキャンセルが多くて、補欠登録でも大丈夫そうだったけれど、良い経験できてよかった。 話したこと angular X designer - デザイナからみたAngularJS #ten1club 簡単に言うと、HTMLやjavascript周りを専門にやる人が潤沢にいないチームで、エンジニアとデザイナの両方がHTMLをさわると、 エンジニアが組んだロジックがデザイナによって壊される デザイナが組んだデザインがエンジニアによって壊される みたいな悲しい出来事が起きてしまう。 デザイナはIF、ELSEを呪文のようだと思っているし、表示条件を変えたい、みたいなときにロジックが書ける人のサポート
これは危険! PhotoshopやOffice等のソフトのバージョン情報をブラウザ上で取得できる「software-detect.js」:phpspot開発日誌
localStorageにフォーム内容を保存してブラウザクラッシュに備える「jquer... 次の記事 ≫：タイトルヘッダーをフルスクリーンにしてクールにするチュートリア... これは危険! PhotoshopやOffice等のソフトのバージョン情報をブラウザ上で取得できる「software-detect.js」 2014年05月30日- johnmcl/software-detect-js GitHub これは危険! PhotoshopやOffice等のソフトのバージョン情報をブラウザ上で取得できる「software-detect.js」。 こんな情報をブラウザで抜けちゃていいのだろうかというJSですが、ソフトにバンドルされているフォントがインストールされているかどうかをベースに判定していて、なるほどこれだと脆弱性をついているわけじゃないし、利用者が気をつけないといけないな、というところ
JavaScriptでセキュアなコーディングをするために気をつけること – cybozu developer network
（著者：サイボウズ kintone開発チーム 天野 祐介） kintoneはJavaScriptを使って自由にカスタマイズすることができます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできるようになりますが、セキュアなコーディングをしないとクロスサイトスクリプティング脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的な点を解説します。 主な原因 脆弱性を作り込む主な原因になるコードは、要素の動的な生成です。特に、レコード情報などのユーザーが入力した値を使って要素を生成するときに脆弱性が発生しやすくなります。 対策 document.write()やelement.innerHTMLを使って要素を生成するときは、コンテンツとなる文字列をかならずHTMLエスケープするようにしましょう。 以下は
LevelDB入門 (基本編) - from scratch
さて、今回は比較的新しいデータストアであるLevelDBについてまとめてみました。 LevelDBは1年ほど前からNode.js界隈ではブームが来ていて、理由がよくわかっていなかったんですが、まとめている内に分かるかなと思ってまとめました。今回はNode.js無関係でLevelDBの基礎的なことだけ調査した結果をまとめてみました。 Node.jsで使ってみる話は後に回します。 LevelDBとは? key-value型のデータストアの一つです。 Googleの研究者である、Jeff DeanとSanjey Ghemawatが開発し、2011年に公表されました。C++で書かれており、多くのプログラミング言語でbindingsが書かれています。もちろん、JavaScript/Node.jsでも書かれています。 LevelDB は Google のBigTableをベースにしたアーキテクチャを持
JavaScriptの生きてるundefinedと死んでるundefined - mizchi's blog
JavaScriptの悪魔的な振る舞いの一つにundefinedがあると思う。 javascriptには存在するundefinedと存在しないundefinedがあるし、それはつまり [undefined].length => 1 だ— 俺は平気だよ (@mizchi) 2014, 4月 22 JavaScript、[undefined].length => 1 で arr = []; arr[0] = undefined; だけど、このとき前者のundefinedと後者のundefinedは性質的には別物ですよ— 俺は平気だよ (@mizchi) 2014, 4月 22 もう一つの例として、 obj = {}; のとき obj[‘a’] = undefined したとき、for i in obj するとイテレータが一回だけ回る。obj[‘a’] = undefined しても キーは消え
Webアプリをいまどきの手法で爆速開発した — KaoriYa
外道はるかぜちゃんジェネレータというWebアプリを いまどきな手法を用いて爆速で開発した話を紹介します。 先の3連休中、外道はるかぜちゃんジェネレータというWebアプリを開発&公開しました。ここで採用した開発手法がいまどきな爆速開発でしたのでちょっと紹介&ステマします。使った技術は以下の通りです。 AngularJS: Googleが開発しているViewModelなWeb開発ライブラリ(MVW: Model View Whateverだったかな?w) Github pages: スタティックサイトのホスティングに最適 Kii Cloud: mBaaS (mobile backend as a service) で共有データの保存に利用 HTML5 Canvas: 画像生成に。サーバサイドではなにもしてない! サービス概要 外道はるかぜちゃんジェネレータはベースとなる画像があり、そこに面白い
『Node.js Cluster+Socket.IO+Redisによるリアルタイム通知システム』
Node.js Cluster+Socket.IO+Redisによるリアルタイム通知システム | サイバーエージェント 公式エンジニアブログ
AngularJSのスゴさが伝わるデモ
当サイトの趣旨 AngularJS のキモは動的なデータバインディングにあり、データを変えたら View が動的に変わるということです。これをクライアントサイドのみでのデモで実感するのは難しい ところがあります。そこで当サイトではサーバーサイドとの通信をまじえた実用的な AngularJS のデモを構築しました ソースコードなどを見たりしつつ、あそんでみてください。 (このデモサイトのサンプルコードは AngularJS と node.js で記述されています。) サインアップフォーム 簡単な管理画面風のデモ こちらのコードは github.com/tokuhirom/demo.64p.orgで確認できます こんなデモもいれてよ、みたいな提案があれば p-r で送っていただければホスティングします。 ここを見て! AngularJs のキモは、データをかえるといいかんじに HTML がかき
今、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 の２文字目と３文字目を表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
大手Webサービスがクライアント側で発生したJavaScriptのエラーをどう収集しているのか まとめ - Qiita
お前自分ちのページャUIが本当に速いと思ってんの？
