ノーコードのイントロダクション
これまでにノーコードに関する記事をいくつか書いてみました。
すいません、煽り文句を言ってしまい、少し誤解を与えていたかもしれません。
「これからの時代、ノーコードが世界を変える」、「小学生でもノーコードですごいサービスを作れる時代になる」と言うようなことを記事の中で話していたと思うのですが、必ずしもそうではないかもしれません。
どういうことかと言うと、ノーコードがプログラミングより簡単というのは間違っているということです。
プログラミングで何かサービスを作る際、事前に勉強をしておく必要があるし、頭をフル活用して作り上げて行かなくてはならないのですが、自由に実装できるし、どんな仕様にするのかまで決める事ができます。
例えるならば、人と話す時に「なんでもしゃべってOK」という状態です。冗談も言っていいし、バカげた話も可能な状態です。なので、組み立てる過程が楽しかったりします。
ですがノーコードでサービスを作るとなった時に、そのノーコードツールでどこまでできるのかを把握しておく必要があります。
お客さんが望んでいる仕様のものをそもそも作る事ができるのかを、制作する前段階で判断できる必要があります。
人と会話する時に、特定の禁止ワードがあったり、英語は禁止って言われているようなものです。会話する時って、いちいち考えすぎていたら疲れちゃいますよね。
ノーコードとはどう言ったものなのか、どんな特徴があって、コーディングなしで作る開発現場とはどんな感じになるのか？こう言ったことをちゃんと理解したほうがいいのではないでしょうか？
学習のため、興味があるからという理由で構いません。闇雲にノーコードでなんでもできるとたかをくくるのはやめましょう。
今回の記事では、ノーコードで開発する時ってどんな感じになるのかを取りあげようかと思います。
結構こういう類の記事って目にする事がないですよね。この記事にたどり着いたあなたは偉い！！
エンジニアとして、ノーコードでの基礎理解を深める事は今後のキャリアアップにも良いのではないかと思います。
それではいってみましょう。
ノーコードの前身である統合開発環境（IDE)について理解しよう
ノーコードについてお話をする前に、統合開発環境（IDE)というものをお話しできればと思います。
IDE とは、今で言うと Visual Studio Code や、Xcode、Android Studio のようなもののことです。プログラミングコードを書いていくエディタや、実行するための機能、コンパイラ、バグを発見するためのデバグ機能を持った、開発環境のことを IDE と言います。
HTML や CSS でコードを書くときは、おなじみの Visual Studio Code を使われることでしょう。iPhone アプリを作るときは Xcode で作ることかと思われます。
IDE のおかげで、開発途中で様々なエラーを発見できますし、開発効率を高くするためのプラグインも追加できます。
コードの自動補完もやってくれます。 <div class = “s2”> なんて HTMLタブを打ち込みたいときは、.s2 と打ち込めば自動で補完してくれます。
「この自動補完をもっと進化させよう」と言うコンセプトで開発されたのがノーコードです。
視覚的にブロックをつなげてプログラミングをできるようにしたもの、と言うと理解しやすいかなと思います。
ノーコードで有名な bubble についてみてみましょう。
ノーコード開発をするエディタとして bubble を使います。もはやエディタと呼ぶのも違うのかもしれませんね^_^;。
まずは bubble にサインアップして、ログインしましょう。するとこんな感じの↓ページに進みます。
ユーザーのサインアップ機能をノーコードで作ってみよう
bubble のトップページまで進みましたね。サインアップ機能を作ってみましょう。サインアップとは、ログインできるように、ユーザー登録をすると言う機能のことです。
ここで、Building a sign-up system の Start lesson を押してください。
こんな感じのエディタが出てきます。左側の項目をつまんで、右側のキャンバスの中にドラッグ & ドロップすると、
こんな感じ↑で配置していく事が可能になります。これにより、視覚的に Web ページを開発する事ができます。
左側の Input をつまんで、貼り付けてみましょう。すると黒いメニューのようなものが出てきます。 Placeholder と言う部分を User name にしてみてください。 すると、Input のテキストフィールドの中に、薄ら User name と言う文字が浮かび上がります。
Input タブをもう一つ作成し、Placeholder を Password にしましょう。そしてボタンを配置します。↓こんな感じになります。
Appearance の部分を Sign up と書いてみましょう、するとボタンの中身の文字も変化しますね↓。
同様にログインボタンも作りました。
ここで、黒いメニューの中の Start/Edit workflow と言う部分を押してください。
すると、こんな↓画面になります。Click here to add an action を押してみると、
こんな感じになります。左上の、 When と書かれている灰色の BOX はどんな操作が行われたときかを表しています。今回の場合ですと、「Sign up のボタンがクリックされたとき」です。Click here to add an action を押すと、「ボタンがクリックされた時にどんな操作をしますか」と言う、 ボタン押下後の action を選ぶメニューが出てきます。
ここで、 Sign the user up を押してみましょう。すると、こんな感じ↓になります。
赤枠で囲われた Click を押してください。すると↓こんな感じになります。Input User name を選んでください。
‘value を選択してください。ここを選択すると、「先ほどのテキストフィールドに入力された情報でサインアップします」と言うことになります。
同様に、Password も同じようにしてやります。こんな感じ↓。ここまでやったら、サインアップまでの実装ができたことになります。
テキストフィールドに書いた文章、すなわちユーザーネームとパスワードがサインアップ（顧客情報として登録）される機能が実装されました。
左上の点線のボックス Click here to add an event… と言うところを押してください。
そして Elements > An element is clicked を押してみましょう。
また黒いメニューが出てきます。今度は ログインボタンを押した時のアクションを指定しましょう。Element > Button Login を押して下さい。こうすることで、「Login ボタンが押された時に」と言うイベントを指定する事ができます。
イベントを指定したら、今度は Log the user in を選択しましょう。
するとこんな感じ↓ででてきます。また、先ほどと同じようにしてやりましょう。
こんな感じ↓にしてやります。
ここまででログイン機能とサインアップ機能を作る事ができました。次に、きちんとログインできているかどうかを確認できるボックスを追加しましょう。
最初の Design の画面の左側に、Container と言うのがあります。Container > group を押して、適当なところにドラッグ & ドロップして下さい。
そして、その中にテキストを配置しましょう。同じように左側から引っ張ってきて下さい。するとこんなふう↓に、黒いメニューが出てきます。青い箱の中にInsert dynamic data と書いてあるのですが、ここに動的な値を書く事ができます。動的とは、リアルタイムでの状態、と言う意味です。
つまり、リアルタイムでログインをしているかしていないかを表示させる事ができます。バックグラウンド上での、裏方の情報を引っ張ってくると言う感じになります。
この青い箱をクリックするとこんな↓感じになります。Current user と言うのを選んで下さい。Current user’s email と指定してやりましょう。
最後に、ログアウトボタンを追加しましょう。左側の button を引っ張ってきて下さい。そして、Log out としてやりましょう。
Workflow の画面を開いて、新しいイベントを作りましょう。Element > An element is clicked を押し、ダブルクリックをして、Log out ボタンが押下された時と指定しましょう。。
Click here to add an action > Account > Log the user out を押して下さい。
続いて、ユーザーがログインしている時の動的なデータを引っ張ってくる部分も作ってやりましょう。
イベントを作成し、User is logged in を指定しましょう。ログインをしている状態での処理を作成します。
Click here to add an action > Element Actions > Show を押して下さい。
すると、黒いメニューが出てくるので、element の部分を Group A にして下さい。
これで出来上がりになります。
右上の Preview を押して下さい。Preview 画面になります。
このままサインアップをすると、エラーが出ます。
適当にサインアップしてログインをすると、こんな感じで、current user name が出てきますね^ – ^。
サインアップしていないユーザー名やパスワードを入れるとこんな風に↓エラーが出てきます。
いかがですか？ノーコードについてなんとなく理解はできてきたでしょうか？
なんとなくこんな感じで作るものになります。視覚的に作れると言ったわけが見えてきたでしょうか？
小学生でもすごいサービスが作れてしまうと言うのもなんとなく掴めてきたのではないでしょうか？
ただ、冒頭でお話ししてきた通り、ノーコードではある程度の禁止ワードであったり、実装できない部分があったりします。そこに関してはコードをガリガリ書いている方が自由度が高く、かつ楽しくできます。
今回の記事でノーコードをなんとなく理解していただけたら幸いです。
もしよかったらこちらの書籍も併せて読んでみて下さい。
