taiPyのお悩み解決ブログ

日々の発見をまとめます!

Gitコメントやブランチ名の悩みを解決!AIの活用術(ChatGPT)

はじめに

Gitに対してChatGPTの活用方法について考えてみました。実際に試してみた中でお薦めのものを紹介します。

目次

おすすめの使用方法

おすすめの方法は以下の通りです。

  • コメントを考えてもらう
  • 文章を添削してもらう
  • ブランチ名を考えてもらう

それではそれぞれ詳しく説明して行きます。

コメントを考えてもらう

Gitにコミットする際コメントを書くと思います。なかなかいいコメントが浮かばないときってありますよね。そういう時にコメントを考えてもらいましょう。

例えば前提条件を説明してコメントを考えてといいます!

このときのポイントは複数のコメントを考えてもらうことです。これによりメッセージを比較検討できたり、それぞれのメッセージの良い部分を取り入れたりすることができます。

AIに尋ねる際の文章は以下の通り。使いやすいようにアレンジしてくれたらいいかなと思います。

画面の○○を修正しました。理由はユーザーエクスペリエンスの向上のためです。この部分を変更することで、文章が見やすくなります。それでは上記の内容を表すコミットメッセージを五つ考えてください。

詳しく説明すると、 5W1Hを説明してあげます。今回だったらどこを修正して、なぜ修正しtの勝手ところです。あとはその結果どうなったのかとか、他に検討した項目なども入れておいてあげると回答の精度の精度が高まるでしょう。

文章を添削してもらう

自分なりにコミットメッセージを作成したけれども相手に伝わるか不安だという時にこの手法を使ってください。

次のように尋ねます。

次のコミットメッセージをより伝わりやすいように改善してください。「ーーコミットメッセージーー」。このコミットメッセージは○○の変更を表しています。

上記の説明をすると自分が考えたコミットメッセージを「ーーコミットメッセージーー」 に入れます。プラスアルファで、このコミットメッセージは○○の変更を表しています。 をつけてあげることで、よりAIの回答精度が高まります。

ブランチ名を考えてもらう

自分でブランチ名を考える時って結構、簡潔の名前になってることってありますよね。簡潔すぎるのもいいところ、悪いところがあります。いいところは、簡潔なので短いし覚えやすい。しかし悪いところは、簡潔すぎて少し時間がたったらこのブランチ本来の目的を忘れてしまいがちだというところです。

でも名前を考えるのって意外と認知的な負荷が高いですよね。子供の名前を決める時ほどは悩みませんが、誰に対してもわかりやすく覚えやすい名前を決めるとなると大変ですね。

そのため次のようにAIに聞いてみてください。

○○のためにブランチを切ろうと思います。このブランチ名の候補を五つほど出してください。

ここでも名前の候補を上げてもらいます。そうすることで意外と「これいいな!」と思えるブランチ名が出てきますので。

まとめ

Gitのコマンド等ではなく、名前関連でよく私はAIに頼りますね。Gitの使いかたやエラー解析などにも使えると思います。あくまで今回あげた例は一例ですので、皆さんなりの使用方法をしていただければと思います。

おすすめの方法は以下の通りです。それではまたお会いしましょう。

  • コメントを考えてもらう
  • 文章を添削してもらう
  • ブランチ名を考えてもらう

Bootstrapで要素を中央に配置する方法

目次

Bootstrapで中央に持ってくる方法

中央に要素(element)を配置したいときってありますよね。 各々の環境に応じて使える方法はそれぞれかと思いますので、今回は3つ紹介したいと思います。今回紹介する方法は次の3つとなります。

  • Flex
  • Position
  • text-center

それでは一つずつ詳しく見ていきましょう!

Flexを使って要素を中央に持ってくる方法

次のサンプルコードを見てください。中央に配置したい要素の親にjustify-content-centerをclassに指定してあげればOKです。このときにd-flexも忘れずにclassにつけてください!要するに、d-flexでFlexで表示するよーって言ってから、justify-content-centerでコンテンツは中央に配置するよーってコードを書いている感じですね!

