Ryo.gift | Web developer blog

Web開発者のブログです。

TypeScript と Jest で単体テストの環境構築

Freepik - jp.freepik.com によって作成された background ベクトル 目次 概要 TypeScript とは Jest とは 環境 プロジェクト作成 コード例 1. 概要 TypeScript を使ってみたくなりましたが、単体テストを実行するまでの環境構築に手間取ったので、手順を残…

railsでwebpackerのみ使う方法

Macrovector - jp.freepik.com によって作成された design ベクトル 目次 事前に 概要 Sprocketsを除外したアプリケーション Sprocketsの除外方法 1. 事前に 今回、作成したアプリケーションは以下のバージョンのrubyとrailsを事前にインストールしています…

「白鳥とコウモリ」の感想

白鳥とコウモリ作者:東野 圭吾幻冬舎Amazon 目次 購入者したきっかけ 加害者家族の生活が一変 加害者家族と被害者家族の協力プレー まとめ 1. 購入者したきっかけ 久しぶりに本屋に立ち寄って、東野圭吾さんの新作を目にしてしまったら買うしかない。 普段は…

Hash#transform_keysを利用する

目次 Hash#transform_keysを利用する 変更前 変更後 まとめ 1. Hash#transform_keysを利用する 先日行った知床峠の写真です。本記事とは無関係です。 久しぶりにRuby on Rails APIモードのアプリを確認していたら、rubocop さんからの警告が表示されていまし…

佐藤可士和展の感想と都会の緑を楽しむ

国立新美術館 目次 佐藤可士和展(国立新美術館)を楽しむ 初めての代々木公園 初めての新宿御苑 まとめ 1. 佐藤可士和展(国立新美術館)を楽しむ 佐藤可士和展(ユニクロ) 佐藤可士和展(セブンイレブン) 私は、アートが幼少期から好きでクラスの中では…

「イラスト図解式 この一冊で全部わかるweb技術の基本」の感想

イラスト図解式 この一冊で全部わかるWeb技術の基本作者:小林 恭平,坂本 陽SBクリエイティブAmazon 目次 初めに HTTPについて Webで扱うデータ形式について Webアプリケーションについて 最後に 1. 初めに 私は、Webアプリケーション開発の仕事をしてきて8年…

「イラスト図解式 この一冊で全部わかるサーバーの基本」の感想

イラスト図解式 この一冊で全部わかるサーバーの基本作者:きはし まさひろ発売日: 2016/03/29メディア: Kindle版 目次 初めに イラスト図解式 この一冊で全部わかるサーバーの基本 1. 初めに 久しぶりに技術書を大量に購入して、習慣的に読み進めるようにし…

Next.js + Material-UIでリロードした時のエラーについて

目次 初めに 原因 対応方法 変更前 変更後 追記 1. 初めに Next.js + Material-UI(styled-components)を使ってリロードしたときに、以下のエラーが発生してスタイルが崩れました。 Warning: Prop `className` did not match. 2. 原因 サーバーサイドで新しく…

Amazon Simple Email Serviceを使ってメール送信する

最近、個人開発の勉強のためにWebサイトを作っています。そろそろWebサイトに会員登録の仕組みを追加して、何らかのサービスを提供できるようにしようと考えておりますが、長くなりそうなので、まずは会員登録の仕組みだけでも先に追加することにしました。 …

Vue.jsで簡単なテストを書いてみる

Vue.jsによって、生成されたDOMの結果を確認する。 <template> <div class="sample"> <p>sample</p> </div> </template> <script> export default { name: "Sample" } </script> <style scoped> .sample { text-align: center; } </style> // tests/unit/components/Sample.spec.js import { shallowMount …

Reactで簡単なテストを書いてみる

Reactによって、生成されたDOMの結果を確認する。 /* App.css */ .App { text-align: center; } // App.js import "./App.css"; const App = () => ( <div className="App"> <p>sample</p> </div> ); export default App; // App.test.js import { render, screen } from "@testing-library/rea…

