LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@sakamo_sakamo

【初心者】開発経験半年でLINE Bot作ったら想像以上に大変だった話

Posted at

はじめに

こんにちは！30歳でプログラミングを始めて半年の初心者です🔰

「パートナーと生理周期を共有できるアプリがあったらいいのに...」という何気ない会話から、なぜか「作ってみよう！」となり、気づいたら2週間後には本格的なLINE Botアプリが完成していました。

今回は初心者が無謀にも挑戦した開発記録を、失敗談も含めて赤裸々に書いてみます。
「こんな初心者でも作れるんだ」と思ってもらえたら嬉しいです！

作ったもの

生理日共有アプリ

  • LINE Botで「昨日から生理が始まった」と送ると記録＋パートナーに自動通知
  • Web画面でカレンダー表示や設定変更
  • 排卵日予測とか色々

↓実際に作ったBot↓
https://line.me/R/ti/p/@922zrkxi

使った技術

🤖 LINE Bot (Messaging API)
🔥 Firebase (Functions + Firestore + Hosting)
💻 JavaScript (ほぼ初挑戦...)
📱 LIFF (LINE Front-end Framework)

なぜこの技術を選んだかというと...

Firebase: 「サーバー管理したくない」「初心者に優しそう」
LINE Bot: 「アプリのインストール不要」「普段使ってるから馴染みがある」

完全に初心者目線の選択でした😅

開発の流れ（2週間の軌跡）

1日目〜3日目：設計で大混乱

最初は「簡単なBot作るだけでしょ？」と思ってたら...

現実:

  • Firestoreってどう設計するの？
  • LINE APIの認証ってどうやるの？
  • パートナー機能ってどう実装するの？

3日間ひたすらドキュメント読んで、ノートに設計を書きまくりました。
この時点で「やばい、想像より100倍難しい」と気づく。

4日目〜7日目：基本機能で四苦八苦

まずは「日付を入力して保存」という一番シンプルな機能から。

最初のコード（酷い）:

// こんな感じで書いてた...
if (message === '昨日') {
  const yesterday = new Date();
  yesterday.setDate(yesterday.getDate() - 1);
  // 保存処理...
}
if (message === '一昨日') {
  const dayBefore = new Date();
  dayBefore.setDate(dayBefore.getDate() - 2);
  // 保存処理...
}

「これじゃ『3日前』とか『先週の火曜日』に対応できない...」

改良版:

function parseNaturalDate(userInput) {
  const today = new Date();
  const input = userInput.toLowerCase().trim();
  
  // 昨日
  if (input === '昨日') {
    const yesterday = new Date(today);
    yesterday.setDate(today.getDate() - 1);
    return yesterday;
  }
  
  // X日前のパターン
  const daysAgoMatch = input.match(/(\d+)日前/);
  if (daysAgoMatch) {
    const daysAgo = parseInt(daysAgoMatch[1]);
    const targetDate = new Date(today);
    targetDate.setDate(today.getDate() - daysAgo);
    return targetDate;
  }
  
  // 先週の曜日パターン
  const lastWeekMatch = input.match(/先週の?(月|火|水|木|金|土|日)曜?日?/);
  if (lastWeekMatch) {
    // めちゃくちゃ複雑な計算...
  }
}

正規表現、初めてちゃんと使いました！
「プログラミングってこういうことか〜」と実感した瞬間でした。

8日目〜10日目：パートナー機能で地獄を見る

一人で使うだけなら簡単だったのに、「パートナーと共有」を入れた途端に難易度が爆上がり。

考えないといけないこと:

  • どうやってパートナーを登録する？
  • 招待コードシステム？
  • 通知はいつ送る？
  • セキュリティは？

結局「招待コード」方式にしました。

