あじちゃんのブログ。備忘録。

〜SEもOLなんですかね?

2018.07に考えたキャリアプランメモがあったので忘れないように書いておく

直近(〜2018.10)

業務

  • PHP,JS のスキルを伸ばす → 基礎の復習と実装の正確性

個人

  • PHPで作成したwebアプリケーションのβ版リリース(〜7月16日まで)
  • 画像処理講座の修了(7月中)

1年後(2018.11〜2019.6 = 26歳)

業務

  • React.js, TypeScriptを業務で使用できるレベルまで引き上げる

個人

  • AWSの機能いくつかを理解できるようになる
  • 勉強会等での登壇
  • プレゼン(軽いLT)などを抵抗なくできる

3年後(2019.7〜2021.6 = 29歳)

業務

  • その時業務で使っている、フロントエンド技術の習得(緊急の対応時に呼んでもらえるくらい)
  • リーダーとして小さめのチームのマネジメントができること
  • バックエンド系の習得(webエンジニアとして、インフラ以外を一通り回せる)
  • テクニカルディレクターへの足がけになるようなことができるといいな……

個人

  • やりたいことを人にプレゼンできること
  • 自分の専門技術を他の人に教育できること
  • 今後の方針を決めること

5年後(2021.7〜2023.6 = 31歳)

業務

  • チームマネジメントができること(中心に立ち、方向性を示していく役割が概ねできること)
  • 会社では産休とか育休中の予定...

個人

  • 自宅でできる仕事を取りながら職場復帰時に技術の遅れが出ないようにしたい

npm で TS2304 (Cannot find name '***') というエラーが出る時の原因と対処

エラー

  • npm -i したらこんなエラーが.
node_modules/@types/superagent/index.d.ts:29:29 - error TS2304: Cannot find name 'Blob'.

29 type MultipartValueSingle = Blob | Buffer | fs.ReadStream | string | boolean | number;
                               ~~~~

node_modules/@types/superagent/index.d.ts:116:14 - error TS2304: Cannot find name 'XMLHttpRequest'.

116         xhr: XMLHttpRequest;
                 ~~~~~~~~~~~~~~

原因

  • それぞれを呼ぶライブラリが足りなかったせい

解決

  • オプション --lib dom を付けてインストールし直すことで,不足している標準ライブラリを一緒にインストールしてくれる
$ npm i --lib dom
npm notice created a lockfile as package-lock.json. You should commit this file.
+ dom@0.0.3
added 1 package and audited 10248 packages in 4.722s
found 0 vulnerabilities

参考

@types/superagent error TS2304: Cannot find name 'XMLHttpRequest'. #12044

dropColumnするつもりでdropしたらテーブルを消そうとしてびっくりした

原因

dropColumn するべきところで drop をしていた.

リファレンス

テーブルリネーム/削除

存在するテーブルを削除する場合は、dropかdropIfExistsメソッドを使います。

コードとエラー

// 正しいコード
Schema::connection($this->connection)->table('tableName', function (Blueprint $table) {
    $table->dropColumn('createdAt');
    $table->dropColumn('updatedAt');
});

// 間違ってるコード
Schema::connection($this->connection)->table('tableName', function (Blueprint $table) {
    $table->drop('createdAt');
    $table->drop('updatedAt');
});
  • エラーの内容
  [Illuminate\Database\QueryException]                                         
  SQLSTATE[42S02]: Base table or view not found: 1051 Unknown table 'databaseName.tableName' doesn't exist
  (SQL: drop table `products`)          

唐突の drop table 😱
エラーにならなかったら恐ろしいことになってしまう.
ここで一番怖いと思ったことが, $table->drop('ココ') で指定しているのがテーブル名でなくカラムなのに $table で指されているテーブルを消そうとしていたこと. 「タイポでした〜😂」じゃすまないっすよ... ちなみに,phpは関数の引数の数が合ってなくても動くので、$table->drop(‘カラム名’) と書いても死なずに $table->drop() と同等の動作をするためこのようなことになったと推測...

