Andyこの広告は、90日以上更新していないブログに表示しています。conferenceに参加してきました。技術カンファレンス&海外でのイベントということで学ぶことばかりの数日間だったのですが、今回はその中でも特に印象に残ったセッションをご紹介します。この記事を読んで「CodeSandboxおもしろそう!」「使ってみたい!!」という方が1人でも増えると嬉しいです。CodeSandboxとはCodeSandboxとはオンラインで動くコードエディターで、ReactやVue、Angularなどのフレームワークですぐにアプリケーションを作成できるのが特徴です。codesandbox.ioGitHubでオープンに開発が行われているのですが、なにより驚いたのがプロジェクトリーダーのIvesがまだ21歳の学生であること!まだ日本ではあまり知られていないプロダクトですが、将来がとても楽しみなのでこのCodeSandboxの便利な機能をいくつかご紹介したいと思います。startedという言葉にもあるように、CodeSandboxでは「コードを書きたい!」と思った人がなるべくスムーズに開発できよう徹底的にしきいを下げる工夫が行われています。画面に並んでいるのは左端から順にファイルツリー、エディタ、ミニブラウザです。import/exportを記述することも可能です。package.jsonにも追記してくれます。CodeSandboxの特徴としてライブラリの設定ファイルをGUIからconfigできる機能があります。各種設定の概要を確認しながら調整できるのでなかなか便利ですさらにさらに、ライブラリの追加もGUIの検索ボックスから行えます(バージョンも指定できる)。discoveryCodeSandboxで作成したアプリは簡単に共有ができるだけでなく、お目当のプロジェクトを見つけるのも簡単に行えます。<iframe/>でエディタを埋め込んでみました。みなさんも実際に僕が書いたコードを確認できるかと思います。左上の"share"をクリックすると埋め込みリンクやエディタの共有リンクがすぐに取得できます。CodeSandbox上から直接GitHubのレポジトリを作成してpushすることも可能ですgithub.comリポジトリができた!!他のプロジェクトを探したい時はSearchページから検索するだけ。UIを使っているプロジェクトならこんな具合に。import今までに作成したプロジェクトをCodeSandboxに取り込むのも簡単です。importを試してみましょう。sample(https://github.com/andoshin11/vue-todoList-sample)というレポジトリがあるのでこちらでお試し。importするにはこのURLを貼り付けるだけ。あとは自動でCodeSandbox上にワークスペースが作成され、GitHubと同期された状態になります。一瞬でimportが完了しました。ExperienceCodeSandbox上ではmonaco-editorが動いています。Codeのようなものです。Code上で開発しているかのような体験がブラウザで行えるのは良いですね。LintデフォルトサポートLiveコラボレーション機能Jest実行サポート静的ファイルホスティングHMREmmetサポートzipエクスポートなどなど素敵なものがたくさん。OSSなので日々機能が追加されていくのも魅力の一つです。簡単なハンズオンやデモをする際にサクッと環境が立ち上がるのが良いですね。シェアの手軽さも嬉しい。babel等の設定でドロップしてしまった人も多いと思います。これからはCodeSandboxをスッと差し出して「とりあえず触ってみて!」と言えるようになると素敵ですね。動作確認までワンストップで行えそうで期待大です。リリースされて1年ほどなので今後がとても楽しみ。Goで簡単なCRUDこんにちは、Andyです。Technology月別アーカイブ参加グループプログラミングはてなブログをはじめよう!andoshin11さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。