コード自体は次のものを参考に。次のサイトでは自由に色々試せるのでぜひじっこうしてみてください。

https://www.w3schools.com/bootstrap5/bootstrap_flex.php#:~:text=ADVERTISEMENT-,Justify Content,-Use the .justify

Flex:サンプルコード全文

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body> 

<div class="container mt-3">
  <h2>Justify content</h2>
  <p>Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:</p>
    
  <div class="d-flex justify-content-center mb-3">
    <div class="p-2 bg-info text-center">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>

</body>
</html>

Positionを使用し要素を中央に持ってくる方法

Positionを使用して中央に要素を持ってくることが出来ます。

この方法を使うのに適している場面は、「絶対に画面の中央に持ってくるとき」です。

こちらの公式サイトがとても参考になりますね。https://getbootstrap.jp/docs/5.3/utilities/position/#要素を中央に配置

サンプルコードを先のリンク先サイトから抜粋です。

<div class="position-relative">
  <div class="position-absolute top-0 start-0 translate-middle"></div>
  <div class="position-absolute top-0 start-50 translate-middle"></div>
  <div class="position-absolute top-0 start-100 translate-middle"></div>
  <div class="position-absolute top-50 start-0 translate-middle"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 start-100 translate-middle"></div>
  <div class="position-absolute top-100 start-0 translate-middle"></div>
  <div class="position-absolute top-100 start-50 translate-middle"></div>
  <div class="position-absolute top-100 start-100 translate-middle"></div>
</div>

基本的には上の例からも分かる通り、position-absoluteは必須ですね。そこからどこに要素を配置したいかで後に続くコードが変わります。トップ(top)から見てどうなのか、startから見てどうなのか。これによって変わります。例えば、左上に配置したいときは、topが0で、startが0になります。逆に左下に配置したいときは、topが100で、startが0になります。

つまり、topが上部分を表していて、startが左辺を表していると乞うことです。

この性質を使って中央に要素を持ってきたいときは次のように書きます。

<div class="position-absolute top-50 start-50 translate-middle"></div>

ぜひお試しあれ。

Position:サンプルコード

ちょっとわかりやすくするためにサンプルコードをちょっちょっと編集しました。次のコードで遊んでみてください。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body> 

<div class="container mt-3">
  <div class="position-relative m-5" style="height: 100px;">
    <div class="position-absolute top-0 start-0 translate-middle">左上</div>
    <div class="position-absolute top-0 start-50 translate-middle">上の中央</div>
    <div class="position-absolute top-0 start-100 translate-middle">右上</div>
    <div class="position-absolute top-50 start-0 translate-middle">中央の左部分</div>
    <div class="position-absolute top-50 start-50 translate-middle">中央</div>
    <div class="position-absolute top-50 start-100 translate-middle">中右</div>
    <div class="position-absolute top-100 start-0 translate-middle">左下</div>
    <div class="position-absolute top-100 start-50 translate-middle">下の中央</div>
    <div class="position-absolute top-100 start-100 translate-middle">右下</div>
  </div>
</div>

</body>
</html>

text-centerを使用し要素を中央に持ってくる方法

text-centerをclassに付与することで中央に持ってくることが出来ます。これを使用する場面は、テキスト、文字を扱う時に使用します。文字以外の時は逆にあまり使用しないほうが良いと思います。主に参考にしたサイトは右の公式サイトです⇒https://getbootstrap.jp/docs/5.3/utilities/text/

イメージとしては、text-centerはtextという大きな枠の中の一つですね。textというからテキスト、要するに文字に関することだということが分かります。

実際にどう書くかというと次のサンプルコードをご覧ください。

text-center:サンプルコード

一部抜粋

<p class="text-center">テキストを中央ぞろえします。</p>
<p class="text-end">逆にこれは右揃えです</p>
<p class="text-start">これは左揃えです</p>

全文

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body> 

