新入社員ブログ　中島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.作業ディレクトリの作成
仮想環境に必要なディレクトリを用意する。ディレクトリは、以下の例で作成する。
$ mkdir  F:\space_php

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

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

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

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

2-2.Vagrantfileの設定
Vagrantfileでネットワークの設定を行い、ローカルから仮想マシンを見られる様に、編集します。その為に一旦、ssh接続を解除します。以下のコマンドで解除出来ます。
$ exit
Vagrantfileで以下の記載されている内容を＃を外してコメントアウトします。
#config.vm.network "private_network", ip: "192.168.33.10"
コメントアウト後、再起動を行い、再び,ssh接続を行います。
$ vagrant reload
$ vagrant ssh

2-3.Apacheのファイル編集
phpを表示させる為、Apacheファイルを修正をします。
以下のコマンドでファイル内を閲覧します。
$ sudo vi /etc/httpd/conf/httpd.conf
移動後、ファイル内で以下の記載されているのか確認をします。。
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
上記の2行を発見したら以下の内容に変更します。
AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps
この変更をする事でApacheは拡張子がPHPのファイルをPHPプログラムとして処理を行う事が出来ます。

2-4.phpファィル作成と動作確認
これで、設定を完了しました。最後に、phpファイルを作成して、ブラウザで表示されるか動作確認を行います。以下のディレクトリに移動して、phpファイルを作成します。
$ cd　/var/www/html
$ sudo vi test.php
test.phpは以下の内容を記載しました。

記載後、ブラウザでhttp://192.168.33.10/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/

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

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

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

新入社員ブログ　中島05『Windowsのショートカットキー』

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

作業を行っている時、ショートカットを使わず
マウスを使って作業することが多かったので
少しでも作業効率を上げるために、ショートカットキーを調べていました。
今回はWindowsのショートカットキーを紹介したいと思います。

・Ctrl+T（タブを開く）
開いているブラウザで新しいタブが開きます。

・Ctrl+W（アクティブなタブを閉じる）
使用しているタブを消します。連打注意

もし、作業中に必要なタブを消してしまった時いちいち検索し直したり、
履歴に行くなんて面倒ですよね？そんな時は

・Ctrl+Shift+T（閉じたブラウザの復元）
閉じた順番に閉じたタブが復元します。
こちらも連打注意

・Windows+V（クリップボード）
画面右下にクリップボードが開きます。
今回ブログを書くきっかけになったショートカットキーです。
個人的に一番役に立つと思います。

・PrtSc（画面をスクリーンショット）
画面全体をスクリーンショットします。
ですが、デュアルモニターなどを使っていると二画面一緒に撮れてしまいます。
そんな時はPrtSc+Altを使って、必要な画面をスクリーンショットしましょう。

・Windows+Shift+S（選択範囲をスクリーンショット）
範囲を選択してスクリーンショットします。Ctrl+Vでそのまま貼り付けも出来ますし、
クリップボード内にも保存されるので、そこからも操作できます。

・Windows+１～０（タスクバーのアプリの起動 ）
タスクバーのアプリの起動します。（起動している場合はアプリが開く）

上の画像の場合、Windows+１でエクスプローラーが起動し、
Windows+５でchromeが開くといったものです。

いかがでしたか？
今回紹介したものはごく一部です。ショートカットに興味が湧いてきたのなら下のブログを見てみるまたは、一度ご自身で調べることをオススメします。
いい発見になると思います！

よく使うウィンドウズのショートカット (xchange.jp)

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

VeeValidateでデフォルト値検査を外す話

福岡開発センターの野田です。
年度末ということで忙しい日々を過ごしています。

弊社では、Vuejs/Nuxtjsを使った開発を行っています。フロントでの値検査を行う場面も増えてきたと思います。ある案件でフロントでの値検査にVeeValidateを利用していたのですが、カスタマイズした検査が有効にならず何でだろうと調べてみました。有効にならなかったのは、Inferred Rules というものが有効になっていてためであることが分かりました。

Inferred Rules

https://vee-validate.logaretm.com/v2/guide/inferred-rules.html#example

この Inferred Rules ですが、例えば type=”email” に対して VeeValidate をかけると何もしなくても email のバリデーションルールが適用されるというものになります。

対象となるinput属性と値は以下になります（上記サイトより抜粋）。

