こんにちは。
看護系のWebサイト「Nurse Work」の開発と運営を行っています。
以下が私が開発と運営しているサイトになります↓
https://nursework.site/
このブログではノーコードで開発・運営中の「Nurse Work」を例に、非エンジニアでなくてもノーコードで開発できるやり方を発信しています。
今回の記事ではノーコードBubbleでwebアプリケーションを作る前に抑えておきたい用語を解説します。
エンジニアやIT系の職種ではない方は、ITではよく使う用語や知識は聞いたことがないものばかりだと思います。
ノーコードBubbleを始める前にこの記事で学習して少しでもハードルを低くしましょう!
・ノーコードBubbleで使う用語がわかる ・ITの一般的な用語がわかる
必ず知っておきたい用語や知識
ここではノーコードBubbleを始める上でよく目にする用語や知識をピックアップしてみました。
ノーコード
ノーコードとはプログラミングを使わずに開発できるツールです。
コードを記述せずに、ドラッグ&ドロップなどの操作でWebサービスなどを開発できます。
ノーコードでWebアプリケーションを作ってみたい方は
・Adalo
・Bubble
が代表格です。
Bubble
Bubbleとはノーコード開発ツールになります。
最も開発できるアプリの幅が広いため1番汎用性が高いと言われています。
「ノーコード」にも書いた通りWebアプリケーションを開発するのであれば、Bubbleが代表格になるかと思います。
実際にBubbleで作れるサービス例
・業務改善システム
・eラーニング・教育アプリ
・ECサイト
・SNS
・マッチングアプリ
非エンジニアの方はBubbleよりもAdaloから触ってみた方がいいかもしれません。
AdaloもBubbleと同様のノーコードツールですが、BubbleはAdaloに比べると機能性のカスタマイズが豊富なため難しいと言われています。なのでまずAdaloから始めたほうがいいかもしれないです。
Webアプリケーション
まずWebアプリケーションとはインターネットを通じてブラウザ上で利用できるアプリケーションのことです。
具体的にどんなサービスのことかと言うと
業務改善システム
・eラーニング・教育アプリ
・ECサイト
・SNS
・マッチングアプリ
・ネットバンキング など
フロントエンド
「フロントエンド」とはWebサイトやWebアプリケーションにおいて、ユーザーが直接見たり操作したりする部分のことを指します。
具体的には
・Webページのデザイン・レイアウト(色、フォント、配置など)
・ページの動きやアニメーション
・見出し、段落、画像など
簡単に言うと「ユーザーが見る画面を作る」のがフロントエンドです。
本来、以下のフロントエンドの技術(言語)を使って画面を作ります。
・HTML
・CSS
・JavaScript
しかし、これらの技術の知識がなくてもできるのがノーコードになります。
バックエンド
「バックエンド」とはユーザーからは見えない部分で、Webアプリやサービスの裏側を支えるシステムのことを指します。
具体的には
・ユーザーがログインしたりパスワードの管理
・データの処理や保存、検索結果の出力
フロントエンドが「ユーザーが見る画面を作る」に対し、バックエンドは「ユーザーから見えない処理部分」になります。
バックエンドの技術(言語)は以下になります。
・Python (Django, Flask)
・PHP
・Ruby on Rails
・Java
・Go 等
もちろん、こちらの技術(言語)を使わなくてもバックエンドの役割もノーコードで可能になります。(因みに、私がエンジニアのときは会社でJavaを使っていました)
例えば、、
「この商品の詳細を見たい!」→ボタンをクリック ☜フロントエンド
「その商品情報をデータベースから探して表示」 ☜バックエンド
データベース
「データベース」とはデータを整理して保存しておく場所(箱みたいなもの)のこと。
ノーコードでデータベースの操作が簡単になりましたが、使いこなすためにはデータベースを理解することが重要になります。
具体的には
・顧客管理:名前、電話番号、住所など
・ECサイトの在庫管理:商品名、在庫数、価格など
・社員名簿:社員番号、氏名、部署、役所など
例えば、、サイトにログインしたいとき
IDとパスワードを入力してログイン→ログインしてきた人のIDとパスワードがデータベース上にあるか検索→データベース上にあればログインできる!みたいなイメージ
よく使われる有名なデータベース
・PostgreSQL
・Oracle Database
・MySQL
・Microsoft SQL Server
※エンジニアのときは会社でOracle Databaseを使っていました。
ノーコードBubbleではデフォルトでデータベースが備わっており上記のデータベースを使う必要がありません(状況によっては使う必要あり)。しかも、上記を使ったことがある私からするとかなり操作しやすく簡単なのが魅力です。
レスポンシブデザイン
レスポンシブデザインとは、デバイスの画面サイズに依存しないサイトを構築することで、スマホやPC、タブレット端末など画面幅が変わるときでもページのレイアウトを崩すことなく表示する技術のことを言います。
「デバイス」とは→日頃使っているパソコン・タブレット・スマートフォンや、それらと接続して使う装置の総称です。
ノーコードやノーコードでなくてもレスポンシブ設定をする必要がありますが、ノーコードの方が簡単で操作しやすいです。
例えば、PCではきれいに表示できているのにスマホで見るときれいに表示されていない、、、はレスポンシブデザインがしっかり機能されていないということになります。
開発環境
開発環境とはシステムに関するソースコードの記述や修正を行ない、開発中のシステムが動作するかどうかをチェックするまでの過程のことです。
簡単に言うと、システムやアプリを作るときに使う“作業スペース”のようなもので、ここでプログラムを書いたり、うまく動くかを試したりしながら、少しずつ形にしていきます。
実際はこの”環境をつくるところ”から始まるのですが(これを「環境構築」と言います)、Bubbleではもう既に構築されているのでその手間が省けます。

↑Bubbleの開発画面
Bubbleでは写真の右上に「Main」と表示されていますがこれが表示されているときは、開発モードになっておりこの状態で作業を行います。
本番環境とデプロイ
本番環境とはインターネット上で世界中の人々がWebアプリを使用できる状態のことです。
ここで初めてネット上で自分が作ったものを他の人が見たりすることができます。
なので公開するには、開発環境から本番環境に切り替える必要がありこれを「デプロイ」と表現します。Bubbleではこの切り替えはとても簡単で操作しやすいです。
以上「ノーコードBubbleでwebアプリケーションを作る前に抑えておきたい用語」でした。参考にして頂けると幸いです。