<div class="container mt-3">
  <p class="text-center">テキストを中央ぞろえします。</p>
  <p class="text-end">逆にこれは右揃えです</p>
  <p class="text-start">これは左揃えです</p>
</div>

</body>
</html>

まとめ

中央に配置する方法は次の3つです。

  • Flex
  • Position
  • text-center

ぜひサンプルコードをお使いのエディターにコピーしていろいろ実験してみてください。習うより慣れだと思います。それではまた次回お会い出来たら幸いです。

参考文献

私のプログラミング勉強法。W3Schools活用。インプット→アウトプット

目次

はじめに

プログラミングなどの学習において理想は次のような感じではないでしょうか。

  • 早くやりたい
  • 成果物も作りたい
  • 身に着けたい

でも、現実はそんなに甘くないですよね。現実はこんな感じでしょうか?

  • 分からない
  • 自分で作るってなると難しい
  • 身についた感じがしない

私もこんな感じでしたが、最近、ちょっとうまくいっているので自分の備忘録を兼ねつつ、情報共有したいと思います。

結論:W3Schoolsと科学的な勉強法の組み合わせ

やり方を詳しく説明します。

  • まずW3Schoolsという海外の学習サイトで軽くインプット
  • もう作ります。アウトプットです。

ここに次の要素を足します。

  • 科学的な勉強法 つまり検索練習をプラスします。

検索練習とは思い出す練習の事ですね。誰かに説明したり、問題集を作ったり。

要するにこういうこと。

  • W3Schools + 検索練習

これだけだと何ぞやということだと思うので、それぞれ、W3Schoolsと科学的な勉強法について説明していきます。

W3Schoolsとは

はじめまして。W3SchoolsとはWikipediaにはこう書かれています。

W3Schoolsはウェブ技術のオンライン学習サイトである[1]HTMLCSSJavaScriptPHP)、SQLBootstrapjQueryに関する参考資料や教材があり、月間100万人以上のユニークビジターが訪問している。

1998年に開設され、サイト名はWorld Wide Webに由来するが、ノルウェーのRefsnes Data社が運営しておりW3C (World Wide Web Consortium) には属していない[2]。数千のコード例の記載があり、オンラインエディタで利用者がサンドボックス)に自由に編集し試せる。

引用元: wiki, W3Schools

要するに、無料でWEB系の開発に必要な知識が学べるデーってことです!しかも、サイト上でコードも書けちゃう優れもの。プログラミング学習をするときの落とし穴って意外と環境構築にあるんですよね。めんどくさいのに時間がかかるという。。まあ、逆にこれがコンピューターの仕組みを知る一歩になったりするわけですが、めんどくさいですよね。

科学的な勉強法とは?

一言でいってしまえば検索練習のことです。思い出す訓練という感じですよね。ここではあんまり説明しませんが次の動画がとても参考になると思います。それか本もおすすめですね。

  1. アクティブリコール
  2. 分散学習
  3. 自己説明

それでは、それぞれの勉強法をプログラミング学習に応用するとどうなるのか。

アクティブリコール

  • 練習問題や実際に動かす: W3Schoolesならその場でコーディングできるぞ!
  • フラッシュカード: 例えば、JavaScriptのメソッドやPythonの標準ライブラリについて、質問と答えのフラッシュカードを作成し、定期的に復習する。

分散学習

学習を一度に集中して行うのではなく、時間を分けて少しずつ行う方法です。プログラミング学習でも、少しずつ継続して学ぶことで効果が上がります。

  • 通勤通学電車の中で読む+夜にコーディング 要するに分散
  • 一度に本や動画で勉強するのではなく隙間時間の活用にもってこい
  • 別に一気にやってもいいですが、

自己説明

自己説明は、自分自身に対して学んだ内容を説明することです。プログラミング学習においては、コードを書いたり、設計を説明したりすることで理解を深めます。

  • コードのコメント: 自分が書いたコードに対して詳細なコメントを追加し、各ステップの意図や動作を説明する。
  • ブログやメモ: 学んだ内容をブログに書く、もしくはメモを取る。例えば、新しく学んだアルゴリズムの動作を詳細に説明する記事を書く。

