最近、あるプロジェクトで初めて Map オブジェクトを使うことになり、これまで使ったことがなかったので調べてみました。備忘録として残しておく。 Map オブジェクトとは 使い方 Mapの作成 要素の追加 要素の取得 要素の削除 反復処理 その他の便利メソッド …
Python で HTTP API を利用する場合に、いつもの application/json ではなく、POST のコンテンツタイプが application/x-www-form-urlencoded で、response が XML で返却される API があり、標準モジュールを調べながら実装したので、備忘録として残してお…
VSCodeの拡張機能 Draw.io Integration がリリースされ、VSCodeで作画ができるようになったということで、早速導入して使ってみたので紹介する。 チーム開発の中で、フロー図やドキュメントをコードと一緒に管理して共有できることはすごく便利だと感じてい…
最近、新しい職場の Mac をセットアップした際に、新しく入れたアプリで作業効率が上がったのでご紹介。 今回紹介するアプリは、自由自在に画面分割可能なアプリ「Spectacle」である。 もしまだ Mac に入れていない人は是非参考にして欲しい。 Spectacle と…
今回は、AWS のS3 から、必要なデータを（リネイムして）再アップロードしたいという要望があり、Python を用いて自動化したので備忘録として残しておく。 Boto3 とは 認証情報の設定方法（profile での設定） S3からファイル一覧を取得する S3から任意のフ…
今回は、エラー解決にかなり時間を要したので、備忘録として残しておく。 タイトルのとおり、新規プロジェクトを開始する際に、なぜか私の pre-commit が動かないという事態に遭遇した。pre-commit は複数人で開発を行っている際に、とても便利なのでその機…
Vue.js エンジニアの React 入門。 React の実装方法を Vue.js と対比しながら理解を深めていくシリーズ。 これまでに、以下の内容についてまとめてきたので、参考にご覧ください。 概要比較 コンポーネントの実装方法 コンポーネントの親子関係 ライフサイ…
遅ればせながら、最近やっと Babel から卒業して TypeScript に入門した私ですが、便利だなぁーと思っている。というか、TypeScript を理解しておくことで、めっちゃ効率が上がっている気がする。まだまだ初学者の私であるが、私のように TypeScript に手を…
React の様々なコードを読む中で、頻繁にみる HOC に関して、整理するためにまとめを行った。 Higher-Order Component（HOC） とは ja.reactjs.org Higher Order Components はComponentのラッパーみたいなもので、よくHOCと略される 日本語に訳すると「高階…
Pythonでのデータ分析を効率的に行うためのライブラリ「Pandas」の日付操作で先日少しハマってしまった。自分への戒めとして、Pandasの日付操作をまとめたので、紹介する。 まず、Pandas で処理する場合だけでなく、何をプログラムするにしても、どんな「型…
Vue.js エンジニアの React 入門。 React の実装方法を Vue.js と対比しながら理解を深めていくシリーズ。 これまでに、以下の内容についてまとめてきたので、参考にどうぞ。 概要比較 コンポーネントの実装方法 コンポーネントの親子関係 今回は、「ライフ…
CloudWatch Logs でログ解析をして、状態監視をするにあたり、AWS CLI でログを取得し、不具合件数の出力までを Python で自動化を行った。意外に簡単で、とても便利だったので、今回紹介する。AWS Consoleでもフィルターなどをかけることができるが、Pandas…
Vue.js エンジニアの React 入門。 React の実装方法を Vue.js と対比しながら理解を深めていくシリーズ。 今回は、「コンポーネントの親子関係」である。 親子間でのデータのやり取り、イベントハンドリングを確認する。 Vue.js まずは、Vue.js での実装方…
Vue.js エンジニアの React 入門。 React の実装方法を Vue.js と対比しながら理解を深めていくシリーズ。 今回は、「コンポーネントの実装方法」を紹介する。 Vue.js は HTML テンプレートであり、React は JSX で全く異なる。（ただし、React は必ず JSX …
日本・アジア圏では、Vue.jsは人気があるように観測されるが、実際にグローバルな視点でみると、Reactが圧倒的に人気・シェアがある。npmtrends.comでnpm installされている数を比較してみる。 NPM Trends: Compare NPM package downloads 数字でみても、Vue…
前回の記事で、PythonのWebアプリケーションフレームワークであるFlaskでHello Worldをローカル開発環境で確認するまでを紹介した。 serip39.hatenablog.com 今回、Raspberry Pi 3 Model B 上にWebサーバーを構築して、FlaskのWebアプリケーションを本番環境…
Python の勉強を行う中で、今回はWebアプリケーションを実装した。 Pythonにも、様々なWebフレームワークが存在する。 名前 特徴 Django 多機能万能なフルスタックフレームワーク。大規模開発向け。 Flask 最小限の機能、軽量・高速なフレームワーク。 Bottl…
前回のシリアル通信 は、USBポートを使用していたが、今回はRaspberry Piの GPIO を用いてシリアル通信を行ったので、備忘録として残しておく。 pySerialで接続可能なポートの確認 まずは、GPIOの信号をどこのポートに送ればいいか調べるために、ポートの確…
前回の記事で、Raspberry Piでの開発環境のセットアップまでを Pipenv で完了させた。そこで、最初にUSBのシリアル通信をしてみたので、備忘録として残しておく。 概要 今回は、Raspberry PiとPCなどを接続してシリアル通信をするのではなく、ループバック試…
最近、やっとRaspberry Piを触ることができた。（以前から、ずっと触ってみたいと思い、つい衝動買いしてしまい、ずっと棚に閉まってしまっていた。。。）Raspberry Piで開発するにあたり、念願のPythonデビューも果たすこととした。私のようなPythonデビュ…
前回の DHCPサーバー に続き、DNSサーバーを構築したので、備忘録として残しておく。 DNSサーバーとは DNSとは、 Domain Name Systemの略称であり、インターネット上でドメイン名を管理・運用するために開発されたシステムである。通常目にしているホームペ…
ホームページやLPには、必ずといっていいほど、お問い合わせフォームを設置する。 メールの送信方法は様々あるが、今回はさくらインターネットのレンタルサーバー上にHPを制作し、さくらインターネットのSMTPサーバーを利用したメール送信を実装したので、備…
今回、Next.jsの勉強を始めようと思い、Dockerにて開発環境の構築を行った。 なお、実装したサンプルコードは GitHub に公開している。 github.com 本記事では、ポイントだけを抜粋して説明するため、実際にコード全体を確認する場合は GitHub を参照くださ…
通常のWindows 10 ProのノートPCに、DHCP Serverを構築したので、備忘録として残しておく。 DHCPサーバーに関しては、先日の記事を参考にしてください。 serip39.hatenablog.com 今回、なぜ Windows 10 に DHCP サーバーを構築することになったのか、実用例…
DHCPとは、IPv4ネットワークにおいて、IPアドレスなどのネットワークの設定を自動でデバイスに割り当てる仕組み（ルール）のことである。
今回は、puppetteer を用いてスクレイピングし、取得したデータを表示するサンプルアプリケーションを構築したので紹介する。Dockerでの開発環境→Puppeteerでのスクレイピング→Nuxt.js上での表示までのサンプルコードになります。
AWSの設定などはブラウザのGUIを用いてやるより、なんとなくCLIでやりたくなる私。 賛否両論あるが、プログラマーの中では、やはりCLIが早いし、痒い所に手が届く感じの安心感があるらしい。（まだその実感はないが、CLIの方がカッコいいよねw） ただ、会社…
「ふせん」のような感覚で使えるタスク管理ツール「Trello（トレロ）」。視覚的に見やすく、様々なプラグインも豊富で、非常に使いやすい。 私の会社でも、タスク管理にTrelloを用いている。また、ビジネスコラボレーションハブの「Slack」をメインツールと…
SPAの中でモーダルウィンドウを用いて、詳細情報を表示することは情報をはっきりと強調して提示でき有効な手段である。今回は、そのモーダルウィンドウをNuxt.jsで自作したので、実装方法を紹介する。
発生事象 CSSで「正方形」を作ってください。 また、レスポンシブで正方形の形が維持されるようにしてください。 このように言われて、すぐにどのように実装すればいいか、わかるだろうか？ 実際には、色んな方法があるかと思う。 （JSでwidthとheightをresi…
