駆け出しエンジニアの勉強記録

アラフォー女の未経験すぎる業界での勉強記録

自己紹介

バイト、正社員含めこれまで飲食・アパレル・美容と完全接客業しかしたことがないアラフォー女が、とあるきっかけで2023年、全くの未経験でITエンジニアに転職。

完全文系、理系的な思考=アルゴリズムが苦手というか考えられない。
この時点でエンジニアに向いてませんが(泣)現在も、とあるIT会社でほぼ独学しながら働いてます。

自分の勉強記録、復習用として書いてます。

<
勉強中>
PHP
VUEJS、jQuery、TypeScript

VisualStudioCode
laravel
Mysql

転職エージェントに転職を止められた話

6月にブログを書いてから早2ヶ月ちょっと。

あれから案件に入れてもらえるようになったはいいものの、HTML,CSSPHPの勉強してたのに、今参加させてもらってる案件が

\\\ TypeScriptとNext.jsを使用したReactプロジェクト///

PHP使わんのかーーーーい!

しかも勉強じゃなく「案件=仕事」なのにTypeScriptもNext.jsもReactも全てハジメマシテーーー。

TypeScriptって?Next.jsって?Reactって???
言語なの?フレームワークなの?ライブラリなの?一体何なの状態。。。

毎日毎日調べまくって、先輩のコード真似てなんとか書いてるけど、一番お世話になってるのはchatGPT先生。

本当に神様。

GPT先生がいなかったら絶対に(!)1年もせず退職してる自信ある←

そのGPT先生が登場したのが2022年11月、私が今の仕事に転職したのが2023年1月。

この素晴らしいタイミングよ✧(✪д✪)✧

ただ、それでもやっぱり理解できない部分はたくさんあるし、なんならせっかく勉強したPHPのことすら既に忘れかけてる(絶望するレベルの私のぽんこつ脳具合)

本当にこんなん状態でいいのか?
このままじゃ2年経とうが3年経とうが全く理解できないままな気がする(「気」じゃなくて絶対そう)

もっと基礎からしっかりと1つの言語を理解して、ある程度極められるような会社を探してみるべきじゃないのかと思い、某エンジニア専門サイトの転職サービスに登録。

届いたスカウトメールから2つほどエージェントのオンライン面談を受けてみることにした。
(スカウトって言っても定型文の自動送信がほとんどよね。だって仕事内容と記入してある私のレベルが見合ってなさずぎだもんw)

1件目はIT専門の人材会社じゃなくて、エージェントさんもそこまでIT業界に詳しくなさそうな感じ。

OJTがしっかりしている会社をご希望であればSESとして電話対応から始めて基礎をetc…」

と言われ、SES自体なんとなくのニュアンスでしか把握してないから「そういう方法もあるのか」と思う反面、この業界の知識が浅い私でもさすがに

「コード書けるようになりたいのに電話対応ってだいぶ遠回りじゃないか?」

と思い紹介は一旦保留にしてもらった。

2件目はITに特化した人材会社でここのエージェントさんは元エンジニアの方だった。

さすが同じ業界の人だけあって1件目と違い、私が置かれている現状、感じている事などスムーズに把握してくれた。

そして会話の中で出てくるIT業界用語も私が「?」となると丁寧に解説してくれる優しさ。

が、そこで言われたのが「もったいないです」だった。


要約すると

【全くのIT未経験者がフルスタックエンジニアが何人もいる元請けの受託開発会社に入れて、実際に案件に参加でき、直接同じ社内の先輩にいつでも質問できる環境】

はなかなかないらしく、この先もエンジニアを続けていきたいのであれば、今は辛くてももう少しそこで頑張ってみてはどうですか?と。

・エンジニア業界は、他のサービス業界とは違い基礎からしっかり教育、教えてくれる会社は結構少ない。基本、自分で勉強や質問を繰り返し習得していく(自社開発企業等はまた別)
・SESになっても実際に毎回コードを書く案件に携われるかは、まさにガチャになるのであまりお勧めしない。(1件目で言われた電話オペレーター等の仕事もあったり)
・ITスクールの広告塔で半年でフリーのエンジニアに。など見かけるが実際にちゃんと一人で案件担当できるようになるのは平均でも2〜3年はかかる。

まさか転職エージェントに相談して転職を止められるとは思ってもいなかった。