AttributevalueRule
type“email”email
type“number”decimal
type“date”date_format:YYYY-MM-DD
type“datetime-local”date_format: YYYY-MM-DDThh:mm
type“time”date_format:hh:mm or date_format:hh:mm:ss depending on the step value
type“week”date_format:YYYY-Www
type“monthdate_format:YYYY-MM
minvalmin_value:val
maxvalmax_value:val
patternrgxregex: rgx
requirednonerequired
maxlength“val”max: val
minlength“val”min: val

これを無効化する方法は以下のコードとなります。useConstraintAttrs: false のオプションを指定することでInferred Rulesの設定を無効化することができます。Inferred Rulesはカスタムルールより優先度が高いため、結構扱いが難しいな、と感じています。どこでも使われるようなもののためそういう実装になっているのでしょうけど、メッセージをカスタマイズしたいときは足かせになりました。

こういう設定調整ができるのは、しっかりポイントが抑えられていて人気のライブラリであることを感じます。また何かTipsが出てきたときは紹介したいと思います。

Chromeでカーソルが点滅？！

福岡の野田です。
久しぶりの投稿です。

Chromeを使っていて、ふと点滅するカーソルが表示されるようになったことに気づきました。これは何だろうと調べてみたところ、「カーソルブラウジング」にたどり着きました。カーソル位置を分かりやすくするため点滅を行うことができる機能となります。対応しているのは他にEdgeなどもあるようです。

設定・解除については、F7キーを押下することで切り替えることができます。最初みたときは、スタイルシートの設定でこのような機能が追加されたのか？とびっくりしましたがそんなことはなくブラウザの機能でした。誤操作を避けるためにキーバインドのカスタマイズでF7から設定を外したほうが良いかもしれません。

何気ない違和感から調べてみると新しい発見があって面白いですね。また何かありましたら報告しようと思います。

新入社員ブログ　中島04 『PHPテキスト学習1』

こんにちは！そして明けましておめでとうございます。

22年度入社の中島です。

新年が明けたと思ったらもう一ヶ月が終わりました…
とても早い気がします。

『一月往ぬる二月逃げる三月去る』という言葉があるように、ぼーっとしていたらあっという間に四月になるかもしれませんね。

このままだとまずいと思い、今年の1月から技術力向上のためPHPのテキストで学習に取り組んでいます。

今回はその復習も兼ねて、簡単にブログにまとめていきます。

学習に使用したPHPのテキストはこのテキストです。

そして、学習した内容を大まかにまとめると

・PHPの基本
変数、定義、データ型、配列など

・演算子
代入演算子、比較演算子、論理演算子、ビット演算子など

・制御構文
if命令、switch命令、while/do命令、for命令、foreach命令など

・組み込み関数
文字列関数（mb_strlen関数、mb_substr関数、str_replace 関数）
配列関数（count 関数、array_merge 関数、implode関数）
正規表現(PCRE)関数（preg_match 関数、preg_replace関数、preg_split 関数）
ファイルシステム関数（fopen/fclose関数、fwrite関数、fgetcsv関数）

など現在進行形で学習しています。
そして表紙に書いてあるように
『手を動かしながら学ぶ』と書いてあるので、実際にプログラムを打って実行して動きを確認しながら学習しています。

テキストプログラム

『テキストを読む』→『プログラムを打ち込む』→『プログラムを実行する』
この流れで学習を行い、理解できない部分は上司に聞いたりGoogleで調べながらより理解を深めていきます。
先ほどもお話ししたように現在進行形で学習中です。テキストのページも半分ほどでまだまだこれからなので、一生懸命取り組んでいきます。

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

新入社員ブログ　山本慎太郎第６回

皆さんこんばんは！そろそろ、年度末ですね。学生の方は期末レポートに追われているといったところでしょうか？社会人になった私も年度末の提出物の期日が迫ってきています。（け、決して今までサボっていたということではないのです…）

ブログも第6回になりました。

https://blog-s.xchange.jp/archives/1888

https://blog-s.xchange.jp/archives/1844

https://blog-s.xchange.jp/archives/1814

https://blog-s.xchange.jp/archives/1788


過去のブログもよかったら見てね！


1~5回目は外部及び社内での研修のテーマでしたが、今回は業務から離れます。

今回は「会社近辺の散歩スポット」について書いていきましょう。

弊社は泉岳寺という場所にあるのですが、どこにあるのかあまりピンとこない人も多いのではないでしょうか？私は知人にどこで働いているの？と聞かれるとき、「泉岳寺」とは答えず「港区」と答えるようにしています。「港区」というと、「港区なんだ！？」という反応で、泉岳寺というと「どこ？」といったような反応をされます。（寺という文字が含まれてるので、ちょっと渋てくマニアックなイメージになってしまうのでしょうかね…）

