Node.js + TypeScriptのモジュールを整理してみる
はじめにlink 最近受けるNode.js + TypeScript環境の相談の中で、CommonJSやECMAScript Modulesのあたりで落とし穴にはまっている人が多いという事に気づいた。 Node.jsは歴史的にCommonJSとECMAScript Modules（以後ESMと表記）がどうしても入り乱れる環境にあり、これにTypeScriptのモジュールが加わると組み合わせでさらに複雑度が増すのが現状である。 説明する際に口頭より整理した文章が欲しいと思ったので記事にする。 以下のリポジトリで検証コードを管理している。 https://github.com/koh110/module_test Node.jsモジュールチェックシートlink まず最初にNode.jsにおけるCommonJSとESMの挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
A Vue.js App Using Axios With Vuex
Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker. In this tutorial we will build a simple Vue.js application which will demonstrate the power of using Vuex as a central data store, where the data will be asynchronously retrieved using Axios for the API requests. A basic level of HTML, CSS and JavaScript wil
Svelte • The magical disappearing UI framework
compiled Svelte shifts as much work as possible out of the browser and into your build step. No more manual optimisations — just faster, more efficient apps. compact Write breathtakingly concise components using languages you already know — HTML, CSS and JavaScript. Oh, and your application bundles will be tiny as well. complete Built-in scoped styling, state management, motion primitives, form bi
くだらないAPIなんていらないよ – 2016年のウェブスクレイピング事情 | POSTD
ソーシャルメディアのAPIとそのレート制限は、あまり気分のよいものではありません。特にInstagram。あんな制限つきAPIを欲しがる人がいったいどこにいるんでしょうね？ 最近のサイトは、スクレイピングやデータマイニングの試みを阻止するのがうまくなってきました。AngelListはPhantomJSすら検出してしまいます（今のところ、他のサイトでそこまでの例は見ていません）。でも、ブラウザ経由での正確なアクションを自動化できたとしたら、サイト側はそれをブロックできるでしょうか？ 並行性を考えたり、さんざん苦労して用意した結果として得られるものを考えたりすると、Seleniumなんて最悪です。あれは、私たちが「スクレイピング」と聞いて思い浮かべるようなことをするためには作られていません。しかし、賢く作り込まれた今どきのサイトを相手にして、インターネットからデータを掘り当てるための信頼できる
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
JS知識ほぼ0からTypeScript入門してる - たにしきんぐダム
この記事は CAMPHOR- Advent Calendar 2016 23日目の記事です。 JS知識ほぼ0は言い過ぎかもしれないが、いわゆるモダンJSというものには縁遠く、つい最近まで jQuery をブラウザからぽちぽちダウンロードして適当に ajax とか使う人生を送ってまいりました。(当然フレームワークとか使ったことない) まさしくこの記事みたいな状況 kikuchi1201.hateblo.jp 最近 TypeScript を書く機会があって、開発環境は用意されてるのでなんとなく書けるけど、エコシステムとかいろいろ全くわかってなくてこのまま旧石器時代然としたJavaScriptを書いていてはまずい気がすると思って勉強することにしました。 目標は TypeScript を使ってこんなんを作る、テストも書こうね(こんなのに何をテストするんだ) この記事では主に環境構築~DOM操作のテ
アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~ | CyberAgent Developers Blog | サイバーエージェント デベロッパーズブログ
みなさんこんにちは、サイバーエージェントでフロントエンドを中心に開発しています原(@herablog)です。 アメブロでは、2016年9月にフロントエンドをJavaベースのアプリから、node.js・Reactベースのアプリへとシステムの移行をおこないました。本記事では、その移行へといたる経緯やゴール、システム設計、その結果についてお伝えします。 リリース直後に気づいているツワモノな方もいらっしゃいました。 アメブロのSP版がReactのSSRでフルリニューアルしたのを観測した — hr (@hrloca) 2016年9月1日 システム移行へといたる経緯 2004年から始まり、日本国内で最大規模のブログサービスとなったアメブロは、システムの肥大化や多数の関係者が存在したことによるモジュール・導線の急増などの理由により、ページ表示スピードが遅くなり、ページビュー数にも明らかに影響を与えるよう
Webpackってどんなもの？ - Qiita
初めてのWebpack 今回はWebpackについて紹介したいと思います。 私自身は今回初めて使ったのですが、小規模なプロジェクトの途中から導入していて、 使ってみて結構良い感じなので記事にしてみました。 Webpackとは Node.jsでサーバーサイドで動かすモジュールバンドラーツールになります。 Node.jsでモジュールという単語を聞くと、「npmやbowerとかと何が違うの？」みたいな印象を持たれる方もいるかもしれませんが、基本的にはそれらとはまた違った役割をもっています。 npmやbowerはJSライブラリのバージョン管理などの目的としてよく利用されますが、WebpackはJSファイルのコーディングの部分で開発者の手助けをしてくれるのです。 Webpackの基本的な役割 5枚ほど図を書いてみましたので、画像とともに紹介していきます。 今回出てくるライブラリたちの紹介 今回使うラ
Electrode | Universal React and Node.js Application Platform @WalmartLabs Powered
Web Electrode is a platform for building universal React/Node.js applications with standardized structure, best practices, and modern technologies baked in. Electrode focuses on performance, component reusability, and simple deployment to multiple cloud providers—so you can focus on what makes your app unique. Native Electrode Native is a mobile platform that simplifies development and streamlines
なぜReactなのか - しゅみは人間の分析です
なぜReactなのか React, Cyclejs, Reduxを学んだ上でこれらの技術が何を解決したのかまとめてみる。発想はオリジナルではなく、今まで私が読んだ記事から拝借した解釈などが含まれている。たぶんReact, Fluxを学んだ人にとっては当たり前の感覚を言語化しているだけの内容となる。 TL;DR Q: なぜReactなのか A: フロントエンドが自由度の高いGUIアプリケーションになった。既存の手法では自由度の高いGUI実装を人間にわかりやすく管理することが難しくなった。 自由度の高いGUIな世界 自由度(複雑さ)の低い時代ではrender済みのDOMの上にDOMを操作する(jQueryによる)UIを載せる設計でも十分だった 現代のwebフロントエンドではVisual StudioやXcodeで作るネイティブGUIと同等の複雑さを求められる時代になっている jQueryだけで
JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた
JavaScript Plugin ArchitectureというJavaScriptのプラグイン設計についての電子書籍を書きました。 この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていく事を目的としたものです。 以下の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 GitHub上にソースコードも公開されているでので直接Markdownファイルを読むこともできます。 MarkdownよりはWeb版の方が見やすいのでそちらをオススメします。 Twitterのハッシュタグは#js_plugin_book 更新情報はRSSやリリースノートから見ることができます。 v1.0.0 最初に書くと決めたプラグインアーキテクチャが揃ったので1.0.0としてリリースしました。 JavaScript Promiseの本の時と同じく、継
[翻訳] Airbnb React/JSX Style Guide - Qiita
この翻訳について Airbnb React/JSX Style Guideの和訳です。 間違っていたり分かりにくい箇所があれば、ご指摘いただけると幸いです。 Airbnb React/JSX スタイルガイド このスタイルガイドは現在一般的に使用されている標準に基いていますが、場合によってはいくつかの慣例（async/awaitやstatic class fields）が含まれていたり禁止されていたりします。現在、このガイドにはステージ3より前のものは含まれておらず非推奨です。 目次 基本的なルール クラス vs React.createClass vs ステートレス ミックスイン 命名規則 宣言 アラインメント 引用符 空白 引数 参照 括弧 タグ メソッド 順序 isMounted 基本的なルール Reactコンポーネントは1ファイルに1つだけにしてください。 ただし、1ファイルに複数の
![[翻訳] Airbnb React/JSX Style Guide - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1254e38358c5c90719500a1b80c8ffd78476fcf7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEJTIwQWlyYm5iJTIwUmVhY3QlMkZKU1glMjBTdHlsZSUyMEd1aWRlJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0xYTY0ZTQwNmQ5MDEyYjBmY2JhNGE0OGVkNjMyMTVhMA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5YW1hZGFzaHkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTI1Mzg0MjVmMjMxMDk3OTY3YzYxOTA2YmFmZDVlMTJl%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dd9b5864c8ec3eb905404bd594cadec9c)
Re: React.js界隈の人に聞きたい - mizchi's blog
React.js界隈の人に聞きたい 前提 Reactより前に僕がやりたかったこととして、冪等性の担保の為に毎フレーム document.body.innerHTML を書き換えたかったがパフォーマンス的にそれが許されなかったが、Reactは擬似的にそれを達成させてくれたという圧倒的感謝🙏がある— ダイナモポグラマ (@mizchi) 2016年5月23日 SPA 世の中にSPAの需要があるのか？という点考えていたけど、需要がないからSPA技術がいらない、というのはたぶん間違ってて、SPA技術を持たない人が多いからその発想もなく、SPAで達成できることがイメージ出来ないのがアプリケーション設計の縛りになっている、という感じな気がする— ダイナモポグラマ (@mizchi) 2016年5月23日 GmailやTrelloやPivotalやグラブルは異常な技術の集大成ではなく、個別に分解可能な
JavaScript開発における多段式エラープルーフについて - 若くない何かの悩み
第14回HTML5ビギナーズで、JavaScript のデバッグ作業を短くする「多段式エラープルーフ」について発表してきました。 スライド speakerdeck.com コードのサンプル github.com まとめ JavaScript のデバッグ作業を素早くこなすなら、多段式エラープルーフが必要です。
関数型Scalaという勉強会でproperty based testingについて話をした - xuwei-k's blog
Scalaの勉強会で半分くらいHaskellの話してすいませんでした。 http://xuwei-k.github.io/slides/scalaprops/ http://connpass.com/event/16052/ http://togetter.com/li/852254 資料はりきって頑張り過ぎたらとても長くなりました(150ページ超えた) 今までで一番頑張ったかもしれません。ここ半年くらいの成果を全部詰め込んだ感じです。 あとで資料として読んで理解してもらうこと前提で色々詰め込んだので、1年後でも2年後でも、興味のある人が見て有用な資料になればいいですね・・・。 ところで、スライド作るのに、今回から remark というやつ使いました https://github.com/gnab/remark markdownで書けて コードのシンタックスハイライト効いて ページ数表示と
AbemaTVのランタイムパフォーマンスのAudit - 1000ch.net
2016.05.17AbemaTVのランタイムパフォーマンスのAudit最近業務で、巷で話題のAbemaTVのパフォーマンス改善をしている。個別具体性が高いが調査改善の雰囲気を感じ取ってもらえればそれで良いかと思い、記事にした。 AbemaTVのフロントエンドの構成話の前提となるAbemaTVのフロントエンドの構成は次の通りで、まさに流行りのといった感じ。 facebook/reactfacebook/immutable-jsReactive-Extensions/RxJSreactjs/react-routercss-modules/css-modulesビルド周りはbabelとwebpack、あとはlintツールがちょこちょこ入ったりしている。この改善の話と関係してくるのは、ReactとImmutableJSとRxJSだけ。 番組再生画面のコメント開閉が重い今回ケーススタディとして挙げ
知られてそうで知られてない少し知られてるECMAScript 2015 (ES6)の新機能: Days on the Moon
Kyoto.js #10で「知られてそうで知られてない少し知られてるECMAScript 2015 (ES6)の新機能」というライトニングトークをしたので、そのスライドに当日しゃべった内容や補足を追記して以下に掲載します。 自己紹介 nanto_vi 情報規格調査会SC 22/ECMAScript Ad hoc委員会 editional issueの報告 ECMAScript 2015 (ECMA-262 6th Edtition) クラス構文 アロー関数 ブロックスコープ Promise etc... 2015年にECMAScriptが大幅に改定されました。クラス構文やアロー関数の追加はあちこちで取り上げられているので皆さんご存知でしょうが、ここではあまり取り上げられていない地味な新機能を紹介します。 Unicodeの符号位置 // 🍣 '\uD83C\uDF63'; // ES5 '
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://frontarm.com/async-cheatsheet.pdf
JSPM - ES Module Package Manager and CDN
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog
