見出し画像

iOS でフロントエンドの開発環境を作り、Netlify へデプロイして JAMStack な LT 資料を作った話

んじゃみ

Microsoft の開発者イベント Microsoft Build 2019 でブラウザ上で動作する 「Visual Studio Online」 が発表されて話題になっていました。

フロントエンドの開発環境が複雑になっているのと同時に、Cloud IDE による開発がいよいよ実用的になってきて、盛り上がってきている印象。

この投稿は GW 前に v-kansai という Vue/Nuxt の Meetup で LT した内容をベースに内容を補強したものです。 
Cloud IDE を活用して、 iOS によるフロントエンドの環境作りをした話です。

Cloud IDE への期待

Cloud IDE は基本的にクラウド側に環境設定・開発に必要な Node や npm などをインストールして、ローカルは特別な環境を作ることなく、ブラウザーだけで開発が可能なことがメリットです。

またクラウド側に環境があるので、ローカル環境に依存することなく、一定の環境が作りやすいメリットもあります。

最近のフロントエンドの環境を作るのはかなり大変で、コードを書く技術とは別なものが求められたりします。
コードを書き、何かを作ることが目標だったはずが、環境を作ることに疲弊してしまうことも多いのでは。

Flash と note の教祖 @fladdict さんであっても、昨今の JS 環境をつくるのには苦労されていました。

一度環境を作ったとしても、絶え間ない npm モジュールのアップデートがあったりして、環境づくりに費やされる時間・手間は割と無視できないものです。
ましてや、そんな環境を複数作るのとかめんどくさ過ぎる...。

Cloud IDE で、すべてが解決できるわけではないですが、コードを書く以外の部分のコストを最小にできそうな予感と期待があります。

iOS だけで書きたい

iPad Pro（2018） を購入してから、MacBook Pro を持ち歩く機会が激減しました。セルラー版を購入したこともあり、Wi-Fi やデザリングがなくても iPad 単体で Web につながるのは大きなメリットです。

iPad Pro をもっと活用するために、フロントエンドのコードを書く環境を作りたくて、着目したのが Cloud IDE でした。
iOS のアプリなどでコードを書く環境を構築することも可能ですが、Git との連携は別だったり、Node を含めた開発環境となると、あまり有望なものがありませんでした。

iOS **❤️ CodeSandbox**

いくつかのサービスを試してみて iOS と一番相性が良く、実用的な Cloud IDE が CodeSandboxでした。

CodeSandbox はフロントエンドに特化した Cloud IDEで、見た目はほぼ Visual Studio Code です（おそらくオープンソースの vscode を使用している？）。

Public な Sandbox を 50 個までなどいくつか制限がありますが、簡単な使い方 & Public 状態にできるものであれば無料で使えます。

類似のサービスとして Coder や Gitpod （いずれも見た目は Visual Studio Code に近い）がありますが、決め手となったのが CodeSandbox だけが iOS の外付けキーボードでも矢印キーによる操作が可能だったことでした。

iOS の外付けキーボード 矢印キー問題
外付けキーボードの矢印キーイベントが <textarea /> や <input /> タグ以外では発生しない。そのため、フロントエンドの実装によっては、キーボード入力してる際に矢印キーでの移動が行えない。
コードを書くときには致命的...

CodeSandbox のスゴイところ

モダンなフロントエンド環境がボタンひとつ
React や Vue・Angular を始め、Gatsby や Next・Nuxt や TypeScript のテンプレートがボタン一発で出来上がり、すぐに書き始めることが可能です。
テンプレートをベースに npm モジュールを追加もできます。

基本的に書いたコードに対してホットリロードが入り、右側のプレビューに即時に反映してくれます。（ただし iOS と mac の Safari には後述のバグあり）

GitHub との連携
また GitHub リポジトリからクローンして環境構築し、変更した分をコミットすることも可能です。（GitHub との連携は Beta）
「ブランチを切る」などの操作を GitHub 側で行えば、あるブランチに対して変更をコミットして、Pull Request を飛ばすことも可能です。

CodeSandbox **❤️ Netlify**
さらに 2019年3月から、こちらも Beta 版ながら CodeSandbox から Netlify に直接デプロイすることが可能になりました。

これは思いの外、便利でスゴイ機能です。
簡単なプレビューや確認用途としてはもちろん、アイデア次第では面白い使い方が色々できそうな予感。

iOS 12.2 以降の PWA

CodeSandbox にはアプリはありませんが、サイトが PWA 対応しているため、「ホーム画面に追加」することで、次回以降ブラウザーのナビゲーションバーなどを省略したアプリと変わらない使い心地で使用できます。

iOS 12.2 から以下2点の PWA の機能が向上し、iOS でも PWA がアプリに近い、実用的に使える状態にアップデートされました。

1. OAuth の認証の保持
ホーム画面に追加して、初回起動時のみ、再度ログインが必要ですが、二度目以降はログインが維持されます！