さて、、泉岳寺とはどんなところか、昼休みに散歩してみました。

会社から3分ほど歩いたところに神社があります。たまに、お弁当を食べているサラリーマンの方が見受けられます。

少し歩くと、こんどはお寺です。立派な鐘がありました。

更に歩いていくと、またお寺がありました。築地本願寺っぽいですね。

更に更に歩いていくと、またまたお寺がありました。

地名にもなっている、泉岳寺というお寺でした。

たった十数分の散策で、寺社めぐりができてしまうのです。昼休みの数分で…！

どうやら、弊社の近くには寺社がたくさんあったようです！

ご利益がありそうです。

あっ、寺社だけではありませんよ。もう少し歩けば、レインボーブリッジがあるのです。仕事終わりに散歩できる距離です。

何もないようにみえて、実は何かある！というような泉岳寺でした。

今日はこの辺で！goodluck!!

新入社員ブログ　山本慎太郎第5回

あけましておめでとうございます！

正月はいかがお過ごしでしょうか？私は仕事を忘れゆっくりしていましたがあっという間に休みは過ぎていくものですね。。正月休みが終わってしまいましたが、ゴールデンウィークまで頑張っていきたいと思います

さて、ブログ第５回はOJT研修（実際の業務につきながらの研修）について記していきたいと思います！

４～５月は、外部での研修、６～８月は、社内での研修を行いました（前のブログでも書いたのでよかったら見てね）

９月からは今までの研修とは異なり、実際の業務に入りながらの研修になります。

私は某企業の基幹システムの保守、改修の案件に配属されることになりました。案件に入る前に、まず環境構築を行いました。

環境構築ってどんなことをするの？といいますと…簡単にいうと、基幹システムに接続する設定だったり、案件の他の開発者と開発環境をそろえたりといったことをします。数人で同じシステムを作るので、開発環境を他の人とそろえる必要があるのです。システムのソースコードや、データベースの構造などをそろえます。gitやvirtulbox、A５M２などのツールをインストールして接続設定して…と、システム開発に必要な環境を自分のパソコンに構築していくのです。

また、システムの仕様書を見てどんな機能があるかなども確認したりしました。

環境構築はマニュアルを見ながら行ったのですが、とにかく書いてあることが難しい…研修なので先輩社員に細かく教えてもらいながら環境構築進めていきましたが、それでもわからないことやできないことが山のように出てきます。時間がかかりながらも何とか環境構築を終えました。

そして初仕事を上司から頂き、いよいよ業務に着手！というところですが、これ以上はお話できないのです。（具体的な仕事内容は、秘密にしないといけないのです・・）

お話ができなくなったので、今回はここまでです！最後までご覧いただきありがとうございました！

新入社員ブログ　中島03 『フォローアップ研修』

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

2022年12月21日
私はフォローアップ研修として、文章力向上研修を受講しました。
今回は研修での学習したことを感想を踏まえて、三つにまとめました。

１、文章力向上研修で学んだこと
２、今回の研修を受けて業務で生かしたいこと
３、感想

1、文章力向上研修で学んだこと
-文章を書く上で重要なことは「何の目的で」「誰に」「何を」「どう伝えるのか」である
-伝えたいことを項目化、グループ化し核を決める
-文章を短く、簡潔にする
-段落、文末などを意識し文章をまとめる
-主語、述語を記載する、明確に分かりやすく
-PREP法を使用する（P:結論、R:理由、E:事例、P:結論）

２、今回の研修を受けて業務で生かしたいこと
今回の文章力向上研修では上記のように様々なことを学びました。その中で特に私が業務で生かしたいと思ったことは、PREP法を使ってビジネス文書を記載することです。PREP法を使用すると、自分で一から文章を考えて作成するより相手に明確に伝えたいことを伝えられるからです。
また、読み手に確実に伝えるべきことを伝えることが重要だと学びました。普段の業務では、先輩や上司に何かを伝える際に冗長な文章になってしまいがちです。今後は目的をしっかり決めて短い文章で伝えるようにします。

３、感想
今回の文章力向上研修を受けて、今までの私は文章を書く際に結論から書くことは意識していましたが、短い文章で書く、文末は一緒ではない方が良い、など細かいところは意識したことがありませんでした。今後の業務では今回習ったことを生かせるように、まずはPREP法で伝える、ということから始めようと思います。

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