ここ2年くらいの話なのですが、仕事で「フロントエンド会」というチーム内委員会のようなものを立ち上げて運営しています。元々1人の Web フロントエンド職人がプロダクトの Web フロントエンドの面倒を見ていたのですが、その方が異動されることになったので、残った人で面倒を見ていける体制を作りましょう、というモチベーションで発足した会でした。この話については以前イベントで発表したので、詳しくはこのスライドをご覧下さい。 speakerdeck.com Web フロントエンド職人の異動とともに入社した id:mizdra が Web フロントエンドが得意だったので、ペアプロやペアオペ、定例会などを通じてどんどんスキルや知見を配っていく、という戦略で運営していました。実際に 2 年経過してみてメンバーも徐々にキャッチアップしていって、ちょっとしたパフォーマンス改善をやってみたり、最近 Gulp や
「キャッチアップしておきたいウェブ制作の最前線」というテーマで、Vue.jsなどJavaScriptを駆使したユーザーインターフェイスの開発を主に担当してきた池田泰延氏が、Webのフロント周りの近年の技術的な動向を解説します。前半はフロントエンド技術のトレンドについて。 スピーカー自己紹介、『JavaScript コードレシピ集』を出版 池田泰延 氏（以下、池田）：みなさんよろしくお願いします。ICSの話として、私と鹿野の2名で発表します。HTMLとかCSSとかJavaScriptとか、フロントエンドまわりの最新を説明していきたいと思います。では始めていきましょう！ ます自己紹介します。ICSの池田と言います。株式会社ICSの代表をやっています。これはオフィスの写真でして、南麻布にあるのですが、こんなところで仕事をやっています。今はこの状況下なので、会社にはほとんど誰も行っていませんが、こ
フロントエンドとSPA職人の目指したものの歴史と概略
年末年始にフロントエンド論みたいな記事をいくつか見たが、僕ら古のSPA職人がやってきたフロントエンドという職域と目指していたものが失伝しかけている気がするので、ここに時代ごとに何を考えていたか、雑に書き殴る。 注意点として、 2004から始まるが、自分がプログラミングを始めたのが2010, 業務としてコードを書き始めたのが 2012 なので、解像度が高いのはそれ以降になる。 tl;dr 2004: 動き出す HTML 2011: 構造化のはじまり 2015: 贅沢品としてのSPAとコミュニティ分化 2017: 貧者のSPA 2019: 守破離としてのパフォーマンス 2004: 動きだす HTML AJAX の時代。要は XMLHTTPRequest で取得したコンテンツに応じて、動的書き換えをDOM書き換えを行うこと。今では名付けるほどでもない操作だが、HTMLが静的なものをやめたことは、
モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack | Hypertext Candy
2020.04.30 モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack この記事では、モダンな JavaScript を書くための前提として知っておくべき、いくつかのキーワードを紹介します。想定読者は、初心者 〜 jQuery なら書けるレベルの開発者です。これから React や Vue.js を学びたい方、または Web 開発の世界に飛び込む新人さんなどの学習の助けになれば、と思います。 「モダン」な JavaScript ここで言う「モダン」とはどういう意味でしょうか？ 「モダン JavaScript」という表現は数年前から目にしますが、大抵 ES2015（JavaScript の 2015 年バージョン）以降の JavaScript を指しているようです。確かに、const / let やアロー関数などの文法的な改善、A
この3つの原則は書籍の構成にも現れています。 第一部の基本文法で「書き方」を学び、第二部のユースケースで「作り方」を学べるようになっています。 「学び方」は、章としてではなく全体的な流れとして取り入れることにしました。 なぜなら、「学び方」自体は学びたいことによっても異なる方法を取る場合があります。 そのため、「学び方」で個別の章とするよりは、他の章で「書き方」や「作り方」と一緒に見たほうがよいと考えたためです。 たとえば、基本文法などの学び方にはMDNのようなリファレンスサイトを見たほうがいいし、 アプリケーションの作り方は実際のサイトなどを参考にしたほうがよいためです。 第一部と第二部がどのように書かれたのかをざっくりと振りかえってみます。 第一部: 基本文法 第一部: 基本文法はJavaScriptの基本的な文法について扱っています。 プログラミングの入門書で文法については避けること
今年の本業は、 3rd party script で、そこから呼ぶウィジェットを最適化するコンパイラを書く、その仕様を考えて、実装するという感じだった。要は Google Analytics と、最適化コンパイラ付き GTM みたいなものを作っていた。その内容は以下に書いた。 サードパーティスクリプトの極限環境向け Svelte パフォーマンス改善に Core WebVitals という大義名分を得た 今年は、 パフォーマンスのエンジニアをやっていた、と思う。サードパーティスクリプトの配信を生業にする会社のエンジニアとしては、来年の Core WebVitals というパフォーマンス関連の大きな変化で、波にのってやりたいことがやれたと思う。 Core WebVitals の導入で実際にどれぐらいの影響がでるか不明だが、パフォーマンスが SEO に影響する、というのは、 若干やりすぎと思いつ
Intro ちょうどタコピーの原罪が流行ってるのでこのタイトルにしたけど結構気に入ってる。 d.potato4d.me この話を読んでの感想とここまで大きくなった Node.js の振り返りをしようと思う。 どんなプログラミング言語であってもみんなから使ってもらって開発者をハッピーにしたいと思ってる。ただ最初は良かったと思ってた機能がなんか古臭くなったり、他にクールな機能を持ったものが登場したことによって徐々に飽きられていき、最終的に他の言語に乗り換えられる。 まぁどんな言語も同じだと思う。C言語だって生まれた当初はすごくクールでみんなをハッピーにしてた。今丁度「戦うプログラマー」を読んでるが、C++が出てきて、周りのエンジニアが C++ を使おうとするシーンが出てくる。そこで、「あんなの使って何が良いんだ、Cで十分だろ」とWindows NT 開発リーダーのデーブカトラーが言ってたりする
初めに、そして結論 本当は冒頭にこういう言い訳がましいことを書くのは好きではないのだが、例によってディスり成分が多めなので、筆者はそういうキャラということでそこは目を瞑って欲しい。実体験に基づいて書くので業務上あまり触ってこなかった言語については記載が少ないが、読者のみなさんが詳しいことや私の記述で事実と異なる部分については謝罪して訂正したいのでプルリク、コメント等熱望している。あと筆者はサーバーサイドエンジニアであってフロントの事が全然わからんのでその辺はさっぴいて読んでほしい。結論から言うとRustを使え。 古生代 アセンブラ以外の高水準プログラム言語の歴史は1950年代から1であるが、筆者の実体験に基づいて話をするので'80年代まですっ飛ばす。 N88-BASIC N88といえばN88-BASIC(86)を思い浮かべる読者が多いと思うが、筆者はPC-8801mkIIユーザーだったので
僕がNode.jsを熱心に勉強していた頃に、スーパープログラマとして憧れていた人たちが、今何をやっているのか調べてみました。 github.com Express.jsなんかを作っていたtjは、Go言語がメインに書いているようです。 OSS活動自体あまりやっていなさそうです。 github.com Browserifyをつくっていたsubstackは、主にrustを書いているようです。 サーバーを書いていた人はGo言語に、CLIを書いていた人がrustに行くのかもしれません。 github.com Babelを書いていたsebmckもrustです。 github.com Rad VaggはGo言語とPythonのようです。 github.com tjfontaineはOSS活動がほとんど無くなっています。 ここからはNode.jsを去っていない人たちです。 github.com Guill
[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク
TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました！ esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめに これまでの JavaScript ビルドツールと私 以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな
サーバーサイドエンジニアがじっくり学ぶVue.jsチュートリアル【1. Installation】 | DevelopersIO
こんにちは。DA事業本部の春田です。 普段の業務では全く扱わないフロントエンドの世界に飛び込んでみたいと思います。最近3系が登場しましたがまだ情報が少ないので、2系のチュートリアルを進めていきます。サンドウィッチマンでいう「ちょっと何言ってるかわからない」ポイントは、その都度調べていきます。英語版の公式ドキュメントがベースです。 今回は、一番最初のInstallationです。 はじめに 互換性の注意 最初のセクションは「互換性の注意」についてです。ECMAScript 5とun-shimmableが、早速「ちょっと何言ってるかわからない」ポイントだったので調べてみました。 Vue.js uses ECMAScript 5 features that are un-shimmable in IE8 ECMAScript5は2009年にリリースされたJavaScriptの標準仕様のことで、プ
Introducing Yarn 2 ! 🧶🌟
Hi everyone! After exactly 365 days of very intensive development, I'm extremely happy to unveil the first stable release of Yarn 2. In this post I will explain what this release will mean for our community. Buckle up! If you're interested to know more about what will happen to Yarn 1, keep reading as we detail our plans later down this post: Future Plans. If you just want to start right now with
Sansanプロダクト開発部・基盤チームの加畑です。 Sansanプロダクト開発部には、現在約120名のメンバーが所属しています。その中で、私が所属する基盤チームは6名のメンバーで構成されており、データアクセスや認証、メッセージング基盤、CI等開発環境やリリースプロセスなど、アプリケーションの基盤に関わるプロジェクトを主に受け持っています。 担当領域の性質上、システムのレガシー化に向き合う機会が多いです。私を含め複数のメンバーが、常に何かしらレガシー改善に関わるプロジェクトを進めている状況です。昨年の10月に、私が担当したいくつかのプロジェクトについて、レガシーシステムのおそうじという記事でご紹介しました。4月にはレガシー改善に関する勉強会を開催し、はてなさんやYahooさんとも交流することができました。楽しかったです。 前回記事と勉強会では、「レガシー改善のプロジェクトをうまく進めるには
はじめに ねぇまってむり webpackでこれ以上消耗するの つらいょ というみなさんへ これを期に 理解しましょう webpack 今回の記事は webpack の公式ドキュメントhttps://webpack.js.org/ (CC BY 4.0) から内容をたくさん引用しています。ありがとう Webpack チーム! 本題に入る前に 何故webpackを使うのかを考えてみましょう こういうのは何故必要かも理解しておくと有り難みが増すんやで。 はるか昔の javascript 有史以前、ブラウザでJavaScriptを実行する方法は2つありました まず１つ目としてスクリプトタグで各機能ごとに切り分けたファイルを読み込む方法があります。しかし大量のスクリプトをロードするとネットワークのボトルネックが発生する可能性があるため、この方法ではスケーリングが困難であると考えられました。 2番目の
3Dモデルの配信サーバーでRustとZstandardを採用して数倍のパフォーマンス向上を実現した - pixiv inside
はじめに こんにちは、VRoid部所属のエンジニアのyueです。 この度VRoid Hubで3Dモデルの配信サーバーの見直しを行い、技術選定から始めRustとZstandard (zstd)を採用した実装に切り替えました。 結論から見るに従来のNode.js製サーバーと比べて以下のことを実現しました。 最大のレスポンス時間が 1.5 ~ 2.5s から 300 ~ 400msまで低下 平均のレスポンス時間が 700 ~ 800ms から 150 ~ 200msまで低下 サーバーのCPU使用率が ~ 50% から ~ 10%まで低下 docker image のサイズが ~ 346mb から ~ 21mb程度まで削減 配信されるファイルサイズが平均 10 ~ 20% 軽量化されました レスポンス時間 CPU使用量 (上からAVG(MAX), AVG, AVG(MIN)) メモリー使用量に関し
こんにちは、 @mugi_uno です。 Misocaがサービスローンチされたのは 2011年です。実は2021年は10年目ということで何気に節目の年だったりします。 10年もあれば世の中的にもさまざまな技術変遷があり、Misocaもその波に乗っていけるよう、日々改善を繰り返してきました。 というわけで今回は、私自身がフロントエンド側の作業を多くやってきたこともあり「この10年間でMisocaのアーキテクチャがどのように変わってきたのか？」をフロントエンド側に焦点を絞って振り返ってみたいと思います。 ※ 意思決定に関する資料が無いものも存在するため、一部は情報に基づく推察になる点をご承知おきください。 年表 いきなりですが、ざっくり年表を書いてみました。 上部の黄色いラインは、フロントエンドに大きい影響を与えたMisocaの機能です。 これをもとに、サービスローンチから順を追って見てみます
第一部 JavaScript、その起源 1995年 NetScape社のブレダン・アイク氏が開発 ポケモン赤・緑とタメ 最初はLiveScriptって名前だった 「Javaっていう言語が超ナウいらしいぞ」 1995年にJavaによるブラウザWebRunnerが、HotJavaという名で世界に公開 NetscapeがJavaのサポートを表明 今、Javaが熱い!! 「せや!名前もらったろ!」 改名 LiveScript -> JavaScript 第二部 スクリプト戦国時代 ライセンスの乱 1996年 MicrosoftがIE3.0を発表「JavaScript使わせてやー」 NetScape社「だが断る」 Microsoft「ほな勝手に作るわ」 => JScript誕生 各ブラウザベンダが独自言語を実装する戦国時代へ Webエンジニアは血の涙を流す 想像図 「JavaScriptってどうよ?
JSConf JP 2023「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
この記事は、JSConf JP 2023 で発表した「書いたJavaScriptがそのままブラウザで動く未来へ」のスピーカーノートです。もともと PDF を公開していたのですが、読みにくいという声をいただいたので移植しました。内容はそのままで、見出しだけ付けています。 はじまり こんにちは、今日は「書いたJavaScriptがそのままブラウザで動く未来へ」というタイトルで発表をします。「いやいや、JavaScriptはブラウザで普通に動くだろう」と思われる方もいらっしゃるかもしれませんが、話を聞いてもらえれば何を言っているのかわかると思います。 JSConf JPで登壇させていただくのは今回で3度目なのですが、オフラインのカンファレンスで話すのは今回がはじめてなので少々緊張しています。 最初に軽く自己紹介をします。鈴木 颯介と言います。大体のところで Sosuke Suzuki という名前
【2024年版】JavaScriptのおすすめライブラリ＆フレームワーク40選 JavaScriptのライブラリやフレームワークを使うことで、幅広い特徴と機能により、ウェブサイトやアプリケーションの開発が容易になります。これを可能にしているのが、JavaScriptの動的で柔軟であるという特性でしょう。2020年に実施されたStackOverflowの調査によると、JavaScriptは回答者の67.7%が使用しており、最もよく使われているプログラミング言語として記録を更新（8年目）しています。 その汎用性の高さから、バックエンドとフロントエンド両方の開発やテストに利用できます。その結果、さまざまな目的に対応する数多くのJavaScriptライブラリやフレームワークを見つけることができます。それゆえに、プロジェクトでどれを利用すべきかと迷ってしまうこともあるでしょう。 しかし、心配はご無用
Previous slideNext slideToggle fullscreenOpen presenter view Build and Publish 2023 @mizchi | Plaid, Inc. jsconf.jp 2023 今日もツールチェインに消耗してますか？ https://2022.stateofjs.com/en-US/libraries 今日のテーマ 今日話すこと 現代のビルドツールチェインの進化と目的 エコシステムに振り回されないようになろう！ 今日話さないこと 個別のツール/ライブラリの使い方 フロントエンドの話？ NO. 最近のサーバーサイドJSとバンドラは一体化している サイズ制限のある CDN Edge Worker も最適化が必要 About Me JSのビルドとは何か Transpile AltJS(TS,JSX)や CSS Modules の変換
SES v0.8.0Up to this point, SES has supported evaluating scripts in the SES runtime. Since every non-trivial application has many modules, running an application previously required creating a script bundle with a tool like Browserify. We’re excited to announce the first release of SES that directly supports loading ECMAScript modules. This is the first in a series of milestones toward delivering
講義を始める前に 質問があったらその場で聞いてください 他の受講者の理解にもつながります 声を出すのが難しければ、Slack でも OK スライドモードで画面に写しながら話しますが、手元で資料を開きつつ聞くと理解しやすいと思います リッチなウェブページを作ってみよう HTML 構造 CSS 見栄え JavaScript 動き Single-Page Application HTML, CSS, JavaScript を駆使したリッチなウェブページ 書いたことあるよ、という方 🙋♀️ HTML HTMLとは セマンティクス コンテンツカテゴリ HTML Webページを記述する言語 code:example.html <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>HTML文書</title>
An update from the Faker team January 14th, 2022 👋 We're pretty excited to give new life to this project. We want the project to have a fresh start and become even cooler. What is Faker? Faker is a library that generates fake (but reasonable) data for you. Mock data. Data for testing, development, and the like. Faker was first implemented in Perl in 2004 by Jason Kohles (he reached out to us in
JavaScriptが辿った変遷
はじめに CommonJS、ES6、Node.js、Webpack、Browserify...etc JSの勉強してると、登場する単語が多すぎて、どうも全体像つかめません。 そして勉強していくにつれて、「これ前提知らないと分からないでしょ...」といったことが多数出てきたので、その前提を色々とまとめてみることにしました。 (わかりやすさ優先で書いています。もし不備等ございましたらコメント頂けると幸いです。) 第一部: JavaScriptの概要 JavaScriptの誕生 JavaScriptの誕生は1995年、Netscape社が、当時最も流行していたWebブラウザ、Netscape Navigatorに搭載したのが始まりです。 その後、Windowsで有名なMicrosoft社が、JavaScript のパクリ と互換性のある、JScriptなるものを開発し、今も残るInternet
こちらの記事は、2017年10月に公開された 『Modern JavaScript Explained For Dinosaurs』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに ライアンノースによる恐竜漫画から引用 あなたがJavaScriptの進化と共に歩んでこなかったのであれば、今のJavaScriptを学ぶことは難しく感じるでしょう。エコシステムは急速に成長し変化しているため、さまざまなツールが解決しようとしている問題を理解することは困難です。私は1998年からプログラミングを始めて、2014年になって初めてJavaScriptを真剣に学び始めました。当時私はBrowserifyに出会い 、そのキャッチフレーズを見たことを覚えています。 「Browserifyは、あなたの依存関係のすべてをまとめることによって、ブラウザでrequire(‘modules
This major release features the new editor mode in the viewer (enabled by default now), new icons in the viewer, removal of deprecated functionality/APIs, removal of support for outdated browser versions, font conversion/text selection improvements and other features/bugfixes. Changes since v2.16.105 Bump versions in pdfjs.config by @timvandermeij in #15357 [api-major] Remove the enhanceTextSelect
Effective TypeScript › The Saga of the Closure Compiler, and Why TypeScript Won
Here's something that makes me feel old: in just six months, Gmail will celebrate its 20th anniversary. If you weren't actively developing web sites at the time, it's hard to capture just how revolutionary it was. This was a time when JavaScript was held in almost universally low regard. The idea that you could build a sophisticated web app using it was mind-boggling. But it clearly worked and it
Guy Bedford, June 19th 2020 The latest version of the jspm CDN, https://jspm.dev has been launched today as the new replacement for https://dev.jspm.io. jspm.dev allows directly importing any package from npm into the browser using only native ECMAScript module import semantics like import('https://jspm.dev/pkgname'). As of today, dev.jspm.io serves 6 million requests to over 150,000 users each mo
One of the first XKCD comics to go viral was this one, #303: Today, the web developer version would be “my site’s building” and they would be playing swords in VR. Sites take time to build these days. A large Next.js 11 site will take several minutes to build. This is wasted time in the development cycle. Build tools like Vite or Turbopack highlight their ability to get this number down. But the d
JSエコシステムぶらり探訪(目次) - Qiita
概要 webpackとかbabelとか、JSのすごいエコシステムを基本 (ブラウザ、Node.js, npm) から順番に調べていきます。 経緯 最近は npx create-react-app ... とやるといい感じに環境ができていいのですが、複雑なことをやろうとしたり、既に複雑になってしまったものを触るにはきちんと中身がわかってたほうがいいな……と思い始めたのでぼちぼち自分で調べ始めました。アウトプットしながら調べたほうが効率がいいので、このように記事として残します。 目次 (予定) とりあえず思いつくだけ書き出したもので、全ての内容を確約するものではありません。また、調査を進めるにつれて目次も変化します。 原初のJavaScript Node.jsとCommonJS modules npm, yarn, node_modules npmとコマンドライン CommonJSモジュールバ
The Story¶IntroNodes is a JavaScript-based 2D canvas for computational thinking. It’s powered by web technologies and the npm ecosystem. We take inspiration from popular node-based tools but strive to bring the visual interface and textual code closer together while also encouraging patterns that aid the programmer in the prototype and exploratory stage of their process. Nodes was created and deve
Airbnb’s Trip to Linaria
CSS is a critical component of every web application, and many solutions have evolved for how styles are written by developers and delivered to visitors. In this post we’ll take you through Airbnb’s journey from Sass to CSS-in-JS and show you why we landed on Linaria, a zero-runtime CSS-in-JS library, and the impact it has had on the developer experience and performance of Airbnb’s web app. From S
ビルドシステムをcreate-react-appからViteに移行した話 - Sansan Tech Blog
こんにちは、技術本部 Bill One Engineering Unitの江川です。 2021年4月に新卒としてSansanに入社したのですが、早いものでもう1年が経ってしまいそうで驚いています。 今回は、そんな早かった1年に思いを馳せつつ、Bill Oneフロントエンドのビルド周りを高速なビルドツールであるViteに移行していった話をしたいと思います。 移行の背景 Bill OneのフロントエンドではReact + TypeScriptを採用しており、ビルド周りには Create React App（以下、CRA）をejectなしで利用していました。*1 CRAは、開発初期にwebpackなどの設定を隠蔽し簡単にセットアップを行えるという利点がある一方で、開発を進めていきコードベースが大きくなってくるといくつかの問題が発生することがあります。 具体的にはBill Oneでは以下のような問
異業種からWeb開発者としての生き延び
現在、会社の技術横断組織のメンバー（主にフロントエンド担当）として技術支援（壁打ち的やレビュー）やエンジニアの評価制度・採用、組織を横断したエンジニアのコーチング・メンタリングなどエンジニア組織を良くするための課題解決にそこそこの裁量をもたせてもらって事業に携わらせてもらっています。 そんなことをしている私ですが、そもそも製薬業界（学位も薬学修士を修めています）から業界転職をしており、気がつけば6年ほど経っていたのと、最近は自分のキャリアについて聴かれることも増えたので一度、開発者目線で「どんなことを？どういうモチベーションで？こんなことになったんだっけ？」を少し振り返ってみようと思います。 ※1. 今の自分の視点から振り返りつつ、またカッコでたびたびツッコミを入れながら書いていきますので、文体の時系列に違和感があるかもしれませんがなるべく書いている時の自然な気持ちを大事にしたいのでご了承
会社のフロントエンドエンジニアの方にReact/Typescript関連のおすすめのドキュメントを聞いたところりあクトを教えてもらいました。 読んでみてとてもおもしろく、おおげさですが感動してしまったので感想を書きます。 読んだ本りあクト！ TypeScriptで始めるつらくないReact開発 第3版(200912) りあクト!第3版Ⅰ. 言語・環境編Ⅱ. React基礎編Ⅲ. React応用編私とフロントエンド 普段仕事ではmovoという物流業界向けのSaaSのバックエンドでGoを書いています。 各種プロダクトのフロントエンドはReact(16.9)/Typescript(3.7)で書かれているのですが、swagger/openapiの生成までしかタッチしていないので フロントのコードを読めるようになりたいと思っていました。 ReactについてはUdemyのコースを買ってみてTODOを中
コラム - Ruby on Rails 海外事情コラム | 第57回 なぜRails 6にはWebpackerとSprocketsの両方が含まれているのでしょうか？｜CTC教育サービス 研修/トレーニング
CTC教育サービス・ホーム ＞ コラム ＞ Ruby on Rails 海外事情コラム ＞ 第57回 なぜRails 6にはWebpackerとSprocketsの両方が含まれているのでしょうか？ [IT研修]注目キーワード Python UiPath(RPA) 最新技術動向 Microsoft Azure Docker Kubernetes 第57回 なぜRails 6にはWebpackerとSprocketsの両方が含まれているのでしょうか？ (野田貴子) 2020年6月 こんにちは。アプリケーションを作るときには、様々な技術の取捨選択を行いますよね。たとえば、フロントエンドの実現に使う技術（React、Vue、Angular、jQueryなど）の選択です。私も、これまでに何度も何度も類似技術の調査をして、比較表を作り、上司やチームメイトに提案してきました。その度に、「すでにどこかに要
clasp + gas-local + rollupで恐らく最も手軽なlocalでのGoogle Apps Script開発
気づいていなかったことに気づいちゃったので、よりシンプルなセットアップにしようと頑張った成果が出たので、共有。 というか 絶対にwebpackの設定はやりたくない。絶対にだ。 という気持ちがほとんど。そしてそれは（もちろん内容によるけど） 考え方を逆転させれば叶うぞ という話。 これまでを整理まずは前回日記で書いた時点までに分かっている GAS 開発に関する制約や考えたこと、行なったことをまとめるところから始める。 当たり前の開発を行いたい当たり前の考え方として以下が挙げられると思う。 1 ファイルにすべての function を並べるような開発は見通しが悪いのでやりたくないすべてのコードをゼロから書くのではなく適切に npm などに依存したいテストコードを書き、パーツごとにテストを行いたい手元のコードのバージョンを管理したいApps Script上のコードの制限一方で GAS ならではの
OSS Engineer - TypeScript, Azure, React, Node.js, .NET This post is a a little different from most that sit on my site. It's the story of the Definitely Typed project, of which I was an early member. It had a seismic impact on the development of TypeScript. When exchanging messages with Andrew Branch (member of the TypeScipt team), I realised it was an untold story, and perhaps I should tell it, b
コード分割 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 lazy <Suspense> バンドル 多くの React アプリケーションは、Webpack、Rollup や Browserify などのツールを使ってファイルを「バンドル」しています。バンドルはインポートされたファイルをたどって、それらを 1 つのファイルにまとめるプロセスです。このバンドルされたファイルを Web ページ内に置くことによって、アプリ全体を一度に読み込むことができます。 例 App:
nodeではnpmを使ってライブラリをインストールしてプログラミングを行います。そして配布する際にはnode_modulesを除き、各自がインストールします。しかしネットワークが必要だったり、場合によってはライブラリのインストールに失敗するかも知れません。 そこで使ってみたいのがnccです。コードを一つにまとめてポータブルにしてくれるソフトウェアです。 nccの使い方 コード例です。 const chalk = require("chalk"); console.log(chalk.blue.bgRed.bold("Hello world!")); ビルドを使うとコードが生成されます。 $ ncc build ncc: Version 0.20.4 ncc: Compiling file index.js 44kB dist/index.js 44kB [439ms] - ncc 0.20
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
個人的 Web フロントエンドスキルの獲得方法 - mizdra's blog
「Angular」「React」「Vue」の3大フレームワークに集約 ICSの代表が教える「フロントエンド技術」のトレンド
JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？
2020年やったこと、考えたこと、触った技術のまとめ - mizchi's blog
Node.js の原罪 - from scratch
年収1000万円を超えるエンジニアが知っておくべき最低限の各言語の特徴 - Qiita
Node.jsのスーパープログラマ達の今 - @ledsun blog
レガシーシステムとつきあう - Sansan Tech Blog
Webpackをシンプルに理解しよう - Qiita
Misocaフロントエンドの歴史と未来 - 弥生開発者ブログ
JavaScriptの歴史をざっくりまとめたよ! - Qiita
【2024年版】JavaScriptのおすすめライブラリ＆フレームワーク40選
Build and Publish 2023
SES support for ECMAScript modules
5日目: リッチフロントエンド - はてなインターン2019 (公開版)
An update from the Faker team | Faker
恐竜でもわかるJavaScript - Qiita
Release v3.0.279 · mozilla/pdf.js
JSPM - jspm.dev Release
You Don't Need a Build Step
Nodes – a new way to create with code | https://nodes.io
りあクト! 第3版がすごくよかった - happy developing
Definitely Typed: The Movie | johnnyreilly
ncc - nodeプロジェクトを一つのファイルにまとめる