自分の売上、成績等を考えたら私の技術レベル的に大した売上にならなかったとしても、適当に上手いこと言ってちょちょちょいっと適当な会社紹介して転職させた方がいいに決まってるのに、およそ1時間の転職無料面談が実質、相談会に。

自分の周りにIT業界の人が一人もいないので、今の自社以外の業界の雰囲気がなんとなく把握できたことが大きな収穫だった。

とても親身に相談に乗ってくれるエージェントさんだったので、その方の言う通りもう少しだけここで頑張ってみようかなと気持ちを切り替え現在に至ってる。

いや、このエージェントさんには本当に感謝しているし、この先また転職を考えた時はこの会社に相談しようと思っている。

そんな今日もGPT先生に教えていただいたコードが理解できなくても、とりあえず書いて動くようにするので精一杯な1日。。。

つぶやき。独り言。

プログラミング。というものを学んで1年半。

なんなら最初はWindwsPCしか使ったことのない自分が、MACの操作を覚えるとこから入った訳だけど、1年半触れても全然出来てる気がしない。

「お問い合わせフォームを作って下さい」

と言われたら今の環境であれば作れるとは思うけど、もし新しいPCを支給され同じ指示を出されても

「?まずどうやってコードを書く環境作りするの?」
「コード書き終わったけど、これ反映させるサーバーってどうすればいいの?」

ってな感じで、未だに1つのものを最初から最後まで一人で作ることができない。

え、私こんなんでいいんですかね??
不安すぎる。。。

ちなみにここ1ヶ月以上、私が携われるレベルの案件がないらしく(私以外、エンジニアとしてのレベル高すぎる人しかいない会社なのである。なんで私がそんなとこ在籍してるのか自分でも謎)「勉強しといて」って感じだけど、特に教材があるわけでもないから、出社して毎日8時間、ひたすらネットググって色んなサイト見て、真似てコード書いてみてetc…を繰り返してる。

\\\ 長期、放置プレイ///

「自主勉強たっぷりできて給料もらえるなんて最高すぎじゃん」

って思われそうだけど、何か課題があるわけでもなく、勉強の成果を発表する場があるわけでもなく、「とりあえず自由に勉強しといて」というのはなかなかモチベが上がらない。

やっぱり実際の案件をこなしてくほうが、色々吸収できるスピードは早いしモチベも上がる。

モチベがだだ下がるから、検索する言葉もネガティブになってくるw

このサイトには共感しかない。
私がプログラミングに触れた時に思ったこと、感じたことがまるまる書かれてる。

paiza.hatenablog.com

【jQuery】基本

jQueryとは

JavaScriptプログラミング言語jQueryJavaScriptを簡単に呼び出すためのライブラリ。jQueryを使えば少ない命令文でJSを実行できる。

基本の型

$('対象のHTML').実行したい処理();
→$( )の中に対象となるHTML要素を指定し、【.(ドット)】に続けて実行したい処理を記述。

(例) p要素に記述されているテキストを取得する。

<script>
const text = $('p').text();
</script>


対象のHTML
CSSセレクタを使ってHTML要素を簡単に指定できる。

タグセレクタ:<div>, <p>などのHTMLタグ名で要素を選択可能。例えば$('div')はすべての<div>要素を選択できる。

クラスセレクタ: 要素のクラス名で選択可能。$('.my-class')はクラスが "my-class" の要素を選択している。

IDセレクタ: IDで要素を選択可能。$('#my-id')はIDが "my-id" の要素を選択している。


属性セレクタ: []を使って特定の属性を持つ要素を選択します。例えば、$('input[type="text"]')はタイプが "text" のすべての<input>要素を選択している。
$('[date-delete]')だとdata-deleteという属性を持つすべての要素を選択できる。

その他、複数のセレクタをANDやORなどでまとめることで、さらに複雑なセレクタ指定も可能になる。

ANDの場合は、.(ドット)で繋げて複数のセレクタを連続して繋げることが可能。

$('.test.sample.text') → 3種類のclass属性が付与されたHTML要素だけを特定

ORの場合は、,(カンマ)で繋げて複数のセレクタを選択可能。
$('#test, #sample') → 2種類のid属性のどちらかが付与されているHTML要素を特定


組み合わせセレクタ: 例えば$('div.my-class')はクラス "my-class" を持つ<div>要素を選択している。

親子関係セレクタ: 例えば$('div > p')は、<div>の直接の子供である<p>要素を選択している。

疑似クラスセレクタ: 例えば、:first-childや:last-childなど、特定の条件に基づいて要素を選択できる。

