1日目 Webアプリの作り方
本文には出てこないけど一応名前と簡単な設定があります。知らなくても問題ないです。
しょうこ：スズメにそそのかされて小説投稿サイトを作ることになった人。愛称はしょーちゃん。HNは薔子。HTMLが少しわかる程度。社畜ちゃんなので言われたことには結構従う。スペックは高いけど不遇職なのであんまり意識してない。
ファーメンター：運営に誘うぽっちゃりしたスズメっぽい何か（少なくとも外側はスズメ）。愛称はふぁーちゃん。唐揚げが好き。いつか某小説投稿サイトのマスコットを食べて乗っ取るのが夢。
使ってるPCはWindows10、ノートパソコンという設定。
なんだか変な夢を見ていた気がする。へんてこりんなスズメが小説投稿サイトの運営になるように誘う夢。スズメがしゃべるなんて現実的ではない。ましてや小説投稿サイトを作るように誘ってくるスズメなんて論外だ。
そこまで考えて、お気に入りの小説投稿サイトの閉鎖も夢だったのではないかと思い、確認してみたが、それは夢ではなかったようだ。閉鎖のお知らせという文字は変わらず存在していた。
「それも夢だったらよかったのに……」
* * *
「やっと起きたようだね、もうお昼だよ」
リビングに向かうと新聞を読みながら昨日買ったおつまみのからあげを食べているスズメがいた。私の朝ごはんが……。ん、それよりスズメが、なんで？
「え？」
どうやら夢ではなかったようだ。
「では早速、契約をしよう。昨日は結局契約までできなかったし」
おぼろげにしか記憶にないが、お気に入りの小説投稿サイトが何とかなるという嬉しさでテンションが上がって契約までたどり着かなかったらしい。
「ちょっとまって、でも私、そういったプログラムには全然詳しくなくて」
さすがに素面になると、冷静な判断ができる。簡単なHTMLくらいしか書いたことがないし、そもそもどうやって小説投稿サイトを作るのかが全然わからない。
「大丈夫、それも僕が、教える。まぁできない人もいるから、とりあえず仮契約でどうだい？ 30日で最低限の小説投稿サイトを作って、運営になるか判断してもらっても構わないよ。なんとかしたいんでしょ？ 作り方がわかれば、有志として手伝うこともできるし、移転先としても使ってもらえるかもしれないよ？」
そうスズメは誘ってくる。閉鎖される小説投稿サイトは珍しいことではなくて、売買されることもあるし、移転先として新しく作られることもあるようだ。今では有名な二次創作の小説投稿サイトも元々は、閉鎖される小説投稿サイトの移転先として作られたようで、作り方さえわかれば色々な手段が取れるということを説明してくれた。
「こういったWebアプリケーションは初心者でも作れるし、できそうになければやめてもいい、それに作り方がわかれば、閉鎖される小説投稿サイトの閉鎖も何とかできるかもしれない。もしできたら、クローンを作って運営したらいいじゃないか。それこそ、自分が閉鎖しない限り、ずっと続けることができるよ？ 君が運営になる気があれば、その悲しみの連鎖を止めることができる」
そこから運営になるメリットをいくつも挙げられ、私はそのスズメの話を聞いていた。確かに、取れる手段が増えるなら何とかできるかもしれない。ただ、デメリットもあるかもしれない。
「まぁデメリットというか、作り方は君が覚えないといけない。あたりまえだけど、その勉強時間が必要だね。毎日頑張る気はあるかい？」
「わかった、じゃあ仮契約ということでやってみる」
勉強するのは当たり前だし、できなくてもいいのであればやってみるか。
「じゃぁ仮契約だね。これに名前を書いて」
どこからか出した金属の板が渡される。どうやら仮契約に必要なもので、スズメの滞在許可証を兼ねているようだ。ちょっと怪しいけど、まぁ覚悟を決めてやるしかない。そう決意し、私は名前を書いた。
* * *
「じゃぁ早速、Web小説投稿サイトの作り方を説明していくよ。30日で必要最低限の小説投稿サイトを作ってみよう。小説投稿サイトの運営になるんだったら、やる必要があるのはこんなところ。
■基礎勉強・準備
前提知識
環境構築
チュートリアル
■設計
画面
遷移
DB
■開発
■チェック
規約作り
セキュリティ
■リリース
デプロイ
～ ～ ～
■運営
機能開発
機能改善
集客、宣伝
マネタイズ
企画・イベント
……
知らない言葉もいっぱいあるけどそれぞれ説明していくよ。運営に関しては、契約後に説明するけど、ひとまずリリースまでやっていこうか」
「……へー、やること色々とあるんだね。今日は何するの？」
「今日は、必要技能の説明、環境づくりだね。まずは前提知識を身につけよう」
* * *
「小説投稿サイトを作るといっても、まずはIEとかChromeとかSafariなどブラウザで動くものを作るのか、アプリストアとかでダウンロードするタイプを作るのか決めないといけない。前者を”Webアプリ”、後者を”ネイティブアプリ”と呼ぶ。
Webアプリはブラウザさえあればどの環境でも見れるというメリットがある。大抵の小説投稿サイトはWebアプリで作られてる。ただ、こっちはスマホ向けの機能が弱いというデメリットがあるね。プッシュ通知とか、オフラインでの作業や動作速度は断然ネイティブアプリの方が有利」
「確かにね、スマホで見るときはアプリがあると便利だよね。両方作るのはダメなの？」
「人手があるなら両方作ってもいいけど個人ならどちらか片方を作るのがおすすめだね。ネイティブアプリはiOS, Androidとか、端末のOSごとに作らないといけない。それに加えて、Webアプリも作らないといけないし、使う言語も仕組みも覚えることが半端ない。それに、何か機能を加えた時に修正する必要がある部分も増えてしまうから、非常に大変。
まぁ、あとで説明するReact.jsであれば全部対応できることはできるけど、個人運営、しかも初心者であれば発散しそうでリリースまでできそうにないからお勧めしない。
基本的にPCでもスマホでもブラウザさえあれば使えるWebアプリを作るのが個人開発なら無難。どうしてもスマホの機能を使わないと実現できない限りはWebアプリを作って、余裕があればスマホアプリを作るといいよ」
「なるほどー、確かに使ってるところもスマホアプリないから、Webアプリを作ればよさそうだね」
「じゃぁWebアプリを作る方向でいこうか。作るのに必要な技能は大きく分けてこんな感じかな。
■基本的なPCスキル
■HTML/CSS/JavaScriptの知識
■バックエンド用プログラミング言語
■Webアプリケーション用フレームワークの知識
■UIデザイン
■サーバー（Linux）の知識
■セキュリティ
■法律関係（利用規約）の知識
いっぱいあるけど、作りながら徐々に覚えていけばいいよ。さすがに全部をすぐに覚えることはできないし、実際にやらないと感覚をつかむのも大変だからね」
「はぁ、よくわかんない単語がいっぱい……」
「今日は、PCに必要なものを入れて、設定して終わりにしようか。HTML/CSS/JavaScriptの勉強をするために必要なエディタとブラウザをインストールしておこう」
「エディタ？ メモ帳とかWordじゃだめなの？」
「開発には多くのファイルを開かないといけないからそれだと不便だね。できたらWebアプリ製作で使えるエディタを入れるといいよ。コードの自動補完があれば開発効率が全然違うから。
ひとまず、HTML/CSS/JavaScriptの編集に使える。エディタは色々な種類があるから試して、自分に合ったものを使ってみるのがいいと思う。無料で使えてそこそこ評判がいいのはこのあたりかな。
■Atom
■Brackets
■Visual Studio Code
■Sublime text」
「わかった。ブラウザはインストールしなきゃいけないの？ 今使ってるやつだとだめ？」
「Google Chromeを使うので、入ってればいいよ」
「入ってるよ。でもなんでGoogle Chromeなの？ Firefoxとかだといけないの？」
「ダメではないけど、世界で一番使われているのがGoogle Chromeだからね、できる限りシェアの大きいブラウザを使うのが無難だね。ブラウザによって見た目が若干変わるからできる限り標準のブラウザを決めておくのがいいよ」
「なるほど、じゃぁ色々と見ていこうかな」
このあと私はいくつもエディタをインストールして、使い勝手のよさそうなものを選ぶのだった。うーん、小説投稿サイトを作るのって大変だな。
Webアプリケーションの作り方は色々とありますが、今回は一昔前の比較的スタンダードなWebアプリケーションフレームワークを用いたWebアプリを作る方法で進めていきます。
最近だとプログラミングしなくてもWebアプリを作れるノーコードサービスや、少ないコードで実現できるローコードサービスもありますし、人工知能を使ったアプリ作成も研究が進んでいますね。
あくまでも一例ということを覚えていてください。
なお、Webpack, Docker, SCSS, TypeScriptなどは説明しません。今だとそれらも結構必須になっている気がしますけど、私の能力では説明が無理なのと日数的に無理です。知りたい人は勉強してね。
あぁ、アプリを作りたい人はKotlinやSwiftを勉強して作ることになります。Webアプリケーションの作り方とは若干違うのでここでは扱いません。作りたい人は調べてね。
