CodeSandbox gives you 24/7 collaborative cloud development environments (CDEs) that resume in 2 seconds.
Monaco Markdown Editor For GitHub GitHubã§Markdownを書ãã¨ãã«ãƒ†ã‚ストエリアãŒVS Codeã¿ãŸã„ã«ãªã‚‹ãƒ–ラウザ拡張 chrome.google.com 機能ã¨ã—ã¦ã¯ Markdownã¨ã‚³ãƒ¼ãƒ‰ã‚¹ãƒ‹ãƒšãƒƒãƒˆã®ã‚·ãƒ³ã‚¿ãƒƒã‚¯ã‚¹ãƒã‚¤ãƒ©ã‚¤ãƒˆ Tabã§ã‚¤ãƒ³ãƒ‡ãƒ³ãƒˆã€Shift+Tabã§ã‚¤ãƒ³ãƒ‡ãƒ³ãƒˆã®æˆ»ã— マルãƒã‚«ãƒ¼ã‚½ãƒ« F11ã§ãƒ•ãƒ«ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ フルスクリーンモードã§ã¯ã€å分ãªé ˜åŸŸãŒã‚ã‚Œã°ãƒ—レビューを表示 etc github1s GitHubã®ãƒªãƒã‚¸ãƒˆãƒªã®URLã«1sã‚’è¿½åŠ ã™ã‚‹ã ã‘ã§ã€VS Codeã§ãƒªãƒã‚¸ãƒˆãƒªã‚’èªã‚€ã“ã¨ãŒã§ãるサービス 例ãˆã°ã€VS Codeã®ãƒªãƒã‚¸ãƒˆãƒª https://github.com/microsoft/vscode を見ãŸã„å ´åˆã¯ã€ https://github1s.com/microsoft/vscode ã‚’é–‹ãã ã‘。 ãªã‚“ã ã‘ã©ã€
ã¯ã˜ã‚ã« CodeSandboxã¨ã„ã†ã‚ªãƒ³ãƒ©ã‚¤ãƒ³ã‚¨ãƒ‡ã‚£ã‚¿ãƒ¼ã‚µãƒ¼ãƒ“スã§ã€å‚考ã«ãªã‚Šãã†ãªVue.jsã®ã‚µãƒ³ãƒ—ルコードãŒãŸãã•ã‚“公開ã•ã‚Œã¦ã„ã¾ã—ãŸã€‚CodeSandboxã«ã¯ãƒ—レビュー機能も付ã„ã¦ã„ã‚‹ã®ã§ã€ã‚³ãƒ¼ãƒ‰ã‚’見ãªãŒã‚‰ã®å‹•ä½œç¢ºèªã‚‚å¯èƒ½ã§ã™ã€‚æ°—ã«ãªã£ãŸã‚‚ã®ã‚’ã¾ã¨ã‚ã¦ãŠãã¾ã™ã€‚ サンプルã¾ã¨ã‚ vue-todos 2 ToDoリストã®ã‚µãƒ³ãƒ—ル。 https://codesandbox.io/s/mzxwr2zl4j Vue LP 2 色々盛り込ã¾ã‚ŒãŸãƒ©ãƒ³ãƒ‡ã‚£ãƒ³ã‚°ãƒšãƒ¼ã‚¸ã®ã‚µãƒ³ãƒ—ル。 LP Vue Vuetify (fontawesome) Vuex axios Firebase Login (Email+Pass | Google) Recipes API New York Times APi https://codesandbox.io/s/54lk4p3q0k vue-workshop -
Vueã¯æ›¸ã„ãŸã“ã¨ãŒã‚ã‚‹ã‘ã‚Œã©ã€Reactã¯æœªç€æ‰‹ãªäººé–“ãŒã€ 今回ã¯CodeSandboxã§æ‰‹è»½ã«Reactã«è§¦ã‚Œã¦ã¿ã¾ã—ãŸã€‚ https://codesandbox.io オンラインエディタ。 React以外ã«ã‚‚Vueã‚„Angularも使用ã§ãã¾ã™ã€‚ ã¨ã‚Šã‚ãˆãšä½•ã‹æ›¸ã„ã¦ã¿ã‚‹ å‚考: React.jsã§ç¤¾å†…システムを作る(Reactコンãƒãƒ¼ãƒãƒ³ãƒˆç·¨ï¼‰ https://doda.jp/d-c-b/article/180213.html React.js コンãƒãƒ¼ãƒãƒ³ãƒˆå…¥é–€ï¼ˆprops/state) https://qiita.com/KeitaMoromizato/items/0da6c8e4264b1f206451 React.jsã®State https://qiita.com/koba04/items/63267bcc918d76ac8767 一先ãšã€ãµãŸã¤ã®ãƒ†ã‚ストボックスã«å…¥åŠ›ã•
*アプリケーション自体ã¯å…¬é–‹ã•ã‚Œã‚‹ å„サービスã®ç‰¹å¾´ CodeSandbox メジャーãªãƒ•ãƒ¬ãƒ¼ãƒ ワークã®ãƒ†ãƒ³ãƒ—レートãŒç”¨æ„ã•ã‚Œã¦ãŠã‚Šã€ã™ã°ã‚„ã開発を始ã‚られる。他ã®äººãŒ CodeSandbox ã§ä½œæˆã—ãŸãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã‚’ Fork ã§ãã‚‹ã®ã‚‚便利。Visual Studio Code ã¨åŒã˜ Monaco ã¨ã„ã†ã‚¨ãƒ‡ã‚£ã‚¿ãƒ¼ã‚’ベースã«ã—ã¦ã„ã‚‹ãŸã‚ã€ã‚ªãƒ¼ãƒˆã‚³ãƒ³ãƒ—リート機能ãŒå……実ã—ã¦ãŠã‚Šã€åŒæ§˜ã®ã‚·ãƒ§ãƒ¼ãƒˆã‚«ãƒƒãƒˆã‚’使ãˆã‚‹ã®ã§æ™®æ®µ VSCode を使用ã—ã¦ã„る人ã«ã¯ä½¿ã„ã‚„ã™ã„ã ã‚ã†ã€‚ãŸã ã—拡張機能ã¯ä½¿ãˆãªã„。 本質的ã«ç•°ãªã‚‹2種類ã®é–‹ç™ºç’°å¢ƒãŒç”¨æ„ã•ã‚Œã¦ã„る。 Client Environment ビルド処ç†ã‚’å«ã‚完全ã«ãƒ–ラウザ内ã§å®Ÿè¡Œã•ã‚Œã‚‹ ã„ã£ãŸã‚“エディターを開ã‘ã°ã‚¤ãƒ³ã‚¿ãƒ¼ãƒãƒƒãƒˆã«ç¹‹ãŒã‚‰ãªããªã£ã¦ã‚‚開発を続ã‘られる(ãŸã ã— NPM パッケージã®è¿½åŠ ã«ã¯å½“然インターãƒãƒƒãƒˆæŽ¥ç¶šãŒå¿…è¦) Webpack ã®
www.youtube.com ã¡ã‚‡ã£ã¨æ™‚é–“ãŒçµŒã£ã¦ã—ã¾ã£ãŸã®ã§ã™ãŒã€2月ã«ã‚¢ãƒ ステルダムã§è¡Œã‚ã‚ŒãŸVue conf Amsterdamã¨Frontend Developer Love conferenceã«å‚åŠ ã—ã¦ãã¾ã—ãŸã€‚ åˆã‚ã¦ã®æŠ€è¡“カンファレンス&海外ã§ã®ã‚¤ãƒ™ãƒ³ãƒˆã¨ã„ã†ã“ã¨ã§å¦ã¶ã“ã¨ã°ã‹ã‚Šã®æ•°æ—¥é–“ã ã£ãŸã®ã§ã™ãŒã€ä»Šå›žã¯ãã®ä¸ã§ã‚‚特ã«å°è±¡ã«æ®‹ã£ãŸã‚»ãƒƒã‚·ãƒ§ãƒ³ã‚’ã”紹介ã—ã¾ã™ã€‚ã“ã®è¨˜äº‹ã‚’èªã‚“ã§ã€ŒCodeSandboxãŠã‚‚ã—ã‚ãã†ï¼ã€ã€Œä½¿ã£ã¦ã¿ãŸã„ï¼ï¼ã€ã¨ã„ã†æ–¹ãŒ1人ã§ã‚‚増ãˆã‚‹ã¨å¬‰ã—ã„ã§ã™ã€‚ CodeSandboxã¨ã¯ CodeSandboxã¨ã¯ã‚ªãƒ³ãƒ©ã‚¤ãƒ³ã§å‹•ãコードエディターã§ã€Reactã‚„Vueã€Angularãªã©ã®ãƒ•ãƒ¬ãƒ¼ãƒ ワークã§ã™ãã«ã‚¢ãƒ—リケーションを作æˆã§ãã‚‹ã®ãŒç‰¹å¾´ã§ã™ã€‚ codesandbox.io GitHubã§ã‚ªãƒ¼ãƒ—ンã«é–‹ç™ºãŒè¡Œã‚ã‚Œã¦ã„ã‚‹ã®ã§ã™ãŒã€ãªã«ã‚ˆã‚Šé©šã„ãŸã®ãŒãƒ—ãƒã‚¸ã‚§
ã“ã“æ•°å¹´ã€Cloud9ã‚„Codenvyを始ã‚ã¨ã—ã¦ãƒ–ラウザã ã‘ã§ãƒ•ãƒãƒ³ãƒˆã‚„サーãƒã‚µã‚¤ãƒ‰ã®é–‹ç™ºã‚’è¡Œãˆã‚‹CloudIDEãŒè¤‡æ•°ãƒªãƒªãƒ¼ã‚¹ã•ã‚Œã¦ã„ã¾ã™ã€‚ ãã‚‚ãã‚‚Atomã‚„VSCodeãªã©ã®ã‚¨ãƒ‡ã‚£ã‚¿ãŒElectronãªã©ã‚’使ã£ãŸWeb技術ã®ä¸Šã§ä½œã‚‰ã‚Œã¦ã„ã‚‹ã“ã¨ã‚‚ã‚ã‚Šã€ã“ã“æ•°å¹´ã§å‡„ã¾ã˜ã„進化をé‚ã’ã€ã„ãã¤ã‹ã®ç’°å¢ƒã§ã¯æœ¬å½“ã«ãƒ–ラウザã ã‘ã§é–‹ç™ºã§ãる様ã«ãªã£ã¦ãã¾ã—ãŸã€‚ ã„ã¾å€‹äººçš„ãªãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã®ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰(React)ã¯CodeSandboxã§é–‹ç™ºã—ã¦ã„ã¾ã™ãŒã€Macbookã§ã‚‚iPadã§ã‚‚åŒã˜ã‚ˆã†ã«é–‹ç™ºãŒã§ãã€éžå¸¸ã«ä¾¿åˆ©ã§ã™ã€‚ 次ã«ã‚µãƒ¼ãƒã‚µã‚¤ãƒ‰ã¨ã—ã¦Cloud Functionsを使ã„ãŸãã€ã“ã®é–‹ç™ºç’°å¢ƒã‚‚ブラウザã ã‘ã§æ§‹ç¯‰ã™ã‚‹ã®ã‚’試ã—ã¦ã¿ã¾ã—ãŸã€‚ ã¾ãšã¯ç›´æŽ¥Cloud Functionsã¨ã®é€£æºã‚’サãƒãƒ¼ãƒˆã—ã¦ã„ã‚‹CloudIDEを探ã—ãŸã‘ã©è¦‹ã¤ã‹ã‚‰ãšã€ã‚³ãƒ³ã‚½ãƒ¼ãƒ«ã‚’サãƒãƒ¼ãƒˆã—ã¦ã„ã¦ä½¿ã„ã‚„ã™ã„ã‚‚ã®ã‚’
ã©ã†ã‚‚ã€ã¾ã•ã¨ã‚‰ã‚“(@0310lan)ã§ã™ï¼ 今回ã¯ã€é¢å€’ãªé–‹ç™ºç’°å¢ƒã‚’一瞬ã§æ§‹ç¯‰ã—ã¦ãƒ–ラウザ上ã‹ã‚‰Webアプリを気軽ã«é–‹ç™ºï¼†å…¬é–‹ã§ãã‚‹ç„¡æ–™ã®Webサービスをã”紹介ã—ã¾ã™ï¼ 完全ãªã‚ªãƒ¼ãƒ—ンソースã§é–‹ç™ºãŒé€²ã‚られã¦ãŠã‚Šã€React / Angular / Vueãªã©ã®ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã‚’誰ã§ã‚‚ç°¡å˜ã«ãƒ—ãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ã§ãる高度ãªã‚¨ãƒ‡ã‚£ã‚¿ã‚’æ載ã—ã¦ã„ã‚‹ã®ãŒç‰¹å¾´ã§ã™ã€‚ 〠CodeSandbox 】 ■「CodeSandboxã€ã®ä½¿ã„æ–¹ ãã‚Œã§ã¯ã€ã¾ãšæœ€åˆã«ã€ŒCodeSandboxã€ã®ä½¿ã„æ–¹ã‹ã‚‰è¦‹ã¦ã„ãã¾ã—ょã†ï¼ サイトã«ã‚¢ã‚¯ã‚»ã‚¹ã—ãŸã‚‰ã€ç”»é¢å³ä¸Šã«ã‚るボタンをクリックã—ã¾ã™ã€‚ 次ã«ã€ã€ŒReactã€ã€ŒVueã€ã€ŒAngularã€ãªã©ã®ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã‚’é¸æŠžã™ã‚‹ç”»é¢ãŒé–‹ãã¾ã™ã€‚ ã“ã“ã§å¥½ããªãƒ•ãƒ¬ãƒ¼ãƒ ワークをé¸ã‚“ã ã‚Šã€ç´ ã®JavaScript(Vanilla JS)やCLIツールã€GitHubã‹ã‚‰ãƒªãƒã‚¸ãƒˆãƒªã‚’èªã¿è¾¼ã‚“ã
blog.kondoumh.com Pixel 3 ã®ã‚³ãƒ³ãƒ‘ニオンã«è²·ã£ãŸ iClever ã®æŠ˜ã‚ŠãŸãŸã¿ã‚ーボードã¯ã‘ã£ã“ã†å½“ãŸã‚Šã§ã—ãŸã€‚Scrapbox ã«ã‚‚書ãã¾ã—ãŸã€‚ scrapbox.io Termux 環境ã¯è¨€èªžå¦ç¿’ã‚„ CLI プãƒã‚°ãƒ©ãƒ 開発ã®ç”¨é€”ã§ã¯å分ã„ã‘ã¾ã™ã€‚今㯠Emacs ã« rust-mode ã‚’å°Žå…¥ã—㦠Rust ã®ãƒ–ートストラップã—ã¦ã¾ã™ã€‚ Termux ã§ã¯è‹¦ã—ã„ Web UI 開発ã«ã¤ã„ã¦ã¯ã€ä»¥å‰ç´¹ä»‹ã—㟠CodeSandbox ãŒã‘ã£ã“ã†ä½¿ãˆã¾ã™ã€‚ blog.kondoumh.com PWA ã¨ã—ã¦å‹•ä½œã—ã¾ã™ã€‚Showcase ã¨ã„ã†ã‹ Sandbox モードã§ã¯éžå¸¸ã«è‰¯ã„æ„Ÿã˜ã« Responsive ã«å‹•ä½œã—ã¾ã™ã€‚Editor モードã¯ã„ã¾ã„ã¡ä½¿ã„ã«ãããªã‚Šã¾ã™ãŒã€ãƒ©ãƒ³ãƒ‰ã‚¹ã‚±ãƒ¼ãƒ—ã«ã—ãŸã‚‰ãªã‚“ã¨ã‹ä½¿ãˆã¾ã™ã€‚プレビューã¾ã§ã¤ã„ã¦ã¦ã¡ã‚ƒã‚“ã¨å‹•ã。 Scrapbo
最近ã€CodeSandbox を使ã£ã¦ã‚‹äººã‚’見ã‹ã‘るよã†ã«ãªã‚Šã¾ã—㟠codesandbox.io 以å‰å–り上ã’㟠CodePen ã¯ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã‚‚使ㆠcool 㪠JS Playground ã¨ã„ã†æ„Ÿã˜ã§ã€ãƒ–ãƒã‚°ã«ãƒ‡ãƒ¢ã¨ã‚³ãƒ¼ãƒ‰ã‚’一緒ã«è²¼ã‚Šä»˜ã‘ãŸã‚Šã™ã‚‹ã®ã«ä¾¿åˆ©ã§ã—ãŸã€‚ blog.kondoumh.com CodeSandbox ã¯ã‚‚ã†å°‘ã—デベãƒãƒƒãƒ‘ー寄りã®ã‚µãƒ¼ãƒ“スã®ã‚ˆã†ã§ã™ã€‚ CodeSandbox ã®ãƒˆãƒƒãƒ—ページ㮠Create Soundbbox をクリックã™ã‚‹ã¨è¡¨ç¤ºã•ã‚Œã‚‹ãƒ†ãƒ³ãƒ—レートé¸æŠžãƒšãƒ¼ã‚¸ã§ Sign in with GitHub ボタンã‹ã‚‰ã‚µã‚¤ãƒ³ã‚¢ãƒƒãƒ—ã§ãã¾ã™ã€‚ 最近æµè¡Œã£ã¦ã„るフãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®ãƒ•ãƒ¬ãƒ¼ãƒ ワークを数多ãã‚«ãƒãƒ¼ã—ã¦ã„ã¾ã™ã€‚ コードエディタ + プレビューをブラウザ㮠1タブã§ä½¿ãˆã¾ã™ã€‚ プレビューã¯åˆ¥ã‚¿ãƒ–ã«å‡ºã™ã“ã¨ã‚‚ã§ãã¾ã™ã®ã§ã€Chrome DevTools ãªã©
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
処ç†ã‚’実行ä¸ã§ã™
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}