devlog

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

2018-01-01から1年間の記事一覧

交通費精算自動化をサポートする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 の設定は少しだけはまったのでメ…

はじめての npm ライブラリ公開

TL;DL 成果物 www.npmjs.com github.com 以下の記事で照会されたCLIアプリを自分用に作成しnpm で公開したので、作成方法や公開方法をメモとして残す。 名刺の代わりにCLIアプリを書く npm ライブラリの公開方法はこっちを参考にした 3分でできるnpmモジュー…