In-house Study Session: “Basics of Security”

We held an in-house study session, and I’d like to introduce it. The theme was “Basics of Security.” The session was led by Chicken Kiwi from Team 0.

During this study session, we learned about the risks involved when a security incident occurs and the basic measures that can be taken during daily work to prevent such incidents.

The session followed this flow:

The necessity of security
・Potential issues
・The five key principles of information security
・Security measures implemented by Dandelions
・Information security quiz
・Session Overview

The Necessity of Security

Here, we studied the necessity of security measures and the social, legal, and moral impacts on the company in case an incident occurs. We explored how security is crucial for maintaining the integrity and reputation of the company.

Potential Issues

In this part, we learned about possible security risks from actual case studies. We discussed not only the impact on the company from attacks but also the legal responsibilities of the company and management when security measures are insufficient, as well as how it can affect relationships between companies.

The Five Key Principles of Information Security

From the security guidelines published by IPA (Information-technology Promotion Agency), we learned about the key security measures individuals should take. We primarily reviewed the following points with examples and solutions:

Keep your OS and software up to date.
Use antivirus software.
Strengthen your passwords.
Review sharing settings.
Be aware of threats and attack methods.


Summary

This time, we studied the importance of security and basic countermeasures. The study session was based on the security guidelines published by IPA. IPA provides various resources on information security, so if you’re interested, please visit their website.

IPA Guidelines for Information Security for SMEs: https://www.ipa.go.jp/security/guide/sme/about.html

Stay tuned for the next article!

社内勉強会「セキュリティの基本」

今回の社内勉強会を行いましたので紹介します。テーマは「セキュリティの基本」となります。担当はチーム0のチキンキウイです。

今回の勉強会では、セキュリティインシデントが発生した場合、どんなリスクがるのかや、
普段勤務する上で、どのような対策ができるのかの基本について学びました。

勉強会は以下の流で行いました
・セキュリティの必要性
・発生し得る問題について
・情報セキュリティ5か条
・ダンデライオンズで行っているセキュリティ対策について
・情報セキュリティクイズ

勉強会の様子

セキュリティの必要性

ここでは、セキュリティ対策や、インシデントが発生した場合に、会社に発生する
社会的な影響や、法律、道義的な影響について学びセキュリティの必要性について勉強を行いました。

発生し得る問題について

ここのでは起こりうるセキュリティリスクについて、実際の事例から学びました。
会社攻撃により会社が受ける影響だけでなく、セキュリティ対策不備があった場合に会社や、経営者に問われる法的責任、会社間の関係性の変化についても学びました。

情報セキュリティ5か条

IPAが紹介しているセキュリティ5箇条から、個人きを付けるべきセキュリティ対策について学びました。主に以下のことについて事例や、対策について確認しました。

1.OSやソフトウェアは常に最新の状態にしよう
2.ウイルス対策ソフトを導入しよう
3.パスワードを強化しよう
4.共有設定を見直そう
5.脅威や攻撃の手口を知ろう

まとめ

今回はセキュリティの重要性や、基本的な対策方法について勉強しました。
勉強会を行うにあったってIPAで公開されているセキュリティ対策ガイドラインを参考としています。
IPAでは情報セキュリティについて様々な情報を発信していますので興味あがある方はwebページをのぞいてみてください。

IPA 中小企業の情報セキュリティ対策ガイドライン
https://www.ipa.go.jp/security/guide/sme/about.html

次回の記事もお楽しみに。

Engineer Blog – Trends in Low-Code Tools(Part 2)

As part of our engineer blog, we introduce the topics we are actively learning.
This time, we focus on low-code tools!

Theme: Trends in Low-Code Tools

In our previous blog post, “Trends in Low-Code Tools” – dandelionS Blog, published in July 2021, we discussed the latest developments in low-code tools.

Since then, more of our team members have gained experience with OutSystems, prompting us to conduct another trend analysis to explore the future outlook of low-code tools.

