Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
nanameue,incでインターン中の斎藤です。 最近JSばっかりでkoa.jsにまで手を出してしまったのでkoa.jsの入門記事を書きます。 個人的には1年半ほどRailsをいじっていたのですがReactからJS界隈に入り始め、ついにバックエンドまで到達しました。 Rails界隈と比較すると割とミニマムな物が好まれていて、高機能なものよりシンプルな部品を組み合わせて作っていく感じです。 Railsのあまりの大きさに嫌気がさしRailsからnode系に移った人も多いらしくRailsを真似たsailsというフレームワークもありますが全く流行ってません。 自分は1週間ほど前からkoa.jsをやり始めたのですが、yieldとかgenerateなどを使っているので理解するのに時間がかかりました。なのでその部分を解説します。多分ここがkoaの本質でkoa自体はスーパーミニマムなので多分ここを理解す
古典的な構成のサービスを AWS Lambda + S3 で動作するサーバーレスアーキテクチャで再構築し、そのフロントエンドに Riot を採用しました。 プロジェクトは WWD JAPAN.com として公開しています。 React や Angular などに代表される JavaScript の UI ライブラリのうち、Riot はミニマルな API と HTML 標準に近い文法を採用しているのが特徴です。 Riot はコンポーネントベースの UI 開発から複雑さを取り除き、楽しさを与えます。 TL;DR Riot はこれまでの UI ライブラリと比べて以下の点で異なります。 必要最小限の API 少ないボイラープレート Web Components ( HTML Template ) に似た文法 React のコードと比較してみます。 ToDo アプリケーションを React で書くと
@armorik83です。今回はangular-cliについてまとめます。 angular-cli https://cli.angular.io/ Prototype of a CLI for Angular 2 applications based on the ember-cli project. angular-cliはAngularの2.x以上(本稿ではAngularと記述する)を用いたアプリケーションの開発を補助するCLIツールである。 インストール インストールは至って簡単だ。 node_modulesのグローバル空間にインストールするため抵抗がある人もいるかもしれないが、その場合適宜工夫してもらいたい。基本的にコマンドラインツールとして使うので、筆者はあまり問題ないと考えているが、バージョン違いによる挙動の差異があり得るため、チームで運用する際はメンバー間でバージョンについて
この記事は Node.js Advent Calendar 2016 24日目の記事です。 今回は、ServiceWorker内の動作をExpressフレームワークを用いて記述できるようにするまでを解説します。 はじめに Node学園祭で「Browser is the new server」というセッションの際に発表されていたライブラリ、express-service(bahmutov氏作成)が非常に興味深かったため、その処理内容を追いました。 Browser is the new server スライド / 反応まとめ 今回のデモコードは、以下から参照できます。 https://github.com/narirou/test-express-service-worker https://test-express-service-worker.herokuapp.com/ ServiceW
gloops Advent Calendar 24日目 Merry Christmas!! gloops Advent Calendar 24日目です 23日目は @t_shibaki さんの「webのサーバーエンジニアがunreal engineをさわってみた」でした 昔と違ってプログラムを書かずにゲームが作れちゃうんですね。。すごい 早速ですが、タイトルだけ見ると「何を言ってるんだ??」という感じだと思います 何がしたいかというと、ブラウザ(Service Worker)内で KoaJS 1 を実行しリクエストを処理させれば オフラインアプリに近いことができるのでは?と試してみたところ実現できたので、共有します (全然クリスマスっぽいネタじゃなくてすみません!) 概念図 初回のみ、ServiceWorker、ServiceWorker 登録用の HTML と JavaScript をサ
Koa v1.2.1で書かれたアプリケーションをKoa v2.0.0にアップデートしたのでそのログ的なものです。 v1からの大きな変更点として、middlewareのインターフェースがgenerator functionからasync/awaitへと変わっています。 環境の用意 Koa v2ではasync/awaitが使える環境が必要となります。現状Node.jsでasync/awaitを使うためには主に Node.js v7系を使い --harmony-async-await オプションをつけて起動 Babelでトランスパイル&polyfill という二種類の方法がありますが、ここでは後者のBabelを使う方法で進めていきます。
この記事はServerless(2) Advent Calendar 2016 の16日目の記事です。 自身のプロダクトをClaudia.jsを使って開発しているのですが、今回はその紹介を書きたいと思います。 Claudia.jsとは Claudia.jsはオープンソースのLambdaデプロイメントツールです。Node.jsで作成したLambdaアプリケーションを簡易にデプロイすることが出来ます。API Gatewayと組み合わせることも可能です。 Lambdaのデプロイツール(フレームワーク)といえばServerless FrameworkやApexなど多数存在しますが、他のツールとくらべてClaudia.jsは何が違うのでしょうか? 最も大きな特徴は、Node.jsに特化しているという点です。ServerlessやApexのように複数のプログラミング言語に対応しているツールと異なり、C
どもめがねこと、大串です。こちらは Riot.js Advent Calendar 2016 - Qiita の記事として書いています。 もともとは、JSに興味があるものの、なかなか仕事で使う機会がなく、さらにはJSを使うためにいろいろ技術を組み合わせて使わないといけない。 WebpackやbabelやES6やGulpやnpmやわーーー。。。ということで、全体のことも解らずなのですが、このRiotのコアコントリビュータでもある河村さんに、「メガネさん Riot.js Advent Calendar 2016 に参加してよ。」とお声掛けいただきましたので、とりあえず参加しないわけには行かないということで、ココに書きます。 さて、上記のようにほぼさっぱりわかってないものです。(JSといえば、jQueryアコーディオンするぐらい)なので、そういった私と同じような人がRiot.jsを使えるのか?!
こんにちは、@yusuke_yasuoです。 Angular Advent Calendar 2016の9日目は、Dockerを使ってMacでもWindowsでもコマンド一発で動作するAngular開発環境を作る方法について書きたいと思います。 また今回は範囲外ですが、CI・CD周りも整備していきたいため、Angular CLI (https://github.com/angular/angular-cli) を使って開発してみました。 Docker使う理由 今回のDocker利用には主に2点ほど理由がありました。 社内にMac派とWindows派がいるため、環境が違うことによって起こる問題の吸収 今後メンバーが増えていく予定があるため、環境構築時間の短縮 今回のゴール Angular公式サイトのTUTORIAL (https://angular.io/docs/ts/latest/tut
Riot.js Advent Calendar 2016 の6日目です。 狙ったわけではないのですが、今日は WordPress 4.7 のリリース予定日! (追記: タイムゾーンの都合で、日本時間では翌朝にリリースされました。) 今回のリリースで、ついに REST API のコンテンツエンドポイントが WordPress コアの機能になりました! WordPress は何と言ってもたくさんのサイトで使われています。 今日の時点で W3Techs の統計を見たら世界の27.2% の Web サイトが WordPress で出来ていて、かつ CMS を利用している日本語サイトに絞ると80.3%ということでした。 今回のアップデートで、世界中のたくさんの Web サイトから記事の API が出ることになるでしょう。 わくわくしますね。 Riot + WordPress というわけで、Riot
はじめに みなさん、日頃JavaScriptのテストはどのように行っていますか? 昨今ではAngularJSやReactJSを始め、JavaScriptのフレームワークやライブラリを使用してのフロントエンドの開発が当たり前のようになってきております。 ではそのフロントエンド、JavaScriptのテストはどんなツールを使っていますか? mochaやpower-assert、chai、Karma、Jasmine等を組み合わせて使用してテストしているでしょうか。 前置きが少し長くなりましたが、Facebookが開発したオールインワンな「Jest」というツールのReactでのHowto的な使い方から実際のテストでの使用例を交えて紹介したいと思います。 ちなみにこのJest、最近リリースされて話題になったパッケージ管理のYarnでも使われています。 対象バージョン Jest:22.0.4 Reac
この記事は bouzuya's RxJS Advent Calendar 2015 の 8 日目かつ RxJS Advent Calendar 2015 の 8 日目です。 はじめに 今日は ReactiveX の Operators の Error Handling について RxJS の API ドキュメントやソースコードを見ていきます。 また RxJS 4.0.7 を対象にしています。 Observable のエラーハンドリング subscribe (Observer) の onError 各種 Operator よりまず subscribe (Observer) の onError です。Observable.throw でエラーを流してみましょう。 import { Observable } from 'rx'; Observable .throw(new Error('ERRO
4年近く前の2012年に僕が考えたChrome拡張機能を作るときのデザインパターンというエントリを書きました。最近参加したイベントで「よういちろうさんの拡張機能の記事見て作ってみました〜」と声をかけてくれた人がいて嬉しかったのですが、2012年のそのエントリは、すでに内容が古くなってしまっています。最近の状況を踏まえて、内容を新しくした「2016年度版」を書いてみようと思います。 変更しようと思った点は、以下です。 prototype.jsは使わず、ECMAScript 2015で書く。 Background Page(常駐型)ではなく、Event Page(非常駐型)にする。 そもそも最初のコードセットは自分で書かない。 本文やコード的には、2012年度版をコピペしています。 (この投稿の内容は、自分のブログエントリと同じです。) 前にいくつかのChrome拡張機能を作っていて、すでに数
 # はじめに Webサービスを開発するにあたり、JavaScriptのフレームワークは今や欠かせないものになりました。 多種多用なフレームワークがある中で、今回は主にwebサービスのフロントエンドで用いられるJavaScriptフレームワークをまとめました。 それぞれのJavaScriptフレームワークの詳しい使い方については、詳細に説明されているサイトが沢山あるので本記事では省略致します。 こんなフレームワークもあるんだなーと軽い感じで眺めていただけると幸いです!
これは何 JSer.info 5周年記念イベント - connpass (2016/01/16) にて発表した資料。特に理由はないが公開するのを忘れていた。 スライドモードのリリースにあたって公開する 近況(2016/01/16) 昨年9月 Kobito for Windows => Qiita開発チーム モダンなJS(当社比)を導入しようとした モダンなJSとは(mizchi主観2016版) npm/browserifyで依存を解決 Babel/ES2015 React/Flux Testable No More jQuery plugins ※これらの基準について今回は割愛 現実(2015) CoffeeScript Sprockets / グローバル名前空間渡し Backbone JSのテストはjasmineで数件 (※request specは豊富) jQuery plugins
端的に結論を言うと、もうこれで良いじゃないかな、です。 背景 ちょっと前にこのへんとかを中心にWebのフロントエンドを作るのにフレームワークはいるかいらないかみたいな議論(適当)がありましたが、業務で静的データを使ったWebページ(サーバサイドの状態がフロントエンド側から変化しないページ)を作ることが多い自分としてはこう思いました。 確かにjQueryで直接DOMをいじるのは、いじる要素が片手で数えられるうちはいいが、それを超えるとうまく管理できなくなるからあんまり上手い方法でないのは同意できる かといってReactJSは確かに便利そうではあるが、正直ぱっと見ではよくわからないので、使うなら腰を入れて勉強する必要がありそう=ミニマムスタートしにくそう ということでうまく折衷案的なものはないかと思っていたら riot.js というのを見つけたので試してみました。 Riot.jsの超入門 Ri
{ "ambientDependencies": { "angular": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular.d.ts#17ef40452039d19e06dc2a3815ea898c505860fa", "angular-protractor": "github:DefinitelyTyped/DefinitelyTyped/angular-protractor/angular-protractor.d.ts#17fa1e5f269189f7f8e0f53f8c443e6c2eac562c", "empower": "github:DefinitelyTyped/DefinitelyTyped/empower/empower.d.ts#aeb7701fbef3b7fc7261d67c025c823666ab
JavascriptのSPA(Single Page Application)フレームワークの使いどころ(jQueryとの比較)JavaScriptjQuerySPA ※ 本投稿はフロントサイドの開発をJavascriptで行うことを前提に書いていますが、そもそも、フロントサイドでどこまでJavascriptにすべきかについて私的な見解を以下に書きました。(2017.5.10) ▶ Webシステムのフロントサイドとサーバサイドの比率(JavascriptのSPAを利用する理由) ■ どこで使うのか?jQueryだけで十分か? SPAフレームワークの導入を検討する際に、「jQueryでも十分」といえるケースはよくあると思う。 そこで、jQueryとSPAフレームワークを比較して、本当にSPAフレームワークを使う場面はどういうところかを考えてみる。 ただ、結論を先に書けば、規模や新規に作るのか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く