けけずんセルフハッキング

忘れそうなことをメモる。

ParcelでTypeScriptのHMRする

概要

TypeScriptに対してParcelでHMR(Hot Module Reload)を行う方法について書いていく。

やりたいこと

parcelコマンドを以下のように実行すると、index.htmlに指定されたスクリプトが更新されるたびに自動でビルドされ、ブラウザの表示が再描画されるという仕組みがある。

$ percel index.html
<!DOCTYPE html>
<html>
  <head><title>JavaScript Application</title></html>
    <body>
      <script src="app.js"></script>
    </body>
</html>

これをJavaScriptではなくTypeScriptで行いたい。

方法

index.htmlに指定されたスクリプトをTypeScriptにし、parcelコマンドを実行するだけでできる。

$ percel index.html
<!DOCTYPE html>
<html>
  <head><title>TypeScript Application</title></html>
    <body>
      <script src="app.ts"></script>
    </body>
</html>

おわりに

htmlの中で.tsを読み込んでいる部分は違和感があるが、これで問題なさそう。

GitLab CI VariablesにFileとして保存したPEM形式の鍵を展開する際にハマった

概要

GitLab CIでVariablesに保存したPEM形式の鍵を展開し、プログラムの中でその鍵を読み込んで使用しようとしたが上手く動かなかった。

そのときの原因と解決方法について書く。

やりたいこと

以下のPEM形式(説明しやすいように内容はてきとうです)の鍵があるとする。

-----BEGIN RSA PRIVATE KEY-----
1行目です〜
2行目です〜
3行目です〜
4行目です〜
-----END RSA PRIVATE KEY-----

こいつをGitLab CI Variablesに登録して、GitLab CI上でファイルとして展開し、プログラムの中で使用したい。

問題発生までの手順

GitLab CI Variablesに鍵の内容を保存する

GitLab CI Variablesを開き、以下の内容を入力していく。

  • Type: 「File」を選択する
  • Key: 「YOUR_PRIVATE_KEY」と入力する
  • Value: 上記の鍵をコピペする

画面的にはこんな感じ。

f:id:kkznch:20190728221255p:plain

GitLab CI用の設定ファイルを書く

以下の内容で .gitlab-ci.yml を作成する。

内容としては、GitLab CI Variablesに登録した環境変数を一度 .gitlab-ci.yml のvariablesで受け取ってそれをファイルとして書き出しているだけ。

stages:
  - test

set_privatekey:
  stage: test
  image: alpine:latest
  variables:
    PRIVATE_KEY: YOUR_PRIVATE_KEY
  script:
    - echo ${PRIVATE_KEY} > private.key

この状態でcommit & pushする。

プログラム中で使用...できない

上記と同様のことを実際のプロジェクトで行いデプロイまでしたのだが、デプロイ後にプログラムを動かしても動く気配なし。

ログを見ると、鍵の形式が不適切なため読み込めないとのこと。どういうこったい。

原因

ということで原因を特定するために .gitlab-ci.yml を以下のようにしてみた。

stages:
  - test

set_privatekey:
  stage: test
  image: alpine:latest
  variables:
    PRIVATE_KEY: YOUR_PRIVATE_KEY
  script:
    - echo ${PRIVATE_KEY} > private.key
    - cat private.key

そのときの出力結果がこちら。

$ echo ${PRIVATE_KEY} > private.key
$ cat private.key
-----BEGIN RSA PRIVATE KEY----- 1行目です〜 2行目です〜 3行目です〜 4行目です〜 -----END RSA PRIVATE KEY-----

ふぁ!?なぜにワンライナーで表示されるし??

改行まで含めてPEM形式のため、しっかりと改行されてる状態じゃないと読み込んでくれないらしく、こいつが原因だった模様。

こちら参考ページ。

解決

二通りの解決方法がありけり。

その1

.gitlab-ci.yml を以下のようにする。

stages:
  - test

set_privatekey:
  stage: test
  image: alpine:latest
  variables:
    PRIVATE_KEY: YOUR_PRIVATE_KEY
  script:
    - echo "${PRIVATE_KEY}" > private.key