What Are Low-Code and No-Code?

The adoption of low-code and no-code tools is increasing to improve app development efficiency, enabling faster development and cost reduction.

  • Low-Code: Requires minimal coding for app development. Some programming knowledge is necessary, but it allows for flexible customization.
  • No-Code: Enables intuitive app creation without coding. However, customization options are more limited.

[Comparison table with representative tools]

Comparison of Major Low-Code & No-Code PlatformsThe market share of low-code and no-code platforms is primarily based on industry recognition and the number of companies adopting them. Below are the leading platforms ranked by market share:

Microsoft Power Apps

A widely adopted platform due to its strong integration with Microsoft products (especially Office 365 and Azure). As part of the Microsoft ecosystem, it allows businesses to easily create and manage applications.

  • Adoption: Used by organizations of all sizes worldwide, from small businesses to large enterprises.

OutSystems

A low-code platform specializing in enterprise solutions, excelling in large-scale and complex app development. It features strong automation and AI functionalities and is particularly popular among large corporations.

  • Adoption: Commonly used in industries like finance, manufacturing, and public institutions.

Mendix

A low-code platform designed for enterprise applications, known for its integration with SAP and industry-specific approach. It supports both cloud-based and on-premises deployment, providing an advanced development environment.

  • Adoption: Frequently used in manufacturing and logistics industries.

Appian

Specialized in Business Process Management (BPM), this platform excels in process automation and complex workflow management. It is designed for enterprises looking to optimize business operations.

  • Adoption: Popular in industries such as banking, insurance, and pharmaceuticals.

Future of Low-Code and No-Code

The future of low-code and no-code tools looks promising, with market growth and technological advancements driving increased adoption. The integration of AI will further enhance development speed and expand possibilities for both enterprises and individual developers.

Market Growth

  • The global low-code/no-code market was valued at $17 billion in 2022.
  • It is projected to grow to $45 billion by 2027.
  • The market is expected to expand rapidly over the next 5–10 years.

Key Trends in the Low-Code/No-Code Market

Stronger Integration Between AI & Low-Code/No-Code
AI will automate development processes, allowing for natural language-based app development, eliminating the need for manual coding. Additionally, AI will optimize UI/UX design and code generation.

Examples of AI Integration:

  • Power Apps’ “Copilot” and OutSystems’ “AI Mentor”
  • Developers can input commands like “Create a product management app”, and AI will automatically generate the application.
  • AI will analyze user behavior and optimize UI layout automatically.
  • With further AI advancements, even complex logic and data analysis will be handled by AI, accelerating the shift toward true no-code development.
  • Developers’ roles will transition from coding to designing and managing applications.

Conclusion

Based on market share, Microsoft Power Apps dominates the low-code space due to its strong integration with Microsoft’s ecosystem. However, OutSystems also maintains a strong position, particularly in enterprise applications.

While large enterprises have been the primary adopters, the question remains whether low-code tools will expand further into SMEs and general users.

Looking ahead, as low-code tools and AI continue to merge, developers will focus more on designing applications, while AI handles coding. Exploring how OutSystems can integrate with AI will be a key consideration moving forward.

For our next post, we’ll explore the potential of OutSystems and AI integration and what it can achieve. Stay tuned!

技術者ブログ-ローコードツールのトレンドについて②

技術者ブログとして日ごろ取り組んでいる学習内容を紹介します。
今回は、ローコードをテーマにしています!

今回のテーマ『ローコードツールのトレンドについて』

前回:技術者ブログ-ローコードツールのトレンドについて – dandelionS Blog
は2021年7月にローコードツールのトレンドについて、ブログを作成しておりました。
弊社でもOutSystemenの経験者が増えてきており、今後のローコードツールの動向がどのようになっていくか?という目線でトレンド調査を再度実施いたしました。

【ローコード・ノーコードとは】

アプリ開発を効率化するためにローコード・ノーコードツールの導入が進んでいます。これにより、開発スピードの向上や開発コスト削減が可能になっています。

