はてなブックマーク

2021/09/29 TypeScriptでSOLID原則〜依存性逆転の原則〜 design TypeScript SOLID原則とは？ SOLID原則とは、オブジェクト指向プログラミングにおいて、変更しやすい・理解しやすい・再利用しやすいモジュール（クラスや関数などの、ソフトウェアのを構成する部品）を設計・開発するための原則のことです。ソフトウェアエンジニアRobert C. Martinに提唱された多くの設計原則を5つにまとめたものの頭文字をとって命名されました。 S … Single Responsibility Principle: 単一責任の原則O … Open-Closed Principle: 開放閉鎖の原則L … Liskov Substitution Principle: リスコフの置換原則I … Interface Segregation Principle: インター

2021/09/15 TypeScriptでSOLID原則〜単一責任の原則〜 design TypeScript SOLID原則とは？ SOLID原則とは、オブジェクト指向プログラミングにおいて、変更しやすい・理解しやすい・再利用しやすいモジュール（クラスや関数などの、ソフトウェアのを構成する部品）を設計・開発するための原則のことです。ソフトウェアエンジニアRobert C. Martinに提唱された多くの設計原則を5つにまとめたものの頭文字をとって命名されました。 S … Single Responsibility Principle: 単一責任の原則O … Open-Closed Principle: 開放閉鎖の原則L … Liskov Substitution Principle: リスコフの置換原則I … Interface Segregation Principle: インターフ

2020/09/08 Hooks + TypeScriptでReact公式チュートリアルをリファクタ JavaScript React TypeScript React公式サイトには入門に最適なチュートリアルが用意されています。マルバツゲームの作成を通して、Reactとその構文について学ぶことができるようになっています。実際に手を動かしながら学ぶことができるので、一段階ずつ学べるガイドと合わせてスムーズにReactに入門できるようになっています。 今回の記事では、そのチュートリアルをJavaScriptからTypeScriptへ、クラスベースのコンポーネントから関数ベースのコンポーネントへリファクタします。リファクタを通して、ReactでTypeScriptを使うための型定義について、関数ベースのコンポーネントの書き方について紹介していきます。 リファクタ前のコード 公式チュートリアルを終

2020/07/29 Djangoのクラスベースビューを完全に理解する Django Python はじめに Djangoでの開発時によく使うのが、クラスベースビューです。 クラスベースビューは「クラスベース汎用ビュー」または「汎用ビュー」と呼ばれることもありますが、データモデルのCRUDのような基本的な機能を簡単に実装できるように、ビューを再利用できるクラスとして提供したものです。 しかし現実のアプリケーションはデータモデルのCRUDのような基本的な機能だけではなく、例えば「2つのデータモデルを同時に編集させたい」「一覧を表示しつつ新規入力もさせたい」のような、単なるCRUDではない機能が要求されることもあります。そのような要求が来るたびに開発者は「これはどのクラスベースビューを使えばいいか」を考える必要があります。 このときに間違った判断をすると、後から見て何をやっているのか分からない

2020/05/22 Hugoで1からテーマを作ってGitHub Pagesにデプロイする github-pages hugo はじめに 自分は数ある静的サイトジェネレータの中で、Hugoが一番好きです。1000件以上の記事があっても数秒でビルドできるスピードが魅力的です。 そのHugoは日本でもよく使われていますが、日本語でまとまった情報はまだまだ少なく、公式サイトの英語のドキュメントを読み取る必要があります。 そのため、1からサイト、テーマを作成して(既存のテーマを使用する方法も記載)、 GitHub Pages にデプロイするまでを詳しく説明したものを1本の記事にまとめてみました。 前提条件 本記事ではHugoのインストール方法については説明しません。また、 Gitの知識および、GitHubのアカウントを持っていることを前提とします。 コマンドおよびテンプレートは以下の環境で確認して

2020/04/06 CLIをカスタマイズして、作業の効率・モチベーションを上げる Linux CLIとは、Command Line Interfaceの略で、いわゆる黒い画面のことです。この記事では、iTerm2とpreztoをインストールし、それぞれ設定することでCLIの見た目や機能をカスタマイズする方法を紹介します。 iTerm2は、macで使えるターミナルアプリです。mac純正のターミナルではできない細かな設定や、hotkeyの設定、画面分割などができます（tmuxが使える方であれば、画面分割はターミナルでも出来ます）。 preztoは、zsh(シェル)のフレームワークです。preztoを使うと、プロンプトのテーマの設定やコマンドの補完を簡単に設定できるようになります。 どちらのインストールにもHomebrew（Homebrew Cask）を使うので、公式サイトなどを参考にインスト

2020/01/24 docker-composeでLaravelの開発環境を整える方法とその解説 Docker Laravel PHP 環境構築 Laravelの開発環境は、Laravel Homestead、Laravel Valetなどを使うとかんたんに構築することができますが、本記事ではdocker-composeを使ってLEMP環境（Linux, Nginx, MySQL, PHP）をイチから構築し、Laravelをインストールする方法を解説します。 docker-composeを使って開発環境を構築することには、複数のアプリケーションやミドルウェアの複雑な依存関係をコードで簡潔に管理できるようになるという利点があります。 docker-composeによるLEMP環境の構築・Laravelのインストールをわかりやすく解説するため、最初から完成形のコードを紹介することはせず、Ng