はじめに

普段はデータサイエンティスにしか興味のない私ですが、仕事でアプリ開発プロジェクトのリーダーに任命され、その引き合いで友人のアプリ開発を手伝うチャンスを頂いたので、デモアプリを作ってみようと思いました。頼りになるエンジニアの協力の元、NetlifyというWebアプリケーション開発プラットフォームを使用し、デモアプリを作る事にしました。開発ど素人なのでまずは自分のできる範囲から手を出していき、Qiitaにまとめながら、Webアプリ開発に慣れていこうと思っています。今回はその初回として、Netlifyの使いかをまとめたいと思います。

Netlify

Netlifyはサンフランシスコをベースとするクラウドコンピューティングの企業である。静的ウェブサイトのためのホスティングサービス（英語版）とサーバーレスのバックエンドサービスを提供している。
グローバルなアプリケーション配信ネットワーク（英語版）を介したGitからの継続的デプロイ、サーバーレスのフォームハンドリング、AWS Lambda functionsのサポートLet's Encryptとの完全な統合を特徴としている。無料プランと有料プランを提供している。
Netlifyのユーザーとしては、Google、Facebook、Verizon、NBC、Samsung、Cisco、Atlassian、Vue.js、Citrix、Peloton（英語版）、Kubernetes、Lodash（英語版）、Smashing Magazine（英語版）、Sequoia Capitalなどがいる。- wikipedia

今回は、先輩エンジニアが後輩エンジニアに教えていたデモアプリの作り方を見様見真似で、遠い記憶を呼び起こしながら真似してみます。

作業の流れ

作業の流れとしては以下の様に進めていきたいと思います。

Netlifyでデモサイトをデプロイする・GitHubにソースコードをクローン
クローンしたソースコードをローカルで編集しコミット
GitHubでマージし、編集が反映されているか確認

1. NetlifyでデモサイトをデプロイしGitHubにソースコードをクローン

アカウント作成

はじめにNetlifyのHPへ行き、アカウント作成をします。特に気にすることはないのですが、後々GitHubのアカウントと連携させるので特別な理由が無ければGitHubのアカウントを使用してアカウントを作成しましょう。

デモサイトデプロイ

次にStart from a tmplateをクリックし、デモアプリをデプロイします。今回は最もシンプルであろうSolid Quickstartを選択しデプロイします。

GitHubを選択し、リポジトリを指定しクローンを作成します。

特に何も変更せずにDeploy siteをクリックします。これでNetlifyの方の操作は終わりです。

サイト一覧に先ほどデプロイしたサイトのURLが載っているのでデプロイできているか確認してみてもいいでしょう！
→https://animated-phoenix-bd8d47.netlify.app/

HELLO WORLD!の文字とClicks:のボタンがあり、ボタンをクリックすると数字が1づつあがっていくサイトの様です。

2. クローンしたソースコードをローカルで編集しコミット

GitHubにデモサイトのソースコードがクローンされている事を確認します。

solid-quickstartリポジトリのsrc/components/Counter.tsxを開きます。Counterファンクションを少しいじってみます。とりあえず、1クリック毎の上昇数を1から100に変えてみます。

import { createSignal } from "solid-js";
import "./Counter.css";

export default function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <button class="increment" onClick={() => setCount(count() + 1)}>
      Clicks: {count()}
    </button>
  );
}

GitHubよりリポジトリをクローン。

Sourcetreeを開き、New → Clone form URLを選択し、クローン先を指定し実行します

ローカルにクローンできたのでCounter.tsxを編集します。

setCount(count() + 1)をsetCount(count() + 100)に変更して保存します。

import { createSignal } from "solid-js";
import "./Counter.css";

export default function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <button class="increment" onClick={() => setCount(count() + 100)}>
      Clicks: {count()}
    </button>
  );
}

変更を保存してコミットをプッシュします。
(SorcetreeとGitHubの連携方法はこちらの記事が参考になりました。SourceTreeの使い方 GitHubとの連携方法 by 株式会社ICS 野原のぞみさん)

3. GitHubでマージし、編集が反映されているか確認

プッシュされたコミットをGitHub上でマージし、Netlifyのサイト概要のページに飛ぶと、Production deploysにコミットの反映状況がわかります。これがPublishedステータスになっていれば変更が反映されます。(1~3分程度でパブリッシュされました)

100単位でのクリックが可能に！

終わりに

開発ど素人の私ですが、特に詰まる事なく変更をデプロイできました。Netlifyでデモアプリ/Web開発の参考になればと思います。リポジトリにデータ(csv?json?db?)があればそのファイルを参照する事もできるらしいので、次回はそれに挑戦してみたいと思います。

【Netlify】デーサイがNetlifyを試してみる