No Bundle ツールの流行: vite / snowpack モダンブラウザは Native ESM を備えているので、開発時は高速な localhost アクセスを頼って直接 import する、外部ライブラリだけ事前にコンパイルしておく、という手法が流行ってきている。プロダクション用は今まで通りビルドする。 webpack はすべてを一つにバンドルするためにメモリ上にファイルの実体と依存グラフを持っているが、これによりメモリと CPU を圧迫する問題があった。特に巨大なリポジトリではそれが顕著になる。 No bundle ツールの実装として vite と snowpack がある。 https://github.com/vitejs/vite https://www.snowpack.dev/ vite は使ってみた限り、更新時の差分ビルドが爆速で、明らかに体感が良い。 Vue

前回のv3に関する記事でこれまでの変遷を確認したので、ようやく本題のv4についてまとめていきます。 追加された新機能 【v4.0】 Variadic Tuple Types function concat(arr1, arr2) { return [...arr1, ...arr2]; } function tail(arg) { const [_, ...result] = arg; return result } function concat(arr1: [], arr2: []): []; function concat<A>(arr1: [A], arr2: []): [A]; function concat<A, B>(arr1: [A, B], arr2: []): [A, B]; function concat<A, B, C>(arr1: [A, B, C], arr2:

Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R

GTA Online. Infamous for its slow loading times. Having picked up the game again to finish some of the newer heists I was shocked (/s) to discover that it still loads just as slow as the day it was released 7 years ago. It was time. Time to get to the bottom of this. ReconFirst I wanted to check if someone had already solved this problem. Most of the results I found pointed towards anecdata about

DeNAがもっと見えるモノづくり2016年から継続して開催しているDeNA TechCon。 今回のテーマは「Modulation」。つまり、“変調”です。 私たちはこれまで様々なチャレンジをし、技術力を研鑽しながら事業の未来を率い、 DeNAのエンジニア文化を築いてきました。 そして、2021年。 私たちは、事業の成長、世の中の変化に向き合い、今後こうありたいという理想を持ち、 そこへ向けなめらかに変調していく時を迎えています。 それは“今まで”を破壊してつくり直すのではなく、 “今まで”を活かし、課題に向き合い改善していくということ。 つまり、より多くのDelightを届けるべく DeNAのモノづくりを強くしていくということです。 今回、そんな“変調”をDeNAのエンジニアがお届けします。 ワクワクする「Modulation」を、ぜひご覧ください。

Goのプロジェクトをどの様なファイル構成で配置すれば良いか読み物が少ないという指摘を見たのでまとめてみようと思う。 GOPATHについて Go1.16がリリースされたことでGo-Moduleによるプロジェクト構成が標準で推奨されることになりました。（Go1.11までさかのぼってGo-Moduleは使える様になってます） Go-Moduleモードでは「GOPATH配下にプロジェクトを置かなければならない」という制約からは解放されています。なので、実質GOPATHはどこを指していても構わないし設定されていなくても「ユーザーホーム/go」というデフォルトの場所が決まっているので開発できます。 おすすめの環境変数設定は以下の２つだけ。 「GOPATH=~/.go」（WindowsはGOPATH=％USERPROFILE%\.go） 「PATH=＄GOPATH/bin:$PATH」（Windowsは

Quick Start GitHub Repo Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts. The source code is available on GitHub (opens new window). If you like the project, please consider starring the repo on GitHub.

2021年になって、本の読み方、特にWebアプリケーションエンジニアが読むような技術本について、以前よりも適切な読み方を見つけられたと感じたのでまとめました。 一言でまとめると、ちゃんと読まないという読み方になります。 TL;DRまず、短気な人のために、具体的な読み方。 用意するものは以下の道具。 A4サイズ以上のノート（B5は小さい） 万年筆（赤と黒） キッチンタイマー 耳栓 最初の読書を必ず１時間以内にザッとメモをとりつつ終わらせます。１時間はキッチンタイマーで測ります。耳栓もして、スマホはどこかに遠ざけます。 メモは、本を読み始める前に「章・パート」単位でコマ割りしてしまいます。後で書く場所が足りなくなったら、修正テープで直したり、レポート用紙とか使って補えば良いので、気にせずにコマ割りします。 このあとは、気になる単語や内容・キーワードが見つけたら、ノートに書き込みます。メモは無理

はじめに この記事は、海外サイトhttps://tutorialedge.net/golang/go-grpc-beginners-tutorial/ の内容をベースに一部修正を加えたものです。この記事を読み進めることでGoでシンプルなgRPCクライアントとサーバーを構築することができるようになります。 ※gRPC公式より抜粋（また、以下の説明でも一部参考にしています。） gRPCとは？ gRPCはGoogleによって開発されたRPCフレームワークです。 RPCはRemote Procedure Callの略で、逐語的に訳すと「遠隔手続呼び出し」となります。これはすなわち、「あるプログラムがネットワーク上の異なる場所に配置されたプログラムを呼び出して実行すること」と読み取れます。 公式による定義 サービス定義 多くのRPCシステムと同様に、gRPCはサービスを定義するという考えに基づいてお

The Go gopher was designed by Renee French. (http://reneefrench.blogspot.com/) The design is licensed under the Creative Commons 3.0 Attributions license. 種々の linter が様々なプロダクトの品質を高めてきた、というのは疑う余地のない事実です。実装の初歩的な問題をエディタ内や CI/CD パイプライン中で機械的に検出できる環境を作れば、開発者はコーディングやコードレビューの邪魔になる些末な問題を早期に頭から追い出し、本質的な問題に集中できます。 また、そのような環境づくり（e.g. linter のルールセットの定義、組織独自のルールの作成、…）は、まさに開発組織のベースラインを定義する作業として捉えることができます。一度誰かが定義

みなさん、こんちには 【watnowテックカレンダーの23日目】 今日はwatnowのしゅいが担当します よろしくお願いします はじめに 今回は普段私が資料作りなどの際に利用している デザインの参考サイト,フリーのイラストサイト,配色のサイトを紹介します 今回紹介するサイトは全て無料で利用できます デザイン参考 1,pinterest URL:https://www.pinterest.jp ピンタレストは画像のSNSのようなものでネット上の画像を自分の「ボード」に 「ピン」して集めたりできる画像をブックマークとして集めるツールです パワポデザインなどと検索してデザインのアイデアを見つけたりして マネして作ってみるのもありです 2,dribbble URL:https://dribbble.com/ dribbbleはアメリカで生まれたサービスで、招待された人しか画像の投稿ができないため

こちらの記事のまとめになります。 タプルの先頭と途中でもRest Elementsを置けるようになる タプルの先頭と途中にRestElementsを置くことができるようになります。 タプルいいですよね。僕は好きです。 // leading Rest Element let a = [...string[], boolean]; a = [true]; a = ['1', '2', false]; // middle Rest Element let b = [boolean, ...string[], number]; b = [true, 10]; b = [true, 'a', 'b', 2];

CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整

Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また、useMemoやuseCallbackは、関数コンポーネント内での値の再計算を抑制する効果を持ちます。 これらは最適化のためのツールなので、「過度な最適化」を避けるように啓蒙する言説がよく見られます。 すなわち、ちゃんと本当に最適化のために必要なところにだけこれらを使おうということです。 特に、React.memoはpropsが以前と変わっているかどうかを判定するためのオーバーヘッドがあるし、useMemoやuseCallbackもフック呼び出しのオーバーヘッドがあります。 意味がないところでReact.memo

この記事では、デザインがぐっと良くなるフリー画像素材を無料ダウンロードできる、おすすめサイト12個を厳選してご紹介します。 商用利用OKで著作権のクレジット表記不要のフリー画像を配布している、本当に「使える」サイトのみをまとめています。 「フリー写真素材サイトはたくさんありすぎて、どれを使えば分からない。」「他とは違うおしゃれな画像が欲しい。」、そんなときに確認してみましょう。 フリー写真素材をダウンロードする前に確認しておきたい、利用規約やクレジット表記の有無などについては、以下の記事でまとめています。 【2021年版】フリー写真素材のおすすめサイト完全まとめ57選【商用利用無料】 2021年のフリー画像素材おすすめサイトまとめ Pexels プレミアムサイトとは思えないほど高品質な画像の膨大なコレクションを見つけることができるサイト。特に検索機能はよく考えられており、自分に合った一枚を

2021/02/21 10選 => 12選に更新 2021/04/12 おまけを追加 2022/01/04 おまけにThe Modern JavaScript Tutorialを追加 こんにちは、WEBエンジニアのhedrallです。 もう一歩踏み込んでプログラミングに関して勉強をしようと思った時、 世の中には学習のためのレポジトリが存在していて、しかも世界的にはものすごい数のStarを獲得しているものも少なくないことを知りました。 今回はピックアップしてご紹介いたします。 [⭐️ 96.6k]: javascript-algorithms プログラミングで使用されるデータ構造や、一般的なアルゴリズムがまとめられており、全てjsで実装が例示されています。 [⭐️ 149k]: developer-roadmap webやinfraなど各分野のエンジニアになるために知っておくべき技術がロード

本エントリは 翻訳リクエスト より投稿いただきました。 ありがとうございます！リクエストまだまだお待ちしております！ 後編 を公開しました 私たち、Y Combinatorがアドバイスする最も一般的なことの1つに、「スケールしないことをしよう」というのがあります。創業予備軍の多くが、スタートアップは上手くいくかいかないかのどちらかだと考えています。会社を立ち上げ、ものを提供する、そしてそれが良いものであれば、おのずと売れます。しかし、需要がなければ結果はその逆になります。 ^(1) とは言え、意外とスタートアップは上手くいくものです。なぜなら、創業者がそうさせるからです。自分たちの力だけで成長するスタートアップはほんの一握りかもしれませんが、大抵は後押しするような力が働きます。良い例が、車のエンジンをスタートさせる役目をするクランクです。エンジンがスタートしてしまえば、エンジンは回り続けま

アプリケーションが発行するSQLにコメントが埋め込めると便利です。例えば、 /* path/to/logic.go:334 */ SELECT ... のようにSQLに発行元の情報をコメントとして埋め込んでからExecすれば、DB側のログ(general log等)にも記録されるため、SREやDREサイドからも、負荷の高いSQLがアプリケーションのどこから発行されているかが分かりやすくなります。 Goには github.com/shogo82148/go-sql-proxy という、SQL実行をトレースし、フック処理を差し込める便利なライブラリがありますが、今回それにpull requestを送って、SQL実行前にクエリの書き換えができるようにしました。 https://github.com/shogo82148/go-sql-proxy/pull/61 https://github.co

eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の