この記事は、Ionic Frameworkアドベントカレンダー2日目の記事です。
StencilJSの日本語翻訳プロジェクトについて説明します。
StencilJS日本語サイト
StenilJSとは
Ionicチームが開発したWebコンポーネント作成ライブラリです。StencilJSを使うと、JSX + TypeScript + SASSでWebコンポーネントを開発できます。
StencilJSは次の機能を持ってます。
- Virtual DOM
- 非同期レンダリング(inspired by React Fiber)
- リアクティブデータバインディング
- TypeScript
- JSX
最近では、Ionicに限らず利用され始めてます。アップルがStencilJSの求人をだしていたり(Apple TVのサイトで使ってる)、Amazon AmplifyのドキュメントがStencilJSで構築されていたりします。URL
StencilJSの日本語翻訳プロジェクト
StencilJSには、日本語翻訳プロジェクトがあります。ただし、この記事を書いている段階ではまだ、トップページしか翻訳されていません。
StencilJS日本語サイト
2019/8月ごろに勢いでjpドメインを取得しましたが、そもそも翻訳プロジェクトをやったことがない＆技術書典7＆技書博2と執筆活動が重なり、今日まで手を出せずにいました。
というわけで、アドカレ駆動で、コントリビュート手段＆ジポジトリを整備することにしたのです。
コントリビュートするには
改めて、本ドキュメントにコントリビュートする手段ですが、次のワークフローで行います。
ワークフロー
- 本レポジトリをForkする
- 翻訳作業のIssueを作成する
- 翻訳する
- プルリクエストを作成する
0. 本レポジトリをForkする
まずは、このStencilJS日本語ドキュメントのリポジトリをFolkしましょう。
1. 翻訳作業のIssueを作成する
Issueをたてて、自分が翻訳する場所を明確にしましょう。他の人と被らないようにする配慮です。
参考：https://github.com/ionic-jp/stencil-docs/issues/1
2. 翻訳する
翻訳しましょう。翻訳するファイルは「./src/docs_ja」ファルダの中にある.mdファイルが対象になります。
一部、src/componentsフォルダの中にあるlanding-page.tsxとかも対象になりますが、追々考えます。(アイデア求)
3. プルリクエストを作成する
翻訳が完了したら、プルリクエストを送ってください。（たぶん）私が、マージ作業を行うので、マージされると、Netlifyが自動的に動いて、本番環境に反映されます。
参考：https://github.com/ionic-jp/stencil-docs/pull/2
まとめ
いかがでしたか？
結構、簡単だと思いませんか？
StencilJSは日本ではまだあまりメジャーではありませんが、海外では使われ始めています。今後、StencilJSを使ったUIフレームワークがどんどん登場し、日本でもメジャーな存在になる可能性がありあす。
なので、興味のある方は先行投資と思って、いまのうちに日本語翻訳プロジェクトに強力お願いします。
翻訳作業を通して、StencilJSについて、深く知ることができる良い機会になると思います。
それでは。
付録
日本語翻訳プロジェクトを作るに当たって、考慮した点を残しておきます。
フォルダ構成
StencilJSの公式ドキュメントの変更を取り込むため、docsフォルダとdocs_jaフォルダに分けました。docsフォルダが元の英語ファイルです。
ちなみに、docs_jaにフォルダを変更するに当たって、scriptsファイルを書き換える必要があります。
変更したのは以下のファイル。
scripts/markdown-to-html.ts
scripts/site-structure.ts
コントリビュート手順について
これは、ionic-docsの日本語翻訳プロジェクトを参考にしました。
こちらは、本家Ionic Blogでも取り上げられたりと、盛り上がっているので是非みてみてください。
Ionic Framework日本語ドキュメント
Blog：My Ionic Story