一応私が過去やってみて良かったなと思った方法をとりあえず別居しています。要するに分散して思い出ことが要点です。それができる方法だったら、クリエイティビティ発揮してどんどんいろんな方法を試して言ってもらったらいいと思います。

W3Schoolsのデメリットとメリット

  • デメリット
    • 英語
      • Google翻訳でどうにかなる
    • 説明が簡潔すぎて物足りないかも
  • メリット
    • 要点がまとまっている
    • 必要な知識がいい感じの量でまとまっている
    • コードを書いて実行できる

デメリットとメリットをまとめるとこんな感じです。英語はやっぱりネックになってきますよね。やはり私たち日本語話者ですから。この記事を読まれているっていうことはおそらく日本語メインで話されていると思いますし。日本語の熟練度が高いですよね。一応Google翻訳でもどうにかなるぐらいの英語ですし、文章もそんなに長くないので、英語の勉強も兼ねてっていうならちょうどいいかもですね。

まとめ

さっくりとインプット+科学的な勉強法を取り入れながらアウトプット(プログ、成果物、フラッシュカード、分散学習)

ということでした!

  • 今回はここまで読んでくださってありがとうございます。プログラミング学習は、結構難しいので忍耐努力が必要な部類だと思います。そんな中でも効率よく前に進めていきたいという方々も多いと思います。そんな方々への一助になれば幸いです。

Notionで技術ブログを執筆したらいいんじゃないのっていう話

目次

はじめにと課題

はじめまして。

Notionとはてなブログ、またはNotionとQiitaを使うと技術ブログを作成するのに最適ではないかと思いその話をしたいと思います。

スマホでそのまま執筆したいなと思う時とかもあると思いますし、習慣化の原則を見て見ると取り掛かる時間をどれだけ短くできるかということもだいぶ大切になってくると思います。

ですがブログ執筆にはツイッターやSNSみたいな感じの気軽な情報発信という形ではないと思います。それの一つが執筆するまでの準備にちょっと時間がかかるっていうのが原因だと思うんですよね。ブログを開設するのに時間がかかるという意味ではなく、執筆に取り掛かるまでに少し障壁があるということです。

パソコンの方が執筆しやすい→でもめったにパソコン開かない→ブログ書かない→習慣にならない→続かない→やめる

大体このサイクルだと思います。ちょっと独断と偏見が入っていますが、私の場合は大体こんな感じで、周りの話を聞いていてもだいたいこんな感じかと。

結論

ブログ作成を習慣化するならNotionとはてなブログのMarkdown記法がオススメということ。別にNoitonとQiitaでもいいと思いますが。

私が提唱したい方法は次の3ステップでできてます。

  1. Notionで記事を作成
  2. コピペではてなブログの記事投稿に張り付け(Qiitaでも可)
    1. Markdown記法ができるサイトならどこでもいいです。
  3. 最後体裁を整えて投稿!

ではこれからなぜこの方法がいいと思ったのか、その理由を書いていきます。

前提, MarkdownとNotionとは?

理由の前に少し前提のお話をしたいと思います。

Markdownとは次のようなものです。Wikiから引用させてもらいます。

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在[いつ?]ではHTMLのほかPowerPoint形式やLATEX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言)が存在する。

難しいことを書いていますが、こう書けばきれいな文章が作成できますよっていう話です。文字を太くするのにいちいちマウスを動かしてクリックするのがめんどくさいじゃないですか。そういうのがいらないって感じです。

ちなみにはてなブログでMarkdownを用いてブログを執筆する方法は次のリンクを参考にしてください。本ブログでは詳しい説明は割愛します。あしからず。

Hatena Blog, はてなブログ ヘルプ, 編集モード

具体的な例については次のQiitaが出しているMarkdownのちーとシートを参考にしてください。

Qiita Markdown記法 チートシート