・ローコード:最小限のコーディングでアプリ開発を行える。プログラミングの知識が必要だが、柔軟なカスタマイズが可能。
・ノーコード:コーディング不要で直感的にアプリを作成できる。カスタマイズ性は限定的。

【代表的なツールと比較表】

ローコード・ノーコードプラットフォームのシェア率は、主に市場での認知度や導入企業数に基づいています。以下は、シェア率が高い順に並べた主要なプラットフォームです。

【Microsoft Power Apps】
Microsoftの製品群(特にOffice 365やAzure)と統合が強力で、企業内で広く使われているため、シェアが非常に高い。Microsoftエコシステムの一部として、業務アプリケーションを簡単に作成・管理できます。
導入事例: 世界中の企業や組織で採用されており、特に中小企業から大企業まで幅広い規模で使用されています。

OutSystems
エンタープライズ向けに特化したローコードプラットフォームで、大規模なシステムや複雑なアプリケーション開発に強みがあります。自動化やAI機能が強化されており、特に大手企業に導入されています。
導入事例: 多くの大手企業、特に金融、製造業、公共機関で使用されている事例が多いです。

【Mendix】
特に大企業やエンタープライズ向けのアプリケーション開発に強みを持つローコードプラットフォーム。SAPとの統合や産業特化型のアプローチが特徴です。クラウドおよびオンプレミスで使用可能で、高度な開発環境を提供します。
導入事例: 多くの大企業で導入されており、特に製造業や物流業界での採用が目立ちます。

【Appian】
ビジネスプロセス管理(BPM)に特化しており、業務プロセスの自動化や複雑なワークフローの管理に強みがあります。エンタープライズ向けで、特に業務オペレーションの効率化を図る企業で利用されています。
導入事例: 銀行や保険、製薬業界などで採用事例が多くあります。

Power Appsは、Microsoftと密接に統合されているため、特に企業内での採用が多いです。
OutSystemsやMendixも大手企業での導入が進んでおり、特にエンタープライズ向けアプリケーション開発に強みを持っています。

【ローコード・ノーコードの今後について】

ローコード・ノーコードツールの将来性は非常に有望で、市場規模の拡大技術革新が進むことで、今後さらに影響力を増すと考えられています。特に、AIとの統合開発スピードの向上が企業や個人開発者にとって大きなメリットになってくる。

【市場規模】
2022年のローコード・ノーコード市場は約170億ドルとなっているが、
2027年には約450億ドルに成長すると予測されている。
→市場規模は今後5〜10年で急速に成長すると予想されています。

【今後のローコード・ノーコード市場で注目されるトレンド】
・AIとローコード・ノーコードの融合強化
AIが開発プロセスを自動化され、自然言語でのアプリ開発からコーディング不要になる。また、AIがUI/UXの最適化やコード生成を支援することになる。
例.Power Appsの「Copilot」やOutSystemsの「AI Mentor」の利用
①開発者が「商品管理アプリを作って」と入力 → AIが自動でアプリを構築することが可能
②ユーザーの行動パターンからUI配置をAIが自動最適化される
③AIの進化により「ノーコード化」がさらに進み、複雑なロジックやデータ分析もAIが担当
④開発者の役割が「コーディング」から「設計・運用」にシフト
⑤AIがコードを書く → 開発者がロジックを微調整という流れとなる

【まとめ】

ローコードツールのシェア率で考えると、MicrosoftPowerAppsが非常に高いが、OutSystemsも高い順位をキープしていることが分かった。
大企業に導入されていることが多いが、今後シェアも増えて中小企業や一般ユーザーにも普及するのかがツール変更のポイントになってくるかと感じた。
将来的にはローコードとAIが融合して、開発者は設計を行い、AIがコードを作成するといったノーコード化が進んでくることもあり、OutSystemsでもAIと融合して何ができるのか?をさらに検討していくことが重要だと思います。

