![[kaneko lab.]](https://www.kkaneko.jp/info/logo_png.png){kind=logo}
オンラインプログラミング環境のガイド
オンラインのプログラミング環境には，ブラウザ上でコードの編集・実行・デバッグを行う開発環境（IDE）と，プログラミングの概念理解や基礎学習を支援する学習支援プラットフォームがある．本資料は，プログラミングを学ぶ学生や，新しい環境を試したい技術者を対象とし，無料で利用を開始でき，学習・開発に広く使われている環境を取り上げる．開発環境にはGoogle Colaboratory，GitHub Codespacesなど，学習支援プラットフォームにはScratch，Code Combat，Python Tutor，VisuAlgoなどがある（いずれも代表的な一例であり，本文ではこれら以外の環境も併せて解説する）．これらの環境を利用することで，初学者から上級者まで段階的に学習できる．
各サービスの機能・対応言語・無料枠は変更されることがある．無料版には機能やリソースの制限があるため，利用前に公式サイトで最新の条件を確認し，用途に応じて選択する．
目的別の選択指針：AI・データサイエンスにはGoogle Colaboratory，チーム開発にはGitHub Codespaces，プログラミング入門にはScratchやCode Combat，アルゴリズム学習にはVisuAlgoやPython Tutorが適している．詳細は「選択ガイドライン」を参照する．
説明：オンラインのプログラム開発環境 [PDF]，[パワーポイント]
【目次】
1. 開発環境（IDE）
IDE（Integrated Development Environment：統合開発環境）は，ソースコードの編集，コンパイル，実行，デバッグなどの機能を統合したソフトウェアである．オンラインIDEでは，これらの機能をブラウザ上で利用できるため，ローカル環境を構築せずにプログラミングを開始できる．本節では，用途別に主要なオンラインIDEを紹介する．
本節では，編集・実行・デバッグを統合した狭義のIDEに加えて，開発したアプリケーションの公開・配信を主目的とする基盤（Streamlit Cloud，Cloudflareなど）も，開発の流れの中で利用する環境として併せて取り上げる．
クラウドベースの統合開発環境
クラウドベースの統合開発環境は，計算リソースやストレージをクラウド上に置き，ブラウザからアクセスして利用する形態である．ローカルPCの性能に依存せず，高度な計算処理やチーム開発が可能である．
Google Colaboratory
- URL：https://colab.research.google.com
- 概要：
- Googleが提供するクラウドベースのノートブック環境
- Jupyterノートブック形式（コードと実行結果，説明文を1つのドキュメントにまとめる形式）で対話的に開発できる
- ブラウザ上でPythonコードを記述・実行できる
- データサイエンスやAI開発に適している
- 機能・特徴：
- 多数のパッケージが事前インストール済みで，環境構築が不要
- GPU/TPU（機械学習向けの高速演算装置）を利用できる
- テキストと実行可能コードを1つのドキュメントで扱える
- グラフや図を生成し，結果を視覚的に表示できる
- Google Driveと統合し，ファイルの保存・管理ができる
- 無料版：
- 基本機能を無料で利用できる
- GPUやTPUを一定時間利用できる（長時間の計算や大規模プロジェクトには制限がある）
- 使用可能言語：Python
- 説明：Google Colaboratory の使い方
GitHub Codespaces
- URL：https://github.com/codespaces
- 概要：
- GitHubが提供するクラウドベースの開発環境
- Visual Studio Codeと統合され，ブラウザでプログラムを記述・実行できる
- GitHubリポジトリ（ソースコードを管理する保存場所）と統合し，デプロイ（開発したプログラムを実際に動作する環境へ配置すること）やバージョン管理が容易である
- 機能・特徴：
- ソースコード管理，エディタでの編集，クラウドでの実行，デバッグができる
- GitHubリポジトリと連携し，リポジトリのクローン，環境構築，設定同期を自動化できる
- コンテナ化された環境（独立した実行環境を仮想的に構築する技術）により，チーム開発で環境を統一できる
- 自動ビルドに対応し，拡張機能を追加できる
- 無料版：
- 個人アカウントには毎月一定の無料枠が提供される（目安として月120コア時間，ストレージ15GB）
- 無料利用の条件はGitHubのアカウントプランによって異なるため，最新の条件を確認する
- 使用可能言語：Python，JavaScript，TypeScript，Ruby，Go，Java，PHP，C++，C#，Rust，Dockerfile など
JupyterHub
- URL：https://jupyter.org/hub
- 概要：
- マルチユーザー対応のJupyter Notebook環境を提供する
- 複数のユーザーが独立した作業空間でプログラミングや解析を実行できる
- ユーザーごとに独立したPython実行環境を提供し，ユーザー間のリソース競合やデータの混在を防ぐ
- 機能・特徴：
- ユーザー認証機能を備える．Google，GitHub，LDAP（ディレクトリサービスの標準プロトコル）などの外部認証システムと連携し，利用者の身元を確認する．GoogleアカウントによるSSO（Single Sign-On：一度の認証で複数サービスを利用できる仕組み）に対応する
- 環境の分離機能を備える．各ユーザーは，ライブラリ，システム設定，データなど，独自のJupyter環境を保持しカスタマイズできる
- 基盤となるシステム：
- Jupyter Notebook：ウェブブラウザ上で動作する対話的開発環境．プログラムを実行し，結果を直接可視化できる
- JupyterLab：Jupyter Notebookを拡張した統合開発環境．ノートブック，テキストエディタ，対話的プログラム実行環境を統合する
- 無料版：オープンソースソフトウェアであり無償で導入できる（サーバーの用意・運用は利用者が行う）
- 使用可能言語：Python，R，Julia（基本カーネル）
特定用途向け開発環境
以下の開発環境は，データアプリケーション開発やエッジコンピューティングなど，特定の用途に特化した機能を提供する．
Streamlit Cloud
- URL：https://streamlit.io/cloud
- 概要：
- Pythonベースのデータアプリケーション開発・ホスティングプラットフォーム
- データサイエンスやAIアプリケーションの開発とデプロイができる
- 機能・特徴：
- Pythonコードからウェブアプリケーションを作成できる
- データの可視化や対話的な機能を実装できる
- GitHubと連携し，自動デプロイに対応する
- データサイエンス，機械学習ライブラリと統合できる
- 無料版：
- パブリックリポジトリの場合は無料でホスティングできる
- アプリケーションごとに使用できるリソースに制限がある
- 一定期間アクセスがないとアプリケーションが停止し，再起動の操作が必要になる
- 使用可能言語：Python
Cloudflare
- URL：https://developers.cloudflare.com
- 概要：
- エッジコンピューティングプラットフォーム（ユーザーに近い場所で処理を行う分散コンピューティング基盤）として機能するクラウド開発環境
- グローバルなCDN（Content Delivery Network：コンテンツ配信ネットワーク）を活用した開発とデプロイができる
- 機能・特徴：
- Cloudflare Workersによるサーバーレス（サーバーの構築・管理を利用者が行わない方式）のプログラム実行環境（JavaScript，WebAssembly対応）を提供する
- Pages機能によるJAMstack（JavaScript，API，Markupを組み合わせたWebアーキテクチャ）アプリケーションのホスティングができる
- KV，D1，R2などのエッジデータストレージサービスを提供する
- グローバルネットワークを活用したアプリケーション配信ができる
- 無料版：
- Workers：1日10万リクエストまで無料
- Pages：無料枠で静的サイトをホスティングできる
- 基本的なCDN機能とDDoS保護（大量アクセスによる攻撃からの防御）を含む
- 使用可能言語：JavaScript，TypeScript，Python，Rust（WebAssembly）など
多言語対応開発環境
以下の開発環境は，複数のプログラミング言語に対応しており，言語の学習や比較，多様なプロジェクトでの利用に適している．
Coding Ground
- URL：https://www.tutorialspoint.com/codingground.htm
- 概要：
- ブラウザベースの開発環境で，幅広い開発用途に対応する
- 機能・特徴：
- コンパイラ／インタプリタがブラウザ上で動作する
- コードの編集・実行・共有，ファイルの作成・読み書きができる
- 複数のプログラムファイルを組み合わせられる
- Web開発，プログラミング教育，データサイエンス向けの機能を提供する
- 無料版：基本機能を無料で利用できる（詳細は公式サイトで確認する）
- 使用可能言語：Python，C，Java，JavaScript，R，Octave/MATLAB，SQL，Bash，アセンブリ，その他多数
軽量な開発環境
以下の開発環境は，インストール不要で軽量に動作し，学習や簡易的なコード実行に適している．機能は限定されるが，起動が速く，手軽にコードを試せる．
GDB online
- URL：https://www.onlinegdb.com/
- 概要：
- オンラインでC/C++のコンパイルとデバッグができる環境
- 学習環境としても利用できる
- 機能・特徴：
- GDBデバッガ（GNU Debugger：プログラムの実行を制御し，変数の値や処理の流れを確認できるツール）を組み込み，対話的なデバッグができる
- コードのコンパイル・実行・デバッグ・共有ができる
- バグの特定と修正を支援する
- コードアシスト機能（入力中のコードを補完・提案する機能）を提供する
- 無料版：基本機能を無料で利用できる
- 使用可能言語：C，C++，Java，Python，PHP，C#，OCaml，VB，HTML，Ruby，Perl，Pascal，R，Fortran，Haskell，アセンブリ，Objective-C，SQLite，JavaScript，Prolog，Swift，Rust，Go，Bash など
JSFiddle
- URL：https://jsfiddle.net/
- 概要：
- HTML，CSS，JavaScriptをリアルタイムでテスト・確認できるオンラインプラットフォーム
- 機能・特徴：
- 自動更新機能（コード変更時に画面を自動で再描画する機能）により，結果を即時確認できる
- 内蔵コンソール（実行結果やエラーを表示する画面）で動作を確認できる
- フィドルコレクション（作成したコード集）を作成できる
- ソーシャルメディアリンクを追加できる
- 無料版：基本機能を無料で利用できる
- 使用可能言語：HTML，CSS，JavaScript
- 説明：HTML，JavaScript プログラミングの体験学習ガイド（JSFiddle を使用）
Paiza.IO，PaizaCloud IDE
- URL：https://paiza.io/
- 概要：
- 多言語対応のオンラインプログラミング環境
- Python，C，Java，JavaScript，RのほかにSQLなど多数の言語に対応する
- 表示は日本語に対応する
- 一定の条件下でファイル操作ができる
- 機能・特徴：
- ブラウザ上でコードを記述し，実行結果を即時確認できる
- インストール不要で利用できる
- 一定の条件下でファイルのアップロード・ダウンロードに対応する
- ユーザーインターフェースが日本語で表示される
- 作成したコードを他のユーザーと共有できる
- 無料版：基本機能を無料で利用できる
- 使用可能言語：Python，C，Java，JavaScript，R，SQL，その他多数
- 説明：Python3，Java，C，R，JavaScript，Ruby，Scheme，Bash のプログラミング体験学習ガイド（paiza.IOを使用）
- 説明：PaizaCloud IDE の利用登録手順
AWS Cloud9
- URL：https://aws.amazon.com/jp/cloud9/
- 注意：AWS Cloud9 は，新規ユーザーの受付を終了したとされる．これから利用を始める場合は他の環境を検討し，最新の提供状況をAWS公式サイトで確認する．以下は従来の機能の説明である．
- 概要：
- AWS（Amazon Web Services）が提供するクラウドベースの統合開発環境
- 機能・特徴：
- Ruby on Rails，Apache + PHP + MySQL，WordPressを実行できる
- ファイル入出力プログラムを作成できる
- コマンドライン（文字入力で操作する画面）でビルドや起動を操作できる
- 無料版：AWSの無料利用枠の範囲内で利用できる（詳細はAWS公式サイトで確認する）
- 使用可能言語：Python，C，JavaScript，Ruby など
- 説明：プログラミング言語を AWS Cloud9 で実行する方法（Python，C，JavaScript，Ruby）（Cloud9 の登録が必要）
2. 学習支援プラットフォーム
学習支援プラットフォームは，プログラミングの概念理解や基礎学習を支援するサービスである．視覚的なフィードバックやゲーム要素を取り入れ，初学者が取り組みやすい環境を提供する．
ビジュアルプログラミング環境
ビジュアルプログラミング環境では，テキストによるコード記述ではなく，ブロックやアイコンを組み合わせてプログラムを作成する．構文エラー（文法上の誤り）が生じにくく，プログラミングの論理構造の学習に集中できる．
Scratch
- URL：https://scratch.mit.edu/
- 概要：
- MIT（マサチューセッツ工科大学）が開発した視覚的プログラミング言語
- 小中高校生も利用できる教育用プラットフォーム
- 機能・特徴：
- ブロックを組み合わせて，直感的にプログラミングできる
- アニメーションやゲームを作成できる
- 日本語表示に対応する
- 無料版：無料で利用できる
- 説明：Scratch プログラミング，Scratch のキャラクタ [PDF]，[パワーポイント]
Code Combat
- URL：https://codecombat.com/
- 概要：
- ゲーム形式でプログラミングを学習できるプラットフォーム
- 機能・特徴：
- Python，JavaScript，C++などの言語を学習できる
- 独自のコードエンジンとインタプリタにより，初心者向けの学習環境を提供する
- 日本語表示に対応する
- 無料版：基本機能を無料で利用できる
- 説明：Python 演習（Code Combatを使用） [PDF]，[パワーポイント]，[HTML]
プログラム実行可視化ツール
プログラム実行可視化ツールは，コードの実行過程を視覚的に表示し，変数の変化やアルゴリズムの動作を理解しやすくする．デバッグ技術の習得にも利用できる．
Python Tutor
- URL：https://pythontutor.com/
- 概要：
- プログラムの実行過程を1ステップずつ視覚的に確認できる，実行可視化ツール
- 機能・特徴：
- プログラムの実行過程をステップ実行（処理を1行ずつ進める実行方法）で可視化する
- 変数やデータ構造の状態変化を図示する
- 再帰呼び出し（関数が自分自身を呼び出す処理）など複雑な概念の理解を支援する
- AIチューター（学習を補助する対話型のAI機能）を備える
- 使用可能言語：Python，Java，C，C++，JavaScript
- 無料版：無料で利用できる
- 説明：Python，Java，C プログラミングの体験学習（Python Tutor を活用したプログラミング体験）
- 説明スライド：Python Tutor でのPython プログラム実行 [PDF]，[パワーポイント]
VisuAlgo
- URL：https://visualgo.net/en
- 概要：
- データ構造とアルゴリズムの学習を支援するオンラインプラットフォーム
- コンピュータサイエンス学習者向けである
- 機能・特徴：
- アニメーションによる可視化機能を提供する
- 対話的な練習問題を用意する
- eラーニング機能（オンラインで学習を進める機能）を提供する
- 各種アルゴリズムを擬似言語（特定の言語によらない説明用の記述）で学習できる
- 対応内容：ソート，グラフ，木構造，NP完全問題（多項式時間で解くアルゴリズムが知られていない問題群），ネットワークフローなど
- 無料版：無料で利用できる
- 説明：データ構造とアルゴリズムを演習できるサイト VisuAlgo [PDF]，[パワーポイント]
3. 選択ガイドライン
オンラインプログラミング環境の選択は，学習段階や目的によって異なる．以下に，習熟度別・目的別の推奨環境を示す．本資料で取り上げた環境を対象とし，主な用途を示す．
初心者向け
- プログラミング入門
- Scratch：ビジュアルで直感的なプログラミング入門
- Code Combat：ゲーム形式での基礎学習
- 基礎的なプログラミング学習
- Python Tutor：段階的な学習と視覚的理解
- trinket：シンプルな環境での実践
- Paiza.IO：日本語表示で手軽にコードを試せる多言語環境
- アルゴリズム学習
- VisuAlgo：アルゴリズムの視覚的理解
- Python Tutor：アルゴリズムの動作確認
- 特定言語の手軽な実行・デバッグ
- GDB online：C/C++のコンパイルとデバッグの学習
- JSFiddle：HTML/CSS/JavaScriptの即時確認
中級者・上級者向け
- Web開発
- Replit：統合的な開発環境と即時デプロイ
- Cloudflare：エッジ環境でのアプリ配信・サーバーレス実行
- 特定分野
- AI，データサイエンス：Google Colaboratory
- データアプリの公開：Streamlit Cloud
- チーム開発：GitHub Codespaces，Replit
- 多人数での解析環境の共有：JupyterHub
- 多言語開発：Coding Ground，Replit
- 実践的開発
- オープンソース開発：GitHub Codespaces
4. 注意事項と利用のポイント
オンラインプログラミング環境を活用するために，以下の点に留意する．
- 無料版の制限について
- 機能の制限を確認する
- リソース使用量の制限に注意する
- アイドル時の自動停止などの仕様を確認する
- 用途に応じて有料版の利用を検討する
- サービスの提供状況について
- サービスは，提供の終了や新規受付の停止が行われることがある（例：AWS Cloud9は新規ユーザーの受付を終了したとされる）
- 学習や開発の前に，対象のサービスが現在も新規利用できるか公式サイトで確認する
- 開発環境の選択
- チーム開発では環境の統一性を確保する
- 学習目的の場合は，段階的なプラットフォームの移行を検討する
- プロジェクトの規模に応じた環境を選択する
- 学習時の注意点
- 基礎からの段階的な学習を行う
- 実践的なプロジェクトへの段階的な移行を検討する
- 必要に応じて複数の環境の併用を検討する