#はじめに
2020年3月からプログラミングの勉強を始めて、7月までにWebサービス制作に挑戦しているプログラミング素人の制作記録です。
#自分の技術レベル
・ProgateでHTML/CSS、JavaScript、Node.JSを受けた
・Expressフレームワークでget通信とpost通信を扱えるようになってきた
・JSのasync/awaitの概念が少しだけ理解できてきた
・Promiseは理解できていない
・obnizを触ったことがある
https://note.com/hiromae/n/n4850983a3f92
#目標制作物＆必要な技術ロードマップ
熱くなる季節に向けて、熱中症予防のための温度検知サービスの制作に取り組んでいます。
身近な問題をIoTで解決できないか考えてみた
https://note.com/hiromae/n/n0e4a88bb501c
■現在構想しているサービス像
制作のために今後身につける必要がある技術が山ほどあります。
今回はサービスURLの割り当て方法について調査し、独自ドメインを取得できるサービスに触ってみました。
あわせて、初回ログイン画面のサンプルを1枚作ってみました。
#今回インプットしたもの
指定したドメインを期間限定で取得できるfreenomというサービスの存在を知りました。
freenomで無料ドメインを取得する｜ふじい｜note
https://note.com/dafujii/n/n406f385651e2
利用には無料アカウント登録が必要です。
#今回のアウトプット
freenomで発行したURLを、herokuにデプロイして生成されたURLをに紐づけます。
現在テスト的に制作中のWebサービスのログイン画面（制作中）に飛ばすことができました。
尚、最近勉強を始めたvue.jsで入力フォームのバリデーションチェックをしようとVuelidateというライブラリの活用に挑んでみましたが、途中で理解できなくなりメールアドレスチェックのみしか実装できませんでした。
これでわかるvue.jsのフォームバリデーションVuelidate
https://reffect.co.jp/vue/vue-js-validation-vuelidate
vue.js、すごく便利そうですがライブラリを使いこなすには基礎をちゃんと勉強しないと難しそう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
<title>ログイン</title>
</head>
<body>
<header>
<div class="container clear">
<div class="header-left">
<h1>サービス名</h1>
</div>
<div class="header-right">
<ul class="header-nav">
<li class="header-nav-item"><a href="">リンク</a></li>
<li class="header-nav-item"><a href="">リンク</a></li>
<li class="header-nav-item"><a href="">リンク</a></li>
</ul>
</div>
</div>
</header>
<section class="section-login container" id="app">
<h2>ログイン</h2>
<form action="" method="" @submit.prevent="submitForm">
<div class="form-group">
<label for="email">メールアドレス</label>
<input type="email" name="email" class="form-control" id="email" />
</div>
<div class="form-group">
<label for="password">パスワード</label>
<input
type="password"
name="password"
class="form-control"
id="password"
/>
</div>
<button type="submit" class="btn login-btn">ログイン</button>
</form>
</section>
<footer>
<div class="container clear">
<p class="copyright">Copyright(C) 2020xxxxx</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.4/dist/validators.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.4/dist/vuelidate.min.js"></script>
<script>
Vue.use(window.vuelidate.default);
const { required, email } = window.validators;
const app = new Vue({
el: "#app",
data: {
title: "入力フォームバリデーション",
email: "",
password: "",
},
validations: {
email: {
required,
},
},
methods: {
submitForm() {
console.log("submit");
},
},
});
</script>
</body>
</html>
#振り返り
・期間限定のリリースなら無料でドメインを取得できるようなサービスが既に世の中にある
・freenom重い・・・
・サービス作るならプログラミング技術だけでなくてフロント画面のユーザーインターフェースもちゃんと考えないといけない