勉強のためにスマホでweb開発したら意外と快適だった

#はじめに

web開発未経験な画像処理のアルゴリズムエンジニアです。勉強のためQiitaの記事を眺めていますが、web関係の開発が今非常に進化が激しく、面白い技術がいろいろありそうなので勉強かねて一本アプリでも作ろうかと、始めました。web開発は全くの素人です。
ただ、会社と自宅の往復で１日が終わってしまい、安定してまとまった時間がとれるのは通勤時間の往復のみ、さて困りました。そんなこと考えていたら、クラウド開発環境が最近充実してきた、と言う記事を読み、これ使えばスマホで開発できるのでは、と淡い期待を胸に調査と開発を試して行きました。ある程度の感触がつかめたので、ここで調べた内容をまとめたいと思います。エンジニアならスマホゲームなんてやってないで、スマホプログラミング楽しみましょう！！

#使用した環境

• スマホ(simフリー)
• たまにpc
  -- 操作性の関係上、一気に修正したいときはpcでないとさすがに不便。
  この記事もスマホで書こうと思います。できるだけ…

#作ったもの
打合せの日程を調整するサイトを作りました。

##開発に使用したモジュール、サービスなど

• vuejs
• vuex
• vuerouter
• vuetify
• firebase hosting
• firebase firestore
• vuefire
• webpack
• webpack-dev-server
• babel

と、一通りのweb開発体験ができた気がします。やっぱり記事読むだけと実際に手動かすのとでは理解度合いが違います。開発内容については機会があったら別記事にまとめたいと思います。ここでは開発環境についてまとめて行きます。

#開発環境変遷

初期検討 ～ codepenに触れてみる

最初はcodepenでサンプルコードをコピペしてお試ししました。動作を理解するならこれで十分です。スマホでも問題なく動作します。ただ、規模がだんだん大きくなると、対応困難になり、別の環境を探すことにしました。

開発着手 ～ glitchとの出会い

glitchクラウド開発環境に出会い使い始めました。
https://glitch.com/
スマホでの操作性は若干難ありですが、十分対応可能です。また、firebaseを使用する事を想定していたので、firebaseのデプロイ機能があるのも決めてになりました。他にも以下の機能がありスマホ上でも一通りの作業ができました。

• nodejs実行結果プレビュー機能。修正結果がリアルタイム反映されて確認できます。
• firebaseデプロイ
• nodeモジュールのインストール
• コンソールによるコマンド実行
• githubコミット機能
• プライベートプロジェクト作成可能
• バージョン管理機能があり過去コードに簡単に戻せる
• 何より、無料と言うのが素晴らしいです。
• 他の人が作った環境からのforkして開発可能。
• disk要領は200MByteまで。(多いように感じるが、module増やしてくと、これがなかなかシビア)
  制約もありそこをどう対処したかを重点において以下記載します。

vue環境構築 ～ サンプル探し

glitch vue で検索すると沢山のサンプル環境が出てきます。非常にシンプルに実装されていた、以下をforkして作り始めました。
https://glitch.com/~vuejs-template

glitchではremixボタンでforkできます。
他のものはwebpackなど使っていて、仕組みがわかっていない素人には取っつきづらく。。。
このサンプルは、getlibsと言う仕組みでmoduleを引っ張ってくる作りになっているようです。
https://www.npmjs.com/package/getlibs
ロードは遅いですが限られたクラウド環境の少ないdisk要領を圧迫せず、コンパイルの時間もかからないので、クラウド開発とは非常に相性がいいと思います。またここからwebpackに乗り換えするのも自分で調べながら変更加えて行ったので、理解を深めることかも出来ました。

コーディング ～ スマホとの戦い

サンプルをremixして修正していきます。もちろんスマホで。ここからがスマホでの操作性の戦いになります。

キー操作

予測変換があるので、変数などのキーワード入力はストレス少なく入力できます。記号の入力は難あり。使っているキーボードアプリにもよるとおもいますが。私はsharp端末なのでs-shoin使いました。一部記号がqwertyからフリック入力できるので、gboardよりは使いやすかったです。ただ、もっとプログラマに最適化されたキーボードがほしいところです。

