Deno features improved security, performance, and developer experience compared to its predecessor. It's a great time to upgrade your Node.js project to run on Deno.
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promiseの構文 イベントループ: Microtasksと(Macro)tasks AsyncとAwait はじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか? おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません! 何年も
どうもこんにちは、ウマシバ(@UMASHIBA)といいます! 先日、仮想DOMを個人的に実装してみまして、その際に得た知見を記事という形で共有したいと思います。 仮想DOMを作成するという内容上とても長い記事になってしまっていました。時間がある時や何日かに分けたりして読んでくださるとうれしいです。 それでは記事本文です。どうぞ、 はじめに この記事はReactやVue, Angular等のモダンなフロントエンドフレームワークの基礎部分となっている仮想DOMを作ってみようという記事です。 形式は、先日私が作成した仮想DOMと同じモノを順を追って実装してみるという形でやります。 完成形はここ(https://github.com/UMASHIBA1/UMASHIBAVirtualDOM) にあります。 ※もしよければスターください。すごくよろこびます。 この記事を読むには TypeScript
SPA -> GraphQL -> Serverlessバックエンド Vue.jsとAmplifyを駆使して、1からモダンなフロントエンド開発&サーバレスバックエンド構築をしてきます。今回は、Vue.jsで作成したSPAからAppSyncへGraphQLベースのリクエストを送り、裏のDynamoDBへデータの書き込みと読み込みまでを確認します。 (完成図) バックエンドのAWSリソースは、Amplify Frameworkを使用することで、コマンドラインから作成していきます。 また、Amplify Consoleを使用することで、CI/CDパイプラインも同時に作成し、GitHub上の最新断面がHTTPSでWebアプリとして公開するまでが本記事のゴールです。 登場人物 小さなアプリから大規模まで対応できる優れたフロントエンドフレームワークで、個人的にも多用しています。本記事はVue.jsのA
……あら、いらっしゃい。 若いお客さんなんて珍しいわねえ。昔は、この街一番の人気店でね、若いお客さんもたくさんいたんだけどさ。最近はめっきり減っちゃってね。 何飲む? ……水割り? わかったわ。 じゃあさ、ちょっとだけ、あたしの昔話に付き合ってもらってもいいかしら。 What is jQuery? この店――『jQuery』がオープンしたのって、2006年なんだけどさ。その頃の、この街の様子って覚えてる? ……知らないか。あなた、まだ若いもんね。その頃って、そりゃあヒドイもんだったのよ。 その頃、シェア率トップだったブラウザって、もちろんInternet Explorerだったんだけど。当時はバージョン7が登場したばかりで、あの悪名高きIE6もまだまだ主流だったの。 他のブラウザは、Safariがバージョン3がMacとWindowsに公開されていた頃で、Firefoxはまだバージョン2.0
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript(TypeScriptではなく) + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
若者とプログラミングをしていて非常にショックを受けたのだが「JavaScript 配列 重複 削除」で検索するとfilterとindexOfを使ったアルゴリズムが検索結果上位に出てくる。これはO(N^2)。計算量の概念がないというのはとても恐ろしい。Big Techがアルゴリズム偏重の試験を課すのは合理的だと確信した。 — 父🌒 (@fushiroyama) March 10, 2020 先日このようなツイートが流れてきたので、$O(N^2)$、つまり計算量が $N^2$ に比例するということの恐ろしさを簡単に書きます。 JavaScriptで配列から重複を排除するコード EcmaScript 2015から導入されたSetを使えばものすごく簡単に書けます。 const array1 = [1, 5, 3, 1, 5, 3]; const array2 = Array.from(new S
この3つの原則は書籍の構成にも現れています。 第一部の基本文法で「書き方」を学び、第二部のユースケースで「作り方」を学べるようになっています。 「学び方」は、章としてではなく全体的な流れとして取り入れることにしました。 なぜなら、「学び方」自体は学びたいことによっても異なる方法を取る場合があります。 そのため、「学び方」で個別の章とするよりは、他の章で「書き方」や「作り方」と一緒に見たほうがよいと考えたためです。 たとえば、基本文法などの学び方にはMDNのようなリファレンスサイトを見たほうがいいし、 アプリケーションの作り方は実際のサイトなどを参考にしたほうがよいためです。 第一部と第二部がどのように書かれたのかをざっくりと振りかえってみます。 第一部: 基本文法 第一部: 基本文法はJavaScriptの基本的な文法について扱っています。 プログラミングの入門書で文法については避けること
初心者が見た瞬間になるもの特集です。 小テクだったり、省略記法だったり、、 実際私も出会ってになりました! 追記 即時関数のところで説明にある 他には、+や-等でも動きます。 の"等"が気になった方に朗報です。こちらの記事で"等"を知ることができます!! [JavaScript] "!function() {}()"以外の即時関数を紹介するぜ よろしければ覗いてみてください! !! is 何 booleanへの型変換。 例 const obj = { hoge: "hoge" } function hasHoge() { return !!obj.hoge // => true } 論理否定(!)を二つ繋げて、boolean への型変換をしています。 !の結果を!で評価しているんですね〜。 JSON.parse(JSON.stringify(obj)) is 何 ディープコピー。 例
Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方 Node.jsをうまく活用できている企業は、どのような方法でベストプラクティスを習得してきたのでしょうか。ヤフー株式会社でNode.jsの社内普及に務めてきた言語サポートチームに、同社の実施を紹介してもらいました。 Node.jsは「イベントループモデルで、ノンブロッキングI/Oを使用している」「問題発生時にHTTP/TCPやPOSIX APIなど低レイヤーの知識を求められる」といった特徴を持つ言語です。開発者が習得すべき技術領域が広いため、Node.jsらしい書き方の学習難易度は高いと言えます。 それでは、Node.jsをうまく活用できている企業は、どのような方法でNode.jsのベストプラクティスを習得してきたのでしょうか。ヤフー株式会社でNode.jsの社内普及に務めてきた言語サポート
ビデオチャット、ボイスチャットなどのリアルタイムコミュニケーションをプラグインなしにWebブラウザだけで実現する技術が「WebRTC」だ。ネットを介したリアルタイムコミュニケーションの可能性をさらに広げるWebRTCを今回は解説する。 (1)WebRTCとは? 今回取り上げるWebRTCは、Webブラウザに関する技術の1つで、技術者だけでなく一般のインターネットユーザーにも大きな影響を及ぼす存在として今、高い関心を集めている。 WebRTCはWeb Real-Time Communicationsの略で、Webブラウザにプラグインを追加することなく、Webブラウザ上でリアルタイムコミュニケーションを可能にするオープンフレームワークである。WebRTCは2011年にGoogleによって提唱され、WebRTCのAPIレベルでの標準化はW3Cで、プロトコルレベルでの標準化はIETFでそれぞれ進め
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS(Angular系の1.x系)の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎(gfx)さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと(どちらかというと既存のプロジェクトに)導入するための
同じTypeScriptという言語を利用する場合においても、トランスパイラによってTypeScript自体の機能制限がかかったり、思わぬトラブルを招く場合があります。それぞれのトランスパイラの特徴を踏まえた上で、それにより生じる問題も見ていきましょう。 1-1. tsc TypeScriptの開発元であるMicrosoft純正のTypeScriptトランスパイラです。TypeScriptを利用する際に typescript パッケージをインストールする必要がありますが、それに同梱されています。 公式ツールなだけあって最も早く最新バージョンのTypeScriptに対応したり、言語すべての機能を利用することができる一方で、バンドラではないためminifyやchunkの設定はできません。また、Path Aliasesの未解決や旧ESへの互換性が不完全であることが欠点として挙げられます。 tsco
Node.jsおよびChromiumベースのブラウザで使用されるJavaScriptエンジンの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🚀⚙️ JavaScript Visualized: the JavaScript Engine by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: JavaScriptエンジン JavaScriptはクールです(私はそう思います)が、あなたが書いたコードをマシンが実際に理解するにはどうすればいいのでしょうか。JavaScriptデベロッパーは通常、コンパイラを自分で扱う必要はありません。しかし、JavaScriptエンジンの仕組みを理解し、人に優しいJavaScriptコードをどのように処理
この記事は npm へ公開可能なパッケージを TypeScript で作成しながら、JS/TS 開発で良く使われるツールを紹介する記事です。 typescript-npm-starter という名前の Hello, world! パッケージを公開するという体で話を進めます。
組み合わせの相性などもあるが、JavaScriptユーザーは開発効率を上げるためにフレームワークにほかのライブラリを併用することがあり、開発者にはそれぞれに慣れたライブラリがあることが多い。フレームワークは利用せずに、ライブラリを使うだけといったケースもある。 State of JavaScriptはこのほど、JavaScript関連の調査結果「The State of JavaScript 2019」を公開した。このデータから、多くのJavaScriptユーザーが、LodashとMomentを日常的に使用するライブラリとして活用していることがわかった。 日常的に使われているJavaScriptライブラリ - 資料: The State of JavaScript JavaScriptユーザーに日常的に使われているJavaScriptライブラリの第1位はLodashで、ほぼ同じ割合でMom
なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介
JavaScriptは、Webブラウザで実行されるプログラミング言語として代表的な存在だ。しかし、JavaScriptで大規模アプリケーションを開発するのは難しいとして、代替のプログラミング言語、JavaScript風プログラミング言語、JavaScriptのスーパーセットとして開発されているプログラミング言語が存在している。これらの中からどれを選択すればよいかを判断するのが難しい状況にあるが、多くのユーザーは「TypeScript」を代替言語として使う動きが出てきているようだ。 State of JavaScriptは、2019年におけるJavaScript関連の調査データとして、「The State of JavaScript 2019」を公開した。調査の対象にJavaScriptの代替言語に関するものがあり、他の言語を引き離してTypeScriptが強い人気を示している。 TypeS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く