月: 2023年3月

新入社員ブログ　中島06『chatGPTでカレンダーアプリを作ってみた』　

こんにちは。22年度入社の中島です。

今回は、最近流行りのChatGPTを使ってプログラムをやってみました。
それを簡単にまとめましたので、紹介したいと思います。

ChatGPTとは？
ChatGPTは、高度なAI技術によって、人間のように自然な会話ができ、無料で利用できるAIチャットサービスです。2022年11月に公開されてから、多種多様な質問に対する返答が面白いとSNSなどでバズっています。

実際に使ってみた
プログラムについてもできると聞いたので、簡単なプログラムが作れるのか実際に使ってみました。
仕様としては
・『ブラウザ上で見られるスプリクトで、
　カレンダーの日にちをタッチすると赤色になるプログラムを作ってください』
と入力しました。

出てきたプログラムがこちらです

<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Calendar</title> <style> /* カレンダーのセルをスタイル付け */ td { padding: 10px; border: 1px solid black; text-align: center; cursor: pointer; } /* 赤い背景色を追加 */ .selected { background-color: red; } </style> </head> <body> <table> <thead> <tr> <th colspan=”7″>March 2023</th> </tr> <tr> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> </tr> <tr> <td>18</td> <td>19</td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>25</td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> </tr> </tbody> </table> <script> // カレンダーのすべての日付セルを取得 const dateCells = document.querySelectorAll(‘tbody td’); // カレンダーの各日付セルにクリックイベントを追加 dateCells.forEach(cell => { cell.addEventListener(‘click’, () => { // クリックされたセルに ‘selected’ クラスを追加 cell.classList.add(‘selected’); }); }); </script> </body> </html>

それをブラウザで開くとこんな感じです。

日付をクリックしたら赤くなるカレンダー


入力通りのものができました。
ですが、これでは赤色にしてしまうと元の戻らないので、仕様を追加します。

・上記のプログラムに以下の仕様を追加してください
　『日付がクリックされるたびに　赤→青　青→白　白→赤に切り替わる』

出てきたプログラムがこちらです

<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Calendar</title> <style> /* カレンダーのセルをスタイル付け */ td { padding: 10px; border: 1px solid black; text-align: center; cursor: pointer; } /* 赤い背景色を追加 */ .red { background-color: red; } /* 青い背景色を追加 */ .blue { background-color: blue; } </style> </head> <body> <table> <thead> <tr> <th colspan=”7″>March 2023</th> </tr> <tr> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> </tr> <tr> <td>18</td> <td>19</td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>25</td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> </tr> </tbody> </table> <script> // カレンダーのすべての日付セルを取得 const dateCells = document.querySelectorAll(‘tbody td’); // カレンダーの各日付セルにクリックイベントを追加 dateCells.forEach(cell => { cell.addEventListener(‘click’, () => { if (cell.classList.contains(‘red’)) { cell.classList.remove(‘red’); cell.classList.add(‘blue’); } else if (cell.classList.contains(‘blue’)) { cell.classList.remove(‘blue’); } else { cell.classList.add(‘red’); } }); }); </

それをブラウザで開くとこんな感じです。

日付をクリック色が切り替わるカレンダー

今度こそ思い通りのものができました。
このように仕様を途中から追加しても、ちゃんと入れてくれます。
このプログラムを基盤に書き換えながら別のプログラムを作れます。

まとめ
いかがでしたか？
今回は、話題となっているChatGPTを使ってみました。
私は、ここ最近わからないことがある時にChatGPTを使って聞いていますが、会社で使う際は、直接仕事の具体的な情報を入力しないように心がけます（これは先輩からもよくよく言われています）。仕事と関係なく、サンプル的なアプリを作る時は、非常に便利なのでChatGPTを使いながらプログラムを学んでいきたいと思います。

今回はここまで
最後までご覧いただきありがとうございました！

virtualboxでPHPの環境構築を作成してみた