// 招待コード生成（6桁英数字）
function generateRandomCode() {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  let result = '';
  for (let i = 0; i < 6; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}

この辺りで「データベース設計って重要だな...」と痛感。
最初に適当に作ったテーブル（コレクション）設計を何度も修正することに😭

11日目〜13日目：Web画面で苦戦

「LINE Botだけじゃ見づらいからWeb画面も欲しいな」

LIFFを初めて触ったのですが、これが思った以上に大変でした。

苦労したポイント:

  • LIFFの認証フロー
  • スマホでの表示調整
  • データの受け渡し
// LIFF初期化（これだけで1日かかった）
async function initializeLiff() {
  try {
    await liff.init({ liffId: 'YOUR_LIFF_ID' });
    
    if (!liff.isLoggedIn()) {
      liff.login();
      return;
    }
    
    const profile = await liff.getProfile();
    // ユーザー情報取得成功！
  } catch (error) {
    // エラーハンドリング...
  }
}

CSS書くのも久しぶりで、「レスポンシブデザインって難しい...」と実感。
でも完成したときの達成感はすごかったです！

14日目：最後の仕上げ

最終日は細かいバグ修正と、エラーハンドリングの強化。

学んだこと:

  • ユーザーは想定外の操作をする
  • エラーメッセージは分かりやすく
  • ログは詳細に
// エラーハンドリング（最初は何もしてなかった）
try {
  const result = await saveRecord(userId, recordData);
  return `✅ 登録完了！${result.message}`;
} catch (error) {
  console.error('Record save error:', error);
  return 'エラーが発生しました😭 もう一度お試しください';
}

一番苦労したこと

1. 自然言語解析

「昨日」「3日前」「先週の金曜日」全部に対応するのが想像以上に大変でした。

最初は「if文でパターン書けばいいでしょ」と思ってたら、
「今週の火曜日」「先週の火曜日」の違いとか、うるう年の計算とか...

結局、正規表現と日付計算を組み合わせて何とか実装しました。

2. 非同期処理

JavaScriptのasync/awaitの概念がまだ曖昧で、「なんで動かないの？」の連続でした。

// 最初（動かない）
function saveData() {
  database.save(data);
  console.log('保存完了'); // まだ保存されてない！
}

// 修正後
async function saveData() {
  await database.save(data);
  console.log('保存完了'); // ちゃんと保存された後
}

3. デバッグ

「動かない！なんで？」の時の原因究明が一番時間かかりました。
Firebase Functionsのログを見る方法すら最初知らなくて...

firebase functions:log

このコマンドを知った時は感動しました😂

作ってみて学んだこと

1. 設計の重要性

最初に「とりあえず動くもの」を作ってから後で機能追加しようとしたら、データ構造から全部作り直しになりました。

教訓: 最初の設計は時間をかけてでもちゃんとやる

2. エラーハンドリングの大切さ

「正常系だけ作ればいいでしょ」と思ってたら、ユーザーテストで想定外の操作連発。

教訓: ユーザーは想像を超える操作をする

3. ドキュメントを読む習慣

最初は「チュートリアルだけ見て作ろう」と思ってましたが、公式ドキュメントをちゃんと読むようになったら理解度が段違いに上がりました。

完成した機能

LINE Bot機能

  • 自然言語で日付入力（「昨日」「3日前」「先週の金曜日」）
  • パートナー招待コード生成・使用
  • 自動でパートナーに通知
  • 排卵日・次回生理日の予測

Web UI機能

  • カレンダー表示（生理日・排卵日マーキング）
  • 設定画面（周期・期間変更）
  • ダッシュボード（現在の状況表示）
  • 直感的な日付入力画面

初心者が頑張ったポイント

1. コードの可読性を意識

// 最初
const d = new Date(s.getTime() + p * 24 * 60 * 60 * 1000);

// 改善後
const endDate = new Date(startDate.getTime() + settings.period * 24 * 60 * 60 * 1000);

変数名やコメントを意識するようになりました。

2. 機能分割

最初は1つのファイルに全部書いてましたが、機能ごとにファイルを分けるように。

handlers/
├── dateInputHandler.js    # 日付入力処理
├── settingsHandler.js     # 設定管理
├── partnerHandler.js      # パートナー機能
└── webHandler.js          # Web UI処理

3. ユーザーフレンドリーなメッセージ

// 最初
return 'Error';

// 改善後
return '日付の形式が正しくありません🙁\n「昨日」「3日前」「12/25」などで入力してください';

今後やりたいこと

次に実装予定（すぐできそう）:

  • パートナー側専用のビュー ← 今まさにこれ作ってる！
    • パートナーがアクセスした時に自動で表示を切り替え
    • 「パートナーの生理周期」として情報表示
    • 通知履歴や次回予測日を見やすく

将来的に:

  • 症状記録機能
  • グラフ表示
  • 薬の服用記録
  • 医師との情報共有

初心者へのメッセージ

2週間前は「LINE Botなんて作れるわけない」と思ってましたが、なんとか形になりました！

頑張れた理由:

  1. 明確な目的があった（パートナーに喜んでもらいたい）
  2. 小さく始めた（最初は日付保存だけ）
  3. 分からないことは素直に調べた（プライドは捨てる）

最初は「Hello World」すら理解できなかった自分でも、毎日少しずつ積み重ねることで、人に使ってもらえるアプリが作れました。

「作りたいもの」があるなら、技術力不足を理由に諦めずに挑戦してみてください！
思ったより作れちゃうかもしれません😊

最後に

パートナーにこのアプリを見せたときの「すごいじゃん！」の一言で、2週間の苦労が全部吹き飛びました。

プログラミングって、ただのコードじゃなくて「誰かの問題を解決するツール」なんだなって実感できた2週間でした。

次は何を作ろうかなー🤔

開発期間: 2週間（平日2-3時間、休日8時間）
コード行数: 約2,000行
使ったツール: VSCode, Firebase CLI, Postman
参考書籍: 「JavaScript本格入門」「Firebase 実践」

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?