はじめに 社内で設計の勉強会を行った際に、前提であるSOLID原則 特にオープンクローズドの原則について理解が必要だと再確認したので、今回記事にまとめます。 分かりやすいように具体例とコードを交えて説明します。 オープンクローズの原則とは SOLID原則の1つのOpen Closed Principleのことである。 ソフトウェアの構成要素は拡張に対して開かれていて、修正に対して閉じていなければならないという原則です。 拡張に対して開かれている 機能の拡張 新たなコードを追加することで機能を拡張することができる 修正に対して閉じている 修正は機能を拡張するための既存コードの修正 拡張によって既存コードが修正されない つまり...ソフトウェアのふるまいは既存の成果物を変更せずに、 拡張できるようにするべきということです。 ただ、これだけでは具体的なイメージが湧きにくいので、 具体例を挙げます

はじめに みなさんはChromeの拡張機能を使っていますか？ 僕も使っていますが、案外Chromeの拡張機能を作るのは簡単です。 今回は、普段の業務の効率を上げるのも兼ねて自作してみました! 最低限準備するもの manifestファイル Javascriptファイル ぶっちゃけ、これだけで動きます。 実際に作ってみよう それでは実際に作成していきましょう。 今回はDとVを押すだけで、Markdownのリンクを作成する拡張機能を作成していきます。 まずは、manifestファイルから設定していきます! manifestファイル を参考にして、備忘録も兼ねて説明していきます。 今回は、最低限の設定を行います。 { "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16":

この記事は、Qiita株式会社のカレンダー | Advent Calendar 2023 - Qiitaの13日目の記事です。 はじめに textlintについて、皆さんはご存知ですか? 実はQiitaのエディタ機能(ベータ版)でも、使用されています! 今回は、textlintのおすすめのルールとQiitaで使用されているものも 一部公開していこうと思います! textlintとは? 以下公式より textlint is an open source text linting utility written in JavaScript. It is hard to lint natural language texts, but we try to resolve this issue by pluggable approach. 簡単に説明します。 textlint(テキストリント)とは

はじめに 今回の記事は GraphQL API を叩いて毎朝電気代が届くLine Botを開発する の後編の記事となります。 今回は、rakeを使用して、定期実行用のタスクを作成していくのと RenderのCron Jobを使用して定期実行を設定する方法について解説していきます！ 前回の記事はこちらになります。 実装方針 1.Rails側からGraphQL叩いて電気代を取得出来るようにする 2.Line Messaging APIを利用して、取得した電気代情報をユーザーに送信する機能の実装 -- 今回はここから下 -- 3.開発環境で定期実行用のタスクを作成する 4.本番環境で定期実行を行えるようにする 開発環境で定期実行用のタスクを作成する 今回定期実行用のタスクを作成するために、rakeタスクを使用していきます。 rakeタスクは lib/tasksの配下に作成する必要があります。

はじめに 前回はAutomatic Batchingについて解説しましたが,今回はReact新機能のTransitionついて解説していきます！ 今回もReact18において重要な機能になっているので、今回の記事を見て概要だけでも 理解しておいてください！ 以下前回記事 Transitionとは...? 以下公式より引用 トランジション（transition; 段階的推移）とは React における新たな概念であり、緊急性の高い更新 (urgent update) と高くない更新 (non-urgent update) を区別するためのものです。 ・緊急性の高い更新とはタイプ、クリック、プレスといったユーザ操作を直接反映するものです。 ・トランジションによる更新は UI をある画面から別の画面に段階的に遷移させるものです。 タイプ、クリック、プレスのような緊急性の高い更新は、物理的な物体の

はじめに 前回に続いて,Reactの新機能のAutomatic Batchingついて解説していきます！！ React18の中でもかなり重要な機能になっているので、今回の記事を見て概要だけでも 理解しておいてください！ Automatic Batchingとは...? 以下公式より引用 バッチングとは React がパフォーマンスのために複数のステート更新をグループ化して、単一の再レンダーにまとめることを指します。自動バッチング以前は、React のイベントハンドラ内での更新のみバッチ処理されていました。promise や setTimeout、ネイティブのイベントハンドラやその他あらゆるイベント内で起きる更新はデフォルトではバッチ処理されていませんでした。自動バッチングにより、これらの更新も自動でバッチ処理されるようになります 端的にいうと、更新を1回の再レンダリングにまとめることでパフ

import { useState } from 'react' import './App.css' function App() { const [count,setCount] = useState(0) const handleClick = () => { setCount(count + 1) setCount(count + 1) } return ( <> <h1>useState</h1> <button onClick={handleClick}>count is {count}</button> </> ) } export default App 実際に環境構築したい方は下の記事参考に作ってください 上記のコードぱっと見countボタンを押せば count が 2ずつ増えるように思えるかもしれません。 しかし実際の挙動は以下のようになります。 countが1ずつしか

初めに DDDって言葉自体は定期的に聞きますよね。 ドメインについて知識をつけましょう、みたいなことはよく言われますが 「ドメインってIPアドレスをURLにしたものだよね〜」 くらいの理解しか去年まではありませんでした。 ドメイン知識やDDDとか聞いても、「プロジェクト全体のルーティングの理解かな」って感じで半年くらい前までは恥ずかしながら間違った理解で解釈してました😇 聞いたことはあるけど、詳しくは知らないという方は沢山いると思います。 自分自体ふんわりとした理解しかなかったので、今回勉強を兼ねてまとめさせて頂きます。 そもそもでドメインって? ここでいうドメインとは専門領域のことであったり、ドメイン知識のことを分かりやすくいうと業務知識のことになります。 請求書系アプリで例えると締め作業や簿記の知識等ですね。 余談ですが、学生時代に取得した簿記やFPの知識もエンジニアになってからも役