皆さん、こんにちは入社2年目の鹿倉です。今回は、virtuakboxでPHPの環境構築を作成してみました。

何故:virtualboxでPHPの環境構築を構築しようと考えたのか。

　PHPを学習し始めた人々や研修を受けた人々では、PHPで環境構築する際に、xampp やmampなどのパッケージを利用してPHPを学習している人は、多いと思っています。
　しかし、私がこれまで、関わっていたプロジェクトでは、xampp やmampを使用して開発は、1度もありませんでした。では、何を使って開発しているのでしょうか。
　結論から言えば、プロジェクトによります。しかし、私の経験上、最も開発環境構築で利用したのは、virtualboxで環境構築を作成するケースが多かったです。そこで、今回はvirtualboxでPHPを環境構築を作成しようと考えました。

開発手順

事前定義：今回のPHPの環境構築では、以下の条件を元に作業を行う。また、VirtualBox,Vagrant,centOSは、インストールされた状態とする。

・VirtualBox バージョン6.1
・Vagrant バージョン2.2.18
・centOS バージョン7.8
・PHP バージョン　5.4

1.作業ディレクトリから仮想環境に接続までの手順
1-1.作業ディレクトリの作成
仮想環境に必要なディレクトリを用意する。ディレクトリは、以下の例で作成する。
[crayon-673ed1f232024515095869  ]$ mkdir  F:\space_php[/crayon]

1-2.Vagrantfileを作成
ディレクトリを作成したらcdコマンドで移動して、vagrant initのコマンドを実行してVagrantfileを作成します。Vagrantfileとは、IP、ポートなど構築時に設定を記述する事が出来るファイルです。


[crayon-673ed1f23202d947887610  ]$ vagrant init[/crayon]

1-3.仮想環境を起動します。
以下のコマンドを実行する事で、Vagrantを起動します。

1-4.仮想環境にssh接続を
sshで接続するコマンドを実行します。ssh接続をする事で、仮想環境上で、PHPやApacheのインストールなど仮想環境上で操作を行う為にssh接続で仮想環境に接続します。



2.仮想環境でのサーバー構築
2-1.PHPとApacheのインストール
ssh接続に成功したら、いよいよ、仮想環境にPHPとApacheのインストールを行います。
以下のコマンドでインストールを実行します。

2-2.Vagrantfileの設定
Vagrantfileでネットワークの設定を行い、ローカルから仮想マシンを見られる様に、編集します。その為に一旦、ssh接続を解除します。以下のコマンドで解除出来ます。
[crayon-673ed1f23203b329160506  ]$ exit[/crayon]
Vagrantfileで以下の記載されている内容を＃を外してコメントアウトします。


コメントアウト後、再起動を行い、再び,ssh接続を行います。


ssh

2-3.Apacheのファイル編集
phpを表示させる為、Apacheファイルを修正をします。
以下のコマンドでファイル内を閲覧します。


移動後、ファイル内で以下の記載されているのか確認をします。。
[crayon-673ed1f23204b965715951  ]AddType application/x-compress .Z [/crayon]
[crayon-673ed1f232051077321169  ]AddType application/x-gzip .gz .tgz[/crayon]
上記の2行を発見したら以下の内容に変更します。


[crayon-673ed1f23205a827361992  ]AddType application/x-httpd-php-source .phps[/crayon]
この変更をする事でApacheは拡張子がPHPのファイルをPHPプログラムとして処理を行う事が出来ます。

2-4.phpファィル作成と動作確認
これで、設定を完了しました。最後に、phpファイルを作成して、ブラウザで表示されるか動作確認を行います。以下のディレクトリに移動して、phpファイルを作成します。



test.phpは以下の内容を記載しました。

記載後、ブラウザで

でこんにちは、PHPと表示されたら成功です。

最後に

