u-yas.dev Open in urlscan Pro
2606:4700:3032::ac43:d8db  Public Scan

Form analysis
0 forms found in the DOM

Text Content

U-yas Blog Open main menu
 * ホーム
 * 自己紹介
 * 作品・活動
 * 連絡

 

フロントエンドから逃げたくて、ノーコード、ローコードツールを探す旅に出てました

雑ポエム

美しい画面を作るためにいつまで僕らは暗い画面でタグを囲み続けないといけないのでしょうか・・・俺は・・・フロントエンドから逃げる！！！

投稿日: 2023年01月25日




フロントエンド、めんどくさい

フロントエンドエンジニアとして働いて１年ちょい、日に日にこの気持が強くなってきました。今にもこの気持が爆発しそうです。

なんで令和にもなってUIを組み立てるために暗いエディター画面でhtmlとかcssとかと格闘しないといけないんだ！！！なんでいちいちhotreloadして「あーここずれてる・・・」とかやらないといけないんだ！「Atomic
Designが～～(ﾆﾁｬｧ」「いや、いまはPresentational,Containerdパターンの時代で～～～(ﾆﾁｬｧ」とか議論しないといけないんだ！！

もっとこう、Figmaみたいなツールでシュッとコンポーネントやページを作って、それをシュッってデプロイできるようにできるだろ！！！絶対そんなツール作ってるやつ世界中にゴロゴロいるだろ！

あ！これって今流行りの「ノーコード」「ローコード」ってやつじゃん！！！！！！！

というわけで、フロントエンドから逃げるために、今流行りのノーコード、ローコードツールをいくつか触ってきました。結論としては

 * 静的サイトを作るだけなら十分いける。だけど動的な状態を駆使ししたり、apiを叩いて引っ張ってきて～みたいなjavascriptを多用するユースケースではまだ難しいだろうな
 * ベンダーロックインが激しすぎる
 * 結局有料プラン入らないと行けないケースがほとんど
   * 「俺たちのツールで作ったサイト公開できるぜ！俺たちに毎月〇〇$払ってくれたらな！！」
   * 「毎月〇〇アクセスまでは無料だけどそれ以降は俺たちに毎月〇〇$払ってくれよな！！」

こんな感じのばっか。

以下、とりあえず登録してみて30分くらい適当に触ってみた感想です


BUILDER.IO

BUILDER.IO: DRAG & DROP HEADLESS CMS

Drag and drop with your components, right within your existing site or app.
Build and optimize digital experiences for any tech stack, visually..

https://builder.io/

 * カスタムでhtml attributeとかcssプロパティとか細かく設定できる
 * javascriptわかる人なら自分で書いたコード埋め込める
 * apiからデータ引っ張ってくるのもノーコードで書ける
 * いいじゃん
 * integrationsも豊富
 * アカウント消そうとしたらサポートに連絡しないと無理らしい
 * 利用規約の同意とかなにもないくせにちょっと軽い気持ちでgoogleログインしたらこれかよ！！！

> Deleting your account To cancel or delete your account, contact Builder
> support. To end your Builder subscription: If you have installed the
> Builder.io: Pages & Sections app, you can remove the app from your store. If
> your subscription is managed through Builder (CMS), you can switch to the free
> plan to cancel your subscription.


TELEPORTHQ

LOW-CODE FRONT-END DESIGN & DEVELOPMENT PLATFORM | TELEPORTHQ

Front-end development platform, with a visual builder and headless content
modelling capabilities. Static website creation, and UI development tools.

https://teleporthq.io/

 * 若干動作がもっさりしているが、Figmaより使いやすいかも
 * 細かいCSSの調整ができる
 * ReactやVue、やその他諸々のプログラムのコードを吐き出してくれる
 * 無料プランでもかなり行ける
 * ベンダーロックインが一番少ない
 * ソースコード吐いてくれる
 * javascriptの埋め込みはできるけどあまり親切じゃない・・・・？

こいつは**「雑にコンポーネント・レイアウトをデザインして自プロダクトにコピペしてから動的なロジックを埋め込む」**用途で使えばかなり便利だなと感じた


BUBBLE.IO

THE BEST WAY TO BUILD WEB APPS WITHOUT CODE | BUBBLE

Bubble introduces a new way to build software. It’s a no-code tool that lets you
build SaaS platforms, marketplaces and CRMs without code. Bubble hosts all web
apps on its cloud platform.

https://bubble.io

 * 一番「みんなが頭の中で思い浮かぶノーコードツール」って感じだった。今回調べた限りでは一番いろんなことができる気がする

 * プラグインも豊富、stripeとかgoogle analyticsとかが埋め込める

 * うおおおおおおおって思ったけれど、無料だとサイトを公開できない

 * 毎月29$、年払い換算だと月25$払わないといけない

 * プロジェクト複数だとprofessionalプランに入る必要があり、100$超える

 * むりだろ


APPSHEET

手軽さは一番

だけどスプシをデータベースとして扱う運用はうまくいくはずが・・・

そもそもプログラミングができない情シスが業務アプリケーション作るのに利用する感じがする


まとめ

僕が考える理想のノーコードツール

 * ソースコードが公開されている
 * カスタムプラグインのマーケットプレイスがあって自由にプラグインを追加できる
 * vscodeみたいな感じ
 * html・css・jsの吐き出しができる
 * フレームワークのコードで吐き出してほしいけどいちいちそんな事やってたらキリがないから、そういうのはプラグインとかでできるようになればいいかな
 * 自分の好きなところにデプロイできるようにしたい
   * AWSとかGCPとかCloudflareとかさ
 * 動的なロジックをノーコードでかける
   * UiPathみたいな感じでさ
   * リッチなSPAみたいなのがノーコードで作れたら最高って感じがする
 * 全機能無料

これらを満たすワガママツールは見つかりませんでした。Bubble.ioの機能を全部利用できてTeleportHQみたいにエクスポートができて、Bubble.io、Builder.ioみたいにintegration・プラグインが豊富で利用、サイト公開は完全無料でできるツールを見つけたらぜひご連絡ください。


Twitterで感想をツイート

真に型安全なTypescriptを実現するには ※こんなのネタだって自分でもわかってるんだ

TOPへ

2022年の振り返り〜2023年にやりたいこと




目次

 * フロントエンド、めんどくさい
 * Builder.io
 * TeleportHQ
 * Bubble.io
 * AppSheet
 * まとめ

© 2022 U-yas All Rights Reserved.