今回はトレンド紹介と今後のツールの予測について説明しましたので、
次回はOutsystemsとAIが融合してどのようなことができるのか等を紹介したいと思います。

Employee Introduction

Thank you for taking the time to read this.
Nice to meet you! My name is “Su,” and I joined Dandelions in August last year.

Self-Introduction

Before joining Dandelions, I lived in Nagaoka City, Niigata Prefecture. Nagaoka is a charming city with rich nature and a relaxed atmosphere. But the most unforgettable experience for me was definitely the Nagaoka Fireworks Festival!

Nagaoka Fireworks Festival

When I saw it for the first time, I was truly amazed. The breathtaking fireworks filling the night sky made me feel as if I had stepped into another world. A local resident told me, “It’s one of the biggest fireworks festivals in Japan.” I also learned that for the people of Nagaoka, this event is particularly special—it has been held as a tribute to post-war recovery and continues to carry deep historical significance. Knowing this background made the experience even more moving.

What Led Me to Join the Company

I joined Dandelions in August 2024. When I came across the company’s official website on a job search platform, I felt that the atmosphere seemed enjoyable. I was looking to shift my career to web development, as I have always been fascinated by the ever-evolving world of technology. I wanted to grow while learning the latest technologies and believed that being involved in various projects would allow me to gain diverse experience and skills. Dandelions offers plenty of opportunities for this, providing an environment where I can pursue personal growth.

Additionally, Dandelions has many employees from different countries, and I was strongly attracted to the workplace environment where I could collaborate with people from diverse cultural and professional backgrounds. I was convinced that working in such a diverse setting, where different perspectives are valued, would contribute to my own growth as well.

Impressions After Joining

Since I had no prior experience working in the IT industry, I initially lacked confidence and felt anxious. However, Dandelions offers well-structured training programs for newcomers, allowing me to learn the fundamentals thoroughly. Thanks to this supportive environment, I was able to ease into my work with confidence. Through training, I gradually acquired the skills and knowledge necessary for practical work, which helped me build my confidence step by step.

The workplace atmosphere is also excellent. My senior colleagues are kind and provide guidance patiently. Their everyday conversations help create a relaxed and welcoming work environment, making it easier to focus on my tasks without worry. Thanks to this warm support, my initial concerns have gradually faded, and I now feel fulfilled in my daily work.

Moving forward, I hope to continue learning and growing through my experiences at Dandelions. With the support of those around me, I will keep improving myself and strive to achieve even better results.

Stay tuned for the next blog update!

社員紹介

ご覧いただきありがとうございます。
はじめまして、昨年8月ダンデライオンズに入社した「ス」です。

自己紹介

ダンデライオンズに入社する前は、新潟県の長岡市に住んでいました。長岡は自然が豊かで、のんびりとした雰囲気が魅力的な街です。でも、一番印象に残っているのはやっぱり長岡花火大会です!

長岡花火大会

初めて見たときは本当に感動しました。夜空いっぱいに広がる大迫力の花火は、まるで別世界にいるような気分になります。地元の方に「日本で一番大きな花火大会のひとつなんだよ」と教えてもらいました。地元の人々にとっても特別なイベントであり、戦後の復興を願って続けられてきた伝統的な花火大会だと聞き、その背景を知ると、より一層感動が深まりました。

入社したきっかけ

就職サイトでダンデライオンズの公式サイトを見つけたとき、雰囲気が楽しそうだと感じました。私はWeb開発者としてキャリアを変えたいと考えており、常に進化する技術の世界に魅了され、最新の技術を学びながら成長したいと考えていました。また、様々なプロジェクトに携わることで、幅広い経験とスキルを身に付けられると考えました。ダンデライオンズには、そのための機会が豊富にあり、自己成長を追求できる環境があると感じました。

さらに、ダンデライオンズには多くの外国籍社員が在籍しており、異なる文化や背景を持つ人々と協力し合える職場環境にも大きな魅力を感じました。多様性が尊重され、国際的な視点を持ちながら働けることは、私自身の成長にもつながると確信していました。

