【Stackblitz】オンラインコードエディターStackblitzの使い方
2021-8-15
mekoStackblitzとは
コードをオンラインで書いて動かせる便利なサイトです
環境を構築するのが難しい、構築するほどでもない時に使用するのが良いと思います
作成したコードは残しておくことが出来ます
現在使えるJavascriptの開発環境は以下になります
next.js
nuxt.js
Node.js
GraphQL
Javascript
Typescript
React
React(Typescript)
Angular
Vue3
HTML(CSS/Javascript)
RxJS
Ionic
Next.jsはReact、Nuxt.jsはVueをベースに作られています
IonicはAngularのモバイルアプリ用のフレームワークです
RxJSはObserbableなど非同期処理を扱えるライブラリです
使用感はVisualStudioCodeとほぼ同じ感じで
Firebaseにそのままデプロイできるようにもなっているようです
デフォルトでホットリロードされるのでかなり便利です
Codepenのようにサクサクとフレームワークが使えるのは嬉しいと思います
追加パッケージは入れられるか
入れられます サイドバーのファイルボタンを押して
Dependenciesに表示されているEnter pakcage nameに必要なパッケージ名を書き込んでエンターを押してください
インストールされたら上に完了の通知が表示されます
VSCodeの設定のようにできるか
出来ます 左サイドバーの歯車マークからUser settingsかWorkspace settingsを選択するとエディターの設定が変更できます
User settingsは他プロジェクトも変更になります
Workspace settingはその編集中のプロジェクトだけ変更されます
MacだとCmd+F、WindowsだとCtrl+Fで検索もできます
サイトに埋め込む
使いたい環境を選択すると、ページが開かれます
左上にShareボタンがあるので押します
Embed URLに書いてあるコードをコピーして、iframeに差し込みます
<iframe src="ここにURLを入れる" style="width:100%;height:500px;"></iframe>
作成したiframeをサイトに貼り付けたら完了です
svelte無いんだけど
svelteプロジェクトのスタータープロジェクトを作ってくれています
Forkすると自分のプロジェクトとしてコピーできます
Githubと同じ感じです