実行したい処理

基本:.on( イベント名, 実行したい処理 )

イベント名に指定できるものの例

イベント名 内容        
click
要素がクリックされた時
例: $('#button').on(click,function() { alert('Button clicked!'); });
       
change
フォーム部品の状態変化があった時
例: $('input').on(change,function() { console.log('Input changed'); });
       
forcus / blur
要素にフォーカスが当たった時 / 外れた時
例: $('input').on(focus,function() { console.log('Input focused'); });
       
load
ページや要素が読み込まれた時
例: $(window).on(load,function() { console.log('Window loaded'); });
       
scroll
画面がスクロールした時
       
keydown / keyup
キーボードのキーが押された時 / 離した時
       
mousedown / mouseup
マウスのボタンが押された時 / 離した時
       
submit
フォームが送信された時
例: $('form').submit(function(e) { e.preventDefault(); console.log('Form submitted'); });
       
resize
ウィンドウサイズが変化した時
例: $(window).resize(function() { console.log('Window resized'); });
       


使用例

・画面をリロードして2秒後にアラートを出す
JSのコード

<script>
// setTimeout普通のfunction関数で書いた場合
window.addEventListener('load', function() {
setTimeout(function() {
alert('2秒経過');
}, 2000);
});

// setTimeoutアロー関数で書いた場合
window.addEventListener('load', () => {
setTimeout(() => {
alert('2秒経過');
}, 2000);
});
</script>


同じものをjQueryで書いた場合のコード

<script>
// setTimeout普通のfunction関数で書いた場合
$(window).on('load',function(){
setTimeout(function(){
alert('2秒経過');
},2000);
});

// setTimeoutアロー関数で書いた場合
$(window).on('load',function(){
setTimeout(() => {
alert('2秒経過');
}, 2000);
})
</script>

 

【JS】の文字列操作

【文字列】

参考:

文字列(String) - とほほのWWW入門

<文字列の部分取り出し>

trim():前後の空白を取り除いた文字列を返す(文字の間の空白は取り除けない)

<script>
const X =" ABC ".trim();
console.log(X); // 結果 「ABC」
</script>


trimStart():前の空白を取り除いた文字列を返す
trimEnd():後ろの空白を取り除いた文字列を返す

<script>
const X =" ABC".trimStart();
console.log(X); // 結果 「ABC」

const Y ="ABC ".trimEnd();
console.log(Y); // 結果 「ABC」
</script>


slice(何番目の文字 , から何番目1個前の文字まで全て):指定された位置から文字列を切り取り、必要な部分だけを抽出。第二引数省略で残り全ての文字を返す。

<script>
const X ="ABCDEFGHI".slice(2,6);
console.log(X); // 結果 「CDEF」
</script>


substring(何番目の文字 , から何番目1個前の文字)
:指定された範囲の文字列を抽出。最初の文字は0番目になる。第二引数省略で残り全ての文字を返す。

<script>
const X ="ABCDEFG".substring(2,4);
console.log(X); // 結果 「CD」
</script>


substr(何番目の文字 , から何文字抽出するか):指定された文字から指定した長さの文字を抽出。最初の文字は0番目になる。第二引数省略で残り全ての文字を返す。

<script>
const X ="ABCDEFG".substr(2,4);
console.log(X); // 結果 「CDEF」
</script>


<文字列の分割・連結>

split(前後で区切りたい文字):区切り文字を起点として分割して配列で返す。

<script>
const X ="23:59:59".split(":");
console.log(X[0] + "時" + X[1] + "分" + X[2] + "秒"); // 結果 「23時59分59秒」
</script>