入社後の感想

入社後の感想としては、IT業界での実務経験がないため、当初は自信を持てず、不安もありました。しかし、ダンデライオンズでは新人向けの研修が充実しており、基礎からしっかりと学べる環境が整っていたため、安心して業務に取り組むことができました。研修を通じて、基本的な技術や知識を学びながら実務に活かす力を徐々に身につけることができたことで、自信も少しずつ持てるようになりました。

また、社内の雰囲気も非常に良く、先輩たちはみな親切で、丁寧に指導してくれます。日常の会話を通じて職場の雰囲気を和やかにしてくれるので、安心して仕事に取り組むことができます。このような温かいサポートのおかげで、職場での不安も徐々に解消され、毎日を充実して過ごすことができています。

今後も、ダンデライオンズでの経験を通じて、多くのことを学び、成長していきたいと考えています。周囲のサポートを受けながら、自分自身を磨き続け、より良い成果を出せるよう努力していきたいと思います。

次回のブログもお楽しみに!

[Company Trip] A Visit to Kyushu (Fukuoka & Oita)!

Thank you for visiting our blog!

From July 26 to July 28, 2024, we went on a company trip.
This time, our destination was Kyushu (Fukuoka & Oita)!
Here’s a look at our journey.

From Chubu Centrair International Airport to Fukuoka Airport

For Dandelions, this was our first time traveling by airplane.
With about 30 participants, we were a bit worried that someone might oversleep and miss the flight, but thankfully, everyone made it on time, and we departed without any issues!

Upon arriving at Fukuoka Airport, we boarded a tour bus.
Our tour guide had a fantastic sense of humor, making the trip even more enjoyable!

Dazaifu Tenmangu Shrine

Our first stop was Dazaifu Tenmangu Shrine.
Currently, it’s making headlines due to the “Reiwa Great Renovation”, the first major restoration in 124 years, featuring a special temporary hall of worship.

After visiting the shrine, we had some free time to explore the area.
Some enjoyed street food, while others completed their souvenir shopping based on the tour guide’s recommendations.

Lunch at Yushoku Kobo Chabana

For our first day’s lunch, we dined at “Yushoku Kobo Chabana”.
This traditional Japanese-style restaurant, set in a restored old house, provided a relaxing atmosphere where we enjoyed seasonal dishes.

Beppu Jigoku Meguri (Hell Tour) – Part 1 (Chinoike Jigoku & Tatsumaki Jigoku)

In the afternoon, we explored two of Beppu’s famous “Hells”:

Chinoike Jigoku is said to be the oldest natural hot spring in Japan, and its striking appearance and strong smell left a powerful impression. A medicinal product called “Chinoike Ointment” was also available for limited sale.

Tatsumaki Jigoku is a geyser, designated as a natural monument of Beppu City, where hot water erupts at regular intervals. The dynamic bursts of hot water were truly spectacular.

Hotel Stay: Beppu Onsen “Hotel Shiragiku”

We stayed at the famous Beppu Onsen Hotel Shiragiku.
As per Dandelions’ tradition, we held a lively company banquet, where we enjoyed a great evening together.
As a special highlight, our company president presented outstanding employees with a unique “Hell T-shirt” as a token of appreciation!

After the banquet, we ventured out into Beppu’s nightlife!

One of the notable places was “Takegawara Onsen”, which is said to have inspired Studio Ghibli’s “Spirited Away”.

Beppu Jigoku Meguri (Hell Tour) – Part 2 (Umi Jigoku, Shiraike Jigoku, etc.)

On the second day, despite the temptation to relax at the hotel, we resumed our Hell Tour.
With clear skies and intense heat, walking through the various hot springs truly felt like a journey through hell!

Lunch at “Geothermal Tourism Lab Midori”

