0から始めるNode.jsパフォーマンスチューニング
近年の Node.js は API のサーバとしてはもちろん、Nuxt.js や Next.js といった SSR や BFF などフロントエンドのためのバックエンド言語としての人気が高まっています。 フロントエンドエンジニアがコンテキストスイッチ少なくバックエンドの整備ができることは非常に大きな利点です。 ですが、フロントエンド（ブラウザ側）とバックエンド（サーバ側）ではパフォーマンスチューニングで見るべき点が大きく違います。 しかし Node.js アプリケーションのパフォーマンスイシューの見つけ方などがまとまっている資料は少ないです。 そこで、本記事ではフロントエンドエンジニアが Node.js でパフォーマンスイシューを見つけ、改善するため自分が普段パフォーマンスチューニングを依頼されているときにみている基礎的なポイトをまとめていきます。 1. 計測ステップlink Node.js
ChatWork Liveの刷新とScala.jsについて - Chatwork Creator's Note
こんにちは。クライアントアプリケーション開発部の田中です。 好きな麻雀の役は七対子です。 先日、ChatWork LiveのUIが変更されました。 詳細は下記を御覧ください。 blog-ja.chatwork.com UIについては今後デザイン部の方がブログを書くと思うので、今回私の方では技術的なところの紹介をしたいと思います。 （尚、この記事にはWebRTCやビデオ会議システムの話は全く出てきませんので、ご了承ください。） ChatWork Liveのフロントエンド技術について 実は今月のUI更新とは別に、JavaScript部分の大幅な変更を4月末に実施しています。 大まかな設計はすべて@kyo_ago氏がやってくれて、 私は敷かれたレールをただただ歩くだけだったので割と楽させてもらいました。 ChatWork LiveのWebクライアント側は主に以下の技術を使って実装されています。
Webサイトのクローリングやスクリーンショット撮影が簡単にできるヘッドレスChromeがGCPに登場
Googleのクラウドである「Google Cloud Platform(GCP)」のサービスの1つである「Google App Engine」が2018年6月にJavaScriptの実行環境であるNode.jsに対応し、それに伴ってさまざまなNode.jsアプリがApp Engineで動作するようになりました。その中の一つに「Puppeteer」というものがあり、このPuppeteerを用いるとGUIを描画しないヘッドレスなChromeを簡単に使うことができ、Webサイトのクローリングやスクリーンショットの撮影などが容易に行えるようになります。 Introducing headless Chrome support in Cloud Functions and App Engine | Google Cloud Blog https://cloud.google.com/blog/pro
Node.js でちょっとしたサーバーサイドやるなら、 Micro が良いかも - Qiita
ZEIT が作っている Micro という Node.js のフレームワークがあり、使いやすそう。 ZEIT は、かの Next.js を作っていて、 Mongoose を作った人や socket.io を作った人が所属しており、とても信頼できる。 ちなみに、 ZEIT は Now という、 Node.js （及び Dockerized されたもの）を動かせる、サーバーレスのサービスもやっている。 ZEIT(時) と Now(今) という世界観が良いですね。 初動が早くて、快適だった。 [追記] 何かに Micro 8 と書いてあって、最初、そういう名前のフレームワークと思ったのですが、実際は 8 はバージョン名で、 Micro のようです。また現行バージョンは9でした。 多分これ https://zeit.co/blog/micro-8 [/追記] Features README の F
PhantomJSの開発が終了しリポジトリがアーカイブ化された
QtWebKitをベースにしたヘッドレスブラウザであるPhantomJSの開発が終了され、2018年6月2日にリポジトリもアーカイブされました。 ariya/phantomjs: Scriptable Headless Browser 以前にもお伝えしていましたが、PhantomJSはQtWebKitをベースにしていて安定版が利用しているバージョンも古いままでした。 また、QtWebKitの新しいバージョンへアップデートを行うベータ版も開発されていましたが、Headless Chromiumが公開されたことや個人でPhantomJSのメンテナンスを続けていくの難しいという問題もあり開発は停止していました。 2017-05-03のJS: Headless Chrome/FirefoxとPhantomJS/SlimerJS、ES modules - JSer.info 2017-09-05のJ
オフラインファースト的なGUIアプリケーションをScala.jsで書く話 / Scala.jsについて - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く
はじめに オフラインファーストへの要求 近年、オフラインファーストというか、「オフラインのときにも普通につかえて、オンラインになったら同期する」みたいなことに対する要求が高まっているように感じます。 その場合は、ローカルにもきちんと永続データを持っておき、オンラインのときにバックエンドと通信をしながらバックエンドのデータと同期していく、というスタイルを考えるのが自然だと思います。 また、普通のJSアプリケーションであっても、「サーバーに投げる際に失敗したデータはローカルでメモリ上にもっておいてリトライしたい」などの要求もあるでしょう。 さらに、ここでモバイルアプリも視野に入っているとなると、どうしても「オッRealm Mobile Platformか！？」という感じが出てきますが、Realm Mobile Platformにロックインされるのと引き換えに開発の速を選ぶのか、それとも、という
2017年に見ておきたい12のJavaScriptライブラリ | TechAcademyマガジン
JavaScriptライブラリには、有名なものでjQueryやReactといったものが存在します。そこで、あまり知られていないものの急速に台頭している12のJavaScriptライブラリを紹介しています。ぜひご覧ください。 本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、デザイナー、ライターであるJake Rocheleau氏によって投稿されました。 JavaScriptのライブラリは数多く存在しているため、その中のどれにエネルギーを注ぐべきかを決めるのは難しく思えるかもしれません。 成長を続けて広く採用されるようになるライブラリもあれば、中には使用されなくなったり、別の新規プロジェクトに吸収されて消滅するライブラリもあります。 ほとんどのエンジニアは、jQueryやReactなどの有名なライブラリはすでにご存知かと思います
Scala Warriorをリリースしました - たけぞう瀕死ブログ
昨年から密かに作り続けていたScala WarriorというWebアプリケーションをScala関西 Summit2016にあわせてリリースしました。 github.com これはRuby WarriorにインスパイアされたScala学習用のゲームで、Scalaコードを書いて侍を操作しステージをクリアしていくというものです。 実装にはScala.jsを活用しており、プレイヤーが入力したコードをScala.jsでJavaScriptにコンパイルし、それをクライアントにサイドに返却してブラウザ上で実行しています。エディタではCTRL+SPACEでコード補完、CTRL+Sでコンパイル結果の確認ができます。このあたりのコードはscala-js-fiddleを参考にさせていただきました。 とりあえず動くものをリリースしたというだけでステージ数も少ないのですが、今後少しずつ改善していければと思っています
【速報】jQuery 3.0がリリース - 古いIE用コードが削除された新バージョン | ソフトアンテナ
jQuery開発チームは6月9日((現地時間)、jQueryのメジャーバージョンアップ版「jQuery 3.0」をリリースしました(公式ブログ)。 jQuery 3.0は2014年の10月から開発が続けられてきたjQueryの新バージョンで、互換性を維持しながらも軽量かつ高速に動作するように設計されています。v3.0では古いIEのための互換コードが全て除去されているため、IE6-8のサポートが必要な場合は、引き続き最新のjQuery 1.x系(現在の最新1.12)を使用することができます。 v3.0はメジャーバージョンアップでありながら大部分の互換性を保っており、バージョンアップしても大きなトラブルが発生しないことが期待されていますが、アップグレードをアシストするために3.0 Upgrade GuideやjQuery Migrate 3.0 pluginが準備されています。 v3.0の主な
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
TypeScriptでのフロントエンド開発環境作成総まとめ - $shibayu36->blog;
これまで自分のブログで、TypeScriptを使ったフロントエンド開発環境についてブログをいくつか書いてきた。ひとまずこの辺りで、TypeScriptでフロントエンドを開発するための最低限の環境を構築できるようになったので、総まとめとしてブログエントリを書いておく。 今回のサンプルコードは https://github.com/shibayu36/typescript-project-sample/tree/4653cd002eef3ee1946a2ca1da344e0076b2844f に置いたので参考に。 これまでの記事 EmacsでTypeScript環境を整える - $shibayu36->blog; JSをbrowserifyでビルドし、ライセンスコメントを適切に残す - $shibayu36->blog; gulp + browserify + tsifyを利用してTypeSc
CoffeeScriptからES2015(ES6)へ移行しました - Pepabo Tech Portal
ネットショップ運営サービス カラーミーショップで「新カゴプロジェクト」と呼んでいる最高のショッピングカートの開発をしている@tsuchikazuです。 2014年に開発を開始した新カゴプロジェクトではフロントエンドをCoffeeScript + Angularで開発してきました。ES5までの時代にAltJS文化を作り、Class構文やArrow Functionを先取りしていたCoffeeScript。それらはES2015(ES6)の仕様に採用され、一方でCoffeeScript自体の開発は止まり、CoffeeScriptは役割を終えたのではないでしょうか。先月、今後も変化し続けるフロントエンドに追従するためにも、新カゴプロジェクトで200ファイル以上のCoffeeScriptをES2015へ移行しましたので、今回その方法を紹介します。 トランスパイラ 移行方法としてCoffeeScrip
今から３分で，HTML5のドラッグ＆ドロップAPIと File APIを習得しよう（JSの実装サンプル付き） - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ 今から３分で，HTML5の JavaScript API の使い方を２つ覚えよう。 １：ドラッグ＆ドロップAPI 画面上の要素を。 画面外から。 ２：File API 読み込み。 書き込み ※これは覚える必要はない。 シンプルなサンプルコード付きで，これらの実装の方法を素早く学習する。 ※サンプルは，IE8のようなHTML5未サポートの古いブラウザでは動かないので注意。FirefoxやChromeを使うこと。 では，ここから３分の時間のカウントを開始。集中して読もう。 （0：00〜前半の１分半） 画面内でのドラッグ・ドロップ （後半の1：30〜3：00） 画面外からのドラッグ・ドロップ 参考資料 （0：00〜前半の１分半）画面内でのドラッグ・ドロップ まず，動作例を見てみる。「リンゴ」をバスケットにドロップしてみてほしい。 動作サンプル１ ht
Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
JavaScriptで入力補完するライブラリ。suggest.jsが素敵。 - 感謝のプログラミング
JavaScriptで入力補完を行うライブラリ 以下のURLのsuggest.jsがいい。 http://www.enjoyxstudy.com/javascript/suggest/ ソースコードのダウンロードはこちら。 https://github.com/onozaty/suggest.js 実際に入力補完を行うサンプルはこちら。 listに入れた文字列の入力補完を行う。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="suggest.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script> <script
clipboard.js
Why Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework. That's why clipboard.js exists. Install You can get it on npm. npm install clipboard --save Or if you're not into package management, just download a ZIP file. Setup First, include the script locat
Tutorial: Tic-Tac-Toe – React
You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you’ll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React. This tutorial is designed for people who prefer to learn by doing and want to quickly try making something tangible. If
Bootstrapにフォームのバリデーションや通知パネルなど、便利な機能を簡単に追加できるスクリプト -Smoke
Bootstrapで作成したページに、外部ファイルと数行のコードを加えるだけで、さまざまな便利な機能を追加できるjQueryのプラグインを紹介します。 Bootstrapの対応バージョンは、3.xです。 Smoke Smoke -GitHub Smokeの使い方 Smokeのデモ Smokeの使い方 Smokeの使い方は、簡単です。 Bootstarpでつくったページに、外部スクリプト・スタイルシートを加えます。 Bootstapのコードをベースにした最小構成は、こんな感じです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - usablica/intro.js: Lightweight, user-friendly onboarding tour library
How to use Scala.js in real world?