"繋げたい文字1".concat("繋げたい文字2" , ""繋げたい文字3"):連結した文字を返す。

<script>
const X ="ABC".concat("猫" , "ペット");
console.log(X); // 結果 「ABC猫ペット」
</script>


"繰り返したい文字".repeat(繰り返したい回数):繰り返した文字を返す。

<script>
const X ="ABC".repeat(3);
console.log(X); // 結果 「ABCABCABC」
</script>


<文字列の置換>
"文章".replace("置き換えたい文字" , "置き換える文字"):指定した文字や文字列を別のものに置き換える

<script>
const X ="This is a Pen".replace("Pen" , "Book");
console.log(X); // 結果 「This is a Book」
</script>


↑"文章".replace("置き換えたい文字" , "置き換える文字")だと、最初に見つかった置き換えたい文字だけ置き換えられるので、置き換えたい文字全て置き換える場合は、
"文章".replaceAll("置き換えたい文字" , "置き換える文字")を使う。

<script>
const X ="AAA".replace("A" , "K");
console.log(X); // 結果 「KAA」

const Y ="AAA".replaceAll("A", "K");
console.log(Y); // 結果 「KKK
</script>


.toUpperCase():大文字に置き換える
.toLowerCase();小文字に置き換える

<script>
const X ="Abc".toUpperCase();
console.log(X); // 結果 「ABC」

const Y ="Abc".toLowerCase();
console.log(Y); // 結果 「abc」
</script>


<文字列の検索>

.indexOf("検索したい文字" , "検索を開始したいインデックス"):検索を開始したいインデックスから検索したい文字が何番目のインデックスにあるのかを返す。インデックスは0スタート。見つからない場合は-1を返す。
※後ろから検索する場合は.lastIndexOf("検索したい文字" , "検索を開始したいインデックス")

<script>
const X ="ABCABC".indexOf("C");
console.log(X); // 結果 「2(番目のインデックス)」

const Y ="ABCABC".indexOf("C" , "3");
console.log(Y); // 結果 「5(番目のインデックス)」
</script>


.startsWith("検索したい文字"):検索したい文字で始まっていればtrue
.endsWith("検索したい文字"):検索したい文字で終わっていればtrue
.includes("検索したい文字"):検索したい文字が含まれていればtrue

<script>
const X ="ABCDEFG".startsWith("ABC");
console.log(X); // 結果 「true」

const Y ="ABCDEFG".endsWith("EFG");
console.log(Y); // 結果 「true」

const Z ="ABCDEFG".includes("HIJ");
console.log(Z); // 結果 「false」
</script>


<文字列のマッチング>

.match(正規表現):文字列が正規表現にいっちしているかどうかを確認。一致していなかったらnullを返す。
正規表現
/調べたい文字/i 大文字、小文字を区別せずに検索
/調べたい文字/ 大文字、小文字を区別して検索
/\d+/ 1つ以上連続している数字

<script>
const X ="ABCDEFG";
if(X.match(/abc/i)){ // abcもしくはABCが一致しているか?
console.log("マッチしています"); // 結果 「マッチしています」
}

const X ="準備した数字は123456";
const numbers = X.match(/\d+/)
console.log(numbers); // 結果 「123456」
</script>


.serch(正規表現):一致する部分のインデックス番号を返す

<script>
//大文字・小文字区別せずedfが何番目のインデックスから含まれているか?→3
// 3 !=(一致しない) 1 → true
if ("ABCDEFG".search(/def/i) != -1) {
console.log("含まれています"); // 結果 「含まれています」
}
</script>


<文字列のパディング(詰め物)>
.padStart(文字列全体の長さ , "何を詰めるか"):前に詰める
.padEnd(文字列全体の長さ , "何を詰めるか"):後ろに詰める

<script>
const X ="123";
console.log(X.padStart(5 , "0")); // 結果 「00123」
console.log(X.padEnd(5 , "_")); // 結果 「123__」
</script>

 

laravelでcronの登録

cron(クロン)とは?
自動でに定期的に実施する作業を登録する所。
laravelの場合、/app/Console/Kernel.phpのscheduleメソッドに登録したものをcron(crontab)に登録する 。

以下、laravel.logに10分毎に今の日時を表示させる登録の流れ。
成功例

2024-04-25 16:10:01 Running [Callback] [2024-04-25 16:10:01] local.INFO:
スケジュール実行:2024年04月25日 16時10分01秒
........................... 10ms DONE


2024-04-25 16:20:01 Running [Callback] [2024-04-25 16:20:01] local.INFO:
スケジュール実行:2024年04月25日 16時20分01秒
........................... 10ms DONE


①app/Console/Kernel.phpのscheduleメソッドに定期的に行いたいことを登録

use Illuminate\Support\Facades\Log;
protected function schedule(Schedule $schedule)
{
$schedule->call(function(){
$date = new DateTime('now');
$formatteDate = $date->format('Y年m月d日 H時i分s秒');
Log::info("スケジュール実行:{$formatteDate}");  // laravel.logに表示させる
});
}

※ここに直接書かなくても、make:commandで作ったコマンドを登録もできる

$schedule->command('writelog:info')
->everyMinute();


php artisan schedule:runコマンド叩いてちゃんと実行されたらコードはOK


③PCにはいっているcronを使って①を登録、10分毎に実行させる。
ターミナルでcrontab -eコマンドで一番上に登録。

*/10 * * * * cd /Users/work/rv && /usr/local/opt/php@8.1/bin/php
artisan schedule:run >> /Users/work/rv/storage/logs/laravel.log
2>&1

10分毎に実行させる  
 アスタリスクには(にある数字を入れられる)
   分(0〜59) 時(0〜23) 日(1〜31) 月(1〜12) 曜日(0(日)〜6(土))
   *     *       *     *        * 

(例1)毎日10:30に実行させる
30  10  *  *  *  cd /Users...

(例2)月曜朝8時に実行させる
0  8  *  *  1  cd /Users...

(例2)30分毎に実行させる
*/30  *  *  *  *  cd /Users... /*をつけると「毎に」になる

PCから見たそのプロジェクトのパス

PCに入ってるPHP(ディレクトリ)を使ったコマンド実行 = 固定パス
エラーを書き出すlogファイルがあるパス(今回はlaravel.log)
発生したエラーを↑に書き出すのに必須
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
【cronはvimエディタだから以下の操作方法】
編集開始・入力→ i 押す 
空白を消す→ dd
編集終了→ esc
保存→ :wq

vim操作 vimを触った事がない人へ最低限の知識で編集する #Vim - Qiita

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

cronがトリガーとなり10分毎に実行される。

④crontabに登録されているトリガーはcrontab -lコマンドで確認可能
⑤crontabに登録されているトリガーはcrontab -rコマンドで削除可能

laravelのObserver(オブザーバー)

参考:Laravel Observerを使ってみた

Laravel Observer(オブザーバー)
モデル観察システムで、モデルの状態変化(作成、更新、削除など)を監視し、それに対して特定のアクションを実行する機能を作成できる。

①コマンドでファイル作成
php artisan make:observer UserObserver[←ファイル名] --model=User[←モデル名]

②該当メソッドにコードを書く

public function created(Account $account): void  // モデルファイルが作成された時
public function updated(Account $account): void  // モデルファイルが更新された時
public function deleted(Account $account): void // モデルファイルが削除された時
public function restored(Account $account): void  // Soft Delete(論理削除)されたモデルが復元されたとき
public function forceDeleted(Account $account): void  // Soft Delete(論理削除)されたモデルが完全に永久的に削除されたとき

(例)Accountモデルファイルができたら、MHIAテーブルのデータをHIAテーブルにコピー

public function created(Account $account): void
{
$latestAccount = Account::latest()->first();

// 重複コピーを避けるため、HIAテーブルに自分のaccount_idがあるか確認
// $existingData = HealthInsuranceAssociation::where('account_id', auth()->user()->account_id)->get();
$existingData = HealthInsuranceAssociation::where('account_id', $latestAccount->id)->get();
// account_idがなかったらマスターデータを取得してHIAテーブルに登録
if($existingData->isEmpty()){
$master_hia_table = MasterHealthInsuranceAssociation::all();

foreach($master_hia_table as $data){
$hia_tables = new HealthInsuranceAssociation();
// $hia_tables->account_id = auth()->user()->account_id;
$hia_tables->account_id = $latestAccount->id;
$hia_tables->code = $data->code;
$hia_tables->name = $data->name;
$hia_tables->save();
}
}
}


③app/Providers/EventServiceProviderのbootに登録

/**
* Register any events for your application.
*/
public function boot(): void
{
Account::observe(AccountObserver::class);
}

 

バリデーションの種類(リクエストファイル)

php artisan make:request ファイル名」 でリクエストファイルを作成した上で。

  // 必須 & 最大文字数
'sr_code' => ['required', 'max:6'],
// 7桁ピッタリ必須(nullable)とセットで!
'sr_association_zip_code' => ['nullable','digits:7'],  

 

// Companiesテーブルに同じアドレスがあったら登録させない
'email'=>['string','max:255',Rule::unique(Company::class)->ignore($this->route('company'))],

※ignore = 無視する
->ignore()を使うとその条件は無視できる。

今回の ->ignore($this->route('company'))], は編集中のform(Companiesテーブル)のIDを取得しそのIDは重複しても可。にしている。

Rule::unique(Company::class)だけだと、メアド以外の項目変更した際に「メアドが重複している」のエラーがでてしまうのでそれを避けるため。