より良いコーディング体験を。

概要

これは、p5.js 用の GitHub テンプレートリポジトリーの集まりです。
コードを書いてスケッチを作るのを快適にしてくれます。

使用方法のチュートリアルは、各テンプレートの README をご覧ください。
このサイトもまた、いろいろな説明やヒントなどが書いてあるので、お役に立つかもしれません。

注：
当サイトおよび各テンプレートは、完全な初心者（コードを書いた経験がまったくない人など）向けではなく、JavaScript と p5.js の基本について何かしらご存知であることを想定しています。でもエキスパートである必要はまったくありません。

主な使用ツール

コードエディターとしては、Visual Studio Code（略称 VS Code）の利用を想定しています。

また、各テンプレートはいろいろな JavaScript 開発用ツールの助けを借りています。

	ツール	なにそれ
P	Prettier	コードフォーマッター
E	ESLint	リンター
T	TypeScript	型付き JavaScript
R	Rollup	モジュールバンドラー

とはいっても、すべてを使う必要があるわけではありません（下記テンプレート一覧を参照）。

テンプレート一覧

状況と好みに応じてお好きに。

[ P ]

全てが自動的に美しくなります。Prettier があなたのコードを整形します。

[ PE ]

バグは少なく、可読性は高く。ESLint があなたのコードをチェックします。

[ PET ]

値の入れ間違い防止。より良いコード補完。コード自体がドキュメントに。そう、TypeScript ならね。

[ PER ]

ソースコードを複数のファイルに分けて構造化しましょう。Rollup が最後にまとめてくれます。

[ PETR ]

上の2つの組み合わせです。

[ PETR+ ]

脱・グローバル汚染。p5.js インスタンスモードです。
ついでに、terser で配布用のコードを圧縮します。

基本用語

Git と GitHub

GitHub は、Git で管理されたコードを保管してくれるWeb上のプラットフォームです。

そして Git とは、バージョン管理システムです。コードの変更履歴を追跡したり、いろいろやります。

Git を使うことは必須ではありません。Git はとても便利ですが、プログラミング初心者には少し難しいところもあるかもしれません。

npm

npm は、上で書いたツールを含め様々なパッケージをダウンロードできる、Web上の大きなデータベースです。

同時に、パッケージ管理のツール（npm コマンド）も提供します。
Node.js をインストールすることで、これが使えるようになります。

テンプレートのダウンロード方法

上記のリンクから、任意のテンプレートの GitHub リポジトリーを開いてください。
そして次のようにします。

Git を使わない場合

「Code」ボタン→「Download ZIP」をクリックするだけです。

Git を使う場合

「Use this template」ボタンをクリックします。
これはテンプレートをコピーして、あなたの所有となる新しいリポジトリーを作ります
（要 GitHub ログイン）。
「Code」ボタンをクリックして、リポジトリーをクローンするための URL を確認します。
git clone コマンドなどで、リポジトリーをクローンします。

さらなる情報

目を通すとよいかもしれないこと

もしお役に立てば。

上級者向け

こちらは上級者（もしくはそうなりたい人）向けの情報です。

上級者向けトピックス

ただしこれは、他のトピックが十分に簡単であることを意味しません。
いずれにしろ、何かを学ぶというのは時間がかかるものです。

リンク

FAL Works

p5.js Templates の開発者のWebサイト。Processing や p5.js のスケッチもいろいろあります。

JavaScript用語集開発環境関連

手前味噌ですが各種用語やツールなどの解説記事です。