2021年のまとめ・反省 - mizchi's blog
年内に間に合わなかった… 2021年に主にお世話になった言語・ライブラリ TypeScript React chakra-ui dnd-kit Node Vite esbuild Docker(=> lima) とりあえず挙げてみたが、なにか特定のライブラリを使う、という感じではなく、レイヤーが一つ下にいった感じがあり、実際にはなんかもうちょっと下のミドルウェアみたいなものを作っていることが多かった気がする。ASTをいじるコンパイラ周辺ツールを作っていることが多かった。 サクッとなにか作る場合、 React + TypeScript + Vite(esbuild) が鉄板という感じで、 esbuild が異次元に速すぎて、typescript の変換もバンドルも、もはやこれ一本でいい気がしてる。 microsoft/typescript はもはや言語仕様の定義と型検査がメインであって、コン
何故くそややこしいReactを勉強しないといけないのか？ - Qiita
逃げるプログラマー、避けられない壁 Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。 自分もそういうダメグラマーの一人でした。 だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにしたのであります。 React, Angular, Vueの３大フレームワークをざっと調べてみた際に、一番取っつきやすそうだったReactをチョイス。 しょせんはHTMLとCSSとJavascript で、結局Reactは何をやっているかというと、しょせんはHT
ESLint と Prettier の共存設定とその根拠について
注意 この記事は 2020 年 09 月 24 日現在、古い情報となりました。 eslint-plugin-prettier の利用は非推奨であると公式がアナウンスを出しています。 そのことについては Prettier と ESLint の組み合わせの公式推奨が変わった にてまとめましたので、こちらもご覧ください。 また eslint-plugin-prettier は公式推奨ではなくなりましたが、それは Editor などの外部環境の進化によるものでこのプラグイン自体に何か問題が起きたわけではありません。 そして eslint-plugin-prettier を利用した設定方法、特に eslint-plugin-prettier と eslint-config-prettier が何を解決していたかを知らないと、prettier-eslint が何をどう解決したかを理解できないはずなので
Stripeで忘年会の集金決済サイトを作った話
この記事は、pyspa Advent Calendar 2019の24日目の記事です。 今年、忘年会を行うにあたり、事前集金のシステムとして以下のような Stripe を使ったクレジットカードでの決済サイトを作成しました。 https://year-end-2019.pyspa.org/ 毎年会場で現金を集金していましたが、ドタキャンや万札しか持ってない人へのお釣りの用意など、面倒ごとが多いため昨年から事前決済制にしています。 Stripeではクレジットカードの決済手数料3.6%が発生してしまいますが、5000円の飲み会代金に対して180円程度なのでみんな大人だし問題ないと判断して料金に上乗せしました（同意の上）。 実装は Stripe Checkout に処理を丸投げすることでサーバー側のコードは1行も書かず、Firebase Hosting に HTML と JavaScript のホ
async/await 入門（JavaScript） - Qiita
はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの非同期処理の書き方より、もっと簡潔に書ける書き方があれば知りたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載している利用例のコードはChrome（最新）のコンソール上で動きますので、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。
reduce()はArrayにて最強……おぼえておけ。（配列とかおれおれAdvent Calendar2018 – 23日目） | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 23日目 配列界最強のメソッドです。（？） 万能選手ですがどうか使わないでください。 使い方はちょっとわかりづらいんだけど、こんな↓感じです。 const arr = [11, 22, 33]; const obj = arr.reduce((acc, value, index) => { acc[`number${index}`] = value; return acc; }, {}); console.log(obj); // { number0: 11, number1: 22, number2: 33 } 与えたコールバック関数の次に第2引数がある点に注目。 インターフェイスと使い方 Array.prototype.reduce() | MDN result = arr.reduce(callback[, initialV
関数型プログラミングはまず考え方から理解しよう
関数型プログラミングが注目されて久しいです。 そろそろ勉強しておかないとなぁということで調べてみるものの、情報として出てくるのは"高階関数","カリー化","遅延評価","モナド"などの物々しい単語の数々。これらを勉強して理解した気になったものの、プログラムを書こうと思うと全然書けませんでした。 結局、関数型言語を実現する手段を学ぶ前に関数型と言われるパラダイムを理解しないことには書けません。ということでここでは関数型プログラミングの"手法"ではなく、オブジェクト指向と関数型プログラミングを比較しながら考え方の違いを見ていきます。 本日の例題 プログラミング課題を設定してオブジェクト指向と関数型で解答してみましょう。 課題： 唐揚げ弁当がいくつかあるとします。それぞれ唐揚げが複数入っています。 この中からｘ個の唐揚げをつまみ食いするプログラムを作りましょう。 つまみ食いはバレないようにする
関数型言語のウソとホント - Qiita
追記 こんな記事を読むより、まともな関数型プログラミング言語を使ってまともに関数型プログラミングを学ぶほうが、関数型プログラミングについてよほど正確な理解を得られます。少しでも関数型プログラミングに興味のある人は、まずは真面目なHaskellの教科書やすごいH本を読んだり、やさしいHaskell入門を読んだりしながら、実際に関数型プログラミングのコードを書いてみることをお勧めします。 繰り返しますが、この記事はあんまり読む必要はないです。関数型プログラミングを理解するには実際に自分でコードを書いてみるのが一番です。関数型プログラミングあるいは関数型プログラミング言語を理解するもっとも確実な方法は、Haskellをあなたのマシンにインストールして何かまとまったアプリケーションを書いてみることです。Haskellでアプリケーションが書けたら、自分は関数型プログラミングを理解しているし使えると胸
ちゃんと知ってる？JavaScriptのイベントバブリングを学ぼう
イベントが発生したとき、親やさらに先の要素にも同じイベントが発生する「イベントバブリング」。バグをなくし、思い通りに制御できるようになるために、しっかり理解しましょう。 JavaScriptを使っている人なら、「イベントバブリング」を聞いたことがあると思います。ある要素が別の要素にネストされて、両方の要素がクリックなど同じ「イベント」のリスナーを登録しているときにイベントハンドラーが呼ばれる順番のコンセプトです。 イベントバブリングはパズルの1片にすぎず「イベントキャプチャリング」や「イベント伝搬（プロパゲーション）」と一緒に話題になります。JavaScriptでイベントを扱うには、この3つを理解しなければなりません。たとえば、the event delegation patternを身に付けたいときです。 この記事では、用語を説明し、それらがどう関連するかを解説します。JavaScrip
【菅江真澄備忘録】npmでのインストール時に使う「@」の意味
名前空間としてのアットマークnpmモジュールは、名前が被るのを許可していない。したがって、モジュールを公開しようとしたときに平易な名前を付けてしまうと大体先を越されてしまっている…というケースが往々にしてある。人気のある名前は早いもの勝ち、そういう世界なのだ。 でもやっぱり人気のある名前をつけたい。なぜなら、その名前が一番しっくり来るし、分かりやすいから。誰しもそう思うわけ。そこでnpmでは、「@」と「/」の間にユーザーネーム(or 組織名)を入れて名前空間とし、その後ろにモジュール名をつける「scoped packages」形式を許可している。以下のような指定方法になる。 これで、「vueというユーザー(or組織)のcliというモジュール」をnpmでインストールすることができる。名前は一意に決まるので、他のユーザーも自分の名前空間においてcliというモジュールを公開することができる。しあ
合法 TypeScript 第1章 Introduction
さて、あなたはこの TypeScript の本を開くことに決めたわけですが、それは一体全体なぜでしょうか？当ててみせましょう。 多分、JavaScript のエラーメッセージが表示する「undefined には blah というプロパティは存在しません」というわけのわからない警告に嫌気がさしたからでしょう？そうじゃないなら、どこかで TypeScript を使うことによってアプリケーションが大きくなってもうまく code をスケールさせることができると聞いたけれど、でも本当にそんなことできるのか？と疑心暗鬼だからですね。もしくはあなたは C# のエンジニアで、JavaScript 自体を使ったことがないので TypeScript から JavaScript を始めてみようと考えている。そうでもないなら、あなたは関数型のプログラミングを実践していて、その技術を TypeScript によって
実践: React Hooks - mizchi's blog
hooks が発表されてから趣味でも現場でもずっと hooks を使っています。おかげでだいぶこなれてきて、だいたいなんのライフサイクルでも表現できるようになってきました。 最初は単に useState が state を、 useEffect が componentDidMount/componentDidUpdate を置き換えるもの、と説明を済ますつもりでしたが、 useEffect についてはライフサイクルのモデルがぜんぜん違うので、別の説明をする必要があるように感じていました。 で、その結果 React Hooks を理解するには、関数のメモ化を理解するのが最も簡単だと思ったので、その説明をしつつ、イディオムを解説していこうと思います。 最初に: React Hooks は何であり、何ではないか 関数コンポーネントが状態を持てるようにするもので、関数のメモ化のテクニックを多用しま
仕事ですぐに使えるTypeScript — 仕事ですぐに使えるTypeScript ドキュメント
注釈 本ドキュメントは、まだ未完成ですが、ウェブフロントエンドの開発を学ぶときに、JavaScriptを経由せずに、最初からTypeScriptで学んでいく社内向けコンテンツとして作成されはじめました。基本の文法部分以外はまだ執筆されていない章もいくつもあります。書かれている章もまだまだ内容が追加される可能性がありますし、環境の変化で内容の変更が入る可能性もあります。 書籍の原稿はGitHub上で管理しております。もしTypoを見つけてくださった方がいらっしゃいましたら、 GitHub上で連絡 をお願いします 1 。reSTファイルだけ修正してもらえれば、HTML/PDFの生成までは不要です。フィードバックなども歓迎しております。 1 https://github.com/future-architect/typescript-guide/pulls
Webpack の考え方について - mizchi's blog
なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - from 健人 井関 www.slideshare.net この記事バズってたけど、わからない人がよりわからなくなる、という点で問題だと思っていて、webpack の目的の本質的な部分から整理する必要があると思います。 (あと友人が webpack に挑戦していたので入門資料も兼ねてる) Webpack の本質的な部分は次の3つです。それ以外は全部おまけ機能だと思ってよいです。 ES Modules のエミュレート node_modules のリンカ 拡張子ごとの変形 Webpack が本当にやりたいこと こういうコードがあるとします。 // src/a.js export default () => console.log('hello'); // src/in
Node.js における設計ミス By Ryan Dahl - from scratch
Ryan Dahl は Node.js の original author ですが、彼の作ったプロダクト deno に関するトークが jsconf.eu 2018 でありました。 Node.js にずっと関わってきた僕が見て非常に興奮するような話だったので、しばらくぶりにブログに書き起こすことにしました。 背景 Ryan Dahl は2009年に Node.js の話を初めて公の場に公開しました。その時の「公の場」というのが「jsconf.eu 2009」です。 www.youtube.com Video: Node.js by Ryan Dahl - JSConf.eu - 2009 この発表から Node.js が広まり、今やサーバのみならず、IoTデバイス、デスクトップアプリなど、様々なところで動作しています。 で、今回はその発表から9年の歳月が経過し、Node.jsに対しての設計不
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
Objective-C や Swift のネイティブコードから JavaScript をランタイムで実行するための JavaScriptCore.framework のお話です。基本的な機能の説明と、注意点を整理して紹介しています。Read less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vite | 次世代フロントエンドツール
textlint · The pluggable linting tool for text and markdown
Elm - delightful language for reliable web applications
10 things to learn on the way to becoming a JavaScript Master