コピペ

非常に重要です。長文をタイプするのは困難なのでコピペ多用します。外部サイトからのコピペは簡単です。普通にやるだけ。
問題はglitchのエディタ、選択機能がうまく動かない。。。三回タップで一行選択できるので、一行はそれでオッケー！
もっといっぱい一気にコピーしたいときは、仕方がないので、一回githubのコミットしてからgithub上のページからコピーする方法で対処しました。

削除

削除もおなじで、選択できないので一気に削除が非常に大変。間違えて長文張り付けちゃったときは泣きそうになります。何か良い方法ごあるといいのですが今のところ地道に消すしか方法見つかってません。派手に間違えたときは過去のリビビョンにロールバックするのが良いと思います。左下のrewindボタンで行けます。

デバッグ

ここがやり方が分からず苦労しました。まだ正解が見えておらず、スマホ上では環境が整っていない感じがします。何が原因で落ちているのかわからないため、コメントアウトして問題箇所を探すと言う古典的なデバッグ方法で頑張りました。

webpack導入 ～ disk要領との戦い

ある程度形になったところで、ページのロードに時間がかかっていたのでgetlibsが原因かと考えwebpackへの移行を始めました。
うまくいかず試行錯誤繰り返しました。webpackの解説は他サイトに良いものが沢山あるので、ここではglitchで導入する際のはまりどころだけ記載します。

module沢山入れるとdisk要領が溢れる

200MByteの壁に悩みました。自分のやり方が悪いだけかもしれませんがfirebase環境のmoduleが大きく入りきらなくなったため一部(firebase,vuefire)をcdnからのロードとしました。クラウドでの開発はcdnの活用が重要と思われます。

webpackとcdnの併用がうまくいかない

webpackでcdnを使う場合、webpack.config.jsにexternals設定が必要とのことです。見よう見まねで以下の記載を追加しました。

webpack.config.js

  externals: { 
    'firebase/app':'firebase/app',
    vuefire: 'vuefire',
  },

index.htmlにcdn読み込む記載を追加。

    <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuefire@2.2.1/dist/vuefire.min.js"></script>

以下のように利用します。importはいらない様子。エディタ上はエラー表示出ますが特に問題なく動きます。マニュアルに記載が見つけられず、importされるモジュール名はリンク先ソースのexportから判断しましたが。他に良い方法ないのだろうか。。

firebase.js

import Vue from "vue";

Vue.use(Vuefire);

const firebaseApp = firebase.initializeApp({
  // ここにfirebaseのapi情報をコピペします。
 });

export const db = firebaseApp.firestore();

また、使用するモジュールにはESのバージョンによって違いがあるようなので注意が必要てす。最初ES6用使っていて動かずにかなり時間費やしました。
具体的には以下vuefireですが、普通に見るとvuefire.esm.min.jsしか出てきません。
https://www.jsdelivr.com/package/npm/vuefire
しかしこれはes6形式のファイルです。(esmがそれを意味)distのフォルダをのぞくとしっかりとvue.min.jsがありこれを使うとうまく動きました。
なんとなくbabel使用しなければes6のファイルでも動くのではないかと思いますが、試せていません。

#感想
javascript最初はカッコだらけなのがよくわからず、取っつきずらさを感じましたが使ってみると、このカッコが非常に便利。文法もcに近いのでc言語使いにはpythonより簡単に理解できそうです。
vueなどオープンソースライブラリが非常に強力なのが魅力ですが、ライブラリによってはまとまったマニュアルが少なかったり、バージョンによって微妙に挙動が変わってコピペで動かないなどはちょっと初学者泣かせかと思います。vueはマニュアル豊富だったのでその点はあまりこまらず。バージョン間の差分ははまりましたが。。

#まとめ
glitch使ってスマホでweb開発、意外と快適でした。
文字入力はあと一歩。
実行環境は問題無し。
バージョン管理も問題なし。
デバッグ環境はまだまだ。

以上、駄文失礼しました。