何が違うかって?

    - echo "${PRIVATE_KEY}" > private.key

この echo で渡す引数をダブルクォーテーションで括ってる。 これで意図したようにファイルに展開される。

その2

.gitlab-ci.yml を以下のようにする。

stages:
  - test

set_privatekey:
  stage: test
  image: alpine:latest
  script:
    - cat ${YOUR_PRIVATE_KEY} > private.key

GitLab CI Variablesに登録した環境変数をそのまま cat してあげてる。

ここで echo を使ってない理由は、GitLab CI VariablesにFileとして登録した環境変数には値がそのまま入っているわけではないから。 もし echo で実行すると、以下のように登録した値が格納されたファイルへのパスが出力される。

/builds/{ユーザID}/test-variables.tmp/YOUR_PRIVATE_KEY

なるほど、 cat だと上記のパスにあるファイルの中身を出力してる感じになってるらしい。

おわりに

公式サイトにFileな値を出力する方法が載ってたので、まずはそれを見るべきだった気もする。

個人的に気になってるのが、GitLab CI Variablesで登録した値を使用する際は .gitlab-ci.yml のvariablesを経由して使用する必要があるのか?といったところ。 いちいちGitLab CI Variablesのページにいかなくても、CI上で必要な環境変数を一覧できるという意味では割と有効かもしれんが、実際のところどうなのかは分からない。

memo: nginxを動かす最小限の設定

/etc/nginx/nginx.conf を以下のように編集する。

pid /var/run/nginx.pid;

events {
    worker_connections 3;
}

http {
    server {
        root /html;
    }
}

nginxを再起動する。

$ nginx -s stop && nginx

このとき、 http://localhost へアクセスすると /html以下のファイルにアクセスできていることが分かる。

LaraCSV 触ってみた

LaravelでCSVをどうこうするLaraCSVについてちょっと触ってみたのでメモ。 Twitterで @laravelnews が言及してたのがきっかけ。

Laravel News on Twitter: "LaraCSV – Generate CSV files from your Eloquent models https://t.co/m55TsES0bv… "

LaraCSVとは

作成者いわく「Eloquent Modelから簡単にCSVファイルを生成できるLaravelパッケージ」とのこと。 実際はModelからもCSV生成できるし、arrayをCollectionにしてそこからCSVの生成もできる。

使用手順

パッケージ追加

terminalから下記のコマンドを実行する。

$ composer require usmanhalalit/laracsv:^2.0

使い方(基本)

インスタンスの生成とCSVのビルドをする。

// インスタンスを生成する
$csvExporter = new \Laracsv\Export();

// 第一引数にCollectionを、第二引数にCSVで出力したいモデルのカラム名を入力する
$csvExporter->build(Users::get(), ['email', 'name']);

ダウンロードする。

$csvExporter->download();

email,name
test01@test.com,"テストユーザ01"
test02@test.com,"テストユーザ02"

ファイル名を指定してダウンロードする。

$csvExporter->download('users.csv');

使い方(応用)

リレーションを引っ張ってくる。

$csvExporter->build(Users::get(), ['email', 'name', 'department.name']);

カラムの値を修正したり、モデルに存在しないカラムをCSVのフィールドとして追加する。

$csvExporter->beforeEach(function($user) {
    // 既存の値を上書きできる
    $user->email = 'hoge@piyo.com';
    
    // 存在しない値を追加できる
    $user->note = $user->name . 'のメモです';
})
$csvExporter->build(User::get(), ['email', 'name', 'note'])->download()

email,name,note
hoge@piyo.com,"テストユーザ01","テストユーザ01のメモです"
hoge@piyo.com,"テストユーザ02","テストユーザ02のメモです"

WriterでCSVを文字列として取得する

$csvWriter = $csvExporter->getWriter();
$csvWriter->getContent();
=> """
   email,name\n
   test01@test.com,"テストユーザ01"\n
   test02@test.com,"テストユーザ02"\n
   """

