【VSCode メモ】Mac で terminal から カレントディレクトリをワークスペースとして開く
## TL;DL 🗒
- シンボリックリンクをはるだけ
ln -s /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code /usr/local/bin/code
起動
$ code .
非エンジニアのチームメンバー向けに MySQL の出力結果を CSV に変換するWebページを作った
関西Node学園 梅田キャンパス 2時限目 に出たのでまとめを書く
追記
登壇者のスライド
https://nodejs.connpass.com/event/89037/presentation/
参加してきたのでめっちゃ雑にまとめを書く
イベント概要
- 場所: さくらインターネット株式会社 大阪本社 大阪府大阪市北区大深町4-20 グランフロント大阪 タワーA35階
- 時間: 19:00
- 参加者 40数名程度
Links
注意事項
- 飛び跳ねたらだめらしい
- ゴミの分別がめんどくさいらしい。しらんけど
スポンサー
エンジニア募集中
LT
swagger入門
登壇者
swagger入門に関する話
swagger 公式 #### ドキュメントをつくるまで
- APIドキュメント生成
- API ドキュメント は 使い始めるのは簡単だが、廃れがち
- API仕様の重要性 責任範囲の明確化
- 非開発者でも頑張れば書ける
- YAMLで書ける
- 例を中に記載できるの便利
- OpenAPI 2.0 と OpenAPI 3.0 があるけど3.0 は完結に書けるようになった
- json-refs yaml を結合するツールを利用できる
- swagger には 型定義も持たせることができる
- swagger-ui-dist を使うとドキュメント生成に必要なドキュメント
https://www.npmjs.com/package/swagger-ui-dist
作った後のメンテナンス
- ドキュメントは読み物だと廃れがち、使うドキュメントにしていくのが保守性を上げるコツ
- Swagger-client
https://www.npmjs.com/package/swagger-client
* swagger でかかれたドキュメントからAPIを作成するツール
Swagger の不満?
- あまり盛り上がってない？
- 使ってうまく回ってないという話があまり上がってない
質問
- Swagger はAPI限定なのか？ → Yes
- YAMLは自動生成で使う？ → 色々
- API はフロントやバックの都合で作ることはない？ → フロントのために作るのは効率化だけだが、次の案件でアプリを開発することもあるので、バックエンドは抽象的な構造を実装すべき
- 次のAPI ドキュメントツールと比べてSwagger はどこがいいか？ → ライブラリが充実している
- その他のAPIドキュメントツール
AWS Lambda上のnodejsをテストした
登壇者
- Node.js でテスト軽々が浅い人向け
- AWSを利用したIoTシステム構築
- テスト方針 80% → カバレッジの話？
- Node.js 6.10
- Lmabda の index.js の中の関数は export して外部ファイルから呼び出しやすいような関数定義にしている
- timeout エラーがよく発生する → よくわからんけどOKになった
- コミュニティ Web based AWSを利用したIoTシステム構築
- 人募集している
- 自動テストの結果で納品OKになる顧客はどんな人か？ → 納品はあるが形式は問わないという顧客だった
スプレッド構文色々
登壇者
- スプレッド構文
- ...a みたいな書き方
- Array-likneに使える
- r= {...a, ...b} みたいな書き方
- 非破壊的に書き換えができる
- ＝Emoji の配列を取り出すとすときに便利
- スプレッド構文めっちゃ使える
- babel 7 はいつ出るの？
→ やばいついて行けなかった!
私の OSS 道について
登壇者
- オーストリアの田舎出身
- 8年前に日本
内容
- 大阪の大企業はOSS頑張ってない
- はてなは頑張ってるよ
- 大阪でOSSが盛んになるか？
- http://www.libspark.org/
OSSをしない理由
- 恥ずかしさの恐れ
- 時間
- 英語
- 非友好的なコミュニティ
- 財政的な問題
OSS をする理由
- OSS ならプロジェクトが終わっても捨てられることがない
- コードを残すことができる
Node.js + OSS
- Node.js は Linux Foundationの一つ
- UNIX 哲学の中で重要な３つ
- DO ONE THINGS WELL
- 効率よりも移植のしやすさを選べ
- 効率と 移植性を高めるためにシェルスクリプトを利用せよ
私の OSS 心
- OSS は Issue + PR は自分にとって客ではない → 興味があるなら直す
CEF: NodeFest 2018 - 東京Node学園
まとめ * OSS は 経済的にも価値がある * 世界とのコミュニケーションスキルアップ * 立場のバランスを気をつけて!(仕事/お金/心)
【Typescript / React 備忘録】create-react-app で TSLint + prettier + VSCode で快適にコードを書く
TL;DL 🗒
- create-react-app でコードフォーマットをファイル保存時に自動で行うようにするための環境構築
手順
環境
- node v8.10.0
- yarn v1.7.0
- Typescript v2.9.2
- TSLint 5.10.0
手順
プロジェクトの作成
$ npx create-react-app --scripts-version=react-scripts-ts app $ cd app
tslint.json の編集
フォーマットルールには tslint:recommended ではなく airbnb を利用してみる 必要な package は 以下の通り
{ "rulesDirectory": [ "tslint-plugin-prettier" ], "extends": [ "tslint-config-airbnb", "tslint-react", "tslint-config-prettier" ], "rules": { "prettier": [ true, { "singleQuote": true, "semi": true } ] }, "linterOptions": { "exclude": [ "config/**/*.js", "node_modules/**/*.ts" ] } }
- prettier
- tslint
- tslint-config-airbnb
- tslint-config-prettier
- tslint-plugin-prettier
- tslint-react
まとめてインストール
yarn add prettier tslint tslint-config-airbnb tslint-config-prettier tslint-plugin-prettier tslint-react
Visual Studio Code の 設定
setting.json に以下の設定を追加
{ "editor.formatOnSave": true, "tslint.autoFixOnSave": true, }
以上、おしまい
【AWS Lambda / JavaScript備忘録】AWS Lambda で array.map を async await と組み合わせて使う
TL;DL 🗒
- Lambda で 配列の要素を順番にfetchし、成功したら結果をレスポンスに詰めて返す
- Promise.all を使うと簡単
成果物 🎉
レスポンスはこんな感じ
{
"statusCode": 200,
"body": [
"<!DOCTYPE html>\n\n<html>\n<head>\n <title>Transit List</title>\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css\" integrity=\"sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb\" crossorigin=\"anonymous\"> </link>\n</head>\n<body>\n<div class=\"container\">\n <h1>TransitList from Google Calendar</h1>\n <a href=\"https://accounts.google.com/o/oauth2/auth?access_type=offline&approval_prompt=force&client_id=454990322241-tfegbc9eltda89sg1ndciijdduidpd3r.apps.googleusercontent.com&redirect_uri=https://transitlist.herokuapp.com/transitlist&response_type=code&scope=https://www.googleapis.com/auth/calendar%20https://www.googleapis.com/auth/calendar.readonly\"><button type=\"button\" class=\"btn btn-primary\">Login</button></a>\n <br />\n <br />\n <p>注意点</p>\n <ul>\n <li>Calendarには\"【駅名】訪問先\"のフォーマットで記録してください。</li>\n <li>【駅名】はYahoo乗り換え案内で出てくる正確な駅名を記録してください。</li>\n <li>開始時間を必ず入れてください（終日を選択すると無視します。）</li>\n <li>その日の最初の訪問先の前に交通費が発生する最初の駅も記録してください。</li>\n <li>その日の最後の訪問先の後に交通費が発生する最後の駅も記録してください。</li>\n </ul>\n</div>\n<script src=\"https://code.jquery.com/jquery-3.2.1.slim.min.js\" integrity=\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN\" crossorigin=\"anonymous\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js\" integrity=\"sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh\" crossorigin=\"anonymous\"></script>\n<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js\" integrity=\"sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ\" crossorigin=\"anonymous\"></script>\n</body>\n</html>"
]
}
エンジニアとしてのポートフォリオページを公開しました
Production 🎉
リンク
What is this ❓
動機 🤔
とりあえずここを見れば何をしている人かわかるようにしたかった
利用した技術要素 🔧
Frontend
- material-ui
- react
- Chart.js
Backend
グラフの部分の作り方 📊
基本的には Chart.js を利用して、JSONでデータを読み込ませればできる。 ただしデータ取得元の Github API に 利用回数制限があったり、全件取得に 結構時間がかかる処理だったので、クライアントのJSからAPIを叩くよりも、サーバーサイドで事前にキャッシュする仕組みを作ることにした。
グラフデータのキャッシュ
グラフはGithub レポジトリ内のソースコードのバイト数を言語別に出すことができるAPIを利用して取得している。
https://developer.github.com/v3/repos/#list-your-repositories
https://developer.github.com/v3/repos/#list-languages
ただし、まずレポジトリの一覧を取得して、レポジトリ毎に言語情報を取得するAPI を叩くという処理に9秒以上かかったので、クライアントJSでAPIを叩くにはさすがに現実的ではないと判断。
一定間隔で AWS-Labmda から Github API を叩いて 取得した 結果を S3にキャッシュしておき、ブラウザは常にそのS3上のキャッシュを表示するようにした。
