diff --git a/.eleventy.js b/.eleventy.js index 605d04bc..6a21dba4 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -29,17 +29,20 @@ export default function (eleventyConfig) { }); }); - eleventyConfig.addCollection('turbo_handbook', collectionApi => { - return collectionApi.getFilteredByTag('turbo_handbook').sort((a, b) => { - return a.data.order - b.data.order; - }); - }) + const navigations = [ + 'turbo_handbook', + 'turbo_reference', + 'stimulus_handbook', + 'stimulus_reference', + ]; - eleventyConfig.addCollection('turbo_reference', collectionApi => { - return collectionApi.getFilteredByTag('turbo_reference').sort((a, b) => { - return a.data.order - b.data.order; + navigations.forEach((nav) => { + eleventyConfig.addCollection(nav, collectionApi => { + return collectionApi.getFilteredByTag(nav).sort((a, b) => { + return a.data.order - b.data.order; + }); }); - }) + }); eleventyConfig.addPlugin(EleventyHtmlBasePlugin); eleventyConfig.addPlugin(syntaxHighlight); diff --git a/.github/workflows/eleventy_publish.yml b/.github/workflows/eleventy_publish.yml index 96bc260f..7d2087be 100644 --- a/.github/workflows/eleventy_publish.yml +++ b/.github/workflows/eleventy_publish.yml @@ -17,13 +17,13 @@ jobs: ARTIFACT_NAME: 'github-pages' steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Setup Node - uses: actions/setup-node@v4 + uses: actions/setup-node@v5 with: node-version: latest - run: npm ci - - run: npm run publish + - run: npm run build - name: Archive artifact shell: sh if: runner.os == 'Linux' @@ -37,7 +37,7 @@ jobs: --exclude=.github \ . - name: Upload artifact - uses: actions/upload-pages-artifact@v3 + uses: actions/upload-pages-artifact@v4 with: name: ${{ env.ARTIFACT_NAME }} path: ${{ env.ARTIFACT_PATH }} diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index ccbcc536..5f99c565 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -8,12 +8,12 @@ jobs: test: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 - name: Setup Node - uses: actions/setup-node@v4 + uses: actions/setup-node@v5 with: node-version: latest - name: Install dependencies run: npm ci - name: Build site - run: npm run publish + run: npm run build diff --git a/.github/workflows/translation-diff-monitor.yml b/.github/workflows/translation-diff-monitor.yml index f6506afd..bee01a0e 100644 --- a/.github/workflows/translation-diff-monitor.yml +++ b/.github/workflows/translation-diff-monitor.yml @@ -9,8 +9,8 @@ jobs: env: TURBO_SITE_REPOSITORY: ${{ github.workspace }}/turbo-site steps: - - uses: actions/checkout@v4 - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 + - uses: actions/checkout@v5 with: repository: hotwired/turbo-site path: turbo-site diff --git a/README.md b/README.md index bf4a79ad..fb2ce3d4 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,7 @@ ## はじめに 翻訳作業は、このリポジトリをフォークして、フォークしたリポジトリで作業を行ってください。 どのページを翻訳するかは[issues](https://github.com/everyleaf/hotwire_ja/issues)ベースで行います。 +追記: Git scraping で差分を自動検出しIssueに起こす仕組みを導入しています。 「新規翻訳」というラベルのついているissueで着手の宣言を行ってから作業を始めてください。 すでに着手宣言されている、もしくはアサインされているissueしかない場合は、しばらくお待ちください。 @@ -14,7 +15,8 @@ 1. このリポジトリをフォークします 2. issueのdescriptionにある翻訳対象のリンクとファイルの設置場所を参考に、mdファイルをブランチに追加します 3. 原文（英文）を`
~
`にしまい込む形で残してください（コードサンプルは含まない）。訳文の1行下に対応する原文を置きます。`
`には`原文`をつけてください（[見本](https://github.com/everyleaf/hotwire_ja/blob/281d8a39097cbacc9c36331fd7e496c6d8729c3e/turbo/reference/events.md)） -4. PRを作成する際は該当issueへのリンクと、着手した原文のコミットハッシュをdescriptionに記載の上、レビューに出してください +4. ローカルで表示確認していただきたいです。projectのTOPディレクトリにて `npm run serve` を実行していただくと、ローカル環境で静的サイトが構築されます。 +5. PRを作成する際は該当issueへのリンクと、着手した原文のコミットハッシュをdescriptionに記載の上、レビューに出してください ## 気にしていただきたいこと - 文中のリンク先について diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 00000000..5fb7b0c6 --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,9 @@ +

+ + DHHの許諾のもと、公式のTurbo Handbookをオリジナルとして、翻訳をしています。 + +
+ + このサイトの全ての文責は、株式会社万葉にあります。 + +

diff --git a/_includes/stimulus-navigation.html b/_includes/stimulus-navigation.html new file mode 100644 index 00000000..034494e3 --- /dev/null +++ b/_includes/stimulus-navigation.html @@ -0,0 +1,15 @@ + + diff --git a/_includes/turbo-navigation.html b/_includes/turbo-navigation.html new file mode 100644 index 00000000..3a384edb --- /dev/null +++ b/_includes/turbo-navigation.html @@ -0,0 +1,14 @@ + diff --git a/index.md b/index.md index bae3ee8c..053df9fe 100644 --- a/index.md +++ b/index.md @@ -1,119 +1,41 @@ --- -title: "はじめに" -description: "Turboは、クライアントサイドのJavaScriptフレームワークを使用することなく、高速でモダンなウェブアプリケーションを作成するためのいくつかの技術を提供します。" +title: "Hotwire ドキュメント（有志翻訳版）" +description: "HotwireはモダンなWebアプリケーションを構築するにあたっての新しいアプローチです。多量のJavaScriptを書くことなく、サーバーサイドからJSONではなくHTMLを送ります。このサイトでは、Hotwireの主要技術であるTurboとStimulusについて、公式ドキュメントのReferenceとHandbookの翻訳を掲載します" layout: "base.html" --- -# はじめに - -Turboは 高速でモダンで、そして進歩的に改良されたWebアプリケーションを、JavaScriptをあまり使わずに作るためのいくつかの技術をまとめたものです。 -Turboは流行のクライアントサイドフレームワークの代替手段を提供します。 -流行のクライアントサイドフレームワークとは、全てのロジックをフロントエンドに置いて、あなたのアプリのサーバーサイドをJSON APIに毛が生えたようなものに制限してしまうものです。 - -Turbo を使えば、サーバーにHTMLを直接配布させることができます。それはつまり、すべてのロジック、例えばパーミッションをチェックしたり、ドメインモデルとやりとりしたり、その他アプリケーションのプログラミングに関わるあらゆることを、多かれ少なかれ、お好みのプログラミング言語に限定して書くことができるということです。 -もう、JSONに分たれた両側（クライアントサイドとサーバーサイド）に、同じロジックを複製して書かなくて良いのです。全てのロジックはサーバ上で動き、ブラウザは、最終的なHTMLを扱うだけになります。 - -Wire上でHTMLを扱うことの利点については、Hotwireサイトで詳しく知ることができます。以下は、Turboがこれを可能にするテクニックについて書いていきます。 - -## Turbo ドライブ: 永続的プロセス内でのページの変更 - -今までのシングルページ・アプリケーションを、古臭くいちいちページ遷移するやり方と比べたときの主な魅力は、動作のスピードです。SPAがそのスピードを可能にできるのは、アプリケーションのプロセスをいちいち破棄することなく、本当にページが遷移する際にのみ初期化するからです。 - -Turboドライブは、それと同じスピードを、SPAと同じ永続的プロセスモデルによって可能にしています。ただしそのために、その枠組みにのっとったアプリケーションを職人芸で組み上げる必要はありません。メンテナンスの必要なクライアントサイドのルーターも、慎重に管理しなければならないステート（状態）もありません。永続的プロセスはTurboによって管理されるため、プログラマは自分のサーバーサイドのコードだけを書けばいいのです。まるで、ゼロ年代初頭ーーいまのSPAモンスターの複雑性と関わりなく穏やかだったころに、時が戻ったように！ - -これは、同じドメインにリンクされた``がクリックされるたびに、それを横から掠め取ることで実現されます。具体的には、対象範囲のリンクをクリックするたび、Turboドライブは、ブラウザがそのリンクに遷移するのを押しとどめ、ブラウザのURLをHistory APIを使って更新し、`fetch`を使って新しいページをリクエストし、それからHTMLレスポンスを描画します。 - -フォームでも同じ扱いをします。フォームがサブミットされると、それはTurboドライブの`fetch`リクエストに変換され、TurboドライブはそのリクエストからのリダイレクトとHTMLレスポンスの描画を行います。 - -描画中、Turboドライブは現在の``要素を即座に置き換え、``要素の内容をマージします。JavaScriptのWindowとdocument objects、そしてその`` 要素は、前の描画から次の描画へと移る際も保持されます。 - - -*Turboドライブと直接やり取りして、ユーザーのアクションがどのように画面遷移につながるか、リクエストのライフサイクルへフックするかを制御することもできますが、ほとんどの場合、いくつかの規約を採用することで、置き換え時のスピードを速くすることができます。 - -## Turboフレーム: 複雑なページをパーツに分ける - -多くのWebアプリケーションは、いくつかの独立したセグメントを含んだページを提供します。例えば意見を交わせるディスカッションのためのページであれば、トップにナビゲーションバー、中央にメッセージのリスト、下に新しいメッセージの投稿フォーム、そして関連トピックの並んだサイドバーといった具合です。このディスカッション・ページを生成しようとするなら、普通は、一連のやり方で各セグメントを生成し、それを一つにまとめて、その結果を単一のHTMLレスポンスとしてブラウザに送ることになるでしょう。 - -Turboフレームを使うと、これらの独立したセグメントを、それぞれ別のフレームに配置することができます。そのフレームは、自身のナビゲーションの範囲が限定されており、遅延して読み込まれる場合があります。範囲の限定されたナビゲーションとはつまり、フレーム内でのすべてのやり取り、たとえばリンクのクリックやフォームの送信がフレームの内側で起こり、ページの他の部分は更新やリロードが起こらないということです。 - -独立したセグメントを、それ専用のナビゲーション・コンテキスト内にラップするためには、``で囲みます。 -例としては下記のようになります。 - -```html - -
- ... -
- -``` - -上記のフォームを送信した際、Turbo は、リダイレクトされた HTML レスポンスから``要素に合致する部分を抽出し、既存の`new_message`フレーム要素の中身と、取得した要素の内容を入れ替えます。ページ内の他の部分は、そのまま残ります。 - -フレームは、ナビゲーションの範囲を限定するだけでなく、その内容の読み込みを遅延させることもあります。フレームの読み込みを遅延させるためには、自動的に読み込まれるURLを値にもった`src`属性を付与します。範囲の限定されたナビゲーションを使って、Turboは結果のレスポンスから合致するフレームを探索・抽出し、内容を置き換えます。 - -```html - -

This message will be replaced by the response from /messages.

- -``` - -これは、古めかしいフレーム、ともすると`