2. PWA で別 URL を開いた際、アプリ内ウィンドウで開ける
以前は PWA 内に別 URL があると Safari が起動してしまい、場合によっては PWA のライフタイムが終わってしまいましたが、PWA 内でアプリ内ブラウザーのような形で開くようになりました。


CodeSandbox の使い方

CodeSandbox 自体、直感的に使えますが、簡単に使い方だけまとめたいと思います。（LTの際に不足していた部分です）

使い方フロー
1. 開く
2. Forkする（自分の Sandbox に保存される）
3. 編集する
4. 保存する
5. GitHub へコミット
6. Netlify へデプロイ

1. 開く
CodeSandbox 上に以下のいずれかの方法でファイルを開き、Sandbox の環境を立ち上げます。右上にある + ボタンを押すことで新しい環境を作れます。
・ テンプレートから
・ GitHub の URL 
・ 保存してある Sandbox から（自分のアイコンを押して Dashboard を選ぶ）

2. Fork する
既に自分の Sandbox に保存されている場合は必要ありませんが、既存のテンプレートの場合は「Fork」という右上の青いボタンを押すことで、Sandbox が自分のSandbox として保存されます。
npm モジュールの追加などは左下の「Add Dependency」ボタンで可能です。

3. 編集する
iOS の場合、パフォーマンスの問題もあり、プレビュー自体を閉じておく方が快適にコードが書けます。（プレビューを表示していないとプレビュー自体レンダリングされないっぽい）

4. 保存する
変更内容などは左上の「Save」を押すことで自分の Sandbox に保存されます。

5. GitHub へコミットする
GitHub と Netlify への操作は GitHub アカウントでログインすると左のメニューにアイコンが現れて、連携が可能になります。

本当に基本的なことしかできないですが、でも大体これで事足りるようにも思います。

6. Netlify へデプロイする
GitHub アイコン下のロケットアイコンを押すと、Zeit と Netlify へのデプロイするボタンが表示されます。（Zeit は今回省略）
Netlify へのデプロイは 「Deploy」ボタンを押すだけ。
アプリの規模にも寄りますが、押してから 1 分くらいすると Deploy が完了し、Sandbox 内に通知が表示されます。
同時に、デプロイされた Netlify へ飛ぶ「Visit」というボタンとデプロイ先の URL の変更などが行える「Claim Site」というボタンが表示されます。


iOS × CodeSandbox の問題点・ツライところ

1. 日本語が入力できない
CodeSandbox のエディター部分は「変換」という概念がないのか、日本語が入力できません。
非常にめんどくさいですが、iPad だとマルチタスクが可能なので、メモ帳などを同一画面内に立ち上げて、日本語はそちらのアプリで書き、コピペする方法しかありません。

2. プレビューが正常に機能しない
iOS に限らず mac の Safari でもHRM（Hot Reload Module）まわりにバグがあるようで、CodeSandbox でページを追加したりするとプレビューが永遠リロードを繰り返し、正常に動作しません。
これは解決策が今のところなくて、プレビューは使用しないが現時点でのベストチョイスです。ただ、前述した Netlify への直接デプロイをプレビュー代わりに使用することは可能かと思います。

3. デバックできない
コード自体は（日本語が書けないが）割と書けるものの、ブラウザーのデベロッパーツールなどは iOS では見れないので、デバックはほぼできません。


**iPad Pro だけで

Vue / Nuxt の開発環境を
CodeSandbox に作り
Netlify へデプロイして
JAMStack な LT 資料を作成した**

実際には LT の面白いネタになりそうという理由でやってみた面もありますが、CodeSandbox を使うことで、Nuxt のフロントエンド環境を作り、iPad Pro だけで当日のスライド（ブラウザで動くもの）を作りました。
（ただし iPad でしか綺麗に見えない）

最終的に CodeSandbox から Netlify へ直接デプロイして、SSR もされている JAMStack な LT 資料ができました。 

通常のスライドとは差を出すために、CSS の縦書きを使い、平成最期の LT だったので平成明朝を使いました。
司会進行の方から、スクリーンに映した際に「向き大丈夫ですか？」と心配されたり、「縦書きが気になりすぎて、内容が入ってこなかった」という感想をいただいたのは平成の良い思い出です。


**結論

iOS だけでも、かなりデキル**

現状では、デバックなど全てを iOS で完結するのは難しそうですが、かなりの部分の開発 & コードを書くことが CodeSandbox を使うと可能そうです。
特に、新しいものを試したり、ちょっと書いてみるような「素振り」環境としては十分実用レベルだと思います。

iOS でなくて、 Surface や Chrome book などの Chrome が動くデバイスなら、さらに快適かもしれません。
が、iOS でやるというのは少しだけロマンがある...

フロントエンドの環境構築に悩んでいたり、iOS や Android・Chrome Book で開発環境を作りたいという人にはかなりオススメです。
今後も iOS でのフロントエンド環境構築を探求してみたいと思います！

この記事が気に入ったらサポートをしてみませんか？