便利ツール Notion replit オンラインエディタ

オンラインエディタ “Replit” が Notion にも対応！

便利ツール

　プログラミングをしていて、簡単に試したいのに環境構築に手間がかかるの嫌だな～と感じたことはありませんか？ そんなときに、環境構築不要でオンライン上で使えるエディタは重宝しますが、今回紹介するのは個人的にも 2年以上活用している「Replit」という instant IDE です！
　Notionの アップデートを確認していたら、2021/7/27 のアップデートで対応できるようになっていたので、このそれも合わせてまとめていきたいと思います！
　これまで Notionでは、プログラミングの実行は、html, css, js などに限られる codepenで対応することになっていたので、python, C をはじめ多言語に対応できる Replit の対応には期待できます！！

スポンサーリンク

Replit とは？

　Replit とは、 オンラインIDE (統合開発環境)の一つであり、簡単にいうと「環境構築不要」でブラウザ上でプログラミングを完結して書くことができます！

　これだけでも、大きな特徴ですが、もう一つの大きな特徴は対応しているプログラミング言語の豊富さ！
実際に対応している言語をあげてみると、50以上もの言語が対応しています。こんなにあると知らない言語も混じってきますよね～

https://replit.com/site/ide より (2021/8/28)

その他の特徴

GitHub との連携
  • ターミナルをさわることなくブラウザから Git への Commit, Push が できる！
  • Github の README に " Run on Replit " ボタンを置くことで、そこからブラウザ上にコードを実行してもらえる

複数人での開発
  • 複数人での「同時編集」可能 (カーソルの表示により人の判別もできる！)
  • ライブ チャット 対応
  • シンプルなタスクであれば、Git の機能を使うことなしに共同編集可能！

Free plan でも十分使える！

Free Plan でできること

  • 複数人での共同編集可能
  • ストレージ：500MB
  • メモリー　：500MB
  • CPU　　　：0.2 ~ 0.5 vCPU

本格的に使おうとすると、有料プランへの切り替えも考える必要があるかもしれませんが、主に想定される「一時的な」活用には十分ではないかと思います！

価格についてはこちらから https://replit.com/site/pricing

スポンサーリンク

Notion 対応でできること！

　ここまで Replit についてまとめてきましたが、これだけでもかなり便利だと思いますが、これがNotionでは同対応するのか？

Notion対応でできるようになったこと

埋め込み機能が対応したことで、Notion上でもコードの編集・実行が可能に！！

　実際に埋め込むとこのような感じになります！

　この記事では、実際に例をあげながら Notionに埋め込むまでの順序をまとめていきます！

今回作ってみるプログラムは、「Haskell で フィボナッチ数列の再帰のプログラム」です！
順序は以下の通り。

  1. Replit にログイン (or Sign up)
  2. repl を作成
  3. URL をコピー
  4. /repl コマンドでNotionに埋め込み
  5. フィボナッチ数列を試す

1. Replit にログイン

https://replit.com/ こちらからアクセスして、Log in or Sign up
アカウントが必要になるので、はじめての人はここから (https://replit.com/signup?from=landing) Sign up をしてください！

2. replを作成

　(1) ログインができたら、左上の ”+ New repl” (青色部分)をクリック

(2) 言語選択 + repl の名前をつける
プログラミング言語の選択の画面がでるので "Haskell"を選択して、name your repl には 好きな名前を入力して良いですが、この記事では "haskell test"として設定しておきます。

(3) create repl で repl が作成！
左下の "create repl"をクリックすることで、replが作成されます。(少し時間かかります)

もう環境の構築ができてしまいました！ 早いですね！！
ここまでできれば、Replit を使うことができますが、この後は Notionへの埋め込み方を説明していきます

3. URLをコピー

画面上部から今開いている repl の URL をコピー
下のようになっているはずです。

https://replit.com/@<ユーザー名>/haskell-test#src/Main.hs

4. /repl コマンドで Notionに埋め込み

ここから Notion に移ります。
Notion では、 /の後から始まるコマンドを使うことで、複数のアプリケーションとの連携・埋め込みや、Notion自体の機能を使いこなすことができますが、replitを埋め込むには、"/repl" と入力すればOKです！

(1) /repl コマンドを入力 + Replitを選択

(2) さきほどのrepl のURLをペースト

ペーストしたら、"Embed a repl"をクリック

(3) 埋め込み完了

少し待つと、埋め込みが完了し、Notion上でもコードの入力や実行ができるようになりました！
試しに、上の緑色の▶ボタンを押すと、実行されて hello worldが表示されることがわかると思います！

5. フィボナッチ数列を試す

フィボナッチ数列を計算するプログラムに書き換えてみて実行。
下のコードでは、 fib x で x番目のフィボナッチ数列の値を出力できるので、実際に書き換えて確かめてみてください！ (実行は 上の緑色の▶ボタンです)

fib 0 = 0
fib 1 = 1
fib n = fib (n-1)+fib (n-2)

main = do
  print $ fib 8

コメント

タイトルとURLをコピーしました