React Ink によるリッチ CLI (ClaudeCodeの裏側のアレ)
(この記事の AI 成分は 5 割ぐらいです) claude-code や gemini-cli を触った人なら、やたらリッチな CLI のインターフェースが一体どうなってるか疑問に思ったはずです。 これは ink というライブラリで実装されています。実体は React のカスタムレンダラーで、React の差分レンダリングで CLI を構築することができます。 中では yoga というレイアウトエンジンが使われており、これは React Native でも使われているもので、 Web で display: flex を使ったときと同じレイアウト計算モデルになります。 つまり、 React や ReactNative の知識で CLI (TUI) の アスキーアートの UI を作ってるわけですね。 実際に作ってみた例 React Ink の可能性を探るべく、ターミナルで動くゲームを実装して
Prettier's CLI: A Performance Deep Dive · Prettier
Hey, I'm Fabio and I've been contracted by the Prettier team to speed up Prettier's command line interface (CLI). In this post we'll take a look at the optimizations I've discovered, the process that lead to finding them, some exciting numbers comparing the current CLI with the new one, and some guesses about what could be optimized next. Installation The new work-in-progress CLI for Prettier has
Deno Deploy | Deno
Develop locally in JavaScript or TypeScript, deploy in seconds globally and scale to billions of requests.
現場に残る Vuex の map ヘルパーのコードベースを消し去り、 Vue 3 時代の型に追従するための CLI ツールを TypeScript Compiler API で実現する - Qiita
はじめに Vue.js 製アプリケーションのレガシーコードベースにおいて、頻繁に課題となるのが mapGetters のような map ヘルパーのメソッドです。 これらはショートハンド的に使えて過去には便利なケースもありましたが、現在ではほとんど利用されることもなくなりました。 それもそのはず。現在のフロントエンド開発の主流となる言語は JavaScript ではなく TypeScript となっています。しかし、 map 系ヘルパーはその構造から任意の文字列を受け取った上でオブジェクトに影響を及ぼす形となっており、根本的に型システムとの相性が悪い存在です。 これを利用している限り、 Vue Component において map ヘルパーから this に生えたものは、型もつかなければそもそも this に生えていることすら TypeScript 側で検知できず、コンパイルエラーとなってし
ESLint v7.0.0 の変更点まとめ - Qiita
overrides: - files: "*.js" extends: my-config-js - files: "*.ts" extends: my-config-ts のような設定がある場合、eslint lib コマンドは lib ディレクトリ内の *.ts ファイルもチェックします。 なお、eslint lib/** のように Glob パターンを指定した場合は今まで通りに動作しますのでご注意ください。overrides 設定にかかわらず Glob パターンにマッチする全てのファイルをチェックします。 プラグイン開発者へ: あなたが管理するプラグインが *.js 以外のファイルを対象にするルールを提供する場合、recommended設定に overrides を追加すると利用者は便利かもしれません。 動作を元に戻したい場合: 今まで通り overrides 設定にかかわらず *.
JavaScript・TypeScriptのimport・exportの依存関係を可視化するcode-dependencyの紹介 - Qiita
追記情報 v0.5.0で.vueの拡張子もサポートするようになりました。 はじめに 現在のJavaScriptはexport、importによるモジュールの切り離しと結合が可能であるため。大きなプロジェクトに成長させることができます。 実装が進むにつれてファイル間の依存が複雑になっていき、実装全体の依存関係を把握するのが難しくなっていきます。これはプロジェクトに対して新しいメンバーが増えたときに、コードリーディングの時間を十分に取る必要があります。また、OSSのライブラリに貢献したいときも同様の状況が生まれるでしょう。特に後者は開発メンバーが近くにいるとも限らず、他国の方である可能性も十分に高いため開発に参加するための準備が必要になります。 このような、全体の依存関係の設計を見直したい場合や、新たに開発に参画する場合により短時間に理解を深めるためのツールを作成したので紹介します。 @cod
JavaScript Registryの今後 - from scratch
さて、前回は tink と yarn v2 における CLI 戦略の話でした。次は JavaScript Registry についてです。 ちなみにこの内容が今回 JSConf.EU 2019 で一番盛り上がったトピックです。 JavaScript Registry とは JavaScript Package をバックエンドで管理しているサービスです。 npm が管理しているものがいちばん有名です。他にも GitHub が管理する Registry が公開される予定です。 The economics of Package Management the economics of package management slide: github.com video: www.youtube.com 「Package Managementの経済」というタイトルです。 聴講者からすると、何話すのか
Angular 4アプリケーションをAngular 6に移行する | 株式会社カブク
初めまして！ カブクでアルバイトをしている長瀬です。普段はWebフロントエンド関連の業務をしています。 先日、Angular 4.3.6で動いていたアプリケーションを6.1.0へ移行した際に得られた知見を共有します。Angular/Angular CLI 6への移行に関する日本語記事は、すでに以下をはじめとするすばらしい記事が世に出ています（私も参考にさせていただきました）。 Angular CLI v1.7からv6.0へのマイグレーションについて (for v6.0.0-rc.2) lacoさんの記事 angular-cliの移行作業がまとまっている Angular6に移行メモ 5.2 -> 6.0の移行 ngx-bootstrapなど、外部パッケージ関連の移行作業についても触れられている この記事では、上記の記事で紹介されている内容（移行手順や移行により改善されたこと）に加えて、 –
今年お世話になったCLIコマンド集 - mizchi's blog
ヒストリ履歴からよく使ってるものをお焚き上げする。 注意点: npm 周り、グローバルコマンドは npm i -g で入れてて、ローカルで扱うものは yarn で使うという癖がある 追記: シェルじゃなくてCLIだろと言われるのが多かったので訂正した vscode $ code . -r 現在ディレクトリを VScode で開く。 -r が肝で、新しいウィンドウを生成せず、既存のウィンドウを開き直す。 yarn $ yarn install --prefer-offline yarn install 時にローカルキャッシュを優先する。テザリング環境下でリポジトリを作成するのに便利。 フリーランスになってから出先で作業することが多く、ギガ足りない問題が多々発生した。 git $ git clone <github-url> --depth 1 HEAD だけ clone する。テザリング環境
Vuexによる状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 - Qiita
追記 2019/12/05 Vue 3.0 のリリースが現実的に近づいてきて色々と事情が変わっているので、話半分に聞いておいてください。 はじめに Patreon での支援募集をはじめました。この記事が良かった！という方は、今後の情報発信のためにもぜひぜひ支援お願いします。 https://www.patreon.com/potato4d Vue.js Advent Calendar 2018 年の管理役の potato4d です。昨年に引き続き、今年も Vue.js のアドベントカレンダーは他にもたくさんあるので、ぜひ #1 から追ってみてください。 12日目の今日は、 Vue.js + TypeScript での理想的な開発環境について考えてみたいと思います。 Vue.js における TypeScript 利用はまだまだ課題が多く、型の恩恵をうけるためのテクニックも複数存在しています。
WebAssembly でシングルページアプリケーションが開発できる Blazor フレームワークの公式チュートリアルをやったら近未来感が凄かった - Qiita
はじめに Blazor は、WebAssembly を使用してブラウザで実行される、.NET上に構築されたシングルページ Web アプリケーションフレームワークです。 @jsakamoto さんのC# で Single Page Web Application が書ける Blazor が凄かった件 にとても詳しく載っています。 大まかな仕組みとしては C# をコンパイルした IL（.NET の中間言語）を WebAssembly にコンパイルすることでブラウザで .NET が実行できます。 TypeScript やその他 AltJS のように JavaScript にトランスパイルされるわけではなく、本当に C# のコードがブラウザで動きます。 このような技術は、今は無き Microsoft Silverlight を連想させますが、そうではなく、オープンな Web 標準を使用してブラウザ
Angular v2からv6までの変化をまとめてみた - 余白
Angular 2から6までの主要な進化をまとめた記事を読みたい。— Masahiko Sakakibara (@rdlabo) 2018年4月20日 逆にIonicの変遷が知りたいですね 最近Stencilも出てきたしその辺の絡みとか俯瞰的に見てみたいです— lacolaco (@laco2net) 2018年4月20日 rdlaboさんがしっかりGW明けにIonicの記事書いてくれたので、僕もAngularのv2からv6まで、3年弱の変遷についてまとめます。 Ionic 2 から 4 への、この2年間の進化を振り返る 前Angular v2時代 Angular v2 オフラインコンパイル AngularJSへの .component 逆輸入 Animation API Language Service Angular CLIとスタイルガイド SystemJSからwebpackへ For
マークダウンベースのタスクランナー saku を作った話 - Qiita
tl;dr make をタスクランナーとして使うことに疲れた (.PHONY ってもう書きたくない) yaml ベースのタスクランナーは幾つかあったがしっくり来ない (go-task / robo) そもそもタスクの記述言語をマークダウンにした方が良いのでは? マークダウンベースのタスクランナーを作った! saku! (update: Go言語バージョンも作った!) モチベーション 自分は普段、趣味も仕事もほとんど JavaScript ばかり書いているため、タスクランナーとしては npm run-script を使っています。 run-script はタスクのドキュメントが書けないとか、タスクにコメントをつけれないとか(JSON の文法の制約上)、不満点は色々ありますが、npm-run-all などの支援ツールを利用することで、必要最低限のタスク定義は十分にできるツールと個人的には思って
Electron + Vue + flowtypeで最高の画像を収集するためのTwitterクライアントを作った - Qiita
Electron + Vue2 + Vuex + Flow + BootStrap4 + AWS RekognitionのスタックでTwitterクライアント書きました。 本アプリは【Electron + react + flowtype】TweetDeckライクなpixivクライアントPixivDeckをつくった - Qiita に思想・設計共に大きく影響を受けて作りました。本当にありがとうございます。 Github - yuki-ycino/imecoletter: 最高の画像を集めるためのTwitterクライアント 諸事情（というか実装の都合上AWSの請求が大変なことになるため）バイナリの配布はできません。 簡単にビルドできるようにはしてあるのでもし興味がある方がいれば使ってみてください。 スクリーンショット TwitterのTLから画像ツイートのみを表示 Twitterから画像ツイ
npm-scripts で使える便利モジュールたち - Qiita
npm はパッケージ依存管理ツールであると同時に、便利なタスク・ランナーです。 本体はごく基礎的な機能だけを持ち、npm が管理するパッケージと Shell の力を組み合わせてタスクを定義します。「npm-scripts で利用する CLI コマンドは npm で管理できる」という分かりやすさが気に入っています。 npm-scripts には以下の特徴があります。 多くのツールが CLI を持っているためにラッパープラグインが不要です。Gulp ラッパー プラグインは非公式であることも多く、メンテナンスが継続するか不安な場合があります。 簡潔です。Gulp で書くと数十行だった処理が数行になるなんてこともよくあります。 複雑なことをするには向いていないです。 環境変数の扱いに難があります。 この記事では、私が npm-scripts を書くときによく利用している便利ツールたちを紹介します。
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Xのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことはあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版） 詳細につ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - plantain-00/type-coverage: A CLI tool to check type coverage for typescript code
GitHub - google/zx: A tool for writing better scripts
Workbox Broadcast Cache Update | Workbox | Google Developers
ChromeのヘッドレスモードをMacOSXで試してみた - Qiita
