![[kaneko lab.]](https://www.kkaneko.jp/info/logo_png.png){kind=logo}
オンラインプログラミング環境のガイド
オンラインのプログラミング環境には，統合開発環境のGoogle ColaboratoryやGitHub Codespaces，Replitなどや，学習支援プラットフォームのScratchやCode Combat，Python Tutor，VisuAlgoがある．これらの環境を活用することで，初学者から上級者まで段階的に学習できる．無料版には機能やリソースの制限があるため，用途に応じた選択が重要である．
説明：オンラインのプログラム開発環境 [PDF]，[パワーポイント]
【目次】
1. 開発環境（IDE）
IDE（Integrated Development Environment：統合開発環境）は，ソースコードの編集，コンパイル，実行，デバッグなどの機能を統合したソフトウェアである．オンラインIDEでは，これらの機能をブラウザ上で利用できるため，ローカル環境の構築なしにプログラミングを開始できる．本節では，用途別に主要なオンラインIDEを紹介する．
クラウドベースの統合開発環境
クラウドベースの統合開発環境は，計算リソースやストレージをクラウド上に配置し，ブラウザからアクセスして利用する．ローカルPCの性能に依存せず，高度な計算処理やチーム開発が可能である．
Google Colaboratory
- URL：https://colab.research.google.com
- 概要：
- Googleが提供するクラウドベースのノートブック環境
- Jupyterノートブック形式（コードと実行結果，説明文を1つのドキュメントにまとめる形式）でインタラクティブに開発可能
- ブラウザ上でPythonコードを記述・実行
- データサイエンスやAI開発に適している
- 機能，特徴：
- Python特化型の開発環境
- 多数のパッケージが事前インストール済みで環境構築不要
- GPU/TPU（機械学習向け高速演算装置）の利用が可能
- リッチテキストと実行可能コードを1つのドキュメントで扱える
- グラフや図の生成が容易で，結果を視覚的に表示可能
- Google Driveとの統合でファイル保存・管理が容易
- 無料版：
- 基本機能は無料で利用可能
- GPUやTPUを一定時間利用可能（長時間の計算や大規模プロジェクトには制限あり）
- 使用可能言語：Python
- 説明：Google Colaboratory の使い方
GitHub Codespaces
- URL：https://github.com/codespaces
- 概要：
- GitHubが提供するクラウドベースの開発環境
- Visual Studio Codeと完全統合され，ブラウザでプログラムを記述・実行可能
- GitHubリポジトリ（ソースコード管理の保存場所）との統合によりデプロイやバージョン管理が容易
- 機能，特徴：
- ソースコード管理，エディタでの直接編集，クラウドベースでの実行，デバッグ
- GitHubリポジトリとの連携でリポジトリのクローン，環境構築，設定同期が自動化
- コンテナ化された環境（独立した実行環境を仮想的に構築する技術）はチーム開発での環境統一に効果的
- 自動ビルドのサポート，拡張機能の追加も可能
- 無料版：
- 一定の計算リソースが提供される
- 無料利用の詳細は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（基本カーネル）
Replit
- URL：https://replit.com
- 概要：
- ブラウザベースのフルスタック開発環境（フロントエンドとバックエンドの両方を扱える環境）
- フロントエンドからバックエンドまでの開発が可能
- チームでの共同開発に対応
- 機能，特徴：
- AIアシスタントによるコード生成とチャット機能
- ソースコードの編集・実行，プロジェクト作成とデプロイメント，ホスティング，データベース利用
- チームでの共同作業をサポート
- 無料版：
- リソース制限あり
- アイドル状態が続くとセッションが停止する（長時間の継続作業には不向き）
- 使用可能言語：Python，JavaScript，Ruby，Java，C++，PHP，HTML/CSS，Swift，Go，Rust，Julia，Bash など
特定用途向け開発環境
以下の開発環境は，データアプリケーション開発やエッジコンピューティングなど，特定の用途に特化した機能を提供する．
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，アセンブリ，その他多数
軽量な開発環境
以下の開発環境は，インストール不要で軽量に動作し，学習や簡易的なコード実行に適している．機能は限定されるが，起動が速く，手軽にコードを試すことができる．
trinket
- URL：https://trinket.io/
- 概要：
- オンラインでプログラミング言語を学習・実行できるプラットフォーム
- 教育利用に適している
- どのデバイスからでも，ログインやプラグインのインストールなしでコードを実行・作成可能
- 機能，特徴：
- プラグインやソフトウェアのインストール不要
- ブラウザベースで，どのデバイスからでもアクセス可能
- 作成したコードの共有や埋め込みが可能
- 無料版：
- 基本機能は無料
- 無料アカウントでトリンケットの作成が可能
- インタラクション統計の確認が可能
- 使用可能言語：Python，Java，HTML，その他
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，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（Amazon Web Services）が提供するクラウドベースの統合開発環境
- 機能，特徴：
- Ruby on Rails，Apache + PHP + MySQL，WordPressの実行が可能
- ファイル入出力プログラムの作成が可能
- コマンドラインでビルドや起動の操作が可能
- 使用可能言語：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/
- 概要：
- プログラムの実行過程を視覚的に理解できるオンラインコンパイラ兼デバッガ
- 機能，特徴：
- プログラムの実行過程をステップバイステップで可視化
- 変数やデータ構造の状態変化を図示
- 再帰呼び出し（関数が自分自身を呼び出す処理）などの複雑な概念理解を支援
- AIチューターを搭載
- オブジェクトの表示が可能で，ステップ実行がビジュアルに可能
- 使用可能言語：Python，Java，C，C++，JavaScript，Ruby
- 利用：無料
- 説明：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：シンプルな環境での実践
- アルゴリズム学習
- VisuAlgo：アルゴリズムの視覚的理解
- Python Tutor：アルゴリズムの動作確認
中級者・上級者向け推奨
- Web開発
- Replit：統合的な開発環境と即時デプロイ
- 特定分野
- AI，データサイエンス：Google Colaboratory
- チーム開発：GitHub Codespaces
- 多言語開発：Coding Ground，Replit
- 実践的開発
- オープンソース開発：GitHub Codespaces
4. 注意事項と利用のポイント
オンラインプログラミング環境を効果的に活用するために，以下の点に留意する必要がある．
- 無料版の制限について
- 機能制限の確認が必要
- リソース使用量の制限に注意
- アイドル時の自動停止などの仕様確認
- 用途に応じて有料版の検討を推奨
- 開発環境の選択
- チーム開発では環境の統一性を重視
- 学習目的の場合は段階的なプラットフォームの移行を推奨
- プロジェクトの規模に応じた適切な環境選択
- 学習時の注意点
- 基礎からの段階的な学習を推奨
- 実践的なプロジェクトへの段階的な移行
- 必要に応じて複数の環境の併用を検討