Ubuntu 20.04.1 LTSにPostgreSQLをインストール

パッケージリストの追加で"bionic-pgdg"ではエラーになったため、インストール方法を記載します。 手順 あらかじめ root ユーザに切り替えておく。 PostgreSQLのダウンロードURLをパッケージリストに追加する。 PostgreSQLの公開鍵をキーリストに追加する。 …

ダック・タイピングを例に動的型付け言語と静的型付け言語の違い

ダック・タイピングとは If it walks like a duck and quacks like a duck, it must be a duck. (もしも、それがアヒルのように歩き、アヒルのように鳴くのなら、それはアヒルに違いない。) デーブ・トーマスより ダック・タイピングは、オブジェクトに何…

ES6とReactとVue.jsの基礎を学ぶ

JavaScriptの勉強 最近、JavaScriptを中心に勉強しています。業務ではVue.jsを使っていますが、Reactにも興味があり少しずつコードを書き始めました。ReactはSimple、Vue.jsはEasyと言われておりますが、その意味も理解できるようになってきました。私は下記…

Ruby2.7.0_Rails6.0.3.2で表示される警告の解決方法

アップグレードした話 会社でRuby on Rails(APIモード)のアップグレードを行いました。アップグレードの目的はActive Storageの機能を使ってAWS S3にデータを保管する仕組みを構築するためです。アップレードにあたっては以下のガイドや記事が参考になり、と…

直接DOMを更新する問題

最近、新規にアプリを開発するときの技術選定でSPAを導入するケースが多くなりました。SPAとはSingle Page Applicationの略で単一のWebページのみで構成されており、ユーザーの操作や各種イベントによって非同期でサーバーと通信後、必要なデータを受け取り…

Vue.jsでfunctionの省略記法

Vue.jsのガイドでfunctionを使っている部分を見つけたので直感でArrow Functionの記法を使ってみましたが、正常に動きませんでした。 引用元: はじめに — Vue.js // functionありの記法 const app = new Vue({ el: "#app", data: { message: "Hello Vue.js!"…

「JavaScript Primer 迷わないための入門書」を読んで「Arrow Function」を理解する

JavaScript Primer 迷わないための入門書 作者:azu,Suguru Inatomi 発売日: 2020/04/27 メディア: 単行本 Vue.jsを1年弱使って開発していましたが、JavaScriptについて詳しくないため「JavaScript Primer 迷わないための入門書」のKindle版を購入して勉強し…

ノンデザイナーズ・デザインブックを読んで基本を学ぶ

ノンデザイナーズ・デザインブック [第4版] 作者:Robin Williams 発売日: 2016/09/20 メディア: Kindle版 webアプリケーションの開発時に毎回、デザインについて悩むことがあります。デザインのガイドラインがあったり、デザイナーさんがいる場合は、開発…

レガシーとモダンな技術の生産性について

最近、モダンな技術を使って開発ができているので、めちゃくちゃ楽しい。でも、一つの機能に対しての生産性は今までよりも上がっている気がしない。Vue.js + GraphQL + Ruby on Railsで表現力や自由度は高いけど、その反対に考えないといけない部分が増えて…

エンジニアの経歴ふりかえり

IT業界でプログラマ、あるいはシステムエンジニア、またはソフトウェアエンジニアとして働き始めて8年目を迎えました。新卒で入った会社では準委任契約や請負契約という形態で客先常駐をしながらソフトウェアの開発をしていました。それから、転職して現在は…

PostgreSQLの基本操作の備忘録

よく忘れるので、改めてPostgreSQLの基本操作をまとめることにしました。ノートにメモっても、どこに記載したかが分からなくなるのでブログに投稿しておくことにします。 PostgreSQLとは PostgreSQLは、カリフォルニア大学バークレイ校のコンピュータサイエ…