devlog

主に web 開発とかプログラミングについて書きます

サイボウズにエンジニアとして入社して1年たったので振り返る

うちの子供がiPadで書いたピカチュウ 今一緒に仕事してる同僚がブログこんなブログを書いてて、触発された感じです。 せっかくなので自分も記録として残そうと思います。 note.com これが自分の転職初日のツイート 今日が新しい職場のサイボウズ初出社日でし…

勉強会で手を上げて発言し辛い問題を解決するサービスをリリースしました🎉

PutYourHandsUp リリースしたサービス pyhu.nkgr.app サービスの概要 いいねや返信も可能 投稿画面 勉強会のその場で使える、グループチャットライクなサービスです。 匿名 / Twitter / Google でログインし利用できます 「感想/質問など」タグをつけて投稿…

【翻訳】コードを綺麗にするためにCustom Hooks を書こう

前回の続きで英語勉強の翻訳2回目。 がんばりまっちゅん。といいつつ今回の釣り画像はmodel pressさんの斎藤飛鳥さん。 やばいくらい透明感がやばい。(日本語彙力は死んでいる) 今回から英語の本文と日本語の翻訳を交互の載せる (画像4/8) 齋藤飛鳥、本音…

【翻訳】TypeScriptとReactHooksをつかった型安全なstateモデリング

社内の英語勉強会の宿題として、毎週英語記事を1つ翻訳することになった。 このブログを投稿してから、数日後に社内でレビューしてもらう予定。 翻訳、がんばりまっちゅん。(インスタの画像の松村沙友理さん) 今週の元ネタ Twitterで流れてきたやーつ tho…

会社のPCがmacOSになったので、zsh環境を見直した

zsh

