はてなブックマーク

% git clone https://github.com/sprout2000/docker-react-ts.git % cd docker-react-ts % docker-compose up localhost:5173 を開きます。これだけです。 ローカルに Node.js がインストールされていなかったり、インストールされていてもこのコンテナで利用されているバージョンとは異なっていたりしても同じ（仮想）環境でプロジェクトが起動します。

サマリー GitHub へ GnuPG による署名つきのコミットを行うと Verified と表示されるようにします。 前提 Homebrew はインストール済み (macOS) Git Bash もしくは何らかの Unix シェルを準備済み (Windows) なんらかの GitHub レポジトリを作成済み 手順 1. git のインストール (macOS)

webpack is 何? webpack とは、一言で言うと JavaScript 向けのモジュールバンドラーです。 複数の JavaScript モジュールを一つ（またはいくつか）のファイルへバンドル（=bundle: 束にする、包む）してくれます。 複数の JS モジュールを（場合によっては CSS や画像などのアセット類も）一つにまとめる すでに新規開発の終了も伝えられる webpack ですが、「STATE OF JS 2022」ではいまだに利用率 No.1 の地位にあります。 webpack 後継のモジュールバンドラーとしては、すでに Turbopack の開発開始がアナウンスされています。しかし、これがプロダクションレベルに達するまでは webpack がおそらく使い続けられることになるでしょう。 使うメリットは何？ モジュールを 1 つ（もしくは少数）にまとめることでブラウ

2023/04/29: これくらいの情報はググればすぐに出てくると思いいったん非公開にしましたが、意外とそうでもなかったので自分用メモとして再公開しました。 1. ソフトウェアのダウンロード元を変更してシステムをアップデートする (*) Super キー(= Windows キー)を押して、software と入力し、「ソフトウェアとアップデート」を選択します。 「設定...」ボタンを押して、「Ubuntu のソフトウェア」タブの「ダウンロード元:」から ftp.jaist.ac.jp などの国内ミラーサーバーを選択します。 アップデートが存在する場合は、表示されるウィンドウの指示にしたがってパッケージを更新し、Ubuntu を再起動します。 2. キーボードの CapsLock キーを Control へ置き換える /etc/default/keyboard を編集します。

% tree -a -I 'node_modules' . ├── dist ├── package-lock.json ├── package.json ├── src │ ├── main.ts │ ├── preload.ts │ └── web │ ├── App.css │ ├── App.tsx │ ├── index.html │ └── index.tsx ├── tsconfig.json ├── tsconfig.node.json └── webpack.config.ts 3 directories, 11 files dist/: webpack の出力先フォルダ src/main.ts: メインプロセスのエントリファイル src/preload.ts: プリロードスクリプト src/web/: レンダラープロセス (= React アプリケーション) ソースコー

1. 自動でブラウザを開いてほしい - server.open yarn dev（または npm run dev）したら自動でブラウザを開いてほしい場合は server.open を指定します。 import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ server: { open: true, }, plugins: [react()], });

手順 1. Linux 用 Windows サブシステムを有効にする 管理者として PowerShell を開いて (Win キー + X --> A)、WSL を有効にする。

*: Ubuntu の再起動が必要となる設定です。 **: "言語" に日本語を指定して Ubuntu をインストールした場合のみ有効な設定です。 1. ソフトウェアのダウンロード元を変更してシステムをアップデートする (*) Super キー(= Windows キー)を押して、update と入力し、「ソフトウェアの更新」を選択します。 「設定...」ボタンを押して、「Ubuntu のソフトウェア」タブの「ダウンロード元:」から ftp.jaist.ac.jp などの国内ミラーサーバーを選択します。 アップデートが存在する場合は、表示されるウィンドウの指示にしたがってパッケージを更新し、Ubuntu を再起動します。 2. キーボードの CapsLock キーを Control へ置き換える /etc/default/keyboard を編集します。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

% git clone https://github.com/sprout2000/vite-react-typescript.git % cd vite-react-typescript % docker-compose up localhost:3000 を開きましょう。これだけです。 ローカルに Node.js がインストールされていなかったり、インストールされていてもこのコンテナで利用されているバージョンとは異なっていたりしても同じ（仮想）環境でプロジェクトが起動します。

Windows 版のほうはちょっとややこしいですね。 macOS 版は Apple Silicon 向けも用意されてます。 2. React + TypeScript アプリを作成 おなじみ create-react-app を利用します。 % npx create-react-app myapp --template typescript --use-npm npx: 67個のパッケージを3.091秒でインストールしました。 Creating a new React app in /Users/zenn/Downloads/myapp. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template-type

TypeScript を使ってオリジナルの NPM パッケージを作ろう！

$ npm init vite # フレームワークに 'react', 種別に 'react-ts' を選択 ✔ Project name: … tic-tac-toe ✔ Select a framework: › react ✔ Select a variant: › react-ts Scaffolding project in /home/zenn/tic-tac-toe... Done. Now run: cd tic-tac-toe npm install npm run dev $ cd tic-tac-toe $ npm install $ npm run dev

1. はじめに 対象とする読者 以下のような人を読者として想定しています。 ある程度 JavaScript を習得している人 React 公式チュートリアルを終えたものの、次のステップを探しているような人 Node.js をインストール済みである人 Git Bash もしくは何らかの UNIX シェルの操作をある程度習得している人 コードエディタには、 Visual Studio Code（以下、VSCode）を利用します。VSCode に備わる機能の利用を前提とした記述もありますので、インストールしておくことをおすすめします。 目標とする Todo アプリ タスク (Todo) を既済・未済・削除済みなどの状態によってフィルタリングできる 登録済みタスクを編集できる 削除済みアイテムを「ごみ箱」フィルタから完全に削除できる 他のおすすめのドキュメント 2. 開発環境の準備 Vite.js