Angular 2 を利用した開発の実際12月15日@ヒカラボ https://career.levtech.jp/hikalab/event/detail/72/ 発表スライドです。 Angular 2 の実際についてフレームワークの選定から簡単な事例の紹介まで。
JavaScript でも型チェックと契約による設計で安定した開発をする - Qiita
チーム開発をやっていると特定の処理を呼び出す際にインターフェイスを明示することがとても重要になってきます。言い換えると使い方がきちんと示されていることが最低ラインということです。ドキュメントは実際の処理と乖離しますし、各人がソースコードの処理を追わなければならないというのはチームでやっている意味がありません。 ところが JavaScript にはそういった仕組みが存在しません。どういった処理をするのかを表すための関数名は指定できますが、 JavaScript では関数を任意の名前の変数に代入できるので実はあまり役に立ちません。 といった状況にあった JavaScript ですが、昨今のツールの登場によって事情が変わってきました。 JavaScript でもインターフェイスを明示しながら開発するにはどうすればいいかを要素技術と一緒に書いていきます。 型チェック あくまでも JavaScrip
JavaScriptで群れの動きを表現する - Qiita
はじめに この記事はGoodpatch Advent Calendar2日目の記事です。 今日は12/18ですが、2日目の記事を書く人が色々あって急遽書けなくなってしまったので、僕が代打で書く事にしました。 今回はGoodpatchのエンジニアが隔週で行なっている社内勉強会（その名もテクみ勉強会）で発表した内容ですが、「群れ」について書きたいと思います。 そもそも「群れ」とは一体何なのか 「群れ」についてWikipediaには以下のように書かれています。 群れは集団と言う数で淘汰（自然選択）の圧力に対抗しようとした生存戦略の一つ（個体ではすぐに天敵に食べられてしまうが、集まることで天敵を寄せ付けないなど）であると考えられる一方、群れで行動することで、生殖の面でも有利に働くと考えられている。 集団的自衛権然り渋谷のハロウィン然り、群れを成す事で他を圧倒し、自らが生き残るための生存戦略なのです
npm-scripts で使える便利モジュールたち - Qiita
npm はパッケージ依存管理ツールであると同時に、便利なタスク・ランナーです。 本体はごく基礎的な機能だけを持ち、npm が管理するパッケージと Shell の力を組み合わせてタスクを定義します。「npm-scripts で利用する CLI コマンドは npm で管理できる」という分かりやすさが気に入っています。 npm-scripts には以下の特徴があります。 多くのツールが CLI を持っているためにラッパープラグインが不要です。Gulp ラッパー プラグインは非公式であることも多く、メンテナンスが継続するか不安な場合があります。 簡潔です。Gulp で書くと数十行だった処理が数行になるなんてこともよくあります。 複雑なことをするには向いていないです。 環境変数の扱いに難があります。 この記事では、私が npm-scripts を書くときによく利用している便利ツールたちを紹介します。
まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]
こちらは ピクシブ株式会社 Advent Calendar 2016、13日目の記事です。 こんにちは！4月からピクシブに入社したエンジニアの@_ragg_です✨ メンテナンスチーム・pixivFACTORYチーム・pixivFANBOXチームを旅して、デザインをかじったりフロントエンドを触ったりしています、3代目社内旅行エンジニアですね！ さて、今回はHTML5 Canvasに実装されつつあるOffscreenCanvasと、Web Workerについてお話しします。まだ日本語文献の少ないアツアツのネタです🔥🔥 OffscreenCanvas #とは OffscreenCanvasは、「画面に表示されないCanvas」です。 かつて CanvasProxy と呼ばれていたのをご存じの方もいると思います、まさにそれです。 「画面に表示されないCanvas」は、「表示前に何段階か画像の加
![まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/67a807916396b353fe22c6e5872e9f20268dcb97/height=288;version=1;width=512/https%3A%2F%2Fimg.esa.io%2Fuploads%2Fproduction%2Fattachments%2F3516%2F2016%2F12%2F13%2F10914%2F38a4d5e9-a149-45eb-a78c-d0285f932d29.png)
Foreign Fetch による Micro Service Workers | blog.jxck.io
Update Foreign Fetch は削除される方向で進んでいる。 別途エントリを上げたのでそちらを参照。 Foreign Fetch が削除されそうな理由と Cookie の double keying | blog.jxck.io Intro Service Worker に Foreign Fetch という機能が提案されている。 この機能があるとクロスオリジンへの fetch をフックできる Service Worker を、その対象オリジンから提供できるようになる。 一体どういう仕組みなのか、これによって何が可能になるのかについて、デモを交えて記す。 1st Party と 3rd Party 例えばこのブログであれば、筆者自身が Service Worker を登録することで、Push などの機能を提供することができる。 ここではこれを、1st Party の Servi
arco Index
arco 0.1.3 A React+Redux framework with standards, conventions, and far less boilerplate Documentation Installation $ npm i arco --save Summary arco is a framework designed to streamline a lot of the architectural configuration of a React application by providing several web-standard packages built-in, as well as an API that is built to keep boilerplate minimal. The following packages are all incl
React のソースコードを読んでみよう！ - マルシテイア
こんにちは id:amagitakayosi です。 株式会社はてなで主にフロントエンド開発を担当しています。 この記事では React 本体のコードを読んでみます！！ この記事は Reactアドベントカレンダー 2016 の7日目の記事です。 昨日は yutaszk さんで「react-router v4 でFlux アプリケーションをHot Module Replacement する」でした。 目次 はじめに (Kyoto.js の宣伝) 準備 ディレクトリ構造 monorepo Haste Gulp と Grunt コードリーディング react ReactComponent react-dom ReactMount ReactReconciler ReactCompositeComponent ReactDOMComponent まとめ おわりに はじめに (Kyoto.js の宣
Exploring Node.js Future というタイトルで jsconf.asia で発表してきました。 - from scratch
このブログ記事は Node.js advent calendar の 4日目の記事です。 qiita.com いやーギリギリ 12/4 に間に合いました。 12/4 のアドベントカレンダーに投稿するっていうのは来週の12/11まで大丈夫だからな(?)— Yosuke FURUKAWA (@yosuke_furukawa) December 4, 2016 というわけで本題。 はじめに Node.js の日本のコミュニティを3年運営して、色んな所で語ってきた僕だからこそ、 Asia の JavaScript コミュニティに対して語れる話があるんじゃないか、ということで jsconf.asia で Node.js の今後について話してきました。 jsconf.asia とは シンガポールで行われる JavaScript のカンファレンスです、 jsconf.asia という名前の通り、 Jav
Promise の all と race だけで書ける待ち合わせ、書けない待ち合わせ - Qiita
ECMAScript 2015 で導入された Promise の関数 all と race だけで表現できる非同期処理の待ち合わせについての考察です。 考察の対象とした待ち合わせの条件は、「過半数の Promise が解決されるまで待つ」をはじめとした特殊なものです。**結論からいうと、all と race だけを組み合わせて、多数決による待ち合わせを表現可能です。**ただし、与えられた Promise の解決順序に依存する待ち合わせは、all と race だけでは書けません（ただし証明はできてないです 追記2020/11/08 書けるようです（否定的に証明されました）。 制約条件 Promise#then を使えば、なんでもできてしまいます。 そのため、この後の議論では Promise#then は封印します。 待ち合わせの書き方 まず、待ち合わせの表現方法を導入します。 非同期に解決
一から始めるJavaScriptユニットテスト - Hatena Developer Blog
この記事は、はてなエンジニアアドベントカレンダー2016の5日目の記事です。 こんにちは、はてなでアプリケーションエンジニアをしている id:shiba_yu36 です。先日、buildersconにおいて、現在所属しているプロジェクトでJavaScriptのユニットテストを導入した知見について、「一から始めるJavaScriptユニットテスト」というタイトルで発表しました。 speakerdeck.com この発表は、実際にJavaScriptのユニットテスト環境を作ってみると非常にハードルが高いと感じたので、そのハードルを少しでも下げられればという思いで、非常にシンプルな例で一から環境を作る例を紹介しました。アジェンダは次のとおりでした。 カクヨムのJS環境 JSのテストツールを整理する 通常の関数のユニットテスト DOM操作する機能のユニットテスト カクヨムのJS環境や、JSのテスト
リクルートテクノロジーズのフロントエンド開発 2016 - from scratch
前書き このエントリーは Recruit Engineers Advent Calendar の 1日目の記事です。 www.adventar.org リクルートテクノロジーズのフロントエンド開発 リクルートテクノロジーズではいくつもの並行するタスクが走っていて、プラットフォーム基盤と呼ばれる基盤技術開発とインフラソリューションと呼ばれるインフラ開発、後はアプリケーション開発支援などのタスクが存在します。 アプリケーション開発支援の中でもウェブフロントエンド開発は目下のところ重要タスクとされており、色んなやり方をトライアルしています。 基本的には、 React Redux Node.js という組み合わせでフロントエンド開発をしています。 主には以前 ubb.jp というイベントで発表したこの資料に記載されている内容でやっていますが、諸々補足します。 リッチなウェブアプリケーションを作るた
高校生にWeb上でプログラミングを教え始めたエンジニアがこの8ヶ月間で得た気づき - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 画像: N高等学校課外授業(N予備校)での生放送授業のブラウザ上での見た目、コメントが書ける 目次 はじめに 教えることになったきっかけ Web企業にエンジニアとして就職できるようになる、というミッション 既存のWeb教材に感じた問題意識 「各自進められるゲームブック形式の教材」と「徹底的にフォローする生放送授業」 コンセプトをもとに構成されたコースと内容 ゼロからプログラミングができるようになった人が生まれた日 永劫、プログラミングは一部の天才たちのためのものか？ プログラミング学習のモチベーションの課題と対応 まじめなオタクたちが社
CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！
Webアニメーションの実装方法として海外でいまもっとも話題なのが、anime.jsでしょう。日本の「アニメ」が語源の注目のDOMアニメーションライブラリーの使い方を詳しく。 もし速くて軽いアニメーションのライブラリーを探しているなら、Julian Garnierが考案したanime.jsを検討してみてはどうでしょうか。 この記事は、SVG画像を含む動的なDOMアニメーションに関する解説です。記事では、canvas-WebGLやSVGに特化したアニメーションライブラリーに触れるつもりはありません。ただし、WebページのHTML要素（理想的にはSVG画像も）のアニメーションに適していれば、別の機会に紹介するかもしれません。 記事の目的はライブラリーを分析してコードを掘り下げることではありません。主にCSSを使う人が、DOMのアニメーションのためにJavaScriptでなにができるかを追及する、
Nodeにおける初のオブジェクトデータベース: Realm Node.js
Realmではこれまでモバイルデベロッパーにフォーカスして Realm Mobile Database をSwift、Objective-C、Java、XamarinとReact Nativeに対して開発し、オープンソースとして提供してきました。本日、完全に新しい挑戦としてRealm Node.jsをリリースします。Nodeにおける初の真のオブジェクトデータベースです。本日から無料で完全にオープンソースとしてリポジトリが公開され、NPMを用いて npm install --save realm を実行するだけで利用できます。 これまで何年もの間、モバイルデベロッパーのみなさまから、サーバーサイドで動作するRealmが欲しいという本当にたくさんのご要望をいただいていました。長い間タスクリストに残ったままで、優先度は高くありませんでした。しかし、その状況は Realm Mobile Platf
React/Reduxで半年くらい真面目にSPAするとわかること
frontend meetup vol.1 in finc での登壇資料です。
DockerとSeleniumGridとNightwatchでE2Eテストを始めよう - 文系プログラマによるTIPSブログ
Dockerで簡単に始められますよ〜 Nightwatchならライトにサクッと書けますよ〜 皆さんはE2E(end to end)テスト、してますか？ 今回はDocker、Selenium grid、Nightwatchを使ったE2Eテスト（ブラウザテスト）の環境構築からテスト実行、VNCでテスト実行の様子を確認するところまでやってみようと思います。 技術要素 なぜNightwatchなのか 環境構築 docker node.js for mac for windows テストの準備 dockerコンテナ git clone node_moduleの依存 nightwatchの設定 docker-hub Nightwatchでテストを実行する ローカルでテストする場合 Selenium Gridで並列テストする場合 dockerコンテナの起動 Selenium Gridの動作確認 Nigh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSでグローバル汚染してる変数一覧を取得する - Qiita
Inouetakuya
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