For lunch, we visited “Geothermal Tourism Lab Midori”, where we enjoyed food steamed using natural geothermal heat while soaking our feet in a hot spring foot bath.
The footbath was so hot that many people ended up with bright red feet!
We also indulged in a delicious geothermal pudding for dessert.

Iichiko Hita Distillery

Next, we visited the Iichiko Hita Distillery.
After a brewery tour, we explored the gift shop, which featured not only shochu but also a variety of other products.
Many participants picked up souvenirs to take home.

Hita Mameda Town

The last stop on Day 2 was Hita Mameda Town, a historical district with Edo-period architecture.
This area is a popular tourist attraction, and one of its most striking features was the massive “Hita Geta” (wooden clogs) standing over 4 meters tall!

Extended Stay Group

Previously, Dandelions’ company trips were limited to one night and two days, but this year, we leveled up!


Since we had traveled all the way from Nagoya to Kyushu, some members decided to extend their stay and continue exploring for a third day.

Time flew by, and before we knew it, it was time to return to Nagoya.

Throughout the trip, participants actively uploaded and shared photos in our internal app’s album.
This time, we broke the record with over 800 photos—the highest number in Dandelions’ company trip history!
That alone speaks to how much everyone enjoyed and cherished this trip.

We look forward to sharing our next company trip blog with you—stay tuned!

【社員旅行】九州(福岡・大分)へ行ってきました!

ご覧いただきありがとうございます。

2024/7/26~28に社員旅行へ行ってきました。
今回の行き先は、九州(福岡・大分)です。
旅の様子をお届けします!

中部国際空港 ⇒ 福岡空港へ

ダンデライオンズとしては初の飛行機による移動となりました。
参加者は30名程で、お寝坊さんが出ないか心配でしたが、皆無事に揃い出発できました!

福岡空港に着いたら、観光バスに乗車します。
ガイドさんがとてもユーモアのある方で、旅を大いに盛り上げてくれました。

太宰府天満宮

まずは太宰府天満宮を訪れました。
こちらは124年振りの”令和の大改修”に伴う、特別な「仮殿」で話題になっていますね。

お参り後は、周辺で散策タイムです。
各々、食べ歩きをする方もいれば、ガイドさんおすすめのお土産をコンプリートしている方もいました。

遊食工房 茶花

1日目の昼食は「遊食工房 茶花」さんでいただきました。
古民家の心安らぐ空間で旬の食材をいただきました。

べっぷ地獄めぐり①(血の池地獄・龍巻地獄)

1日目は、血の池地獄と龍巻地獄に行きました。
血の池地獄は日本で一番古い天然の地獄とのことで、その見た目、匂いに強いインパクトがありました。「血ノ池軟膏」なる医薬品も限定販売されていました。

竜巻地獄は一定の間隔で熱水が吹き荒れる、別府市指定天然記念物の間欠泉です。
豪快に熱水が吹き出す様子は迫力満点でした。

別府温泉のホテル白菊

お宿は別府温泉の「ホテル白菊」さんに宿泊しました。
ダンデライオンズ恒例の宴会を行い、楽しいひと時を過ごしました。
代表からは活躍目覚ましい社員を労う「地獄T」プレゼントも!

宴会後、別府の夜へ繰り出しました!

「竹瓦温泉」は、宮崎駿監督のアニメ映画「千と千尋の神隠し」のモデルになったことで知られています。

べっぷ地獄めぐり②(海地獄・白池地獄など)

二日目、ホテルでゆっくりしたいところですが、地獄めぐりへ再出発です。
天気は快晴…。炎天下の中、各地獄をめぐるその様相は、文字通り地獄めぐりでした。

昼食(地熱観光ラボ緑間)

2日目の昼食は「地熱観光ラボ緑間」さんでいただきました。
こちらは足湯に浸かりながら、地熱による蒸料理をいただくことができます。足湯の温度はかなり熱く、足が真っ赤になる方も!デザートの地熱プリンまでしっかり堪能しました。

いいちこ日田蒸留所