ReaderでCSVJsonとして取得する

$csvReader = $csvExporter->getReader();
$csvReader->jsonSerialize();
=> [
     [
       "email",
       "name",
     ],
     [
       "test01@test.com",
       "テストユーザ01",
     ],

補足

Laravel Meetup Miyazakiで登壇した際に使用した資料がこちら。

「【Nuxt.js/Vue.js】スタートアップ企業導入事例」で登壇しました

弊社技術ブログに書いたので、リンクだけ置いておきます。

dev.re-build.company

※2019-05-20追記 こちらなんとログミーさんに記事にしてもらいました!ありがとうございましたー!

logmi.jp

2018年振り返り

はじめに

2018年の振り返りをしてみる。 毎年やるやる言ってやってなかったが、さすがに今年は色々と変化があったので記録として残しておきたいと思ったのがきっかけ。

月毎の振り返り、身につけたスキルなど書いていく。

月毎の振り返り

  • 1月
    • 色々考えて転職を決意する
      • 前職の OGS(沖電グローバルシステムズ) はとても良い環境だったが、前向きな理由で転職することにした
      • 元々Startupな企業に興味あったし、タイミング的にも丁度よいかなと思っていた
    • 前職の上司に転職を伝える
      • かなり驚いていた
      • 社員みんな良い人達ばかりだし、みんな頑張ってたから転職を伝えることに申し訳無さを感じた、すまんな...
      • ひとまず3月末に退職するということで話を進める
  • 2月
    • 転職先の 株式会社Re:Build で必要な技術を身につけるために勉強する
      • PHPとLaravelの勉強してた
      • PHPうんこって聞いてたけど、PHP7系は割と良いという感触があった
    • 正式に退職届を提出する
      • 会社のプリント用紙を使って退職届を作成した
      • 退職届を入れる封筒もプリント用紙で作成したのは内緒
    • 前職で引き継ぎ作業など考慮して4月末に退職することに
      • 転職先で4月からプロジェクトに入る予定だったが、ずらしてもらった
  • 3月
    • 前職で引き継ぎ作業を開始する
      • 担当してきた案件のドキュメント整理
      • 退職手続きも平行して実施
    • 親に転職する旨を伝える
      • 母親は勿体無い勿体無いと引き止めてくる
        • 人によると思うけど母親って大体こういうもんだよね、ブレーキ担当
      • 父親はやりたいようにやればいいと肯定してくれる
        • よく考えると、これまで自分がやりたいと言ったことに対して否定されたことがなかった気がする
      • どっちも思った通りの反応だったので、それはそれで良かった
  • 4月
    • 前職で引き継ぎ作業をしつつ有給休暇を消化する
      • 前職は4月に有給休暇(15日だっけ?)が付与されるので、全部消化しました
      • 週一勤務で引き継ぎ作業を実施、他は転職先のための勉強
    • 4月末に前職のOGSを退職する
      • 2年間で制御チームとインフラチームに所属
        • 1年目は制御チームに所属
          • 某電力会社で使われているシステムの構築を行った
          • Python、仮想環境でのシステム運用、ネットワーク監視などを学んだ
          • 直属の上司が凄く優秀な方だったため、社会人としてもエンジニアとしても非常に勉強になった
        • 2年目はインフラチームに所属
          • 某電力会社や外部企業のインフラ構築・保守を行った
          • 物理・論理ネットワークの構築や運用、セキュリティなどを学んだ
      • 2年間でいろいろ資格を取得
      • 本当に良い職場でした、2年間ありがとうございました
  • 5月
    • 株式会社Re:Build(以下、リビルドと表記する)に入社する
      • 自分と社長を合わせて合計3人のベンチャー企業
      • 人生初のリモートワーク、ワクワクすっぞ
    • リビルド初の開発案件に参加する
      • PHP, Laravelで開発を開始
      • インフラ構築なども担当する
        • ここで前職で学んだことが活きた、感謝感謝
    • ピアノ・ドラム教室に通い始める
      • 以前からピアノ弾きたいと思ってたので知り合いのピアノ教室に通い始める
      • ついでにドラムも教えてもらっている
  • 6月
    • リモートワークに不安を感じる
      • 入社したばかりというのもあり、最初のうちはリモートワークの自由さに何一つ不安を抱えることはなかった
      • 入社して一ヶ月してから、リモートワークを続けていくうちに謎の孤独感を感じ始める
        • 先に入社した同僚もそういった不安に駆られる時期があったらしい
    • 福岡で開催される「PHPカンファレンス福岡2018」にLT枠で登壇する
      • 人前でプレゼンすることに苦手意識があったが、やってみると割と面白かった
      • イベントの他のセッションも非常に勉強になった、テキストベースの勉強もいいけどこういったイベントで勉強することも大事だな
  • 7月
    • リモートワークに慣れる
      • 働き方に慣れてきて、不安感など感じなくなる
      • そういったものを感じる際は同僚に声をかけて一緒に作業をするなど、工夫するようになる
  • 8月
  • 9月
    • リビルドで別案件の開発を開始する
      • PHP, Laravelで開発を開始
      • これまでの期間で得たノウハウもあり、比較的スムーズに進む
      • そのときにフロント(HTML, CSS)のスキルが弱いなと感じた
    • Startup Weekend Okinawa Vol.8」に参加する
      • Startup Weekend Okinawaに二度目の参加、前回のこのイベントが転職のきっかけになった
      • 前回は人が提案したアイディアに便乗して参加していたが、今回は自分がアイディアを提案し、共感してくれた人たちとでチームを組んだ
        • いいメンバーに恵まれた、今でも交流を続けている
      • 3日間という短い期間だが、毎度多くの学びがあった
  • 10月
    • リモートワークを活かして旅行に行く
      • 愛知と岐阜に行ってきた
      • リモートワークだし試しに旅行しながら仕事するかと挑んだが、期限的に厳しい時期だったため平日は部屋に籠もって作業してた
      • コワーキングスペースとか周ってみたかったな、余裕あるときにまた行ってみたい
      • 愛知は味噌カツ、岐阜はタン麺が美味しかった
    • リビルドで自社サービスの開発を開始する
      • 10月頭に実施した開発合宿で考案されたサービスを自社サービスとして進めていくことが決定した
      • 社長が企業やエンジニアにインタビューしてアイディアをブラッシュアップしつつ、傍らで自分と他のメンバーで実装を進めていく
  • 11月
    • バンドを結成する
      • 何を言っているのか分からないだろうが、バンドを結成した
      • メンバーはリビルドの同僚と自分の親友の合計3人
      • たまに集まって練習している
    • Scrum Coaching Retreat Okinawa」に参加する
      • イベントの趣旨を分からず誘われるがままローカルスタッフとして参加した
      • 普段関われないような方々と交流できた
      • レトリートよい、〇〇レトリートとして他にもやってみたい
    • リビルドの自社サービスが「Okinawa STARTUP PROGRAM」に採択される
      • 社長めっちゃ頑張ってた、ありがとうございます
      • 今後も頑張る
  • 12月
    • リビルドで担当している案件でGolangを導入する
      • 以前から勉強はしていたものの、実務で使用したことがなかったGolangを使用して開発を開始した
      • 静的言語楽しい、コンパイルでお叱りを受けてそれを直していく感じ楽しい
    • 宮崎で開催される「Webナイト宮崎 Vol.2」にLT枠で登壇する
      • 自社サービス開発メンバーのお誘いで急遽参加させてもらった
      • 宮崎また行きたい

身につけたスキル

プログラム言語

フレームワーク

  • Laravel5
  • Vue.js
  • Nuxt.js

その他

  • Docker
  • AWSいろいろ

おわりに

2018年は転職をすることで仕事環境が一変するだけでなく、プライベートも充実した年だった。 リビルド初期メンバーとの出会いがなければ、今の自分はいないのだろうなと深く感じている。 素晴らしい環境と、その場所を作ってくれた社長に感謝。

2019年も頑張るぞい。