Stream API入門 - Qiita
Nodeのアドベントカレンダー、既に終わった枠が空いていて、この際書きたいネタがあったんで参加しました。宜しくお願いします。 アドベントカレンダーの時期だけ出没する弱い日曜Haskellerです。普段の実務ではNode.jsにお世話になってます。宜しくお願いします。 さて、みなさんStream API使ってますか？Node.jsといったら非同期ですよね、やっぱり。しかしながら、JavaScriptでも他の言語でも、非同期処理自体は注目されているものの、まだexperimentalという感じで様々なAPIが考案されては消えていき、また元々そういう文化が根強くなかったところから来た人たちにとって、こういう文化はちょっと立ち入りづらいところもあるかもしれませんね。 今日は、主にそういう人たちに向けて、まず非同期の色々なAPIの紹介、そしてその中でのストリームのメリット、そして実際のStream
Reactを始めてから今までにお世話になった記事 - Qiita
ReactAdventCalendarの２，３，８日を埋めたらカレンダーが全て埋まるので頑張ってるしょっさんです。 今回はReactを始めてから今までにお世話になった記事を紹介していきます。 これからReactを始める方の何かご参考になれば嬉しいです。 （ 勿論ですがまず最初に公式のチュートリアルをやりましょう:-) ） 30分間React入門「いいねボタン」作成チュートリアル とりあえず手っ取り早くReactで何か動かしたい！って人にうってつけの記事です。 結構日本語でのReactを使ったアプリ作成チュートリアルって貴重なので、Reactの公式チュートリアルが終わった人は次にこっちをやってみるのもいいかもしれません。 React でマテリアルデザインを実装する Material UI を試してみる Reactでのデザイン面をどうしようかな・・・と考えてた時に出会った記事です。 デザインで
Real World Electron Development - Qiita
~ Case of the Kobito, Markdown Editor for YAPC Hackathon! @mizchi / Koutaro Chikuba, Increments Inc About Node.js / Frontend Engineer Single Page Application Specialist Kobito for Windows Developper Increments Inc (Providing qiita.com / Qiita:Team) Sorry, my English is not so good. YAPC::Asia 2015 Hackathon | Peatix の発表資料 ここで喋ることは一昨日急に決まったので(YAPC回るし)スライド作る時間なかった。ゆるして。 発表中に @benogle 氏に何度か質問しながら進行しま
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
React Native ファーストインプレッション - Qiita
React Native 概要 React.js とだいたい同じ作法で、JavaScript で書いたコードが iOS ネイティブアプリとして一応動く。そのフレームワークと開発環境を提供する。 React.js と同じ React を謳っているとおり、JSX で UI コンポーネントを定義するとか、Props や State で View のデータフローを整えるとか、setState() によるデータバインディングとか、諸々が一緒。従って React.js でアプリケーションを作ったことがあれば、学習コストをほとんどかけずにアプリが作れる･･･かも 例えば以下のように、入力値をそのまま画面にエコーするアプリケーション。 これはこんな感じのコードになる。 var React = require('react-native'); var { AppRegistry, StyleSheet, T
ServiceWorker のスコープとページコントロールについて
Chrome 40 から ServiceWorker が使えるようになりました。Opera もバージョン 27 から対応し、Firefox でも現在実装が進められています (参考「Is ServiceWorker ready?」)。ServiceWorker はページのライフタイムとは独立した JavaScript の実行コンテキストを提供する機能で、ページからのリクエストをフックしてキャッシュからレスポンスを返したり、サーバからのプッシュイベントを受けてそれをページに通知するといったことが可能になります。 ServiceWorker のコンセプトや基本的な使い方、ユースケースなどは下記のページが参考になります。 Service worker が拓く mobile web の新しいかたち Service Worker の紹介: Service Worker の使い方 - HTML5 Ro
VagrantでDockerが動く環境を一撃で作る - Qiita
メモです。 boot2dockerを使わず、 vagrant上に普通にVM立ててDocker使える環境を一撃で用意するコマンドです。 （VMはubuntu14.04） 一撃でインストール wget https://raw.githubusercontent.com/phusion/baseimage-docker/master/Vagrantfile && vagrant up vagrant ssh ... $ docker run busybox echo 'Hello Docker!' Unable to find image 'busybox:latest' locally df7546f9f060: Pull complete ea13149945cb: Pull complete 4986bf8c1536: Pull complete 511136ea3c5a: Already
初心者向け、「上手い」シェルスクリプトの書き方メモ - Qiita
ここ最近、沢山シェルスクリプトを書くようになりました。 元々あまりシェルスクリプトを書いたこと無かったので、色々と勉強しつつ書いてるのですが、 他のプログラミング言語とはちょっと違って独特なクセというか、発見の度におぉー！ってなることが沢山あって楽しいです。 そんなわけで、最近学んだり参考にした中で特に感動したシェルの上手い書き方をまとめてみます。 きっとまだ知らないこととかもっと上手くやる方法なんかが沢山見つかりそうなので、 もっといいやり方あるよ！って方はコメントください 何もしない : (コロン)コマンド シェルを書いていた時に非常に欲しかったコマンドがこれ！何もしない！ : というコマンド(？)を利用すると、何もせずに終了ステータス0(つまり正常終了)を返します。 これが様々な事に使える万能コマンドで、これによって面倒なエラー処理を簡潔にできたり、 入力や出力のリダイレクト元/先と
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショートカットの一覧 キーボードで出来ることはなるべくキーボードでやるけれども、マウスやトラックパッドでやったほうが速い場合は臨機応変に切替えることを心がけています。 Chrome Canaryを使う Chromeの開発者向けプレビュー版 Chrome Cana
jest入門 - Mockテストと非同期テスト - Qiita
Jestとは Facebookで開発しているUnitTestフレームワーク。 特徴は以下です。 FAMILIAR APPROACH Jasmineベースなので記法は馴染みやすいものです。 MOCK BY DEFAULT CommonJSスタイルのrequire()をMockすることで単体テストを実現します。 SHORT FEEDBACK LOOP サクッとテストできる。 ブラウザとかPhantom.jsとか要らないよって意味だと思う。。。 何がいいのか？ 素のJasmineと比べてこんな特徴があるようです。 テストファイルを勝手に探してくれる。 DefaultでMockされるので、あえて記述しない限り純粋な単体テストになる。 mockを使うことで、非同期処理を同期的に書ける。 Jasmine2.Xでは非同期サポートがされたとか聞きましたがよく知らない。 jsdomを使うことで、HTMLを含
ネイティブと働いて分かった英語コミットメッセージの頻出動詞10つ
ウッ ここで詰まる事は往々にしてあります. 特に急いでる時の煩わしさは甚だしいです. どうせならそれっぽい英語を使いたいのでOSSや同僚のコミットメージの語彙の出現確率を調べてみましたら、 もちろんfeatureによってコミットメッセージの付け方など数多あるものの、一定の頻出パターンは見い出せたので筆を取りました. （英語勉強しないと..） 方法 github.com/rails/railsのコミットメッセージ内における各動詞の出現確率を求め、 またOSSと仕事でのコミットメッセージの趣向も変わってくる事も勘案するため、 （仕事でDeprecateとか滅多に使わんし） 同僚に聞きつつ10つあげてみた. 以下列挙 （例は実際の同僚やOSS上でのコミットメッセージです.） Add *A to *B AをBに加える
IE10 以下を切る場合の JavaScript チェックリスト - Qiita
この投稿は、 JavaScript Advent Calendar 18日目の記事です。 更新履歴 こちら をご覧下さい JavaScript の書き方をアップデートする JavaScript Good Parts で書かれているような JS の書き方は、古くなりつつある部分も多いです。 正直なところ、自分はあの本が「今でも」良書だとは思っていません。 初学者に勧めることもしません。まんべんなさと普遍性と客観性から「パーフェクト JavaScript」 を勧めています。 その頃と比べると、 JavaScript をとりまく環境は変わりました JavaScript の進化に合わせて書き方もアップデートしていくべきなので、今回は分かりやすいしきい値として 「IE10 以下を切れるとしたら」 という前提で、列挙してみます。 たとえば XHR2 や File API に依存したサービスをやる場合な
名前が厨二っぽいjsライブラリ3選 - Qiita
神話序章 最近はReactiveだとか仮想DOMだとかがホットで、その辺りキャッチアップしていかなきゃなあと思ったのですが、今回はコードを書くその右手が疼く人のためのおすすめライブラリを紹介させてください。 神話第一章 Loki ロキ - Wikipedia ロキ（古ノルド語: Loki）は北欧神話に登場する悪戯好きの神。その名は「閉ざす者」、「終わらせる者」の意。 か、かっこいい。。。 Loki.js。browser/node両対応のオンメモリストレージエンジン。APIはMongo風で、慣れた人なら直観的に扱えるはず。 var db = new loki(); var users = db.addCollection('users'); users.insert({ name: 'loki', email: 'loki@example.com', age: 18 }); users.in
Chrome 40 で今すぐ ServiceWorker を試す - Qiita
Chrome では、リリース 40 からごく一部で「マシな AppCache」とも言われている ServiceWorker がデフォルトで使えるようになります。ServiceWorker はオフライン API の1つとして紹介されていることが多いですが、実は 「Webの世界観を変える (かもしれない) 大注目API」の1つです！ ここでは、Chrome 40 で出来たての ServiceWorker をひと通り試す方法を書いてみたいと思います。 ServiceWorker とは? 詳しいことは最新スペック (Editor's Draft)やHTML5Rocks の記事を見てもらうとして、ものすごくざっくり書くと ServiceWorker とはバックグラウンドで実行される Javascript 環境のことで、 ブラウザ内で動くJavascriptで書いたネットワークプロキシ のように動作さ
コストを下げろと言われたら~AWSでまずやること~ - Qiita
こんにちは。CYBIRDエンジニア Advent Calendar 9日目のgucchonです。 新卒2年目、webエンジニアです。 8日目はkeitarouさんのGitHubをもっと便利にするためのChrome拡張とかでした。 全くGitHub使えてなかったんだな…と身にしみる内容でした。お恥ずかしながら… 本日の内容 「サーバ費、もっと下がらない？」 なかなか聞きたくない言葉ですね。サービスを継続させていく上では当然コスト面をしっかり考えて運用をしていかなくてはいけないのですが、まぁ正直めんd...少しばかり手間です。ただ、AWSならある程度簡単にコスト管理ができて、対応策も用意されているので助かりますね。それでも誰もやりたがらないけど(ﾎﾞｿｯ ということで、コストを下げろと言われてしまったとき、CYBIRDのコストカッター、gucchonがまずやっていることをご紹介したいと思います
SPAのサイトをアプリにするメリットと開発での問題点について - Qiita
最初に Webの技術を使って、iOS、Androidアプリを作ることができるPhoneGapというツールを知っている人は多いと思います。 PhoneGapはAdobeが提供しているのですが、そのオープンソース版としてApache Cordovaというツールがあります。 Apache Cordovaを使った事例として、第2回Cordova勉強会でWebサービスとしてリリースした「smartFX」をハイブリットアプリとしてリリースすることになった背景やその効果についてと、ハイブリットアプリ化するにあたって出てきた問題点と対応について発表をしてきました。 詳しい内容はスライドを見てください。 smartFXにおけるApache Cordovaの活用について ここではスライドの補足をしていきたいと思います。 ハイブリットアプリをリリースすることになった背景やその効果について smartFXは、サイ
リアルタイムWebアプリケーションフレームワークMeteorについて - Qiita
はじめに 初めてAdventCalenderに参加させていただきます。 先月頭に初めてMeteorに触り、１ヶ月しか触っていないですが、 その素晴らしさに感動し、DiscoverMeteorの翻訳作業に参加させて頂いたりしてます。 その感動したポイントをお伝えしたいと思い今回Meteor AdventCalenderに記事を投稿することにしました。 目標は、「ちょっと触ってみるか」と思っていただくことです。 Meteorに出会う経緯 もともとiOSアプリ開発をやりたくて組み込み系エンジニアからWeb系エンジニアに転向しました。 その状態でWebアプリ開発に触れ、ネイティブアプリと比較して 違和感というか納得いかない感を感じており、 それを解決してくれたのがMeteorでした。 納得いかない点を説明させていただくところから始めさせてください。 Web開発の違和感(SPA以前) Web開発で納
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
2015年に備えて知っておきたいリアクティブアーキテクチャの潮流 - Qiita
はじめに もうすっかり年末なので、これから2015年にかけてアプリケーションアーキテクチャがどのようになっていくのかという個人的な考え/妄想や背景について、「リアクティブ」というキーワードをもとににまとめてみたいと思います。 Google Trendsを見ると"reactive programming"という言葉は2010年前後から、ゆっくりとバズをし始め、現在も上昇を続けています。 また、仕事としては、2010年ごろから大規模なWebサービス開発において、フロントエンド、バックエンド、アルゴリズム改善といった様々な箇所で、リアクティブプログラミングの要素を取り入れながら、アーキテクチャの改善を進めてきました。そのため、こういったアーキテクチャがコード品質の維持や安定性の向上、実際的で複雑な問題の解決にも適応可能であるということを実感として持っています。 近年、そういった要素が様々なツール
ZenHubとは - Qiita
2015/12/03追記：待望のFirefox対応をしました！今日現在は、 https://www.zenhub.io/firefox からアドオンをインストールすることができます！ また、Firefox版の公開を記念して、初月割引や、ZenHubグッズ（！）がもらえるプロモーションコードがあるので、ZenHubを使ってみようか迷っていた方は、プロモーションコードを利用するとお得に始めることができます。 ZenHub公式ブログの記事はこちら https://www.zenhub.io/blog/firefox-fans-can-now-use-zenhub-with-their-favourite-browser/ 2015/07/01追記：このエントリー中のスクリーンショットは、古いバージョンのZenHubのものです。追記時点での最新の機能についてはZenHub2.0についてを参照してく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