Notionとは、メモアプリです。めちゃくちゃ便利です。EvernoteやOneNoteなどのメモアプリと同じようなことができます。個人的に愛用している理由は次の通り。

  • コードのメモを取りやすいこと
  • Markdownで書けること(少ない労力できれいに描けるんですよね~)
  • 表を作成できること

Notionをブログ執筆におすすめする理由

それでは本題のなぜNotionをブログ執筆におすすめするのか。理由は次の2つであります!

  • コピペでMarkdown記法で張り付け可能
  • スマホで使用可能で使いやすい

コピペでMarkdown記法で張り付け可能

どういうことかは実際に見てもらった方が分かりやすいと思うので、次の画像を見てください。

実際にこの文章をNotionで編集し、それをはてなブログのMarkdown記法で張り付けているところです。

はてなブログ↓

はてなブログ

Qiitaの場合はこちら↓

Qiita

コピペするだけで、いい感じデザインのまま投稿できるということです!

はてなブログもQiitaも画面が分割されちゃうので画面が小さいときに不便なんですよね。なので、スマホでブログを執筆したいなあっていうときには結構困りますよね。まあそういうときはNotionがものすごく便利でだった。もうそのままNotionを中心として買えばよくねと思ったのがきっかけですね。

スマホで使用可能で使いやすい

もうちょっと上でも書いたんですけど、スマホ画面ではてなブログを書く場合やQiitaの記事を執筆する場合は、画面が小さくて操作性が悪いんですよね。それでなおかつ、Markdownで書こうと思ったらスマホだとキーボードを行ったり来たりしないといけなくて面倒くさいんですよ。#とか* とかを入力するのに数字と記号のところまで移動しないといけなかったりと。

それがNotionだったらスマホアプリ一つですべて完結するんですよね。

太字にする、見出しをつける、テーブルを作成する、すべてちょっとしたボタンを押すだけでできます。これがスマホの時に重宝するんですよね。

まとめ

ここまで読んでくださってありがとうございます。ブログを執筆するっていうことはとても大変だと思うので、ちょっとした煩わしいことも減らしていけたらなと思ってこの記事を書いた次第です。

まとめると

Notionで記事執筆→そのままの見た目で編集しやすい→貼り付ける→Markdownで張り付け可能→Markdownでかけるブログに貼り付ける→いい感じ!

ってことです。

面白い方法があったらまた教えてください。それではまたお会いしましょう。

Heroku Postgresでテーブルを作成する方法, 落とし穴を添えて

目次

はじめに

現在、Webアプリケーションを作成しています。 https://daigo-books-32e96c87f877.herokuapp.com/

言語は Java で、フレームワークはSpring Frameworkを使用しています。 これをHerokuでデプロイしようとしました。データベースを使用したいので、Heroku Postgresとアプリケーションをつなげる設定をしました。よし、これでデータベースの連携がうまくいき、公開できるぞと思いきや、次のエラーに出会いました。

Error querying database.  Cause: 
org.postgresql.util.PSQLException: ERROR:
relation "<your table name>" does not exist

これはHeroku Postgresのデータベースにテーブルがないので、あなたが指定したテーブルにアクセスできないし、そもそもどれ?って言っているエラーです。

一旦、状況を整理しましょう。

項目 ステータス
アプリケーションの作成 OK
データベースとの接続 OK
データベース中のデータへのアクセス NG

※アクセスしたいテーブルがないのでエラーになる

この時はHeroku Postgresにテーブルデータを作成すればいいわけですが、その作成するときに色々な落とし穴にはまったのでそれを共有したいと思います。

私がエラーに出会ってから解決までの時系列はこんな感じです。分からない単語や言い回しがあっても、ここはこんな感じだったんだなと、軽く流しておいてください。

