Help us understand the problem. What is going on with this article?

ド初心者が初めてのWebサービスを作ってみた

概要

普段は組み込み系ソフト開発の仕事をしているのですが、簡単なのでもいいからWebサービスをサクッと作れると
出来ること広がるかなぁと思って挑戦してみました。その過程で思ったこと、遠回りしたことの備忘録です。

作ったものと動機

Latitude and Longitude Unit Converter
2019/4/30 記事修正: Bootstrap4を使って大幅にUI変更、URLも変更

緯度・経度を種々の単位で相互変換するサイトです。Webサービスというか、ただの便利計算サイトです。

こういう単位変換サイトは既に沢山あるのですが、よく使われる単位を網羅し、かつGoogle Mapで場所を表示できるサイトは意外となかったので作成してみました。(つまり半分自分の本業用です)

なお、入力値の範囲チェックなどが未だちゃんとしてません。今後修正予定です。

やってみようと思った時点でのスキル状態

  • 本業でPython/Linuxはある程度慣れている
  • Javascriptは1行も書いたことがない、変数宣言のやり方も知らない
  • WebアプリケーションフレームワークとWebサーバの違いが分かっていない
  • サーバ管理も経験がない
  • HTML/CSSは見たことは流石にあるが自分で書いたことはない

困ったこと

とにかく全体像を体系立てて把握できていないことが辛かったです。
QiitaにWeb関連の記事は多いですが、キーワードだけでもNode.js, Javascript, Django, Ruby on Rails, HTML, CSS, Bootstrap, Typescript, Apache, nginx, Laravel, jQuery, Vue.js, React, Gunicorn etc. etc.といろんな情報が溢れていて何がなんだか、という感じでした。

  • AngularとかVue.jsとか沢山Qiita記事あるけどWebサイト作るのに必須なの?
  • Vue.jsとRuby on Railsは何が違うの?

みたいな感じで見当違いな困惑を持っていました。

最初に始めたこと

最初はDjango GirlsのTutorialから始めました。
明確な意図があったわけではないですが、Pythonは本業で使っていたのでとりあえずPythonの「Webっぽいもの」をやってみようと思った訳です。「左手を伸ばしたら壁があったのでとりあえず壁伝いに歩いてみた」という感じです。

Django GirlsのTutorialはかなり親切で、"How the Internet works"レベルからだったので色々勉強にはなりました。
また、templateを使って実際にHTMLを書いて表示してみて、手触りは得られた気がします。

今になって思えば、今回作ったものはDjangoなんて必要ありませんでした。(DjangoでModelを定義するとそれがDB設計に繋がるようですが、今回のサイトはDBなんて使っていない)
しかしながら、このおかげで世の中の多数のWebサービスが本質的にはDBの更新またはDBの内容表示に過ぎないことを理解できました。
(アタリマエのことをと言われそうですうが、その程度も私にとっては発見でした)

作るネタを考える

この時点ではまだ緯度経度の変換サイトを作るつもりはありませんでした。もっと素晴らしい物を作る気でいました笑。しかし調べれば調べる程、一発目は学習コストを最小限にしないとキリがないという気分になってきました。
そこで「本業であったら便利だな」と思っている緯度経度変換に特化して作ろう、と決めました。

Javascriptで緯度経度変換の実装

緯度経度の変換の実装をJavascriptでやるべきなのか、Django側でPythonでやるべきなのかがわかっていませんでした。
この時「いちいち変換ボタンを押さずに動的に変換したい」と思っていて、どうもそれをやるにはJavascriptで実装しないといけないらしいと分かりました。

Typescriptで書くとJavacriptよりも慣れた形で書けそうだ、ということは分かっていたのですが、
Javascriptを一度も書いたことがない状態ならまずはJavascriptの基本は知っておくべきだろうと思って
素のJavascriptで書くことにしました。その過程でJSテストフレームワークのJestも使ってみました。

Google Map APIで地図を表示する

Googleの公式説明が充実しているのでそんなに手こずりませんでした。
しかしながら、手違いで無料枠を超えたら怖いのでAPIの各種restrictionsやquota(回数制限)の設定は緊張しました。

VPSを借りる

Djangoで作ったアプリをlocalhostで動かすことは慣れてきたものの、
ではこれを一般に公開するにはどうしたら良いのか、と調べてみて
どうやらVPS(Virtual Private Server)を借りてそこでnginxを動かせばればよいと理解しました。
(今思うと、先にそっちをやって"Hello worldでいいから先に公開して全体像を掴んでおくべきだった"と思います)

無難にさくらインターネット様かConoHa様かで迷いましたが、美雲このはちゃん可愛いなーと思ってConoHa様で月額900円のプランをお借りしました。OSは本業で使い慣れているUbuntuにしました。

nginxとuWSGIでハマる

VPS上でDjangoで作ったWebアプリとnginxを接続するためにuWSGIというものを使う必要があると理解し、
多少苦戦しました。設定ファイル登場し過ぎだよ。エラーメッセージを沢山読んで乗り切った。

振り返り、感想

  • Djangoを勉強してからVPSを借りてnginxを入れて公開という順序だったが逆だった。先にVPSを借りてHello worldだけでいいから公開すべきだった。
  • DjangoじゃなくてFlaskでも十分だった。というかWebアプリケーションフレームワーク使う必要なかった。勉強する過程で気づきもあったので完全に無駄とまでは言えないが。
  • やることが広く浅くなので、横着せずにやったことや打ったコマンドはMarkdownでまとめておく。時間が空くと忘れる。
  • Javascriptが標準ではCやPythonでいう#include, importの類を使えないことに焦った。var変数のスコープにも衝撃を受けた。
  • すいてて長時間滞在を許してくれる喫茶店の確保は重要。コーヒーだけじゃなく食事も注文すること。コーヒーは3時間に1回はおかわり注文すること。
shino_312
三十路前半のソフトエンジニアです。センシング、ロボット系の仕事を4年ほど続けています。 その前の仕事は所謂パワポエンジニアだったため、まだまだ勉強中の身です。 最近はブログの方をメインで書いています。
https://shino-tec.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away