JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020（ES2020）は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining（オプショナルチェーンやオプショナルチェーニングと呼ばれています）とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde
[JavaScript][Node.js]フロントエンドとバックエンドの処理を共通化する - Qiita
Overview フロントエンドはReact、バックエンドはNode.jsで作っていると、どちらでも利用したい処理が出てきます。 両方とも同一言語なので、バックエンドをNode.jsにしたメリットを享受できます …そう思っていたのですが、write at onceかと思いきやモジュールの入出力の違いでそのまま共有することができません。 最終的にはGitHubを介して共有することになりましたが、結果に至るまでの過程を残しておこうと思います。 Target reader JavaScriptとNode.jsを扱っている方。 Prerequisite バックエンドはGoogle Cloud Function(以降、GCF)を利用する、つまりNodeの起動オプションを指定するようなことはできない。 Node.jsのバージョンはGoogle Cloud Function(GCF)に依存し、現時点では
![[JavaScript][Node.js]フロントエンドとバックエンドの処理を共通化する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7210a2fe611d1ea4578b9e5ec3b22a87c458dd19/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRmF2YXRhcnMzLmdpdGh1YnVzZXJjb250ZW50LmNvbSUyRnUlMkY0NDU2MjE2MSUzRnYlM0Q0P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTMxN2M1NDNlMTViYzMzNzYxMGMxZDg3NmY2ODY3ZmU0%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dc92e47e263ae41e7faced8c44bb88503%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCU1Qk5vZGUuanMlNUQlRTMlODMlOTUlRTMlODMlQUQlRTMlODMlQjMlRTMlODMlODglRTMlODIlQTglRTMlODMlQjMlRTMlODMlODklRTMlODElQTglRTMlODMlOTAlRTMlODMlODMlRTMlODIlQUYlRTMlODIlQTglRTMlODMlQjMlRTMlODMlODklRTMlODElQUUlRTUlODclQTYlRTclOTAlODYlRTMlODIlOTIlRTUlODUlQjElRTklODAlOUElRTUlOEMlOTYlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1iZTU3ZTE5OTczNmRjNGM2YWZjNjgzY2U2NTBkMDcxNA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBxcnVzYWRvcnomdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz02NGNkNDUwMDJhYmIyYWNjMWViOTA2OGNkNDZiM2EyNQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D4f21bdcf16a02aec5b35644e1a7c0ff2)
Design
Share: Node.js design best practices Node.js is JavaScript, so everything you already know about JavaScript applies to your Node.js application as well. The patterns you use to write your front-end client code work when writing your server-side application logic. Node.js does not use any JavaScript language extensions or modifications to accomplish its goal of server-side JavaScript. There are, ho
The Front-End Tooling Survey 2019 - Results
Front-end development Blog and Portfolio for Ashley Watson-Nolan – Senior UI Engineer at Just Eat It's been a little while coming, but the results from the 2019 Front-End Tooling Survey are now here! This year, 3,005 developers answered 27 questions covering a wide range of front-end tools and methodologies. As always, a massive thank you from me to every single person that took the time to fill i
VisualStuido2019とTypeScrptでAdobePremireを操作する - Qiita
VisualStuido2019とTypeScrptでAdobePremireを操作する adobe製品ならすべてできると思います。 VisualStuido2019を使った理由 VisualStuido2019の方が環境構築が楽なため Windows版VisualStuido2019をインストール 空のNodejsコンソールアプリケーションを選択 @types/nodeをアンインストールする tsconfig.jsonを編集する targetをes3にする noLibを記入しtrueにする パッケージをインストールする ソリューションのところで右クリック types-for-adobe(アドビ製品の定義ファイル) extendscript-es5-shim-ts(es3の環境でes5を使えるようにする) JSON2(Jsonを利用するため) をそれぞれインストールする ソースを書く //
10分でわかる「今更だけどTypeScriptってなに？」 - Qiita
2年ぶりくらいに業務で TypeScript をやることになったので、個人的なおさらい用です。 TypeScript とは JavaScript は現在 Web アプリケーションの開発で最も使われているものの、JavaScript 独特の癖や、型の認識が緩いこと、ブラウザによって挙動に違いがあります。 それらを補うために altJS というアプローチがあります。JavaScript の機能を拡張し、よりメンテナンスしやすく、高機能にするものです。 それをトランスパイル（変換）することでブラウザによる挙動の違いを吸収したピュアな JavaScript が吐き出され、安全に JavaScript にはまだ無い機能を擬似的に使えるようにすることができます。 その中で現在デファクトスタンダードとなっているのが、TypeScriptです。 なぜ TypeScript が人気なのか 近年の Web 開
Node.js(TypeScript)を食わず嫌いしてる人にオススメするときに役立ちそうな知見まとめ - Qiita
もともとは動的なWebサイト開発のために仕方なく(※もちろん人による)書かされていた感のあるJavaScriptですが、ES6以降の進化はめざましく、表現力の高さは他の言語に全く引けを取らないようになりました。 V8エンジンによるパフォーマンスの恩恵も相まって、私はWeb用途以外にもちょっとしたスクリプトを書く時などにも積極的にNode.jsを活用しています。 一方でかつてのJavaScriptのイメージから食わず嫌い的に避けてしまったり、そもそもJSや周辺エコシステムの進化に関心がない人も多く見られます。 そこで今回は「どうすればNode.jsの敷居を低くして、便利さを知ってもらえるか」の観点から役立ちそうな知見をまとめてみました。 動的型付けなのにかなり早い 詳しくは各ベンチマークの結果を見ていただければ分かりますが、Node.jsは動的型付け言語としてはかなり実行速度が早い部類に入り
サイボウズのフロントエンドエキスパートチームの紹介 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームです。 今回は私たちフロントエンドエキスパートチームの紹介をします。 フロントエンドエキスパートチームとは サイボウズの技術領域とフロントエンドエキスパートチームの立ち位置 まずサイボウズのWebフロントエンドについて触れておくと、以下の特徴を持っています。 プロダクトにとって、Webフロントエンドが非常に重要 B2Bのプロダクトを開発しているので、WebおよびPCでのユーザー利用率が高い JavaScriptで製品をカスタマイズするためのAPIやSDKを提供している 継続的な開発が必要で、Webフロントエンドの変化に追従していく必要がある 大規模なWebアプリケーションが多く、プロダクトライフサイクルが非常に長い プロダクトチームにWebフロントエンドがいるわけではない プロダクトチームのエンジニアがWebフロントエンドからバックエンドまで一貫
Webpackをシンプルに理解しよう - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに ねぇまってむり webpackでこれ以上消耗するの つらいょ というみなさんへ これを期に 理解しましょう webpack 今回の記事は webpack の公式ドキュメントhttps://webpack.js.org/ (CC BY 4.0) から内容をたくさん引用しています。ありがとう Webpack チーム! 本題に入る前に 何故webpackを使うのかを考えてみましょう こういうのは何故必要かも理解しておくと有り難みが増すんやで。 はるか昔の javascript 有史以前、ブラウザでJavaScriptを実行する方法は
Node.js 12正式版が登場、1年ぶりのLTS対象バージョン。起動高速化、TLS1.3対応、ES6モジュールの実験的サポートなど
Node.jsは半年ごとにバージョンアップが行われ、偶数バージョンがLong Term Support（LTS：長期サポート）対象となるため、今回のNode.js 12はLTS対象バージョンとなります。 LTS対象バージョンのサイクル LTS対象バージョンは、リリース後最初の半年を「Current」（最新版）、次の1年半を「Active」（有効）、そのあとの1年を「Maintenance」（保守）という3つの状態を持ちます。今回のNode.js 12もActiveなLTSになるのは半年後の予定です。 Node.js 12のおもな新機能 Node.js 12のおもな新機能としてはJavaScriptエンジンのV8が「V8 7.4」にアップグレードされ、JavaScriptのパースが高速に、Asyncのスタックトレースが可能に、引数のミスマッチ時のコールが高速になるなどの改善が行われています。
Node.js Foundationと、ESLintやAppiumなどをホストするJS Foundationが合併し「OpenJS Foundation」が発足
Node.js Foundationと、ESLintやAppiumなどをホストするJS Foundationが合併し「OpenJS Foundation」が発足 Node.jsの開発をホストするNode.js Foundationと、ESLintやAppium、jQueryなどの開発をホストするJS Foundationは合併することを発表。合併によって新しい団体である「OpenJS Foundation」が、Linux Foundation傘下で発足することが発表されました。 OpenJS Foundationは、Node.jsやNode-REDをはじめ、Appium、ESLint、Grunt、jQuery、jQuery Mobileなど31種類ものJavaScriptやWeb技術に関するオープンソースの開発をホストする団体となります。 Node.js Foundationのこれまで N
正真正銘のReactだけの不純物なしでReact入門
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
クリック1発でFirebaseにデプロイ！無料のクラウドIDE「Glitch」の新機能を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回はブラウザ上でJavaScript / Node.jsの開発環境を構築できる無料のクラウドIDE「Glitch」の新機能をご紹介しようと思います！ その新機能というのは、Glitchから直接Firebaseにプロジェクトを1発でデプロイできる機能のことで、面倒な作業はすべてGlitchが自動的にしてくれるので非常に重宝します。 これにより誰でも簡単にFirebaseプロジェクトをブラウザだけで構築できるようになるので、ぜひ参考にしてみてください！ 【 Glitch 】 記事後半で、Glitchのコードエディタについて詳細を解説しているので合わせて参考にしてみてください。 ■「Glitch」を使ったFirebaseのデプロイ機能について それでは、クラウドIDE「Glitch」が提供するFirebaseのデプロイ機能がどのようなものなのかを実
Electron 4.0.0 | Electron
The Electron team is excited to announce that the stable release of Electron 4 is now available! You can install it from electronjs.org or from npm via npm install electron@latest. The release is packed with upgrades, fixes, and new features, and we can't wait to see what you build with them. Read more for details about this release, and please share any feedback you have as you explore! What's Ne
yarn から npm に出戻ろうとしている話 - freee Developers Hub
こんにちは, 今年の freee の新卒エンジニアで会計freee の開発をしているけむりだま (@_kemuridama) です. この記事は freee Developers Advent Calendar 2018 の 11 日目の記事になります 🎄 今回は freee の中で最も大きなプロダクトである会計freee で使っている JavaScript パッケージマネージャを yarn から npm に出戻ろうとしている話をしていこうと思います. なぜやるのか 🤔 yarn から npm に戻ろうとしている理由は, 下記のブログで説明されている通り, npm がアップデートしていくのに従って yarn と性能が変わらなくなってきたためです. engineering.mixmax.com まず, yarn は並列インストールができるため npm よりパッケージインストールが高速でし
たのしいTypeScript - Qiita
Ateam Lifestyle x cyma Advent Calendar 2018の初日は、株式会社エイチームライフスタイルの@suzuki_shが担当します。 本稿では「TypeScriptを使って開発をしてみたい」と思ってもらえるように、その魅力を紹介していきます。前半は「すこしJavaScriptを書いた事がある人」向けに、すぐにTypeScriptにキャッチアップする方法を紹介します。後半はちょっと踏み込んで「TypeScriptがあると何が嬉しくなるのか」を紹介します。本稿が、TypeScriptを使ったたのしい開発のキッカケになればと思います。 とくにフロントエンドへ携わる人に広くTypeScriptをさわってほしいため、前半はWebデザイナーの方でも読めるようやさしい内容にします。しかし後半の内容はエンジニアでないと難しいかもしれません。ご容赦ください。 環境 下記の環境
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Micro-frontend Architecture: Import chunks from another Webpack bundle at runtime
フロントエンドでフロントエンドをビルドする
Micro-frontend Architecture: Import chunks from another Webpack bundle at runtime
Building a Stable Node.js Project Architecture. Best Practices for Node.js Development