From e60e04a662f985b143303afa968960c2e33a688c Mon Sep 17 00:00:00 2001 From: t-cool Date: Fri, 2 Apr 2021 15:26:59 +0900 Subject: [PATCH] Create README-ja.md --- README-ja.md | 143 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 README-ja.md diff --git a/README-ja.md b/README-ja.md new file mode 100644 index 0000000..8df82fc --- /dev/null +++ b/README-ja.md @@ -0,0 +1,143 @@ +# shadow-cljs - ブラウザ・クイックスタート + +これはブラウザ上で動作するCLJSプロジェクトで利用できる最小限のテンプレートです。 + +## 必要なソフトウェア + +- [node.js (v6.0.0+)](https://nodejs.org/en/download/) +- [Java JDK (8+)](http://www.oracle.com/technetwork/java/javase/downloads/index.html) または [Open JDK (8+)](http://jdk.java.net/10/) + +## ユーザーガイド + +このリポジトリでは、基本的なブラウザ向けのビルド方法を示します。 + +詳細は完全な[ユーザーガイド](https://shadow-cljs.github.io/docs/UsersGuide.html)をご参照ください。 + + +## 例の実行 + +```bash +git clone https://github.com/shadow-cljs/quickstart-browser.git quickstart +cd quickstart +npm install +npx shadow-cljs server +``` + +以上により `shadow-cljs` サーバープロセスが実行され、以下のすべてのコマンドはこのプロセスに応答します。 +このプロセスを実行したまま、新しいターミナルを開いて続行してください。 + +最初の起動は、すべての依存関係をダウンロードして準備作業を行う必要があるため、少し時間がかかります。 +これが実行されると、すぐに始められます。 + +```txt +npx shadow-cljs watch app +``` + +これにより設定された `:app` ビルドのコンパイルが開始して、ファイルを変更するたびに再コンパイルします。 + +"Build completed." というメッセージが表示されたら、ビルドを使用する準備が整いました。 + +```txt +[:app] Build completed. (23 files, 4 compiled, 0 warnings, 7.41s) +``` + +では [http://localhost:8020](http://localhost:8020)を開きましょう。 + +このアプリは、最も便利な開発ツールが設定された基本的なスケルトンに過ぎません。 + +`shadow-cljs` の設定は `shadow-cljs.edn` でします。次のようなものです。 + +```clojure +;; shadow-cljs configuration +{:source-paths ; .cljs files go here + ["src/dev" + "src/main" + "src/test"] + + :dependencies ; covered later + [] + + :dev-http ; starts a http dev server on http://localhost:8020 and serves `public` + {8020 "public"} + + :builds + {:app ; build identifier + {:target :browser + :output-dir "public/js" + :asset-path "/js" + + :modules + {:main ; becomes public/js/main.js + {:init-fn starter.browser/init}}}}} +``` + +この設定では、`:target` を `:browser` に設定した `:app` ビルドを定義します。 +すべての出力は `public/js` に書き込まれます。 +これはプロジェクトのルートからの相対パスです。つまり、`shadow-cljs.edn` の設定があるディレクトリからの相対パスです。 + +`:modules` は、出力をどのようにまとめるかを定義します。 +今のところ、1つのファイルだけが必要です。 +`main` モジュールは `public/js/main.js` に書き込まれ、`:entrices` のコードと、それらの依存関係をすべて含みます。 + +最後の部分は、`http://localhost:8020` を開いたときに読み込まれる実際の `index.html` です。 +この index ファイルは、生成された `js/main.js` をロードして、`src/main/start/browser.cljs` で定義された `start.browser.init` を呼び出します。 + +```html + + + + + + + + Browser Starter + + +

shadow-cljs - Browser

+
+ + + + +``` + +## ライブリロード + +ライブリロードの動作を確認するには、`src/main/start/browser.cljs`を編集します。 +ブラウザのコンソールにいくつかの出力が表示されます。 + +## REPL + +開発時には、REPLが非常に便利です。 + +コマンドラインから`npx shadow-cljs cljs-repl app`を使用します。 + +``` +shadow-cljs - config .../shadow-cljs.edn +shadow-cljs - connected to server +cljs.user=> +``` + +これで、ブラウザ上でコードを評価することができるようになりました（ブラウザを開いていることが前提です）。 +試しに `(js/alert "Hi.")` を実行してみてください。 +ここでたくさんの文字を入力するつもりなら、`rlwrap npx shadow-cljs cljs-repl app`を使用するとよいでしょう。 + +REPLを終了するには、`CTRL+C`か、`:repl/quit`と入力します。 + +## リリース + +最初に始めた `watch` プロセスは、すべて開発のためのものです。 +REPLや他のすべての開発ツールに必要なコードを注入しますが、 +コードを「プロダクション」（つまり一般に公開すること）に投入する際には、そのようなコードは必要ありません。 + +`release`アクションは、すべての開発コードを削除し、コードをClosure Compilerに通して、最小化された`main.js`ファイルを生成します。 +このファイルは `watch` で作成されたファイルを上書きするため、まず watch プロセスを停止する必要があります。 + +`CTRL+C`で`watch`プロセスを停止し、代わりに`npx shadow-cljs release app`を実行します。 + +`http://localhost:8020` を開くと、`release` のビルドが動作しているのを見ることができます。 +通常だと、この時点で `public` ディレクトリを プロダクションの Web サーバにコピーします。 + +デフォルトの設定では、`watch` で作成された `public/js/main.js` を上書きしていることに注意してください。 +リリースビルドに使用する別のパスを設定することもできますが、 +出力を同じファイルに書き込むことで`index.html` を変更する必要がなくなり、すべてをそのままテストすることができます。