PromiseとCallbackの両方に対応する関数の書き方 | Tokyo Otaku Mode Blog
こんにちは。Tokyo Otaku Mode（TOM）ソフトウェアエンジニアの稲田です。 TOMが開発、運営している自社ECサイトのotakumode.comのバックエンドは現在Node.jsで動いています。その中で多数の関数が定義され利用されていますが、そのほとんどがCallbackを取るようになっています。 しかし最近、バックエンドのNode.jsのバージョンがv6.11.xにアップデートされジェネレータが使えるようになり、co + yieldの組み合わせで同期的な書き方ができるようになりました。このco + yieldで書くために、PromiseとCallbackの両方に対応した関数を書いたときの問題とその解決方法を書いておきます。 TL;DR const f = (callback = () => {}) => { const p = new Promise((resolve, r
Node.jsアプリの開発をモダン化するために取り組んできたこと
2. Copyright © bitbank, inc. 自己紹介 ❏ ビットバンクでサーバーサイドを担当 ❏ Node.js, TypeScript ❏ 前職ではモバイルゲームを開発 ❏ C++, C#, PHP, etc. Daiki Yokoi 3. Copyright © bitbank, inc. テーマとアジェンダ 各所をモダン化して組織の拡大に耐える ❏ ソースコード編 ❏ TypeScript + Nestフレームワークの採用 ❏ ユニットテスト環境編 ❏ Docker + モックツールの活用 ❏ インフラ(AWS)編 ❏ Infrastructure as Code による サーバーレス環境の構築 4. Copyright © bitbank, inc. テーマとアジェンダ 各所をモダン化して組織の拡大に耐える ❏ ソースコード編 ❏ TypeScript + Nestフ
WebComponentsへの気持ち - console.lealog();
この記事では、 ReactやVueではなくWebComponentsだけを使いたい気持ちを胸に、とある社内プロジェクトをやってみての学び 巷にあふれるWebComponentsに対する見方への違和感 についてメモっておきます。 ただ「WebComponents」の語がもつ意味をきっちり定義してるわけではないので、そのへんは雰囲気で察してください。 そのせいで勘違いされがちな概念なんかも、知らんけど。 まずは巷にあふれる意見に対する気持ちから。 (React|Vue|Xxx)はもう古い、これからはWebComponentsだ！ 勝手なイメージですが、こういう認識の人いるよね・・？ 個人的には、「いや、WebComponentsはそういう技術じゃない」と思った・思ってます。 以下、ReactもVueもAngularも「ウェブアプリケーションを作るための技術」であるが、WebComponents
持続可能なAngularアプリケーション開発のために大事なこと - 余白
Webにかぎらず、アプリケーションというのは作って終わりではなく、その後も継続して改修・改善されていくケースが多い。受託で開発して納品して終わりというケースでも、納品した先にメンテナンスする人がいる。 この記事では、Angularアプリケーションの開発において、いかにメンテナンス性を維持して、持続可能なプロジェクトを構成するかについての個人的な見解をまとめる。 フレームワークを邪魔しない Angularアプリケーションのメンテナンスにおいて、いちばん重要なことはいかにAngularのアップデートを阻害しないかという点に尽きる。 これはAngularに限った話ではなくフレームワークと呼ばれるものを使うなら常に必要なことであるし、 アップデートが定期的に降ってくることが決まっているAngularであればなおさらである。 アプリケーションの一番根幹となる部分の鮮度が落ちれば、その他の部分はそれに
Angular v2からv6までの変化をまとめてみた - 余白
Angular 2から6までの主要な進化をまとめた記事を読みたい。— Masahiko Sakakibara (@rdlabo) 2018年4月20日 逆にIonicの変遷が知りたいですね 最近Stencilも出てきたしその辺の絡みとか俯瞰的に見てみたいです— lacolaco (@laco2net) 2018年4月20日 rdlaboさんがしっかりGW明けにIonicの記事書いてくれたので、僕もAngularのv2からv6まで、3年弱の変遷についてまとめます。 Ionic 2 から 4 への、この2年間の進化を振り返る 前Angular v2時代 Angular v2 オフラインコンパイル AngularJSへの .component 逆輸入 Animation API Language Service Angular CLIとスタイルガイド SystemJSからwebpackへ For
シャニマスはPWA時代のGoogleMapなのかもしれないという話 - MANA-DOT
※ この記事はポエムです。 先日、 アイドルマスター シャイニーカラーズ がリリースされました。 僕自身はアイマスはちょっとアニメを見る程度で熱心なファンというわけではないのですが、こちらのゲームはゲーム内容だけではなく別の側面でも注目されていると思います。 それは、ブラウザ上で動くゲームであるというところです。ブラウザゲーム自体は古来から存在するものですが、このゲームが挑戦的なのは、「PWAであるブラウザゲーム」であるところであると思います(PWAであるかどうかは後述します)。 少し触ってみて「これは昨今のソーシャルゲーム的ゲームをPWAとしてアプローチしたとても挑戦的なプロダクトだ」と自分の中で盛り上がっているので、なぜ盛り上がっているかを冷めないうちに書いてみようと思います。 シャニマスはPWA？ そもそもPWAとはなんであったか PWA という言葉はGoogleが提唱して以降よく耳
ECMAScript 2015以降のJavaScriptの`this`を理解する
この記事はJavaScriptの入門書として書いているjs-primerのthisに関する部分をベースにしています。 またjs-primerでは書けなかった現在時点(2018年1月1日)でのブラウザの挙動についてを加えたものです。 次の場所にjs-primer版（書籍版）のthisについての解説があります。 この記事と違って実際にコードを実行しながら読めるので、学習ソースとしては書籍版を推奨します。 書籍版: 関数とthis · JavaScriptの入門書 #jsprimer また、バグ報告やPRも直接リポジトリにして問題ありません。 asciidwango/js-primer: JavaScriptの入門書 おかしい場所を選択した状態で右下にある”Bug Report”ボタンを押せば、簡単にtypoとかのバグを報告できます。(PRでも歓迎) 前置きはこの辺までで、ここから本編。 この記
モバイル/オフラインでも動作するはてなブックマーク検索のPWAを作った
はてなブックマーク検索PWAというはてなブックマークでブクマしたデータをオフラインでも検索できるPWAを作りました。 サイト: https://hatebupwa.netlify.com/ ソース: https://github.com/azu/hatebupwa はてなブックマークの自分のブクマを検索できるPWAを作りました。 Service Workerに対応してるブラウザ(IOS Safari 11.3+を含む)ではオフラインでも検索できます。https://t.co/RCVkRYAFz0 モバイルはホームスクリーンアプリで、macOSはアプリ版もあります。https://t.co/5MDuyC9baN pic.twitter.com/KAc3KV690b — azu (@azu_re) April 16, 2018 使い方 使い方は特に難しい話でもないですが、次のように任意のはてな
All posts
今年も GitHub トレンドから 2022 年の JavaScript/TypeScript を振り返ります。去年の記事はこちらです。 — GitHub のトレンドで振り返る 2021 年の JavaScript | WEB EGG 集計方法 本記事の集計期間は 2022/0…
2018年の”JavaScript” 再入門/re-learning-about-js-in-2018
KMC春合宿2018での発表資料です
Maximum JavaScript Performance
Cover image by Fachstelle für Öffentliche Bibliotheken NRW on Flickr. If you're a bit like me you probably think a lot about how to make your software even better. One big point of cause is, to increase the performance TO THE MAX. Today I'll tell you the well kept performance secrets senior JS devs hiding from you. 1. Global variables only Shadowing clutters your metal model of the software and of
katatema.js - ✘╹◡╹✘
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
ReactとFeathersを使ってモダンでCRUDなWebアプリを作る方法
リアルタイムなAPIを作れるフレームワークFeathersとReactを使って、CRUDなWebアプリを開発する基礎を解説します。 モダンなプロジェクトでは、コードの再利用性を高めるため、フロントエンドとバックエンドでロジックを分けてコードを書くことが求められます。具体的な再利用の用途は、バックエンドAPIにアクセスするネイティブモバイルアプリを作る場合や、モジュール方式の大規模プラットホームにおいて新たなモジュールを開発する場合などが挙げられます。 サーバーサイドのAPIを構築するため、ExpressやRestifyといったライブラリーがよく使われます。ライブラリーを使えばRESTfulなルートを簡単に作成できますが、大量のコードを繰り返し書く必要があります。さらに、認可やミドルウェアロジック用のコードも書かなければなりません。 LoopbackやFeathersといったフレームワークを
それ、もっとスマートに書けるよ - JavaScript コードをもっと短く、もっとシンプルに書く Tips 4選
2017年10月6日『まぼろしのJS勉強会 #1 「ナウいJSの書き方・考え方」』にて発表した資料です。 https://maboroshi.connpass.com/event/66502/ #mbrs_js_study
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのE2Eフレームワークを触ってみる
BFF Antipattern
Reach Router: Next Generation Routing for React
React v16 and beyond React Fiber
Service Worker Lifecycle
React系(別言語含む)の サーバーサイドレンダリング について考えよう
