並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 40件

新着順 人気順

mizchiの検索結果1 - 40 件 / 40件

mizchiに関するエントリは40件あります。 javascriptフロントエンドfrontend などが関連タグです。 人気エントリには 『プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法』などがあります。
  • プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法

    プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法 2020年でJavaScript学ぶならきっとブラウザ向けJSガン無視していきなり初手node.js(ただし暫く何も足さない)がいいんじゃないかというメモ - min.t (ミント) Node.js を教えることについて、自分は賛成なんですが、その学習パスが整理されてないなと思っていたのと、学習パスがなぜ整理されていないかについて書きます。 はじめに 問題意識として、今のプログラミングスクールや独学勢が Ruby on Rails に偏っていて、 Node.js の人間としては、歯がゆく感じているんですが、実際 Node.js を教えるとしても問題も多いと認識しています。 歴史の話は、当時の実情や政治を省いて結果だけを書きます。具体的には第一次ブラウザ戦争、第二次ブラウザ戦争を言及しませ

      プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法
    • フリーランス完走した感想 - mizchi's blog

      2 年ほど走ってみました。 Qiita の Increments を退職します - mizchi's blog からの 転職活動 https://gist.github.com/mizchi/4e097923bb92399d03ced9da44f15cfa の結果 この記事は、自分の体験を書くことで、どういう人がフリーランスに向いてるか、というのをわかるように書いたつもりです。自分に近い属性ということで、ある程度プログラマとして経験を積んだ人向けです。 フリーランス辞める理由 フリーランスが嫌になったわけではないです。機会があればまたやりたいとも思っています。今回はフリーランスを続けるより良い選択肢があった、というだけの話です。 個人事業主を 2 年やって、消費税の徴収方式が変わるタイミングがあり、法人化してフリーランスの働き方を続けるか、個人事業主をやめるか、という 2 つの選択肢があり

        フリーランス完走した感想 - mizchi's blog
      • 20 年代のフロントエンド.md

        Clone via HTTPS Clone with Git or checkout with SVN using the repository’s web address. 明日の下書き これはなに 高円寺.dev #3 用の資料 https://koenji.connpass.com/event/160886/ フロントエンド専門じゃない人向けの、フロントエンドの最先端〜やや未来の話です このレイヤーでは Node.js を使うべき/使うと強いという部分がありますが、他言語を否定しているわけではありません。むしろ他言語でこのアーキテクチャを模倣してほしいという話です。 10 年代のフロントエンドのポストモーテム 10 年代まとめ IE が死ななかったので各種ポリフィル、メタ言語からのトランスパイルが発達。しかしモダンとレガシーの乖離が深刻に。 node と npm エコシステムの成立

          20 年代のフロントエンド.md
        • 2020 年、 React 軸で学ぶべき技術 - mizchi's blog

          なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介

            2020 年、 React 軸で学ぶべき技術 - mizchi's blog
          • プログラミングを学ぶにあたって詰まったことと、そこから学んだこと - mizchi's blog

            toyokeizai.net satoru-takeuchi.hatenablog.com 全然レイヤーが違うが、自分が何に悩んで、どういう風に理解したか、思い出しながら書き出してみる。 プログラミング歴 20歳からなので、現時点で10年ぐらいだが、中学生の時ちょっと触ったことがあった。 14 歳: 病気で入院したときに暇すぎて、2 週間ほど VBA を触った 大学 1 年: 大学の選択科目で Java, 夏休みに Python と Ubuntu の独習 大学 3 年: Python で自然言語処理のバイト 大学 4 年: Android アプリを作るバイト、就活ポートフォリオとして node/Websocket で MMO 一社目: Unity, ActionScript, Haskell, JavaScript 以降~: JavaScript/CoffeeScript/TypeScri

              プログラミングを学ぶにあたって詰まったことと、そこから学んだこと - mizchi's blog
            • 「フロントエンド領域」を再定義する

              freee のweb とモバイルでのテスト自動化の取り組み / web-and-mobile-test-automation-initiatives-in-freee

                「フロントエンド領域」を再定義する
              • Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか

                Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか https://d.potato4d.me/entry/20220405-nodejs/ へのアンサーソング。 プログラミング言語としての JavaScript の話をする。 2010年頃、Python 2 でプログラミングを学習した自分にとっては Node.js + CoffeeScript が Better Python だった。 CoffeeScript は当時の JS(ES3~5) に足りない機能を補ってくれて、Python と同じく空白制御のオフサイドルールなのが気に入った。見た目が少しだけ Ruby っぽいので当時全盛だった Rails の人間に訴求するにも有利だった。 Node.js のモジュールシステムである Commonjs は Pytho

                  Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか
                • 現場のエンジニアが解説!令和最新版プログラミング独習方法。質の悪いプログラミングスクールの毒牙にかかる前に実践すべきマッチョな学習フロー

                  mizchi @mizchi プログラミング独習: 令和最新版 - 月額1000円のN予備校のウェブプログラミングコースでフロントエンドと Node の基本をやる nnn.ed.nico/pages/programm… - jsprimer.net を上から順になぞる - 日大尾上准教授の「Web プログラミング」のReact チュートリアルをやる zenn.dev/likr/articles/… 2021-01-05 13:27:22 リンク N予備校 プログラミングコース 初めてのプログラミングから 現場のプログラミングまで学ぶ | N予備校 N予備校 プログラミングコースは、ドワンゴの現役エンジニアが教えるプログラミング学習サービスです。プログラミング完全未経験者でも前提知識なく始められて、開発現場で活躍できるほどのスキルが身につくカリキュラムを、自分に合ったペースで学ぶことができま

                    現場のエンジニアが解説!令和最新版プログラミング独習方法。質の悪いプログラミングスクールの毒牙にかかる前に実践すべきマッチョな学習フロー
                  • 現代のオブジェクト指向の class の割れ窓化と宣言的プログラミング

                    オブジェクト指向には、カメラがやっとついたころのガラケーのイメージがある - きしだの Hatena の件。基本的には同意。ただちょっと切り口が違うので自分の意見を言っておく。ただ、このテーマで何度か書こうとして失敗していて、今回も成功しているとはいえない。 宣言的プログラミングの時代 現代の主流は「宣言的プログラミング」であると思っている。これはリソースの宣言と、その状態遷移の手続きや振る舞いの付与が中心にある。 宣言型プログラミング - Wikipedia その代表的な例がフロントエンドの React と、バックエンドの k8s で、どちらも時系列に基づいた状態の宣言と、フレームワーク側による状態遷移処理、 Reconcillation(調停) が基礎にある。 フロントエンドとバックエンドという両極端な世界で、この変化が起きたのがこの時代を反映したものであると思う。 例えば、jQuer

                      現代のオブジェクト指向の class の割れ窓化と宣言的プログラミング
                    • 2021年 は Fullstack Next.js 元年なので、有望な Next.js 系フレームワークを全部試した

                      この記事は、Next.js Advent Calendar 2020 の6日目。 突然だが、2021年 は Fullstack Next.js 元年になる。 その理由として自分は以下のものがあると思っている。 ベストプラクティスとしての TypeScript のデファクト化 Next.js の Dynamic Routes による動的パス、 getStaticProps/getServerSideProps による使い勝手の向上 Vercel によるISRの発明 prisma の成熟 Vercel / Serverless / Cloudflare Workers / Cloudrun 等による Node.js サーバーの運用コスト減 参考: Frontend Study #1: 基調講演 - Frontend 領域を再定義する Blog - Next.js 9.3 | Next.js R

                        2021年 は Fullstack Next.js 元年なので、有望な Next.js 系フレームワークを全部試した
                      • (自分の) JavaScript のユニットテストの書き方

                        (社内用ドキュメントの公開版) テストのポリシー 前提として、ユニットテストを導入するコストを、限界まで低くすることを目指す。テストが根付いていない言語環境や文化では、放っておくとテストが書かれないまま実装が進行し、結果としてテスト不可能な巨大な雪だるまが完成する。こうなるとメンテコストが高いE2Eを大量に書かないといけなくなり、テストの実行時間が膨れ上がっていく。 そうなる前に、ユニットテストを書きやすい環境を維持し、ユニットテストとして問題を切り分けられるような環境を維持する。とにかく書きやすさを重視し、一つのユニットテストを書くオーバーヘッドを限界まで下げる。 最初の一つを早い段階で書く 自分の経験的には、ユニットとテストの最初の一つを書いたらあとは自然とその周辺で増えていく。サンプルがあったら人はコピペする。逆にいうと最初の一つを書かない限り一切書かれない。まず一つ用意するのが大事

                          (自分の) JavaScript のユニットテストの書き方
                        • プロを目指す人のためのTypeScript 本の感想 #ブルーベリー本

                          自分も教える事が多いので、読み手にどういう風に学んでほしいか、自分がどういう風に伝えるべきか、という視点で読んだ。 1章・イントロダクション そもそもTypeScript とはなにかみたいな話。 コンパイルエラーが出ている状態ではプログラムが完成したとは言えません。 力強い コンパイルエラーをただ避けるのではなく、利用する気持ち で TypeScript プログラミングに臨みましょう。 初心者に型違反の向き合い方を諭す話。IDEの補助になるとか。 TS年表で取り上げてるのが特徴的。exactOptionalProperty を取り上げてたり。 TSの型はランタイムに影響しない、という話を何度も解説している。これは初心者の誤解がとても多いので、必要だと思う。何度いっても、伝わって欲しい人に伝わらないのだが… enum や namespace については意図的に解説しない。過去のTS独自路線だ

                            プロを目指す人のためのTypeScript 本の感想 #ブルーベリー本
                          • Edge Side Frontend という新領域

                            at #ワインと鍋js なぜフロントエンドに Edge Worker が必要なのか、Cloudflare Workers をどう使っていくかみたいな話をしました

                              Edge Side Frontend という新領域
                            • リングフィットアドベンチャーをクリアして 8kg 痩せて筋肉質になった (71kg => 63kg) - mizchi's blog

                              ちょっとはてなブログを放っておいたら90日以上進捗がない人の広告が出るようになってしまい、最近やり続けたことといえばリングフィットなので、その話。 (ちなみに、最近このブログの投稿数が減っていたのは、技術記事を別のブログ で書くようにしたからです) クリア自体は 62 日目、今は 101 日目で二週目の後半。体重の変化はタイトルのとおりです。 ビフォアアフター before 去年の11月頃。似た構図の写真がない。腹が出てるのを隠している after さっき撮ったやつ 身長169cm なので 62.8kg が標準体重です。63kgなのでほぼそれぐらい。14年前の高校生以来の水準です。 体重がただ減っただけではなく、体全体がかなり筋肉質になっています。 ダイエットの動機 突然病気の話なのですが、去年の 12 月頃から 1 月にかけて長期間、体温が37.5度から下がらず、病院にいったところウイル

                                リングフィットアドベンチャーをクリアして 8kg 痩せて筋肉質になった (71kg => 63kg) - mizchi's blog
                              • 2020年やったこと、考えたこと、触った技術のまとめ - mizchi's blog

                                今年の本業は、 3rd party script で、そこから呼ぶウィジェットを最適化するコンパイラを書く、その仕様を考えて、実装するという感じだった。要は Google Analytics と、最適化コンパイラ付き GTM みたいなものを作っていた。その内容は以下に書いた。 サードパーティスクリプトの極限環境向け Svelte パフォーマンス改善に Core WebVitals という大義名分を得た 今年は、 パフォーマンスのエンジニアをやっていた、と思う。サードパーティスクリプトの配信を生業にする会社のエンジニアとしては、来年の Core WebVitals というパフォーマンス関連の大きな変化で、波にのってやりたいことがやれたと思う。 Core WebVitals の導入で実際にどれぐらいの影響がでるか不明だが、パフォーマンスが SEO に影響する、というのは、 若干やりすぎと思いつ

                                  2020年やったこと、考えたこと、触った技術のまとめ - mizchi's blog
                                • 俺の webpack.config.js-20200503 - mizchi's blog

                                  基本思想 とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの

                                    俺の webpack.config.js-20200503 - mizchi's blog
                                  • 最終回 今生きるプログラマーが、この仕事をあこがれのものにする | gihyo.jp

                                    ご好評いただいた本連載も今回で最終回。いつもとは趣向とは変え、竹馬氏がこれまでのインタビューを振り返りながら、未来への展望を綴ります。 一皮むけば高度なコンピュータサイエンスが 今まではインタビュアーとして抑えた感じでやってきましたが、今回は自分のブログ「mizchi's blog」の読者はご存じのような、いつもの感じで行きます。 この連載インタビュー企画の依頼を受けたときの個人的な狙いとして、技術評論社の名前を使って、いつもは会いづらい人に会いに行く口実を作ろう、ということを考えていました。その目的はほぼ達成できたので、関係者諸氏には、とても感謝しています。 ……という個人的なテーマとは別に、僕自身が本連載を通して一貫して表明したい課題感があり、それは「高度なコンピュータサイエンス/プログラミングスキルの現場適用の難しさ」というものです。 僕自身、大学でコンピュータサイエンスを修めたわけ

                                      最終回 今生きるプログラマーが、この仕事をあこがれのものにする | gihyo.jp
                                    • 2020年版: なぜ仮想 DOM / 宣言的 UI という概念が、あのときの俺達の魂を震えさせたのか

                                      本記事は、 「なぜ仮想 DOM という概念が俺達の魂を震えさせるのか」 https://qiita.com/mizchi/items/4d25bc26def1719d52e6 の 2020 年版のリライトです。 2014 年当時、日本においては React は未だ知る人ぞ知るライブラリ、という位置づけでした。それが、この記事によって一気にメジャーになったように思います。 オリジナルは2014 年末の情報によって書かれたもので、さすがに 6 年経った今では情報が古くなっており、当時の暗黙のコンテキスト、古いリソースの参照、初学者の混乱を招く表現が残ったままになってしまっています。 定期的に更新しようとも思いましたが、そうすると 2014 年末の歴史的な背景を失ってしまうため、あえてそのまま残し、新しい記事を投稿することにしました。増補改訂版というより、ほぼ書き直しです。 この記事は本来なら

                                        2020年版: なぜ仮想 DOM / 宣言的 UI という概念が、あのときの俺達の魂を震えさせたのか
                                      • 大統一 Node ツールチェイン Rome の野望 現状の実装

                                        つい先日 beta リリースされたフロントエンドのツールチェインの Rome について、その思想とコードを読んだ結果の現状について。 Rome Frontend Toolchain この記事は公式ドキュメント以外にもソースを読んで得られた undocumented な部分も含んでいるので、すぐ古くなる。その前提で読むように。 問題の認識とその解決手段 フロントエンドの最適化は実行前のプリプロセスに、エコシステムの開発リソースの多くが当てられている。Node のツールチェインが発達するにつれて、自前の パーサ+AST 定義を持つ実装が増えていった歴史がある。 acorn(estree) babel prettier typescript terser それぞれのツールの生成する AST はそのツールの都合で微妙に/もしくは大幅に定義がずれている。typescript に至っては完全に別物。こ

                                          大統一 Node ツールチェイン Rome の野望 現状の実装
                                        • 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 はもはや言語仕様の定義と型検査がメインであって、コン

                                            2021年のまとめ・反省 - mizchi's blog
                                          • tsmeetup-draft-wip2.md

                                            Clone via HTTPS Clone with Git or checkout with SVN using the repository’s web address. 非破壊 TypeSctript mizchi / TypeScript Meetup 2 About Me mizchi / 竹馬光太郎 フロントエンドと Node.js あとはググって はじめに Modern JS ≒ TypeScript の時代になった なので型を書け この発表の目的 TypeScript を導入しない言い訳を全部潰す そのために痛みがない導入・運用を提示する Outline TS の型アノテーションとはなにか? 導入編 発展編 アンチパターン 型アノテーションとはなにか? TS の型アノテーションとは何「ではない」か メモリ確保量を決めるもの、ではない TS の型はインターフェースしか知らない

                                              tsmeetup-draft-wip2.md
                                            • rust.tokyo のまとめ・感想 - mizchi's blog

                                              このブログを書いてる経緯 rust.tokyo 楽しみ!絶対行く!といってたのに申込みを忘れたところ、じゃあスタッフとしてブログを書けという話になったので、ブロガー枠?らしく感想を書きます。とはいえ書けるのは見たやつだけです。 https://rust.tokyo/sessions# 前提 自分は低レベルプログラミングは詳しくないです。年に3日ぐらい思い出したように Rust 勉強することがある。 wasm 周りのエコシステムはずっと追ってる。 会場の雰囲気 組み込み勢とブロックチェーン勢が多そうな気配を感じた。 Visualization of mechanical CAD drawings using WebAssembly and WebGL Aki / CADDi (発表資料見つからず) 概要 Computer aided design (CAD) models used in m

                                                rust.tokyo のまとめ・感想 - mizchi's blog
                                              • Native ESM 時代のフロントエンドビルドツールの動向

                                                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

                                                  Native ESM 時代のフロントエンドビルドツールの動向
                                                • Recoil について勉強した

                                                  Fecebook が新しく発表した Recoil について 自分の学習手順 Getting Started | Recoil を写経して動かす Facebook 製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog で非同期周りを理解 公式ドキュメントの API Reference で理解 <RecoilRoot ...props /> | Recoil これは自分が写経しながら書いた型定義。色々足りてないがチュートリアルで出る範囲は理解できる。 declare module "recoil" { export type RecoilState<T> = {}; export const RecoilRoot: React.ComponentType<{ initializeState?: (options: { set: <T>(recoilVal:

                                                    Recoil について勉強した
                                                  • 報告: 結婚しました - mizchi's blog

                                                    なんか今日は2がいっぱいあるので @syakejs と入籍しました。 以下例のリンクですhttps://t.co/dnzQMbvxdu pic.twitter.com/FrEcrOGUAz— ヌー (@mizchi) 2020年2月21日 私事ですが(と個人ブログでいうのもなんですが)、syakejs:(blog) と結婚しました。彼女は Webエンジニアだったり、大学でセキュリティの研究をしてたりしています。競プロやCTFもやってるらしいです。 話を聞いてみると、昔から僕のブログやTwitterをみていたファン?だったらしいのですが、最近なんやかんやあってコンバージョンしました。 入籍いつしよっかーという話になって、西暦2020年(令和2年)2月22日というゴロがよかったので、この日に決めました。 なにかしたからと言って別段何かが変わるというわけではなく、これからも普段どおりやっていくの

                                                      報告: 結婚しました - mizchi's blog
                                                    • コードとビジュアルの双方向編集なエディタを試作して ビジュアルプログラミングについて考えてみた

                                                      ノーコードは形を変えた現代の RPG ツクールなのではないか - mizdev の記事では、ノーコードのビジュアルプログラミングが発展性を欠く理由として、次の理由を挙げました。 汎用的なビジュアルプログラミング基盤(Scratch みたいなものではなくプロユースなもの) ↑ 上でのビジュアル環境でのデータベースのグラフ構造のビジュアル化手法 ↑ 上でのビジュアル環境でのパイプラインのビジュアル化手法 ↑ 上での UI とデータと UI のマッピングのビジュアル化手法 これらを隠蔽してオートスケールするマネージレスなインフラ基盤(これはパイプライン実装の中身) で、こんなものを作った話 現代の Intellisense + Formatter 感覚 TypeScript の補完と、保存の度に prettier をバリバリに効かせた状態でプログラミングをしていると、そもそも自由文脈でコードを書

                                                        コードとビジュアルの双方向編集なエディタを試作して ビジュアルプログラミングについて考えてみた
                                                      • 2021年現在Vueを選択すべきでないと思う理由 感想

                                                        JSXが嫌でReactを使わないならSvelteがあり、SvelteはゼロオーバーヘッドでVueより速い コンポーネントが作られたり消されたりするような場合一定の閾値でVueの方がバンドルサイズが軽くなる [Draft]VueとSvelteのサイズを比較検証した「vue-svelte-size-analysis」を掘っていく とはいえエッジケース 〇〇倍速いみたいなやつ、知覚したことない(フレームワークパフォーマンスを気にする前にやるべきことが沢山ある) ほぼラインタイムを消し去りたい、20kb未満のアプリケーションを作る必要があるとかだとSvelteは強そう https://zenn.dev/mizchi/articles/8a017097d3994ddc0a85 Next、NuxtのようなSSR/SSG用途で十分に使われてるようなフレームワークがまだない SvelteKit(Svelt

                                                          2021年現在Vueを選択すべきでないと思う理由 感想
                                                        • 極限環境で最終ビルドを絞るためのフロントエンド設計

                                                          https://3rdpartyjs.connpass.com/event/289558/

                                                            極限環境で最終ビルドを絞るためのフロントエンド設計
                                                          • Svelte + TypeScript のベストプラクティスを考える

                                                            自分で Svelte + TypeScript を色々と書いてみたが、情報がまとまってなかったので、ここでまとめていく。 なぜ Svelte + TypeScript か Svelte + TypeScript はセマンティクスが単純で型が付く軽量な Vue として気に入っている。ビルドが軽量で他と混ぜやすいのが特に気に入っていて、React や Vue の他のシステムに対しても、末端のコンポーネントとして混ぜやすい。Vue は歴史的経緯でデータバインディングの仕様が混沌としているが、Svelte はESM First で構文解析時の処理に仕様を寄せてるので、とてもシンプル。 webcomponents として配布するモードがあるのも気に入っている。Vue React は単体のビルドサイズが大きすぎて webcomponents の末端にするのは難しい。 やりたいこと <script la

                                                              Svelte + TypeScript のベストプラクティスを考える
                                                            • webcontainer とは

                                                              stackblitz が提唱して実装している node.js が動くブラウザ環境。container といってるが、 Docker 等とは関係ない。 stackblitz/webcontainer-core このコンテナはブラウザ内で node.js (らしきもの)が動くことがターゲットで、現在デモとして next.js をビルドしてプレビューできている。これによって node.js + webpack + next.js cli が動いていることがわかる。 デモはここで試せる。 まだ OSS ではないので、この記事の大部分は想像によって書かれている。 webcontainer 概要 (自分の理解なので話半分に) ブラウザサンドボックスでも electron なしでも動かせるようになってきた。しかし現在 node.js を動かすには色々と欠けている部分があるので、それらを総称して webc

                                                                webcontainer とは
                                                              • Next.js から Prisma ORM を利用する

                                                                Next.js に Prisma ORM を導入する方法について解説します。 Next.js プロジェクトの雛形を作成 $ mkdir hello-next-app && cd hello-next-app $ npm init -y $ npm install next react react-dom --save $ npm install typescript @types/node @types/react --save-dev $ code src/index.tsx

                                                                  Next.js から Prisma ORM を利用する
                                                                • select-frontend-tech.md

                                                                  You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

                                                                    select-frontend-tech.md
                                                                  • プログラミング学習の通過儀礼

                                                                    プログラミング学習とはそもそも何なのか プログラミング初学者やITに関わる人が最初に知るべきこととして、プログラミングとは「あなたが問題を解決するのに用いたい手段を、あなたが思っているようにコンピュータに入力すること」ではない。 実際には、プログラミング学習はコンピュータに可能な(非常に限定された)処理セットを学ぶことであり、その応用の先に当初のゴールが含まれるかは、プログラミングを学んでその特性を学ばないと、判断すらできない。 例えば、手段 A によってゴール X を達成したいとしよう。非プログラマ/プログラミング初学者の発想は、よほど目の付け所がいいのではない限り、次のいずれかに分類される。 A には同じゴール X を解決する簡易な代替手段 B があり筋が悪い。 A で実現するほどの価値がない A は現状の人類の既存のソフトウェアの応用では実現できない。あるいは非常に困難。無理に実現し

                                                                      プログラミング学習の通過儀礼
                                                                    • yarn v3 の独自機能を避けつつ yarn v1 から v3 へのアップグレードをする

                                                                      yarn v3 が出ました。詳しい解説は譲るとして、esbuild integration や パフォーマンス向上が目玉です。 Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ... - DEV Community 流石に v1 はもう古いが、 v2 からの独自路線は受け付けがたい…という立場なのですが(yarn オリジナル作者の sebmck も難色を示しています)、今回は yarn 特有の機能をできるだけ避けて、できるだけ npm や pnpm 等と互換な部分だけで yarn v3 を使います。なので pnp も使いません。eslint や vscode の typescript 等でハマりどころが多すぎます。 ゼロインストールも否定派です。git blob objects のサイズが爆発して仕事にならなくなったことがあります。

                                                                        yarn v3 の独自機能を避けつつ yarn v1 から v3 へのアップグレードをする
                                                                      • Cloudflare D1 で ORM を使う (drizzle-orm)

                                                                        tl;dr 生産性を上げる & SQL インジェクションを防ぐために ORM を使うのがよいとされている(諸説あります) cloudflare workers + d1 はウェブの破壊的イノベーション(諸説あります) モダンフロントエンドで大切なのは TypeScript との親和性と言われている(諸説減ってきた) 本当は理想の ORM を自作したいのけど、drizzle が現状一番自分のゴールに近いので、試したら良さそうだった 既存の問題と drizzle-orm 今までのあらすじ というわけで d1 に全振りするのが今後の生存戦略として有効だと思っているんですが、d1 client は専用のAPIからクエリ文字列を送り込む形式なので、native driver を使ってる prisma や typeorm 等が使えません。 自分が Mongodb + たまに Rails ActiveR

                                                                          Cloudflare D1 で ORM を使う (drizzle-orm)
                                                                        • GitHub Actions でモノレポ上の変更があったプロジェクトだけテストを走らせる

                                                                          重要な追記 sparse checkout して、git diff で判定、というのがこの記事の主な趣旨だけど、自分が on.push.paths の存在を知らなくて、これを使うと、次のように sparse checkout するだけでよかった。 # .github/workflows/foo-test.yaml name: foo-test on: push: paths: systems/foo/** env: SPARSE_CHECKOUT_DIR: systems/foo jobs: test: runs-on: Ubuntu-20.04 steps: - name: sparse checkout run: | git clone --filter=blob:none --no-checkout --depth 1 --sparse https://${GITHUB_ACTOR}

                                                                            GitHub Actions でモノレポ上の変更があったプロジェクトだけテストを走らせる
                                                                          • 『天気の子』は縄文映画の傑作だ|縄文ZINE_note

                                                                            縄文界隈ではこの話題で沸騰している。というのは嘘で僕と国書刊行会の編集者の伊藤さんしかいまのところ言っていない。 新海誠監督が縄文映画監督なのはすでに『君の名は。』で分かっていた。ややふざけているけど以下のリンクでその時の考察を読んで欲しい。 http://jomonzine.com/pg213.html それにしても「縄文映画」とはいったいどんな映画なのか、それもこのリンクで少しは分かってもらえるかもしれないが、簡単に言えば映画の中に「縄文」的な要素が濃厚に含まれているものを「縄文映画」という。 「ゾンビ映画」はゾンビが出て来なければならない。しかし、「縄文映画」には直接的に縄文人が出てこなくてもよいのだ。そもそも大抵の映画には縄文人は出ていない。 ーー ここからはネタバレ、映画を見てから読んで欲しい。 ーー で、『天気の子』がなぜ縄文映画なのかと言えば、一番重要な要素は、『君の名は。』

                                                                              『天気の子』は縄文映画の傑作だ|縄文ZINE_note
                                                                            • MDX eXtended = MDXX | AMP対応 Markdown Compiler と静的サイトジェネレーター

                                                                              最近作っている amdx という markdown コンパイラとそのツール郡を紹介します。 GitHub はここ mizchi/amdx このサイト自体も、 amdxg というツールで作られています。 ゴールをどこに設定したか パフォーマンスを突き詰めると、ブログは静的サイトジェネレータで AMP 対応するのが一番と考えた next.js/SSG export + AMP が便利だったので、next.js 上でコンパイルすることを前提に、静的解析を行う webpack loader を作ることにした mdx の parser を借りて、 .mdx をロードすると React Component として振る舞いつつ、他の mdx を import できると、長い文章を書くときにファイル分割できて便利なのでは Markdown プレビュー高速化+ランタイム最小化のために、AST(JSON) 生

                                                                                MDX eXtended = MDXX | AMP対応 Markdown Compiler と静的サイトジェネレーター
                                                                              • blitz-js がどうやってサーバー上の関数のクライアントでの呼び出しを実現しているのか、調査した

                                                                                blitz-js prisma rails 倒し方 を書いた時、こういう疑問がありました。 この db はクライアントでもサーバーでも呼べるようにみえる。ここが blitz のキモで、サーバーではそのまま prisma として実行されるが、内部実装を読んでいないので想像だが、 この db はクライアントでは同じ API の RPC に変換されている? (ここにセキュリティ上の不安はある。すべてをクライアントから呼べてしまう恐れはないのか? あとで blitz のコードを呼んで、どうやって実現しているか確認する) この件についての調査をしました。 Isomorphism: クライアント・サーバー同型 blitz では、次のようなコードをクライアントでもサーバーでも呼ぶことができます。 // app/auth/mutations/login.ts import { Ctx } from "bl

                                                                                  blitz-js がどうやってサーバー上の関数のクライアントでの呼び出しを実現しているのか、調査した
                                                                                • ローカル環境で netlify lambda のエミュレータを動かす

                                                                                  netlify は雑に作り捨ての作例を置いておくのに便利でよく使っている。このブログも netlify にドメインを設定して動かしている。 そして、あんまり知られていないが、netlify には aws lambda が使えて、これは月当たり 12.5 万回ほどの無料枠がある。で、これをローカルで動かすための netilfy-lambda がある。 これがカジュアルに使えたら便利だと思って、一度素振りしておくことにした。 netlify-lambda の問題 netlify-lambda を使ってみたところ、本当に出来が悪い。ランナーとして、というより、開発用の環境設定の読み取りに謎の処理が多く、勝手にルート要素の webpack.config.js を読み取って自分用の webpack.config.js を生成して勝手に失敗したり、本番では /.netlify/functions/<h

                                                                                    ローカル環境で netlify lambda のエミュレータを動かす
                                                                                  1

                                                                                  新着記事