No. 出来事
1 エラーに出会う
2 エラーの解決策を AI に教えてもらったら、Flywayを使用しようと助言をもらう→導入に時間がかかったため、断念。
3 そもそもHeroku CLIめっちゃ古いやん。→解決
4 Dataclipsなる便利な機能発見!これで解決かと思いきやテーブルは作成できないんだと。。
5 Heroku CLIを使用して、データベース接続、テーブル作成しよう。。あれ?psqlコマンドががないだと。。Postgres SQLを普通に使用してあるのにか。。
6 環境変数をいじって解決。
7 データベースとつなげる。テーブル作成。アプリケーション起動。エラが治っていた!!

本記事では次の流れで進んでいきます。

  1. エラー文の詳細
  2. 主な解決方法
  3. 私がはまった落とし穴
  4. 私がはまった落とし穴の解決方法

【環境】

  • Windows 11
  • PostgresSQL 16
  • Heroku CLI
  • Heroku Postgres

環境が違うと色々不便なことがあるかと思いますので、環境情報も一緒に共有します。ご参考までに。

エラーの詳細とその解決方法

エラー文の詳細

Error querying database.  Cause: 
org.postgresql.util.PSQLException: ERROR:
relation "<your table name>" does not exist

解決策

一言で言うとHeroku CLI を使用して、テーブルを作成。解決までの流れはこんな感じ。

<大まかな手順>

  • Heroku CLIを使用
  • CLIでHerokuにログイン

次のサイトをみて、Heroku Postgresとつなげる。

https://amateur-engineer-blog.com/heroku-postgres-basic-data-operation

  • テーブルを作成するSQL文を書き、実行する

私が今回実行したSQL文はこんな感じ。

CREATE TABLE Persons (
    PersonID int,
    LastName varchar(255),
    FirstName varchar(255),
    Address varchar(255),
    City varchar(255)
);

ここまで来たらテーブルを作成できているはず。次からのステップは事後確認。

  • Heroku Dataclipsでテーブルの存在を確認

要するに何かコマンドを実行して、想定している結果が帰ってくるかを確認する。

SELECT CustomerName, City FROM Customers;

※sqlコマンド自体は自分の環境や作成した環境に合わせてね。

想定する結果 ・実行できたけど、データはないよという文章

↑今思えば、この確認方法はどうかと思います。実際ならデータを入れて、そのデータが取得できるところまでやるべきだったかと。

以上!これでテーブルが作成され、無事にアプリケーションのデプロイができた!

だが、このエラーを解決するまでの道のりは長かった。。。落とし穴がたくさんあったからね。皆さんにはその落とし穴にはまってほしくないので情報を、ブログという媒体で皆さんに情報を共有したいと思います!!

私がはまった落とし穴

落とし穴一覧はこんな感じ。悲しいかな、ITって色々な知識が必要ですね。1個バグを見つけたら10個はバグがあると思え。

  • Heroku CLIのバージョンが古い。
  • psqlコマンドがない
  • Dataclipではテーブルを作成できないだと。。
  • AIにFlywayを使えと言われた

私がはまった落とし穴の解決方法

それでは 1つずつ見ていきましょう。

Heroku CLIのバージョンが古い。

Warning: heroku update available from 7.19.4 to 7.22.2

現在の最新バージョンは、8.x.xと書かれていることが多いと思いますが、私が最近まで使っていたのは、7.x.xと古いものでした。要するに iPhone15と14みたいな違いです。 これも色々な不具合の原因になりますので一緒に対処していきます。

解決策

この記事を見てもらったら大丈夫 heroku update

https://qiita.com/Panzo_webengineer/items/4af03a15d6cfeb6cd643

psqlコマンドがない

'psql' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたは
バッチ ファイルとして認識されていません

このコマンドが使用できないといけないわけですが このコマンドがなかったわけです。通常、PostgresSQLをインストールしたら使えるようになるんですけれども、私の場合これが使用できませんでした。なぜかと言うと、環境変数に設定されていなかったからですね。おそらく 最初のインストール時の初設定でチェック外したんですかね?よくわかんないんですけれども。こういう時は後から環境変数を設定し直してあげれば大丈夫です。

解決方法