表題の通りだが、zsh環境を見直した。 TL;DR zsh + zplug + peco .zshrcなど設定ファイル類は以下のレポジトリにあります。 README.md も書いたので、もし同じような環境にしたい人がいれば、すぐに再現できるはず。。。 (まだ会社で試してないから試してか…

【勉強会 雑なまとめ】関西のTyepScirpt勉強会 kansai.ts #1 に参加してきました

概要 kansaits.connpass.com 日時:2019年6月10日 19時〜 場所:GVH Osaka(グランフロント北館7階) Twitterハッシュタグ #kansaits 関西でTypeScriptを中心にゆるふわ交流するというのがテーマのイベントに参加してきました。 多分関西では初めてのTypeSc…

覚えたことを忘れないために /「エンジニアの知的生産術」を読んだ(3)

前回の続き nkgr.hatenablog.com 今日は第3章の 「記憶を鍛えるためには」についてまとめていく TL;DL 記憶を鍛えるためにはインプットとアプトプットの繰り返しが大事。特にアウトプットの繰り返しが重要 長期的な記憶を鍛えるためには、復習を一ヶ月空ける…

やる気を出すためにやるべきこと /「エンジニアの知的生産術」を読んだ(2)

前回の続き nkgr.hatenablog.com 今日は第2章の 「やる気をだすには」についてまとめていく 第2章 やる気を出すには やる気を出すし、タスクを継続的に片付けるためにはいくつか方法がある やるべきタスクを1つに絞る タスクを切り替える意思決定をバカにし…

効率的に新しい技術を学ぶ方法の探究 /「エンジニアの知的生産術」を読んだ

結構前に購入していたけど積ん読になっていた「エンジニアの知的生産術――効率的に学び,整理し,アウトプットする」を読んだ。4月末に転職も決まり新しい環境で早く結果を出せるように、入社前に勉強したいと思い、まずは勉強の仕方を学ぶことにした。 ブロ…

交通費精算自動化をサポートするSPAのWebサービスをReact/Typescript + ServerSide Kotlinで作ってリリースしました🎉

URL ExpensesAutomation フロントエンドのレポジトリ React + TypeScript に bulma というCSS フレームワークを利用して SPA を作成しました。 コンテンツのホスティングは Firebase を選択しています。 詳細はフロントエンド編で紹介しようと思います。 git…

【備忘録】Mac で Spotlight や Alfredを起動した後、英数で入力を開始するようにする

TL;DL Karabiner-Elements の Complex Modifications を利用して Alfred の起動時に "英数" キーが入力されるようにする 動機 普段アプリケーションランチャーとしてAlfred を利用しているが、日本語で検索することがないにも関わらず、日本語入力モードか…

【勉強会まとめ】クラスメソッドのモバイル開発を知る!全5回〜第4回 Webフロント開発編〜 に参加してきたのでまとめる

概要 クラスメソッド社のモバイル開発の中の Webフロントエンド開発に関する発表 場所 肥後橋 肥後橋センタービル 7階 セッションは以下の3つ Atomic Design with React React のレガシープロジェクトと戦って得た戦果 クラスメソッドで働き始めたサーバサイ…

ターミナルの操作を記録してgif ファイルを作成する terminalizer を試してみた

Github Trends で人気だったので試してみた github.com 概要 terminal のコマンドを記録して実行結果を記録して gif をつくれる こんな感じの gif ファイルができる 面白いのは単純に実行環境の録画ではなく、再現するterminal環境のShellを選べたり、termin…

関西Node学園 3時限目 で「AWS Serverless Express 入門」というLTの登壇をしてきました

開始30分後からの参加だったので最初のお二人の登壇が聞けなかったのが残念だった。 京都なら避けられないだろうなー。 概要 関西Node学園 主催のNode.js に関する勉強会 3回目 nodejs.connpass.com 参加者は24人 登壇者は4人 日時:2018/08/03 19:00 場所:…

【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ページを作った

TL;DL MySQLで出力した結果をCSV に変換するページを作成した 成果物 production - sql2csv Github 動機 職場のサポートチームのメンバーが SQL出力結果を保存するのに困っていた ダンプファイルは出力できるが 本番 → 踏み台 → ローカル みたいにダウン…

【JavaScript備忘録】Node.js の 基本的な FileIO サンプル

TL;DL 🗒 ファイルの読み書き 一行づつ読み込んで、何かしら処理をして書き出す bash の実行結果などを整形するときなど 成果物 🎉

関西Node学園 梅田キャンパス 2時限目 に出たのでまとめを書く

追記 登壇者のスライド https://nodejs.connpass.com/event/89037/presentation/ 参加してきたのでめっちゃ雑にまとめを書く イベント概要 場所: さくらインターネット株式会社 大阪本社 大阪府大阪市北区大深町4-20 グランフロント大阪 タワーA35階 時間: 1…

【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-scri…

【AWS Lambda / JavaScript備忘録】AWS Lambda で array.map を async await と組み合わせて使う

TL;DL 🗒 Lambda で 配列の要素を順番にfetchし、成功したら結果をレスポンスに詰めて返す Promise.all を使うと簡単 成果物 🎉 レスポンスはこんな感じ { "statusCode": 200, "body": [ "\n\n<html>\n<head>\n <title>Transit List</title>\n </head></html>

エンジニアとしてのポートフォリオページを公開しました

Production nkgrnkgr.github.io1 nkgrnkgr.github.io2 リンク Nokogiri - Developer What is this ❓ エンジニアとしての名刺代わりとなる webページ 開発で利用している言語の割合を可視化 作成したプロダクトの一覧 Github、Blog、Qiita、Twitter、Speaker…

【画像多め】AWS-Lambda を使って サーバーレス で Express を動かすまでの手順

TL;DL 以下の手順を画像多めで解説 aws-serverless-express を使って AWS-Lambdaから Express を実行できるようにする Lambda を API Gateway と接続して公開する これで Serverless Express を公開可能になる 成果物 Express 動機 Serverless で Express…

【Visual Studio Code 備忘録】ESLint の autoFixOnSave を有効にする方法

TL;DL 🗒 VSCode 標準のフォーマッターと ESLint が競合して、ESLint を実行しても保存すると崩れるのにはまった デフォルトのformatOnSave を 無効にして eslint.autoFixOnSave を有効にする { "editor.formatOnSave": false, "eslint.autoFixOnSave": true, }

【Javascript 備忘録】JS で 小数点 第 n 位 で四捨五入する

TL;DL 🗒 JavaScript で 小数点 第 n 位 で四捨五入する 成果物 🎉

【Lambda 備忘録】Node.js を使って Lambda で S3 のファイルの Read/Write

TL;DL 🗒 AWS Lambda を使って S3 の ファイルの読み書きを行う場合 【公式】 AWS Lambda を Amazon S3 に使用する - AWS Lambda 成果物 🎉

Javascript 小ネタ Node.js でローカルのJsonファイルをパース / Object.entries を使って key, value を取得

TL;DL 🗒 Node.js で Json のパースと key, value の取得 よく忘れるのでメモ 成果物 🎉

Javascript 小ネタ Node.js でファイル読み込み (一行づつ)

TL;DL 🗒 Nodeでファイル読み込みの場合 fs , readline を使って 1行づつ読み込む よく忘れるのでメモ 成果物 🎉

初学者向けに画面操作で Webpack4 の設定ファイルを生成するWebpack4 Config Generatorをリリースしました

Production Webpack4 Config Generator github.com What is Webpack4 Config Generator ❓ 画面からクリックだけで webpack.config.js の元を作成できる JS [ react , Vue ] , CSS [ Sass , PostCSS , CSS ] を組み合わせて可 生成した ソースをクリップボー…

React で inputFrom のイベントハンドラーを汎用的に作る

TL;DL object-path を使って、階層構造を"."つなぎのリテラルで表現しながら イベントハンドラーを作る 成果物 動機 名前、Email 、住所など複数のインプットフォームのイベントハンドラーを別々に作るのは億劫 階層的に作ったObject も扱いたい バージョ…

Node.js でブラウザオートメーション

TL;DL Node.js で Selenium-webdriver を使ってブラウザオートメーションを実現する方法 簡単なDOM操作 Cookie , Proxy の設定 非同期、同期実行 成果物 selenium · GitHub 動機 仕事で使う機会があった Proxy と Cookie の設定は少しだけはまったのでメ…