お次は「いいちこ日田蒸留所」さんへお邪魔しました。
醸造所を見学後、お土産コーナーへ行きました。
焼酎以外にも様々な商品があり、お土産用にと多くの方が購入していました。

日田豆町

2日目の最後は日田豆町へ。
江戸時代からの町並みが残るこの町は、観光スポットとしても人気とのことです。
中でも4M以上もある巨大な「日田下駄」には目を奪われました。

延泊組

過去のダンデライオンズの社員旅行は一泊二日の旅程でしたが、今年はさらにパワーアップしています。せっかく名古屋から遥々九州まで訪れたので、もう少し楽しみたい!というメンバーは延泊し、3日目もしっかり堪能しました。

楽しい時間はあっという間に過ぎ、名古屋への帰路につきます。

旅行中の写真をアプリ内のアルバムへ各自がアップロード・共有していたのですが、今回は今までの社員旅行の中で最大の枚数(800枚越え)でした!
それだけ参加者の方にとって思い出に残る、とても良い旅行になったのだと思います!!

次回の社員旅行ブログもお楽しみに。

Engineer Blog: Local-First

In this engirring blog, we introduce the learning topics we work on daily.

What is Local-First?

Recently, the concept of Local-First has been gaining attention. Many applications are designed with an online-first approach, where data is stored in the cloud. This allows users to access their data from any device and easily share it with others. However, applications that rely on online connectivity have several disadvantages, such as:

  • Data is inaccessible without an internet connection.
  • The application becomes unusable if the server goes down.
  • Communication with the server can introduce delays, reducing responsiveness.
  • Storing personal data in the cloud poses security risks from external access.

The Local-First approach addresses these issues. In Local-First applications, data is primarily stored on the user’s device and synchronized only when needed. This approach offers several benefits:

  • Data remains accessible even without an internet connection.
  • The application functions independently, unaffected by service outages.
  • Immediate data read/write operations without relying on a server.
  • Personal data is managed locally, reducing dependency on the cloud.

Examples of Local-First Applications

Several applications utilize the Local-First approach, including:

  • Evernote: Allows users to create and view notes even while offline. Synchronization with the cloud ensures data availability across devices.
  • Notion: An all-in-one productivity tool featuring document management, task tracking, and database functionality. Users can edit content offline, and changes are synced to the cloud to maintain data consistency.

Let’s Build an Application! (TypeScript Edition)

To experience the Local-First approach, let’s build a simple To-Do App that runs entirely within a browser! This application will store data locally, ensuring that tasks remain saved even after a page reload.

Below, we introduce the key implementation details.

ToDo の追加(データをローカルに保存)
async function addTodo(text: string) {
    const todo = {
        _id: new Date().toISOString(),  // 一意のID
        text,
        completed: false
    };
    // データをローカルに保存
    await db.put(todo);
}

ToDo の表示(保存されたデータを取得)
async function renderTodos() {
    const result = await db.allDocs({ include_docs: true });
    result.rows.forEach(row => {
        // タスクを取得して表示
        console.log(row.doc.text);
    });
}

ToDo の削除
async function deleteTodo(id: string) {
    const doc = await db.get(id);
    // タスクを削除
    await db.remove(doc);
}

Running the To-Do App

  1. Open the application in a web browser.
  2. Enter a task and click the Add button—the task will be added to the list below.
  3. Close the browser. (Normally, this would cause the entered tasks to be lost.)
  4. Reopen the application in the browser. (The previously entered tasks remain displayed.)
  5. Click on a task to delete it.

Thoughts on Running the App

One of the standout features of this To-Do App is its ability to function independently of the internet, managing data entirely within the browser. By storing data locally, users can continue using the application even while offline.

Key Takeaways:

  • Data persists even after a page reload!
  • The app works without a server!
  • Fast performance with instant data retrieval!

Applications that don’t rely on servers or the cloud might seem somewhat uncommon, but the Local-First approach proves to be highly valuable for offline functionality and data privacy. While this project was a simple implementation, it could be extended with cloud synchronization or mobile support for a more versatile experience.

