# フロントエンジニアが3年間チャットワークにメモしてたことを振り返る

# チャットワークのエクスポート

チャットワークには標準でエクスポートする機能がないので、以下のサービスを利用しました。 ChatWorkからファイルも含めてログをエクスポートしたいならgoodbye_chatworkだ！KDDI ChatWork対応 - Qiita

原因不明ですが、かなりの投稿が重複していたのと、Deleteも含まれていたので以下の作業を行いました。

1. Excelで重複削除
2. 201\d-(.*?)\[deleted]\nを置換
3. jsonにコンバート

# チャットワークにメモを残した経緯

最初の方はブックマークなどを利用していたのですが、あまり見ることがなく、 気になったことは業務で一番利用するチャットワークに保存するようになりました。

なので入社して数ヶ月の履歴はあまり多くありません。

まとまったコードに関してはCacherに保存していました。

# 経歴

• 2015-05-08 入社
• 2018-06-29 退職

その間にフロントエンドエンジニア→バックエンドエンジニアとなっていますが、
ほとんどがフロントエンドの作業でした。
入った当時のスキルは

• マークアップの経験は0
• レスポンシブコーディングを理解している
• jQueryのプラグインをカスタマイズして独自の機能を追加できる
• WordPressの既存テーマが修正できる

という感じでした。

# 3年間のチャットワーク一覧

RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !^(.*)\.(gif|jpg|jpeg|png|css|js|pdf|log)$ [NC]
    RewriteRule ^column.* /blog/column/($1) [L]

同じ日付は表示1回でおk
axiosでchatwork.jsonを取得
chatworkのデータに公開してはいけないデータがないかチェック
[info]...[/info][info]...[/info]の正規表現修正
検索機能追加
日付での記事並び替え
[code]...[/code]の正規表現 検索からアンカーリンクおすとずれる。最初からいれておくとずれない。

sweetscrollがうごなかった原因はidの形式が間違ってたから。 #date-2018-06-26T14:09:22+09:00

2016年6月あたりからcssのクラス設計に興味をもってる模様 大規模サイトのコーディングで苦しんでいたのでしょうか。

2017年5月もまだまだコーディングをやってますね。

いみわからん http://codepen.io/zadvorsky/pen/VaXqRW

:beforeや<i>たぐはtransition効かない あるある

2017年12月でやっと Laravelがでてきました

2018年1月で Vue.jsがでてきました。 gitもでてきました。（個人では使ってたんですが、会社でやっと浸透し始めた感じです）

# この記事での技術メモ

正規表現 最短マッチ + gフラグ

[info]reg01[/info][info]reg02[/info]
↓
<div>reg01</div><div>reg02</div>

上記のように変換をしたい場合、最短マッチ + gフラグを付与する必要があります。

replace(/\[info](.*?)\[\/info]/g, '<div class="chat-body-info">$1</div>')

アロー関数でのthis

axios.get('/chatwork.json')
	.then(response => {
	    this.items = response.data;
	})

v-forの引数はvalue, key, indexが使える
リストレンダリング — Vue.js

<div class="chat-container" v-for="(item,key,index) in items">

v-htmlでfilterを使いたい - Qiita

<div class="chat-body" v-html="$options.filters.parse(item.content)"></div>

SweetScrollのoverflow:scrollボックスの場合

const sweetScroll = new SweetScroll({/*...*/}, "#container");

のように設定する必要がある。 またアンカーは#container内部に設置する必要がある。