新卒エンジニアがNoCode触って感動した話

自己紹介

はじめまして!株式会社Hajimariでエンジニアを担当している保坂(@michael_progs)と申します。
今年の4月に新卒として入社しました。
普段は大きく分けて次の3つの業務を行っています。

  1. inteeという学生のファーストキャリアをサポートするサービスの開発
  2. ソースコードリファクタリングを行うプロジェクトのリーダー
  3. リアルカレッジというプログラミングスクールの企画・運用・講師

今回はプログラミングなしで、サービスを作ることが出来るNoCodeについて書いていきます。
(NoCodeはエンジニアから見てもかなり感動するツールでした)

NoCodeとは

読んで字の如く、コードを書かずにサービスを開発できるツールのことです。

例えば何かサービスを作るときに、エンジニアがプログラミングをする必要があると思います。
しかしNoCodeを使えば、プログラミングをせずにサービスを作ることが出来ます!
今回僕も初めてNoCodeを使ってみたのですが、本当に感動しました。こんなにも短時間でクオリティの高いサービスが出来てしまうのかと。。。

ただ現状のNoCodeのツールでは、やはりエンジニアリングの知識が合ったほうがスムーズに開発できるように感じました。
なので、非エンジニアの方がNoCodeを使ってサービスを作るのには、現段階では少しだけハードルが高い気がしました。

しかし本当に革新的なツールなので、今後はNoCodeの需要が伸びていきそうです。NoCodeのこれからが楽しみです。

僕は今回bubbleというサービスを使いました。 bubble を選択した理由は以下の2つです。(気軽に選びました)

  • リアルカレッジ受講生がbubbleを使って、サービスを作ろうとしていたため
  • ネットで検索したときに、bubbleをおすすめしているサイトが多かったため

bubble.io

なぜNoCodeを触ってみようと思ったか

リアルカレッジ受講生が以下のNoCodeハッカソンに出場することになり、僕もその子達を応援したいと思ったからです。 ただ今までNoCodeを一度も触ったことがなかったので、この機会に触ってみようと思い挑戦してみました。

ncc01.nocodecamp.co.jp

NoCode触ってみた

実際にNoCodeを使って、ツイートを投稿出来るサービスを作ってみました。開発にかかった時間は60分くらいで、画面を見ながら直感的にサービスを作ることが出来ました。NoCode本当にすごいです!僕が60分で作ったサービスはこちらになります。

f:id:hosaka555:20200620190217p:plain
NoCodeで作ったツイッター

ツイートを投稿するだけの簡単なサービスですが、サイトのレスポンスも非常に速く、作っていてとても楽しかったです。 慣れてしまえば10分くらいで、同じようなものが出来てしまいそうです。

今回作ったツイートを投稿できるサービスの作り方の手順を簡単に載せておきます。
まずbubbleを開き、NEW APPよりアプリを新規で作成します。

f:id:hosaka555:20200622171320p:plain
NEW APPをクリックしてアプリを作成

次にアプリ名を設定しますが、このアプリ名がサブドメインになるので、他で使われていない名前にする必要があります。

f:id:hosaka555:20200622171346p:plain
アプリネームを設定

早速投稿フォームを作っていきます。(もともとあったエレメント(要素)やコンテナ(ブロック)などは削除しておきました)
左のメニューからInput forms > Inputを選択して、入力フォームを配置します。

f:id:hosaka555:20200622174540p:plain
投稿フォームを配置する

次にボタンを配します。先ほどと同様に左のメニューからVisual elements > Button を選択してボタンを配置します。

f:id:hosaka555:20200622174910p:plain
ボタンを配置する

ボタンの中のedit meをクリックして、投稿に書き換えます。

f:id:hosaka555:20200623093706p:plain
edit meを投稿に書き換え

次にDBにTweetテーブルを作成します。左のメニューから、Data を選択し、New TypeのところにTweetと入れてCreateをクリックします。

f:id:hosaka555:20200623094243p:plain
Tweetテーブルの作成