Exploring the possibilities of Local-First applications has been insightful, and I look forward to leveraging this concept further.

See you in the next blog post!

技術者ブログ:ローカルファースト

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。

ローカルファーストとは

最近、ローカルファースト という考え方が注目されています。多くのアプリはオンラインを前提 に作られています。データをクラウドに保存することで、どのデバイスからでもアクセスできる、複数人での共有が容易 などのメリットがあります。しかし、オンライン依存のアプリには以下のようなデメリットもあります。

  • インターネットがないとデータにアクセスできない
  • サービス停止でサーバーがダウンすると使えなくなる
  • サーバーへの通信が発生するため、レスポンスが遅くなることも
  • 個人データがクラウド上にあるため、外部からのアクセスリスクがある

こうした問題を解決するのが、ローカルファースト という考え方です。ローカルファーストのアプリでは、まずデータをデバイス内に保存し、必要に応じて同期する ため、以下のようなメリットがあります。

  • インターネットがなくてもデータにアクセス可能
  • サービス障害の影響を受けず、ローカル保存なので、アプリが独立して動作
  • サーバーを介さず、データの読み書きが即座に行われる
  • 個人データをローカルで管理し、クラウドに依存しない

ローカルファーストの考え方を活かしたアプリには、以下のようなものがあります。

Evernote(エバーノート):オフラインでもメモの作成・閲覧が可能で、クラウドと同期することでデバイス間でデータを共有できます。
Notion(ノーション):ドキュメント管理、タスク管理、データベース機能を備えたオールインワンの生産性向上ツール。オフラインでも編集が可能で、クラウドと同期することでデータの一貫性を保ちます。

アプリを作ってみよう!(TypeScript編)

ローカルファーストの仕組みを体験するために、ブラウザだけで動作する ToDo アプリ を作ってみましょう!このアプリでは、データをローカルに保存し、リロードしても消えない仕組み を実装します。

下記に主要な部分の紹介します。

ToDo の追加(データをローカルに保存)
async function addTodo(text: string) {
    const todo = {
        _id: new Date().toISOString(),  // 一意のID
        text,
        completed: false
    };
    // データをローカルに保存
    await db.put(todo);
}

ToDo の表示(保存されたデータを取得)
async function renderTodos() {
    const result = await db.allDocs({ include_docs: true });
    result.rows.forEach(row => {
        // タスクを取得して表示
        console.log(row.doc.text);
    });
}

ToDo の削除
async function deleteTodo(id: string) {
    const doc = await db.get(id);
    // タスクを削除
    await db.remove(doc);
}

作ったアプリを実行してみました。

  1. ブラウザでアプリを開きます。
  2. タスクを入力し、追加ボタンをクリックすると、下のリストに追加されます。
  3. ブラウザと閉じます。(通常はここで入力したタスクは消えてしまいます)
  4. ブラウザで再度アプリを開きます。(上で入力したタスクは残ったまま表示されます)
  5. タスクをクリックすると、タスクが削除されます。

実際に動かしてみて感じたこと

今回作成した ToDo アプリは、インターネットに依存せず、ブラウザだけでデータを管理できる という点が大きな特徴です。ローカルにデータを保存することで、オフラインでも利用できる というメリットを実感できたのではないでしょうか?

  • リロードしてもデータが消えない!
  • サーバーがなくても動作する!
  • 動作が軽く、即座にデータを取得できる!

サーバやクラウドを使わないアプリは少し珍しく感じるかもしれませんが、ローカルファーストの考え方は、オフライン対応やデータのプライバシーを考える上で非常に有用 です。今回のアプリはシンプルな実装でしたが、クラウドとの同期を追加したり、モバイル対応に拡張したりすることも可能 です。ローカルファーストなアプリの可能性を感じつつ、活用していきたいです。
では、次回のブログでお会いしましょう。