Next.js で開発しているときに、Client Side Rendering（SPA）・SSR・SSG についてきちんと整理できておらず、自分なりの整理をしてみたので、備忘録として残しておく。（React ベースのフレームワークで SSG といえば、Next.js 。ただし、v9.3から SSG の機…

最近、Next.js に触れる機会があり、試行錯誤しながらコーディングを行っている。その中で、Next.js の中で Firebase Admin SDK をどのように実装すべきかという課題にぶち当たり、とりあえず実装はできたものの、最適解ではないと思っている。もし最善の策…

前回の記事で、VS Codeの開発版（β版）である VS Code Insiders を紹介した。そして、v1.48 (2020/07) のアップデートがついに安定版にリリースされた。 The July update of @code is live! ⚙️Settings Sync (preview) now available in Stable! Simplified…

前回の記事で、VSCode + Drow.io で、図形入りドキュメントを作成する方法 を紹介した。私は現在、「VSCode」（Visual Studio Code）を愛用している。そして、VS Code は毎月のようにアップデートされている。 code.visualstudio.com 7月のアップデートでも…

前回、「GitHub Learning Lab」のPython入門コースの紹介記事を書いた。入門編はあまりに簡単な方も多かったかもしれない。「GitHub Learning Lab」には、もうひとつPythonのコース「Intermediate Python」があったので、受講してみた。 lab.github.com この…

GitHub Actions を学ぶときに「GitHub Learning Lab」を使うと便利であると、カックさん @kakakakakku に教えてもらった。 その「GitHub Learning Lab」の中に「Introduction to Python」コースなるものを発見した。これから Python に挑戦したいと思ってい…

最近、あるプロジェクトで初めて 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 サーバーを構築することになったのか、実用例…