この記事に書かれている通りにやればOKです。

https://qiita.com/Riku-smile/items/7ed3b35cda47ea3c2d3b

Dataclipではテーブルを作成できないだと。。

よしなるほど、テーブルがないからエラーが起きてるのか。それでは テーブルを作成しよう。お!こういう SQL 文 を実行できるサービスがあるんだ すげえと思ってやったんですけど、なんとこれは、テーブルの作成はできないんですね。

【引用】

Heroku Dataclips を使用すると、Heroku Postgres データベースへの SQL クエリを作成し、その結果を同僚、サードパーティツール、パブリックと共有できます。データクリップの受信者は、そのデータをブラウザで表示できるほか、JSON および CSV 形式でダウンロードすることもできます。

リンク→https://devcenter.heroku.com/ja/articles/dataclips

ちょっと愚痴っぽくなりましたけれども、その他の機能はだいたい使えるんで、データベース周りでやりたいことがあったら是非このサービスを使ってください!!

解決方法

次のリンクの通りにやればOKです。ですが前提条件として、上記で説明した最新バージョンとまではいかなくともHeroku Postgresが使用できることとpsqlコマンドが使用できることが条件です。

https://amateur-engineer-blog.com/heroku-postgres-basic-data-operation

AIにFlywayを使えと言われた

このFlywayというのはデータベースのマイグレーションツールです。イメージとしてはデータベース版のGitてすね。私はこれを使ったことがなかったので、導入にめちゃくちゃ時間かかりましたし何なら、導入できませんでした。一応、設定などはいるできたんですが、データベースのバージョンがサポートしていないだったり、もうテーブルがあるんですけどどういうことですか、とか言われたり。知らんがな、という感じです。結局のところ、私の知識不足なわけですけれども。少し話が脱線しましたが、ここで言いたいことは使ったことのないツールを導入するのには 最初に結構時間がかかる、かつ、AIも簡単ですぐ解決できるような最適な答えを全部返してくれるわけではないということです。 今回使用していた AI はChatGPT4-oです。だいぶ 賢いんですけど、使用する時は正確な情報を言ってくれてるのはどうか検証しながらまた試行錯誤しながら使用する必要がありますね。

解決方法

時間がかかりそうだったので別の方法を模索。その結果、普通の方法というか最もシンプルな解決策に出会いましたね。 でもこの経験でAIを使い出した感じもあるのでいい経験でした。

まとめ

時系列でまとめるとこんな感じ。

No. 出来事
1 エラーに出会う
2 エラーの解決策を AI に教えてもらったら、Flywayを使用しようと助言をもらう→導入に時間がかかったため、断念。
3 そもそもHeroku CLIめっちゃ古いやん。→解決
4 Dataclipsなる便利な機能発見!これで解決かと思いきやテーブルは作成できないんだと。。
5 Heroku CLIを使用して、データベース接続、テーブル作成しよう。。あれ?psqlコマンドががないだと。。Postgres SQLを普通に使用してあるのにか。。
6 環境変数をいじって解決。
7 データベースとつなげる。テーブル作成。アプリケーション起動。エラが治っていた!!

最後まで読んでくださりありがとうございます。何かご意見あれば、コメントしてくださると幸いです。Twitter、Xもやっているので、そちらでコメントしてくださっても大丈夫です。あまり見ていないので返信がなくても、ご容赦ください。

参考文献

脳の若返りに効果があるココアの摂取目安

目次

ココアの主な効果と摂取量

脳の若替わり10歳-20程度 3か月間摂取 920mg ココアフラボノイド 85%のダークチョコレート 40g - 60g

正確には各商品の成分表示を調べ、計算する必要がある。ただポリフェノールとだけ記載されていることもオーク正確にここはフラボノイドがこれだけ取れるとは明言しがたい。

結構大量のチョコレートを食べる必要があるが、これだけ食べれなくても美肌効果や便通の改善もされるので、少量でもいいから食べる習慣を身につけられるといいなと思いました。

