「TypeScriptではじめる型システム」という記事をn月刊ラムダノートに寄稿しました。 新刊を発売しました "『n月刊ラムダノート』Vol.4 No.3（2024）発行のお知らせ https://t.co/PGppk1aRRA— lambdanote (@lambdanote) 2024年10月4日 どんな内容？ TypeScriptの極小サブセットに対する型検査器を書き、それを通して型システムを体感してみよう、という内容です。 詳しく言うと、boolean型とnumber型と関数型しかないTypeScriptサブセット言語がターゲットです。 型検査器の実装言語にもTypeScript（処理系はDeno）を使います。 TypeScriptづくしの一品です。 わかる人向けに言うと、「型システム入門」という本（通称TAPL）の単純型付きラムダ計算に相当する内容をTypeScriptで説明し
こんにちは、ニケです。 皆さん、Cursor 使っていますでしょうか。 私は去年の10月末から使い続けているのであと一ヶ月で1年が経過します。時間が経つのは早いですね。 前回書いた記事（↓）から半年経ち、開発の仕方が少しアップデートされたので改めて記事にしようと思います。 ちなみにこちらの記事ではブラウザ版のClaudeも紹介していますが、Claude-3.5-SonnetがCursorで利用できるようになってからはあまり使っていません。設計の壁打ちとかでたまに使ったりするくらい。 そのため、この記事ではCursorにフォーカスを当てて紹介していきます（最後に少しだけ他に使用しているAIツールを共有します）。 なお、役割によって用途が変わってくると思うので、予め私の属性を提示しておきます。 仕様を考えたりコード書くことがメインの仕事 仕事以外でも暇なときはコードを書いている 0 → 1 で
このYouTubeライブはフロントエンドの最適化を専門にするmizchiさんがCloudflare Meet-up Tokyoで行った同タイトルのプレゼンを、RustやRDBの実装に詳しいkoba789さんを話し相手に語っていくというものだ。背景としては2人ともチーム開発の現場でのRailsが活発に利用されていた時期にウェブ開発を経験し、現在はNode.jsのサーバーサイドも実践している。 ライブは3時間半という長時間におよび、スライド外の周辺情報や持論や余談など多岐に渡るので、すでにこのプレゼンに触れた人でもさらに深掘りできるようなコンテンツになっている。 全体を大まかに1時間ごとの3パートに区切って視聴するとわかりやすい。前半はRailsからNext.jsに辿り着くまでのウェブ開発の変遷。ORMの話は主に後半戦で。最後の1時間はアフタートークになっている。 内容としてはRailsアプリ
こんにちは、トレタ VPoEの北川です。 今回は弊社でフロントエンドアプリケーションを新しく構築する際の開発環境として、何のライブラリを入れるかという開発環境初期セットを紹介しようと思います。 Web Framework / CSS Framework / Tesing Framework / Linter / Formatter、それぞれ定番で使うデファクトが大体ありましたが、近年では新しいライブラリも登場したので、2024年現在・最新版を、今回は直近で作られた実際のリポジトリを例にご紹介します。 今回紹介するリポジトリのアプリケーションはtoB向けの管理画面のアプリケーションで、特質した部分も特にない一般的なWebアプリケーションです。 それでは早速、package.jsonの内容はを見ていきましょう。 "dependencies": { "next": "14.2.13", "rea
Previous slideNext slideToggle fullscreenOpen presenter view Rails vs Node.js 最終章 「Prisma」 @mizchi Cloudflare Meetup 2024/10/02 今日の Prisma + Cloudflare の様子 About https://x.com/mizchi Node.js とフロントエンドの専門家 100万円*達成率で御社のフロントエンドの高速化をやります 前書き フロントエンド/Node.js 視点のポジショントークです Railsに対するチャレンジャーとして Node.js を使ってきた話 Rubyの開発者やRubyのユーザーを否定する意図はありませんが、好き嫌いは否定しません。型が好きです 「Rails」は 2010年前後に流行っていた任意なWAFに置き換え可能 Symfony
TypeScriptではtype alias syntax（型エイリアス構文）とinterface declaration（インターフェース宣言）を使って型を定義できます。 おおよそ両者同じことができるので、どちらを使うか迷います。 両者の使い分けに関する記事は沢山あります。 これらの記事を読んで基本的にはtypeを使えば良いと思っていました。 ですが最近以下のことがあり、typeとinterfaceの使い分けがわからなくなってしまいました。 typeよりもinterfaceの方がコンパイルのパフォーマンスが良いという話を耳にした。 interfaceしか使えない特定の機能を知った。 そこでtypeとinterfaceの違いを学んで、どう使い分ければよいかを整理しました。 type, interfaceそれぞれのメリット typeのメリット interfaceで表現できないことが表現できる
Previous slideNext slideToggle fullscreenOpen presenter view プログラマ vs AI 生存競争 mizchi NextBeat 第一回プログラミング教育について語る会 About https://x.com/mizchi Node.js とフロントエンドの専門家 100万*達成率で御社のフロントエンドの高速化をやります 話したいこと 今一度、共同作業者・競争相手としてAIを見直す 「俺達はAIに勝てるのか？」 2024/09 (chatgpt o1-preview) の世界観 AI ≒ LLM 背景 機械学習はにわか。主にユーザー目線 前職: 非エンジニア向けコード生成パイプラインのR&D 大学の研究室で教育工学を少し(暗黙知記述、オントロジー) もう一度向き合う プログラマ vs AI プログラマ vs AI 建前 「AI は人
TypeScriptが仕事で使えるレベルに到達するためのガイド - Python転職初心者向けエンジニアリングブログ
TypeScriptが仕事で使えるレベルになるためには、単に基本的な文法や構文を理解するだけでなく、実際のプロジェクトやチーム開発でどのように活用するか、スケーラビリティや保守性を考慮しながらコードを書く能力が求められます。この記事では、TypeScriptを実務で使うために必要な基本から、少し踏み込んだ中級レベルの知識を、コード例を交えながら丁寧に解説します。 TypeScriptとは TypeScriptは、JavaScriptのスーパーセットで、JavaScriptに静的な型を追加した言語です。静的型付けとは、変数や関数にあらかじめ「このデータはこの型でなければならない」というルールを設定することです。このルールに基づいて、開発者が予想しない動作やバグを防ぐ手助けをしてくれます。 JavaScript自体は非常に柔軟で、型に縛られない自由な書き方ができますが、それが逆に大きなバグを生
AWS、コンソールの操作をコードに変換してくれる「AWS Console-to-Code」正式リリース Amazon Web Services（AWS）は、AWSコンソールでの操作をコードに変換してくれる「AWS Console-to-Code」の正式リリースを発表しました。 AWSコンソールの操作をコードに変換 AWS Console-to-Codeを利用することでAWSコンソールで操作した内容を記録し、コマンドラインで実行できるコードを生成してくれます。さらに生成AIのAmazon Qによって数クリックで AWS CloudFormationのテンプレートやAWS Cloud Development Kit（AWS CDK）を用いたTypeScriptやPython、Javaコードも生成されます。 これによりAWSコンソールでの操作を保存しておいて確実に再現できるだけでなく、コードをカ
この本では、初心者・入門者の方に向けて、Next.jsの知識や使い方を体系的にまとめました。 【概要】 ・内容：HTML・CSS・JavaScriptとは？、Next.jsとは？、アプリを作る上での環境を整えよう！、Next.jsのプロジェクトを作ろう！、チャットアプリのパーツを作ろう！、オウム返しAPIを作ろう！、MUIを使ってリッチにしよう！、Vercelにデプロイしよう！、【余談】Joy.uiによるUIの変更 ・所要時間：約3時間 ・必須条件：HTMLの知識、CSSの知識、JavaScriptの知識 ・推奨OS：macOS / windows(WSL2) ・レベル：★★☆☆☆
バーチャルスクロールの限界を突破する
はじめに 私は今、CSVエディタ SmoothCSV 3 を開発しています。フレームワークとして Tauri を採用しており、レンダラーにはWebの技術（React + TypeScript）を使っています。 CSVエディタは大量の行・セルを表示する必要がありますが、Webの技術ではこのようなシーンではバーチャルスクロールを使うのが定石です。 SmoothCSVでもバーチャルスクロールを使っていましたが、どうやらこのバーチャルスクロールにも限界があるらしく、数百万行のような極端に大量のデータを表示する場合に最後まで表示しきれない問題に遭いました。 ここではバーチャルスクロールの基本と、その限界をどう乗り越えたかを紹介します。 About Me 株式会社ヘンリーでソフトウェアエンジニア & アーキテクト的なことをしつつ、個人開発してます。 Social accounts: kohii on
「プロとしてプログラムが書ける人」に求められる能力が大きく変わった！ 1つのプログラミング言語にこだわらず、それぞれの言語のベストプラクティスを学ぼう。現代のプログラミング言語を支える技術が凝縮した一冊 第1章 はじめに 1.1 プログラミングに必要な知識とは 1.2 本書の構成 1.3 プログラマに伴走する生成AI 1.4 コーディング環境 1.4.1 オンライン実行環境 1.4.2 ローカルでのコーディング環境 1.5 まとめ 第2章 C言語からはじめよう 2.1 C言語とは 2.2 入力・演算・出力 2.2.1 変数・定数・リテラル 2.2.2 演算子 2.2.3 入出力関数 2.2.4 数値計算を行うプログラム例 2.2.5 配列 2.2.6 文字と文字列 2.3 制御構造 2.3.1 条件分岐 2.3.2 繰り返し 2.3.3 構造化プログラミング 2.4 関数 2.4.1 ma
【フルスタックエンジニアへの道！】ReactとTypeScriptの修行をした話 - Findy Tech Blog
こんにちは、ファインディでFindy Team+（以下Team+）を開発しているEND（@aiandrox）です。 普段はバックエンドの開発をメインで担当しているのですが、3ヶ月間フロントエンドの開発に挑戦する機会がありました。短い期間でしたが、フロントエンドテックリードから直接指導してもらいながら実装をすることで、フロントエンドの開発を一人でできるくらいに慣れることができました。 今回は、その経験と学びについて書いていきます。 フロントエンドに挑戦する前の自分について フロントエンドに挑戦することになった経緯 フロントエンドを学ぶ上で助けられたこと フロントエンドのノウハウが溜まった記事の充実 開発ツールが揃っている テックリードとマンツーマンでタスクをやっていく react.devの輪読会 つまづいた点 タスク粒度を適切に分割すること Team+のフロントエンドの責務の考え方 Type
Announcing VoidZero - Next Generation Toolchain for JavaScript | VoidZero
October 1, 2024Announcing VoidZero - Next Generation Toolchain for JavaScript TL;DR: I have founded VoidZero Inc., a company dedicated to building an open-source, high-performance, and unified development toolchain for the JavaScript ecosystem. We have raised $4.6 million in seed funding, led by Accel. Fifteen years ago, when I started building apps with JavaScript, it was mostly a browser-based s
こんにちは。こんばんは。 開発生産性の可視化・分析をサポートする Findy Team+ 開発のフロントエンド リードをしている @shoota です。 先日、END が 【フルスタックエンジニアへの道！】React と TypeScript の修行をした話 というタイトルで、フルスタックエンジニアを目指すためのフロントエンドの修行の記事を投稿いたしました。 こちらの記事では React / TypeScript において個人学習程度のレベルにあった END が、機能開発を自走可能になるまでの内容が書かれています。 そこで本記事では、END の成長と挑戦をサポートし、実際に指導にあたった私がメンター視点での話をいたします。 育成のはじまり 下準備 ゴール設定 助走をしてもらう 実践 育成の方針と実践 トレードオフ 3 ヶ月の成果と分析 プルリクエストの可視化 メンティーの分析 メンターの分
本日のデモ： 本日のソースコード： おっと、待たせたねぇ！今日は「DuckDB-Wasm」と「DuckDB-Spatial」についてご案内いたしやすよ！ この記事を読めば、ブラウザだけで地理空間情報の分析をサクッとこなせすための環境構築や、便利な関数を使った地理空間情報分析の基本がバッチリわかるって寸法よ！これを知っときゃ、サーバーいらずで本格的な地理空間情報分析ができちまうし、つまずきやすいポイントもスッキリ解消！あんたもいますぐ地理空間情報分析の達人になれるこたぁ間違いなしだ！さぁ、江戸っ子の心意気で、いますぐその手で試してみな！ Vite.js + React でやんでぇ！まず、Vite.js + React + TypeScriptを開発環境の基板とするってのは、問答無用で決まりだ！ほかにゃ選択肢はねぇってわけよ。Viteの速さ、Reactの使いやすさと豊富なライブラリのエコシステ
Nushell - 型付きシェルの基本とコマンド定義
はじめに これまで Zenn では fish shell の記事をいくつか書いてきましたが、現在は Nushell という新しいシェルを使っています。 実は Nushell のことは以前から知っていましたが、利用されているプログラミング言語の概念やその恩恵についての知識が無かったため、より初心者にわかりやすい fish shell を利用していました。最近になって型システムや関数型言語などについての概念を取得したため、ようやく Nushell を使い始められました。 Nushellでの分かりやすいエラーメッセージ 使い始めてからまだ1ヶ月ぐらいですが、かなり奥が深く一つの記事で解説しきるのは難しいので、この記事では基本体な設定と型とコマンドについて重点をおいて最後は具体的なカスタムコマンドの定義をいくつか取り上げて解説したいとおもいます。 Nushellとは Nushell とは "A n
はじめに 「Flat Config が何かはわかったからサンプルをくれ！」という方向けの記事です。 筆者が普段使用している eslint.config.js をご紹介します。 Flat Config については良記事がたくさんあるため ↓ などを参照してください。 今回ご紹介する設定は、React × TypeScript を使用し、フォーマットは Prettier に任せる前提になっています。 しかし、Vue やサーバー Node.js でも使いまわせる箇所は多いと思います。 eslint.config.js まずは結論から。 // @ts-check import { fixupConfigRules } from '@eslint/compat'; import { FlatCompat } from '@eslint/eslintrc'; import eslint from '@
高速な仮説検証ループで届けた新規プロダクトの成果を既存プロダクトにも反映するドリームチームの開発手法 ─ カケハシyabusameインタビュー - Agile Journey
株式会社カケハシは「日本の医療体験を、しなやかに。」というミッションを掲げた、医療系のスタートアップです。現在は薬局向けのSaaSを主軸としたビジネスを行っており、多くのエンジニアがチームを組んで開発に取り組んでいます。その開発チームのひとつ「yabusame」は、特徴的なチーム編成もあって社内外で注目を集めています。 メンバーの椎葉光行（@bufferings）さん、小田中育生（@dora_e_m）さん、荻野淳也（@ogijun）さん、種岡篤志さん、平松拓（@hirataq__）さんは、それぞれが開発チームをリードできる高い技術力やマネジメント能力だけでなく、細やかな対人スキルや広い視座でメンバーの関係性を捉える能力を備えたシニアエンジニアでありながら、同じチームのメンバーとして開発に取り組んでいます。 日本の古式弓馬術である流鏑馬(やぶさめ)から「変化が速い中を駆け抜けて、的確にゴール
Wasmでお金を稼げるプロダクトは作れるのか？ こんにちは。私は技術者としてはかなりミーハーな部類に入ります。 そんなミーハーな私は盛り上がっている分野についてはとりあえず触ってみたい欲が先行します。 ここ数年で盛り上がっている分野といえば色々とありますが、例えばWasmはソフトウェアエンジニア界隈を中心に盛り上がっている分野の一つとして数えてもよいでしょう。 私自身Webフロントエンド開発なども行っているため、分野的にもWasm、そしてWasmを活用した事例などは気になるところです。 ところでこういった気になる分野の技術については、なるべくビジネス的にも機能する形で落とし込みたいと常日頃考えています。 つまり その技術を使うことでお金を得ることができる という状況で使いたいのです。 これは私の性格的な部分が大いに影響していると思いますが、趣味的な用途でしかその技術を利用しない場合、ちょっ
こんにちは！アルダグラムのKANNAの開発お手伝いをさせて頂いているoubakiouです。 KANNAでは主にバックエンドにRails+graphql-rubyやKotlin+DGS、WebフロントエンドにTypeScriptとReactを採用していて、私が参加するチームでの仕事もそれらを触る事が多いのですが今回はそこでコードレビューをする際に気にしている「べからず」をティア別に見ていきましょう。 特に理由なくlintを無視してはいけない アルダグラムでは利用エディタの規定や制限はありませんが、Webフロントエンド開発で一番利用者が多いのはVSCodeでextensions.jsonにlint表示等のために必要な拡張プラグインリストが整備され半自動でインストールされるようになっています。VimなどVSCode以外のエディタを利用する場合には同等のリアルタイムlint表示ができるよう自主整備
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptは型安全じゃないからすばらしい - まめめも
Cursorを1年弱触っているエンジニアの最近の使い方｜ニケちゃん
「Rails vs Node.js」を観た｜laiso
フロントエンド開発環境スタートセット2024秋 - トレタ開発者ブログ
Rails vs Node.js
typeとinterfaceって結局どう使い分ければ良いの？
プログラマ vs AI 生存競争
AWS、コンソールの操作をコードに変換してくれる「AWS Console-to-Code」正式リリース
サクッと始めるウェブアプリ開発【Next.js / TypeScript】
プログラミング〈新〉作法 これからプログラムを書く人のために
Findyのエンジニア爆速成長の事例 2024年夏 - Findy Tech Blog
DuckDB-Wasm + DuckDB-Spatial = Webブラウザ上で完結する地理空間情報分析
2024年9月 俺の eslint.config.js
SQLite Wasm + OPFSで簡単アプリ化！ビジネスに活かすWasmとWeb技術
コードレビューの時に気にしている、べからずTierリスト