こんにちは、Habr！
最近、Kotlin Playgroundの1.4.0バージョンをリリースしました。これは、Roma Belovがブログ投稿 PMM Kotlinで書いたものです。
停止...停止...
Kotlin Playgroundとは何ですか？
Kotlin Playgroundは、Webページに統合できる完全なKotlinコードエディターです。
これを行う方法？
すべてが信じられないほど簡単です。ヘッダーに1行のスクリプトを追加する価値があります。
<script src="https://unpkg.com/kotlin-playground@1" data-selector="code"></script>
data-selectorは、すべてのcodeブロックが魔法のようにKotlin実行可能コードに変わることを示しています。
他の方法を試してみましょう、例えば：
<script src="https://unpkg.com/kotlin-playground@1"></script> <script> document.addEventListener('DOMContentLoaded', function() { KotlinPlayground('.code-blocks-selector'); }); </script>>
または、古き良きソビエトのnpmを通じて：
npm install kotlin-playground -S
さらに
import playground from 'kotlin-playground'; document.addEventListener('DOMContentLoaded', () => { playground('code'); });
これで、Kotlin Playgroundを「インストール」する方法を学びました。それがどのように機能するかを見てみましょう。
habrでiframeを使用できないため、GIFの例が提供されます。 ライブサンプルはGitHub Pagesで見ることができます。また、プレイグラウンドがすでにユーザーの心をつかんでいるさまざまなサイトで見ることができます（詳細は後述）。
さあ、始めましょう。
Kotlin Playgroundは、このバージョンで4つのプラットフォームをサポートしcanvas 。これらは、属性data-target-platform="platform"を使用して設定されcanvas 。これらはjvm 、 js 、 junitおよびcanvasです。
デフォルトでは、 JVMプラットフォームがJVMます。 最も簡単な例を次に示します。
冗長性のためにコードのいくつかのセクションを非表示にしたい場合は、いくつかの構文糖を使用して、必要なコードを間に置くことができます
//sampleStartおよび//sampleEnd 。
自動補完を使用するには、 Ctrl + SpaceまたはCmd + Space Ctrl + Spaceだけです。
テストを実行するには、 junitプラットフォームを指定します。
これは、Kotlinを使用したキャンバス描画の一例です。 その他の例については、 こちらをご覧ください 。
Kotlin Playgroundは現在どこで使用されていますか？
- Kotlinの公式ウェブサイト上のドキュメント。
ドキュメントのすべての新しい部分には、たとえば、 Kotlin 1.2またはKotlin Coroutines の新機能などのライブサンプルが既に付属しています。 - 例によるKotlinのすべての例は、Kotlin Playgroundを使用します。
- Kotlinフォーラムは遊び場をサポートしています。
run-kotlin構文でrun-kotlinを使用すれば十分です。 以下に例を示します。 - WordPressプラグインを使用して、さまざまなブログにプレイグラウンドを統合できます。これはKotlin Blogで行っています。
Kotlin Playgroundの使用はどこで推奨されますか？
間違いなく、このコンポーネントは読み取りの品質を向上させ、コードサンプルの表現力を高めます。そのため、すべての作成者がこのライブラリを作成するときに使用することをお勧めします。
- トレーニングコース。
- スライドまたは書籍の付属資料。
- ライブラリとフレームワークのドキュメント
- コードサンプルのブログ投稿
Kotlin Playgroundのすべての機能について詳しくはこちらをご覧ください。すぐにプレイできます。
よろしくお願いします！
素敵なコトリンを持っている:)