今回のエラーの追い方

  1. とりあえず実行して,エラーログを確認( storage/logs/laravel-yyyy-MM-dd.log
  2. エラーが起きているファイルと場所がわかったら,気になる箇所にdumpを入れて実行する
  3. dumpが出なかった手前でエラーが起きているので処理を1つずつ実行して見ていく
  4. 🤔💬 わたしは大体カラム名ミスってるとかメソッド名が違うとかtypoしてるとかが多いので同じようなことをしている他のファイルと見比べたりしながら原因を見つけました.

laravel のマイグレーション機能の`string()`で作成したカラムの長さ

string('hoge') がデフォルトでvarchar幾つになるのか?

laravel のマイグレーション機能で作成したカラムの長さは,
例: $table->string('hoge');varchar(191) となる.

mysqlでユーザ作成&パスワード変更

  • MySQLでuserを新規作成
    • ユーザ名: NECO , パスワード: nyan というアカウントを localhost に作成する
mysql> create user 'NECO'@'localhost' identified by 'nyan';

パスワードが不要な場合はidentified以下を省略する。

  • passwordを変更
    • localhost にある, ユーザ名: NECO というアカウントのパスワードを mellow に変更する
mysql> set password for NECO@"localhost"=password('mellow');

webpack3環境下でvueを動かしてる状態からtypescriptを導入する

手順

  • typescriptを入れる
    • $ yarn add --dev typescript ts-loader@3.5.0
    • ts-loaderはwebpack 3に対応している v3.5.0を入れる必要あり
  • vue-cliが入っていることを確認
    • $ vue --version
    • 入っていなければインストール(yarn global add vue-cli
  • インストールされた /node_modules/ts-loader/README.md を読みつつ進める


1. webpack.config.js を以下のように作成or追記

        module.exports = {
        devtool: 'inline-source-map',
        entry: './app.ts',
        output: {
            filename: 'bundle.js'
        },
        resolve: {
            // Add `.ts` and `.tsx` as a resolvable extension.
            extensions: ['.ts', '.tsx', '.js']
        },
        module: {
            rules: [
            // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
            { test: /\.tsx?$/, loader: 'ts-loader' }
            ]
        }
        }

2. tsconfig.json に以下を追加

        {
        "compilerOptions": {
            "sourceMap": true
            }
        }
  • あとは目的ファイルを .ts にリネームして webpack.mix.js を更新する
  • $ npm run dev

参考にしたサイト

【解決】dump結果とview表示結果が異なる@Laravel 5.6

解決しました

参考リンク

解決方法

  • Modelに protected $casts = ['id' => 'string']; を追加したことで解決!!

解決までの道筋

  • dump結果とviewでの表示を見比べて、型がintegerになっているのではと推測

dump($items);
dump($items->last()->id);
echo $items->last()->id . '<br>';
return gettype($items->last()->id); // 型を返す

とかしてたら、「collectionで取得したものの型変換がおかしいんじゃない?」という気持ちになり検索

  • 検索ワードは「lalravel collection 型変換」
  • この記事を見つけてSUCCESS!!!

問題だったもの

  • モデルに定義したテーブルからとってきた値をビューに表示するだけなのに、表示結果がおかしい。
  • ModelクラスのtoStringを追うと、jsonEncodeするときに値がおかしくなっていることがわかるがそれが本当の原因かは不明。
+------------------+-------------+------+-----+---------+-------+
| Field            | Type        | Null | Key | Default | Extra |
+------------------+-------------+------+-----+---------+-------+
| id               | varchar(97) | NO   | PRI | NULL    |       |
+------------------+-------------+------+-----+---------+-------+
<?php

$query = ItemModel::query();
$items = $query
    ->orderBy('id', 'asc')
    ->get();

dump($items);
return view('test.index', ["items" => $items]);
<?php

@foreach($items as $item)
  <p>{{ $item->id }}</p>
@endforeach
<?php /* dump結果 */

"id" => "123--これはID--456"
// -> [123]が表示される
"id" => "test"
// -> [0]が表示される
"id" => "あいうえお"
// -> [0]が表示される
"id" => "3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333"
// -> [9223372036854775807]が表示される