Tweetテーブルが作成されるので、続いてmessageというツイートを保存するカラムを追加していきます。 Create a new fieldをクリックして、以下画像のように設定します。

f:id:hosaka555:20200623094549p:plain
messageカラムを追加

これでTweetテーブルの作成は完了です!

次に投稿ボタンをクリックしたときにツイートをTweetテーブルに保存するようにしていきます。 左のメニューからWorkflowを選択し、以下画像のようにElements > An element is clickedを選択します。

f:id:hosaka555:20200623094825p:plain
ボタンをクリックしたときのイベントを追加

選択後は以下の画像のような感じになります。

f:id:hosaka555:20200623141849p:plain
選択後の状態

ここで上記画像のWhenをクリックして、出てきたポップアップウィンドウのElementのところに先程追加したボタンを選択します。

f:id:hosaka555:20200623104834p:plain
ElementにButton 投稿を選択

これで投稿ボタンをクリックしたときに何かしらのイベントを実行できるようになります。早速イベントを登録していきます。
Click here to add actionをクリックして、Data > Create a new thingを選択してください。

その後出てきたポップアップウィンドウに以下のように設定してください。

f:id:hosaka555:20200623110416p:plain
ボタンクリック時に登録するデータを設定する

これでツイートを投稿ボタンをクリックしたときに、ツイートをDBに登録できるようになりました!
左のメニューのData > App data > All Tweetsからデータが登録できているか確認できます。

f:id:hosaka555:20200623110723p:plain
ツイートを投稿できているか確認

いよいよ投稿したツイートを表示していきましょう! (実は投稿したツイートを画面に表示出来ずに40分くらい悩みました。。。)

まず投稿したツイートを表示するボックスを容易します。
左のメニューからContainer > Repeating Groupをクリックして以下画像のように設定してください。

f:id:hosaka555:20200623135532p:plain
ツイートを表示するためのボックスを用意する

次にRepeating Group の上に Text というエレメントを配置して次のように設定します。

f:id:hosaka555:20200623140518p:plain
ツイートを表示するためにTextエレメントを配置

これで右上のPreviewをクリックするとツイートが表示されていると思います!

f:id:hosaka555:20200623141534p:plain
投稿したツイートが表示される

めでたしめでたし

最後に

株式会社Hajimariでは、自社開発・受託開発を行っています。
一緒にLaravelやVue.jsを使って開発してくれるエンジニア・デザイナーを絶賛募集しています!

新卒・中途どちらも募集しておりますので、興味のある方は以下の記事をぜひ御覧ください!
みなさまとお会いできるのを心からお待ちしております。

www.wantedly.com

www.wantedly.com

躓いたところ共有しておきます

f:id:hosaka555:20200620190350p:plain
躓いたところ

その原因は次の2つでした。

  1. データを表示するエレメント(要素)を配置していなかったこと
  2. データ型を間違えていたこと

まず1つ目についてですが、データベースに存在する値を表示するときは、Repeating Group というエレメント(以下画像の赤色部分)を配置するだけで表示できると思いこんでしまっていました。
実際にはRepeating Group の上に Text というエレメント(以下画像の青色部分)を配置する必要がありました。 ここに気づくまでにかなり時間がかかってしまいました。。。

f:id:hosaka555:20200620191250p:plain
データを表示するエレメントを配置していなかった

2つ目がデータ型を間違えていたことです。
最初僕はTweetオブジェクトに存在するmessageというプロパティを表示したかったので、以下画像のようにData sourceを設定してしまっていました。。。

f:id:hosaka555:20200620192312p:plain
データ型を間違えていた

正しくは以下画像のようにData sourceに設定する値の型をType of contentに合わせて、Textエレメント上でTweetオブジェクトのmessageプロパティを表示するように設定することで上手く表示することができました。

f:id:hosaka555:20200620192520p:plain
Data sourceに設定する値の型をType of contentに合わせる

f:id:hosaka555:20200620192822p:plain
TextエレメントにTweetオブジェクトのmessageプロパティを表示するように設定する

でめたしでめたし