|
| 1 | +import { Metadata } from "next"; |
| 2 | +import { Heading } from "@/markdown/heading"; |
| 3 | + |
| 4 | +export const metadata: Metadata = { |
| 5 | + title: "コード実行環境について", |
| 6 | + description: "my.code(); で使用しているコード実行環境の仕組みを説明します。", |
| 7 | +}; |
| 8 | + |
| 9 | +export default function RuntimePage() { |
| 10 | + return ( |
| 11 | + <div className="p-4 pb-16 w-full max-w-docs mx-auto"> |
| 12 | + <Heading level={1}>コード実行環境について</Heading> |
| 13 | + <p className="my-4 opacity-80"> |
| 14 | + my.code(); では、プログラミング言語ごとに異なる仕組みでコードを実行しています。 |
| 15 | + 以下にそれぞれの言語の実行環境について説明します。 |
| 16 | + </p> |
| 17 | + |
| 18 | + <Heading level={2}>ブラウザ内で実行される言語</Heading> |
| 19 | + <p className="my-4 opacity-80"> |
| 20 | + 以下の言語は、サーバーへの通信を行わず、すべてお使いのブラウザ内で実行されます。 |
| 21 | + そのため、インターネット接続が不安定な環境でも、一度ページが読み込まれれば実行可能です。 |
| 22 | + </p> |
| 23 | + |
| 24 | + <div className="flex flex-col gap-6 my-6"> |
| 25 | + <div className="card bg-base-200 shadow-sm"> |
| 26 | + <div className="card-body"> |
| 27 | + <h3 className="card-title">Python</h3> |
| 28 | + <p> |
| 29 | + Python は{" "} |
| 30 | + <a |
| 31 | + className="link link-primary" |
| 32 | + href="https://pyodide.org/" |
| 33 | + target="_blank" |
| 34 | + rel="noopener noreferrer" |
| 35 | + > |
| 36 | + Pyodide |
| 37 | + </a>{" "} |
| 38 | + を使用して実行されます。Pyodide は CPython(Python の公式実装)を |
| 39 | + WebAssembly にコンパイルしたものです。Python コードはブラウザ内の |
| 40 | + Web Worker 上で動作するため、ページの描画をブロックせずに実行できます。 |
| 41 | + </p> |
| 42 | + </div> |
| 43 | + </div> |
| 44 | + |
| 45 | + <div className="card bg-base-200 shadow-sm"> |
| 46 | + <div className="card-body"> |
| 47 | + <h3 className="card-title">Ruby</h3> |
| 48 | + <p> |
| 49 | + Ruby は{" "} |
| 50 | + <a |
| 51 | + className="link link-primary" |
| 52 | + href="https://ruby.github.io/ruby.wasm/" |
| 53 | + target="_blank" |
| 54 | + rel="noopener noreferrer" |
| 55 | + > |
| 56 | + ruby.wasm |
| 57 | + </a>{" "} |
| 58 | + を使用して実行されます。ruby.wasm は公式の CRuby を WebAssembly |
| 59 | + にコンパイルしたものです。Python と同様に Web Worker 上で動作します。 |
| 60 | + </p> |
| 61 | + </div> |
| 62 | + </div> |
| 63 | + |
| 64 | + <div className="card bg-base-200 shadow-sm"> |
| 65 | + <div className="card-body"> |
| 66 | + <h3 className="card-title">JavaScript</h3> |
| 67 | + <p> |
| 68 | + JavaScript はブラウザ自身の JavaScript エンジンを利用して実行されます。 |
| 69 | + コードは安全なサンドボックス環境内で評価されます。 |
| 70 | + </p> |
| 71 | + </div> |
| 72 | + </div> |
| 73 | + |
| 74 | + <div className="card bg-base-200 shadow-sm"> |
| 75 | + <div className="card-body"> |
| 76 | + <h3 className="card-title">TypeScript</h3> |
| 77 | + <p> |
| 78 | + TypeScript は{" "} |
| 79 | + <a |
| 80 | + className="link link-primary" |
| 81 | + href="https://www.npmjs.com/package/@typescript/vfs" |
| 82 | + target="_blank" |
| 83 | + rel="noopener noreferrer" |
| 84 | + > |
| 85 | + @typescript/vfs |
| 86 | + </a>{" "} |
| 87 | + を使用してブラウザ内でコンパイルされ、その後 JavaScript |
| 88 | + と同じ仕組みで実行されます。 |
| 89 | + </p> |
| 90 | + </div> |
| 91 | + </div> |
| 92 | + </div> |
| 93 | + |
| 94 | + <Heading level={2}>外部サービスを利用して実行される言語</Heading> |
| 95 | + <p className="my-4 opacity-80"> |
| 96 | + 以下の言語は、外部のコンパイル・実行サービス( |
| 97 | + <a |
| 98 | + className="link link-primary" |
| 99 | + href="https://wandbox.org/" |
| 100 | + target="_blank" |
| 101 | + rel="noopener noreferrer" |
| 102 | + > |
| 103 | + Wandbox |
| 104 | + </a> |
| 105 | + )の API を通じて実行されます。コードはサーバーに送信されてコンパイル・実行され、 |
| 106 | + 結果がブラウザに返されます。そのため、実行にはインターネット接続が必要です。 |
| 107 | + また、入力したコードが Wandbox のサーバーに送信されることをご了承ください。 |
| 108 | + </p> |
| 109 | + |
| 110 | + <div className="flex flex-col gap-6 my-6"> |
| 111 | + <div className="card bg-base-200 shadow-sm"> |
| 112 | + <div className="card-body"> |
| 113 | + <h3 className="card-title">C++</h3> |
| 114 | + <p> |
| 115 | + Wandbox の g++ (GNU C++ Compiler) を使用してコンパイル・実行されます。 |
| 116 | + 最新の安定版コンパイラが使用され、Boost ライブラリも利用可能です。 |
| 117 | + 実行時にエラーが発生した場合は、スタックトレースが表示されます。 |
| 118 | + </p> |
| 119 | + </div> |
| 120 | + </div> |
| 121 | + |
| 122 | + <div className="card bg-base-200 shadow-sm"> |
| 123 | + <div className="card-body"> |
| 124 | + <h3 className="card-title">Rust</h3> |
| 125 | + <p> |
| 126 | + Wandbox の rustc (Rust コンパイラ) を使用してコンパイル・実行されます。 |
| 127 | + 最新版のコンパイラが使用されます。 |
| 128 | + </p> |
| 129 | + </div> |
| 130 | + </div> |
| 131 | + </div> |
| 132 | + |
| 133 | + <div className="alert alert-warning alert-dash my-6"> |
| 134 | + <svg |
| 135 | + xmlns="http://www.w3.org/2000/svg" |
| 136 | + className="h-6 w-6 shrink-0 stroke-current" |
| 137 | + fill="none" |
| 138 | + viewBox="0 0 24 24" |
| 139 | + > |
| 140 | + <path |
| 141 | + strokeLinecap="round" |
| 142 | + strokeLinejoin="round" |
| 143 | + strokeWidth="2" |
| 144 | + d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" |
| 145 | + /> |
| 146 | + </svg> |
| 147 | + <div> |
| 148 | + <p> |
| 149 | + 外部サービスを利用して実行される言語(C++・Rust)では、入力したコードが外部サーバーに送信されます。 |
| 150 | + 個人情報や機密情報を含むコードは入力しないようにしてください。 |
| 151 | + </p> |
| 152 | + </div> |
| 153 | + </div> |
| 154 | + </div> |
| 155 | + ); |
| 156 | +} |
0 commit comments