技術を活かし、新しい価値を創造する DeNAのエンジニアは、想像を超えるDelightを届けるために何ができるかを考え、技術力と発想力で新しい価値を生み出しています。 多様な専門性を持ったエンジニアが切磋琢磨し、互いに刺激し合える環境や制度がさらなる成長へとつなげます。
![DeNA Engineering - DeNAエンジニアのポータルサイト](https://cdn-ak-scissors.b.st-hatena.com/image/square/517c1260a938563aeea8af27498de5573a67f4c7/height=288;version=1;width=512/https%3A%2F%2Fengineering.dena.com%2Fog.png)
Vanilla ことはじめ Vanilla JSとは? Vanilla JSは、超高速軽量クロスプラットフォームフレームワークです! 実は結構なところで使われているフレームワークでして、 Facebook Google YouTube Yahoo Wikipedia Windows Live Twitter Amazon LinkedIn MSN eBay Microsoft Tumblr Apple Pinterest PayPal Reddit Netflix Stack Overflow などなど数々の企業で採用実績のあるとても実用的なフレームワークです! なんと、jQueryよりも使われているという、とんでもないフレームワークです! 環境構築! まずは環境構築しないとダメですよね? ダウンロード Vanilla.jsのページより、お好きな機能をクリックして、 Downloadをクリ
JavaScriptにはむしろもっと抽象化がもたらされるべき - Qiitaという記事で、もう少し踏み込んだ話を書いてみました。 某所でReact.js界隈の人に聞きたいというフレームが発生したのだが、はてなブックマークでコメントしたらIDコールされたので、反論をここに書くことにした。(最近は技術系記事はQiitaにしか書いてないので)。 あくまで僕が考えるなので、JavaScript界の人達が本当はどう思っているかはわからない。そもそもJavaScriptを本格的にさわり始めたのごく最近なので、JavaScript界では異端かもしれない。 元記事では論点(感情)が複数ごちゃまぜになっていたので僕は辛口のブコメを書いたのだが、論点をごちゃ混ぜにするのは意図的にやってるのならばただの詭弁だ。なので、まずは元の記事での論点を整理する。 jQuery (or フレームワーク?) 言語採用 Rea
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
Web コンテンツに、より高度で複雑な機能を求められる昨今、jQuery のような外部の JavaScript ライブラリを利用しない Web サイトはほとんどないでしょう。 たしかにそれらは汎用性が高く再利用が可能なので、さまざまな機能を自分で実装する必要はなく、工数を圧縮し開発生産性を高めることができます。 また、昨今の技術系のニュース記事では、新しいフレームワークが次々と登場して話題となり、それらを使用して開発することが、さも「モダン」であるかのように書かれています。 はたして本当にそうでしょうか? DOM のセレクターを使用するためだけに大量の機能セットを含むライブラリを参照しているソースや、UI バインディングを行うためだけに大げさなフレームワークを利用しているソース、それは「モダン」で「クール」な作りなのでしょうか? 今回の記事では、外部 JavaScript のライブラリやフ
先日、私はBrightonで開かれたJavaScriptのカンファレンスFFConfで「(ここにライブラリやフレームワークの名前を入れる)を使おう。これこそ最強中の最強中の最強だ!」と題して話をしました。 ここに、そのプレゼンテーションの内容を書き起こします。もっと注目されるべき、最近のモバイルデバイスのフレームワークにかかるコストに関して、議論を広げる一助となればと思います。 2015年11月16日更新 – テーブルに1行、プロダクション環境下のReactについての行を追加しました。良いニュースをお伝えしますと、これはvanillaよりも3倍遅いですが、TodoMVCに関して言えば速いと言えます!PolymerのTodoMVCサンプルも最新バージョン1.2.2にアップデートされ、同様により速くなりました。 読むよりも見たい方へ、講演のビデオはこちらです。(必要なら、 スライドも入手できま
JavaScriptフレームワークに対する、あるGoogle社員の争い 開発者は楽になる、しかしそれはユーザーの負担と引き換えだ ソフトウェアの専門家マット・アサイは、JavaScriptフレームワークに対し次のように語った。 GoogleはモバイルWebを重視している。 だが、彼らはこれまでHTML5にあまりにも資金を投じてきておらず、今になってこれをカバーしようとしているところだ。 また、GoogleはインドのFlipkartの様な立ち位置が微妙なアプリをWebに引っ張り戻そうと、宗教的とも言える熱意を上げている。このことから、モバイルWebのパフォーマンス向上を劇的に向上しようとする意識についてはいうまでもない。 GoogleのモバイルWebへの関心は隠しようも無い中、これまでのモバイルWebアプリを形作ってきたJavaScriptフレームワークに対する彼らの姿勢を、我々は信じて
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて(最近は主にJavaScript)、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js
今話題のReact.jsはどのようなWebアプリケーションに適しているか? Introduction To React─ Frontrend Conference 外村 和仁(株式会社 ピクセルグリッド) 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
弊社 dot by dot inc. のコーポレートサイトをリニューアルしたときのいろいろをメモ。見た目シンプルなわりにいろいろあったのでね どんな仕組みでつくる? 日々増えるニュースを簡単に更新できるようなブログ形式、前バージョンの背景エフェクトもってくる(かつページ遷移においてリロードしない=エフェクトを途切れさせない)という前提で検討した結果、WordPress を CMS に使いつつ WP REST API で JSON ひっぱってきて React でごにょごにょやるんがいーかなーと。 ちょうどどうやってつくろっかなーと考えてる時に、VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita を読んで、どうやらこれ流行りそう今っぽいーということでフロントのフレームワークを React に決定。ちょうど IntelliJ IDEA 14 が JSX
※ただのメモで、未来志向なのであまり真に受けてはいけない。 良いっぽい React.js 早速い/コンポネント志向/APIの設計がいい。JSXと他のトランスパイラの組み合わせという問題はある Promise ネイティブに入った、誰もが使ってる TypeScript ES6時代でも存在意義のある言語。TypeScript互換のFacebook Flowの動向に注目 Backbone.js ModelとEventを使う/Viewは使わなくていい Lodash Underscore.jsをよくしたやつ Gulp Gruntより良いという意味で。browserifyまわりがうまく動かない問題があってnpm runのほうがいいという噂もあるがまあ良いに分類してもいい EventEmitter Custom EventはDOMにくっ付いてる感があるのでロジック志向の物にはEventEmitter使った
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb(HTML5)の進化は止まりません。ついにここまで!というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方 たくさんのデモが登録されていますので見ていきましょう。 写真と画像の組み合わせ。左右から表示されるアニメーションもあります。 スクロールパララックスエフェクトのデモ。 アニメーションのデモ。 カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。 スライドして表示される写真のデモです。 ページ送りのデモ。 天気アプリデモ。ベクター調の表示がいいですね。 タスク管理。
JavaScriptでフレームワークを書くのはもうやめましょう。 JavaScriptフレームワークというものは、あたかも避けられない死と税金のようなもの、絶対にぶちあたる避けられないものといわれています。こっそり聞いてみましょう、新しいウェブプロジェクトが始まるとき、一番初めに聞かれる質問は?十中八九は「どのJSフレームワーク使っているの?」でしょうね。昨今の業界においてJSフレームワークというものは本当に根深く浸透しているのです。でも、だから必須だというものではないのです。実際、もう使うべきではないのです。 どうしてこういった結論に至ったのか、振り返ってみましょう。 AngularにBackbone、Ember・・・ ここのところ長い間、 ウェブプラットフォーム とはHTML+CSS+JS、と簡潔に技術用語の羅列でまとめられてしまっていましたが、そこにはもっとぴったり表す用語“大混乱”
連載 INDEX 次回 → こちらのページで【2015年版】も発表! ■ 2014年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2013年中に人気が急上昇してきており、「2014年では必須の知識」となりそうなJavaScriptライブラリ(Library)をランキング形式で発表する。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」(「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み)を使って、ライブラリの人気をジャンルごとに比較した(※ライブラリ名が一般的な英単語の場合、Web検索時に、その英単語にもヒットしてしまう。このノイズがGoogleトレンドでの結果として入り込んでいる可能性が高いことをご了承いただきたい。各ジャンルは、筆者が独自
Twitterは自社サービスで利用しているJavaScriptフレームワーク「Flight」をオープンソースで公開しました。 Flightはコンポーネントベースの軽量フレームワーク。開発者に対して非同期で独立性の高いコンポーネントを定義する機能を提供することで、デバッグ、テスト、イベントハンドリングなどを容易にするフレームワークのようです。 Githubのページでは以下のように説明されています。 Components cannot be directly referenced, instead they communicate by triggering and subscribing to events. Consequently every component, and every component API, is entirely decoupled from every othe
Java仕事で各種フレームワークを比較検討したので、比較用に作った参考資料を公開します。ちなみに現在私は、ドワンゴさんの社内システム開発をお手伝いしてまして、その一環で調べたものです。会社資料じゃなく、私の資料ということでブログで公開してよい、むしろしとけ、とのことなので公開しときます。 今回の案件向けにアプリケーションを画面層コンテナ層データアクセス層に分けて、それぞれフレームワークを選ぶのが目的です。コンテナ層はDIコンテナのうちいずれか、データアクセス層はO/Rマッパーを選ぶことになります。 太枠の範囲が選定対象です。よく本に出てくる杓子定規な階層図とは変えてあります。 次のものを比較検討しました。画面層SAStrutsApache Wicket(ほかにもTeedaとかClick Frameworkとかももともとは候補にあったが、調査が追いつかないので二つに絞った)コンテナSeasa
iPhoneやAndroidなどの人気の スマートフォン向けのJavascript製 フレームワーク・wink toolkitを触っ てみました。動作サンプルが豊富 で割と応用できそうだったので日本 語でサンプルを作ってみました。 スマートフォン向けのWebサイトやネイティブアプリに使えそうなJavaScript製のフレームワークです。沢山の動作サンプルがあって、内容もとっても分かりやすかったので(完全ではないけど)日本語サンプルを作成してみました。 スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜
複数のJSファイルの管理、CSSのサポートが異なるブラウザへの対応、ブラウザとバージョンの自動検出、スクリーンサイズの自動検出など、headで制御したい便利な機能がつまった超軽量(2.3KB)スクリプトを紹介します。 Head JS [ad#ad-2] 下記に、Head JSでできることを簡単に説明します。 詳しい使い方は下記ページで解説されています。 Usage: Head JS 外部JSファイルの読み込み JavaScriptの管理 CSSのサポートが異なるブラウザへの対応 HTML5非対応ブラウザへの対応 スクリーンサイズに合わせた表示 Dynamic CSS CSSを特定のページのみに CSSをブラウザごとに指定 外部JSファイルの読み込み 通常、複数のJavaScriptファイルを外部ファイルとして読み込ませるとブロッキングが生じます。 そのブロッキング解消し複数のファイルを並列
Facebook JavaScript SDKはJavaScript製のオープンソース・ソフトウェア。Facebookは今や世界最大のSNSに成長している。アメリカにおけるWebトラフィックの25%を占めているなんてデータもあがってきているくらいだ。とてつもなく巨大なサービスになっている。 jQuery向けデモ そんなFacebookを便利にしているのはWeb APIの存在だろう。人気のあるFacebookアプリの他にも便利なのが認証系APIだ。特にJavaScriptからでも対応しているのが良い。それを手軽に実装できるのがFacebook JavaScript SDKだ。 Facebook JavaScript SDKはFacebook本家が開発しているJavaScript用ライブラリだ。現在は認証ライブラリが提供されている。便利なのはjQueryはもとより、Dojo、MooTools、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く