純粋なココアパウダーだとチョコレートよりかは少なくて大丈夫。なぜなら純度が高いから。大さじ一杯が約15g程度なので、大さじ二杯で900mg程度のココアフラボノイドが摂取可能なものだと思われる。

大さじ1や小さじ1は何グラム?砂糖や小麦粉だと何グラムになる?

参考文献

Spring Frameworkのテスト環境ではH2データベースを使いたいときにどうするといいか。

はじめに

ソフトウェア開発をする上でテストを実施します。テストは大きく分かれて2種類あり、1つ目が人の手で実行する方法、2つ目が自動テストをする方法とがあります。

自動テストをするときに、本番環境と開発やテスト環境を切り替えたいときがあります。今回の私の例を申し上げれば、今、Spring Frameworkを使い、webアプリを作成しています。本番環境ではデータベースにpostgresを使っていたのですが、この環境だとテストがしにくいことが判明しました。逆に、H2データベースと呼ばれるデータベースがあるんですが、そちらを使ったほうがテストが容易であることが調べていくうちにわかったんですよね。でも本番環境はpostgresを使っていきたい。

じゃあ、どうやって本番環境ではpostgresを使ってテスト環境では平日データベースを使うように切り替えていくのか。

これについて本日は解説して行きたいと思います!

目次

前提事項

解説して行くにあたりまずは前提事項を押さえていきましょう。私が開発に使っていた環境は次のようになります。

  • Windows 11
  • eclipse
  • Spring Framework 3.x
  • gradle
  • テスト用にH2データベースを使用

結論

テスト用に設定を用意する! 具体的に言えば、次の2つのステップ。

①テスト用のapplication.properties

②テスト実行時にH2データベースを使用するようにbuild.gradleに書く!

①テスト用のapplication.properties

次のフォルダ構成になります。画面下部の位置に、テスト用のapplication.propertiesがあるかと思います。こちらを作成。(src/test/resourcesを右クリック → 新規 をクリック → ファイル をクリック)

中身は下記の通り。こちらを記述する。

# =の右にはアプリの名前を記載
spring.application.name=yourAppName

# DataSource
# SQLスクリプトの初期化モードを設定
spring.sql.init.mode=always
# Log表示設定 DEBUG=詳細なログ
logging.level.com.example.webapp.repository=DEBUG

# H2 Databaseの設定
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driver-class-name=org.h2.Driver
spring.datasource.username=yourname
spring.datasource.password=yourpass

# H2 Consoleの有効化
# webブラウザで操作可能になる
spring.h2.console.enabled=true

メリット このファイルを作成することで、テスト実行時にこの設定が読み込まれます。つまり、テスト環境と本番環境を分けることが出来ます!

注意点

H2データベースを使用するためにいろいろ設定しないといけないので、うまくいかなかった人はH2データベースの設定を見直してほしい。

  • そもそも設定しているのか。
  • H2データベースの設定とapplication.propertiesの記載内容があっているのか。

②テスト実行時にH2データベースを使用するようにbuild.gradleに書く

testImplementation 'com.h2database:h2'dependenciesに追加する!下のような見た目になるかと思います。一番下です。

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:3.0.3'
    compileOnly 'org.projectlombok:lombok'
    developmentOnly 'org.springframework.boot:spring-boot-devtools'
    runtimeOnly 'org.postgresql:postgresql'
    annotationProcessor 'org.projectlombok:lombok'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    testImplementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter-test:3.0.3'


    testImplementation 'com.h2database:h2'
}

下記は、ChatGPTさんの解答になります。ご参考までに。

testImplementation 'com.h2database:h2'という記述は、Gradleプロジェクトの build.gradle ファイル内で見られるもので、テストコードの実行時にH2データベースを使用するための依存関係を指定しています。

具体的には、'com.h2database:h2'は、H2データベースの依存関係を示しています。つまり、プロジェクトのテストを実行する際に、H2データベースを使用するために必要なライブラリがプロジェクトに含まれることを意味します。

参考文献