ここ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
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の機能です。 これをもとに、サービスローンチから順を追って見てみます
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
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モジュールバ
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 ならではの
Ubuntu Weekly Topics Ubuntu Core 24の一般提供開始、Ubuntu 23.10のEOL Ubuntu Core 24の一般提供開始 「通常の」Ubuntu 24.04 LTSに続いて、Ubuntu Core 24がリリースされました（リリースについてのblog記事の日本語版）[1]。Ubuntu Coreは、Ubuntu（と、その中でも特にSnap）を中心にした、IoTやロボティクス、エッジデバイスや組み込みなどの環境に向けたOTA機能を備えた「開発からデプロイまでを同じ環境で行える」OSです。 「開発からデプロイまで同じ環境」というのは、開発環境としてUbuntu Desktopを、そしてターゲットデバイスにUbuntu Coreを利用することで、ワークステーションと組み込みデバイスで同じアプリケーションを走らせることができるという意味で、Ubuntu
はじめに esbuild は、キャッシュなしで高速なビルドを可能とする Node.js のビルドツールです。 ビルドツールには、esbuild の他に、Webpack、Gulp、Parcel、Rollup、Browserify、FuseBox などがあります。 私自身が webpack を普段使っていて、ビルドに時間がかかりすぎているのが気になり、esbuild について調べてみようと思いました。 esbuild の特徴としては、 キャッシュなしでの高速なビルド ES6 と CommonJS をサポート ES6 の Tree shaking 対応（利用されていないコードの除去） JavaScript と Go による API TypeScript と JSX をサポート ソースマップの生成 ソースコードの最小化 プラグイン（現在、experimental で v1.0.0 より前に対応予定
CLIツール・ウェブサーバー作成のための環境設定 — 仕事ですぐに使えるTypeScript ドキュメント
TypeScriptの世界を知る 前書き Node.jsエコシステムを体験しよう TypeScriptの書き方 変数 プリミティブ型 複合型 基本的な構文 基本的な型付け 関数 その他の組み込み型・関数 クラス 非同期処理 例外処理 モジュール console.logによるログ出力 中級のテクニック ジェネリクス 関数型指向のプログラミング クラス上級編 リアクティブ 高度なテクニック 環境ごとのTips（共通環境・ブラウザ以外） ソフトウェア開発の環境を考える 基本の環境構築 ライブラリ開発のための環境設定 CLIツール・ウェブサーバー作成のための環境設定 Node.jsの環境構築 作業フォルダを作る ビルド設定 CLIツールのソースコード Node.jsのまとめ Deno CI（継続的インテグレーション）環境の構築 成果物のデプロイ 使用ライブラリのバージョン管理 環境ごとのTips（
The continual evolution of Airtable’s codebase: Migrating a million lines of code to TypeScript
Airtable’s codebase follows an ethos of continual evolution. We’re unafraid of ripping out old code when it no longer meets our needs or introducing new technologies and patterns to reflect the current state of the art. Today, we’re going to provide an overview of some of the step-change moments in the history of our codebase, and dive deep into the largest of these changes: our migration to TypeS
【感想】『りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版』【Ⅰ. 言語・環境編】： #りあクト で最強React入門 - Rのつく財団入り口
りあクト！ でReact再入門 しばらく前のエントリで書きましたがReact＋TypeScript回りを学んだので、一緒に読んだ本の感想エントリです。技術同人誌界隈では非常に高評価、なんと累計1.5万部も売れた3部構成のReact入門書。作者はフリーランスのエンジニアの大岡由佳さん。 React推しの技術同人誌なので前書きからすでにアツく、最近はVue.jsが採用されたり書籍が多いのにもどかしさを感じたり、実際のプロジェクトで見てきたひどいコードをもっと良くしたいと思った…などなど、現場のエンジニアの技や思いがたっぷり詰まっています。ReactってJavaScriptぢからの高い優秀な人が使ってそうな勝手なイメージがあったのですが、そうではない場合もあるのですかねえ。 技術が出てくる経緯、歴史と思想にも踏み込み、仕事で使えるReact本を目指したとのことで、実際にそれを実現した本となってい
module.exports = { module: { rules: [ { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ } ] } }; なお、ライブラリの場合は特別な場合を除いてBabelもwebpackもいりません。CommonJS形式で出しておけば、Node.jsで実行するだけなら問題ありませんし、基本的にwebpackとかrollup.jsとかのバンドラーを使って1ファイルにまとめるのは、最終的なアプリケーション作成者の責務となります。特別な場合というのは、Babelプラグインで加工が必要なJSS in JSとかですが、ここでは一旦おいておきます。ただし、JSXはTypeScriptの処理系自身で処理できるので不要です。 TypeScriptユーザーがライブラリを使う場合、バンドルされていない場合は @
5年前の記事のメンテを行っていたんですが、流石にBrowserifyは実務で使う可能性は低いよなあとは思います。 Browserifyの単純さも初心者にはとっつきやすいのですが、今の主流はwebpackです。 webpack入門記事はたくさんあるはずですが、設定ファイルの各パラメータの羅列だったり、BabelやReact, TypeScriptの設定まで一気に済ませてしまうような記事は初心者には難しいかもしれないですね。 というわけで、Node.jsは３日前にはじめました、みたいな人向けに書いてみようと思います。 初心者なのでwebpackだけを使ってみたいんだけど 今どきだと初心者はReactならcreate-react-app、VueならVue CLIを使って入門するんじゃないかと思います。これらはwebpackの設定を代わりに済ませてくれる便利なツールで、難しいことを知らなくて済みま
この記事は freee Developers Advent Calendar 2021 の5日目です。 こんばんは。Identity & Access Managementを担当している てらら（id:a_terarara） です。 先日 死霊館 を鑑賞しました。（ホラー注意） この作品は実話から作られたということですが、購入した中古戸建てでポルダーガイストに出くわしたり悪魔にとり憑かれたり中々ハードなお話で最後までハラハラさせてくれました。 その中で、全ての時計が３時７分に止まるという現象があったのをきっかけに今回のAdvent Calendarは丑三つ時にお送りしようと思った次第です。 なお、丑三つ時って３時のことやろって思ってたら実は２時〜２時半のことらしいです。 WebAuthnとの出会い 2021年10月時点の私はWebAuthnに触れたことが無く 「パスワードの代わりに公開鍵を
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
Misocaフロントエンドの歴史と未来 - 弥生開発者ブログ
【2024年版】JavaScriptのおすすめライブラリ＆フレームワーク40選
Build and Publish 2023
SES support for ECMAScript modules
5日目: リッチフロントエンド - はてなインターン2019 (公開版)
An update from the Faker team | Faker
Release v3.0.279 · mozilla/pdf.js
JSPM - jspm.dev Release
You Don't Need a Build Step
りあクト! 第3版がすごくよかった - happy developing
Ubuntu Core 24の一般提供開始、Ubuntu 23.10のEOL | gihyo.jp
Node.js のビルドツール「esbuild」について！
ライブラリ開発のための環境設定 — 仕事ですぐに使えるTypeScript ドキュメント
webpackをかんたんに使う（Zero Configulation） - Qiita
丑三つ時におくるWebAuthnの勘所 - freee Developers Hub