　今回の環境構築を作成してみて、構築は簡単ではないですか、作業をする事でどの様にして、ブラウザで表示されるには、どの様な条件でなければならないのか理解するいい経験でした。
　しかし、プログラマーの年数が上がるにつれて、今度は、開発環境で、何か必要なのかを見極める事が必要なのだと考えています。
　今度、Laravelの導入だったり、Chefを使った自動構築など色々調べて学習を継続する事が今度、未来の私が困った時にその経験が助けになると考えています。

それでは、また次の記事でお会いしましょう。アディオス?

コーディング規約の重要性　

皆さん、こんにちは、入社2年目の鹿倉です。今回はコーディングの重要性を語ろうと思います。

コーディングとは

　コーディング規約の前にコーディングとは、何でしょうか。
　コーディングとは、プログラミング言語を使ってソースコードを作成する事です。曖昧な事ですが、詳細には、仕様書に沿って、ソースコードを作成して、ブラウザで見える化をする事です。
　読者は、あれ？、それってプログラムじゃないかと疑問に思っているかもしれませんが、実は、コーディングはソースコードを書く事だけを指しています。一方でプログラムは、書くだけではなく、設計したり、テストする事を指しているのです。

コーディング規約の重要性

　コーディングの意味を知った所で、いよいよコーディング規約を説明します。
　コーディング規約とは、開発者がプログラム言語でソースコードを記述する際に、形式や書き方を決める事です。簡単に言えば、プロジェクトで開発する際に、ソースコードの形式のルールを決める事です。
　実は、コーディング規約を決めるのは、とても重要な事なのです。何故なら、コーディング規約を決める事で、作業効率が上がる事が出来るからです。
　例えば、プロジェクトで複数メンバーで開発する際、メンバーそれぞれがコーディングを自由に書いたらどの様な事が起きるのでしょうか。
　他者のソースコードを見る際に独特なソースコードが書かれた場合、理解するのに時間が掛かる事でしょう。そうなると、理解するのに時間が掛かり、効率が悪くなってしまいます。それを阻止する為に、コーディング規約は、非常に重要なのです。

PHPにおけるコーディング規約の例

　では、実際にコーディング規約には、どんなルールがあるのでしょうか。
今回は、PHP言語で、コーディング規約の例を説明しようと思います。
　PHPのコーディング規約で代表的なのは、PSR-2 と呼ばれるコーディング規約です。この規約は、PHPでソースコードを記述する際に、PHPのコーディングスタイルつまり、形式についての規約が記載されています。では、PSR-2にはどの様なコーディング規約があるのでしょうか。

簡単なプログラミングを例に説明します。以下のプログラミングは、readline関数でユーザーのコンソールで年齢を入力したのが$ageに代入されます。その後、関数で年齢の範囲を判定して、関数の結果を出力しています。

■PSR-2のコーディング規約の一部の例

・if文の「{」の前では改行してはいけない。
・elseやelseifの前後括弧は同じ行に配置。
・else ifではなくelseifで1語でまとめられる様にする。
・インデント(字下げ)をする際は、半角スペースを4つ開ける。

ここに、記載されていている、PSR-2は、一部に過ぎません。
　他にも、PSR-2では、PHPのコーディング規約は多くあるので、以下のURLでも参考にしても良いと考えています。是非、参考にして見てください。

URL：http://www.php-fig.org/psr/

コーディング規約の記事を作成した考えた事

今回のコーディング規約について記載して思った事は、プログラマーは、決められたコーディング規約の中で最適なコーディングを書く事が重要だと考えました。
　ソースコードには、エラーが起こらない限り書き方は、自由です。しかし、自由にし過ぎると他者がソースコードを見た時に、理解出来るのかの方で重要です。
　そうしなければ、結局は、私しか理解する事が出来ないコードになってしまって、開発する際に、大きく足を引っ張ってしまいます。
　プロのプログラマーを目指す人には、ただソースコードを書くだけではなく、自分が書いたソースコードを他者に説明するスキルを身につける事が必要だと私は、考えています。

それでは、また、次の記事でお会いしましょう。アディオス!!?