TypeScriptで学ぶ！SOLID原則
はじめに 皆さんこんにちは、株式会社エムアイ・ラボのエンジニアです！ 今回はソフトウェア設計のSOLID原則について学習したので、弊社のメインの開発言語であるTypeScriptのサンプルコードを使って共有できればと思います。 SOLID原則は、オブジェクト思考プログラミングにおいて、ソフトウェアがメンテナンスしやすく、拡張や変更に強いソフトウェア設計を行うための原則です。 SOLID原則にはSOLIDの頭文字をそれぞれとった、５つの原則があります。 単一責任の原則（Single Responsibility Principle） 単一責任の原則とは、クラスが一つの機能や責任を持つべきで、クラスが変更される理由は一つであるべきというです。 クラスが一つの機能や責任のみを持つようにすることにより、コードは再利用可能でテストが容易になります。 単一責任の原則を遵守している例 以下のBirdクラ
LINEヤフー Tech Blog コード品質向上のテクニック: 第 1 回
こんにちは。コミュニケーションアプリ「LINE」のモバイルクライアントを開発している石川です。 私達は、高い開発生産性を維持するために、コード品質と開発文化の改善に注力しています。 そのために様々な取り組みを行っているのですが、その 1 つとして Review Committee の活動があります。 Review Committee では、マージ済みのコードを再度レビューし、レビューアとオーサーにフィードバックしたり、レビューで集めた知見を Weekly Report と称して毎週共有したりしています。 この Weekly Report で共有される話題は、Android や iOS といったプラットフォームや、Kotlin や Swift 言語固有の注意点も含まれるのですが、多くの場合はプログラミング一般に適用できるものになるように配慮しています。（ただし、説明のために使うコードは Ko
TS のクラスを型とその関数に変換するコンバーターを書いた
$ npm install @mizchi/declass $ npx declass input.ts # -o output.ts export class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; console.log("Point created", x, y); } distance(other: Point) { return Math.sqrt(Math.pow(this.x - other.x, 2) + Math.pow(this.y - other.y, 2)); } } export class Point3d { constructor(public x: number, public y: number, public z:
【Laravel】メールアドレスを変更する方法を徹底解説【コピペでOK】
今回はLaravelでメールアドレスを変更する方法について、わかりやすく説明していきます。 また、なるべくコピペで実装できるようにコードをまるごと掲載していきます！ 今回実装するメールアドレス変更機能の流れは以下の通りです。 ①すでにログインしているユーザーが新しいメールアドレスを入力 ②入力したメールアドレスあてに確認メールを送信する ③メールのリンクをクリックするとメールアドレスの変更が完了する ※新しいメールアドレスを認証するまでは、以前のメールアドレスでログインさせる LaravelにはEmail Verificationというメールアドレスの確認機能が実装されていますが、Email Verificationを使用すると新しいメールアドレスを入力した際に古いメールアドレスは上書きされてしまいます。 今回実装したい機能のように、新しいメールアドレスを認証するまでは以前のメールアドレス
Laravel SaaS: Free Trial Implementation
Laravel is a good framework to create "software-as-a-service" solutions - with monthly payments by users. Usually, it should incorporate some kind of Free Trial mechanism. In this article, will show you my version of how to do it in Laravel 5.8. What are we creating here We take default Laravel app, run artisan make:auth for default registration form;Will add a new timestamp field users.trial_unti
【NestJS/Next.js/GraphQL】TypeScriptだけでバックエンドもフロントエンドも作ってみる
やったこと ほぼTypeScriptだけでバックエンドもフロントエンドも作ってみた できたもの 技術スタック Backend NestJS TypeORM GraphQL (Code first) / Apollo Frontend Next.js / React GraphQL Code Generator / Apollo Client emotion / Semantic UI Other yarn workspace ESLint / Prettier / husky Docker / Docker Compose Vercel GCP (CloudSQL / Cloud Run / Cloud Build) Backend NestJS TypeScriptでスケーラブルなサーバーサイドアプリを構築するためのNode.jsフレームワークです 型安全なので何か誤った記述があれば起動
Laravelでの開発でいつもやってること
・・・ 'channels' => [ 'daily' => [ 'driver' => 'daily', 'days' => 90, 'permission' => 0664, ], ], class Handler extends ExceptionHandler { protected $dontReport = [ \Illuminate\Auth\AuthenticationException::class, \Illuminate\Validation\ValidationException::class, \Illuminate\Auth\Access\AuthorizationException::class, \Illuminate\Database\Eloquent\ModelNotFoundException::class, \Symfony\Component\Ht
Railsのポリモーフィック関連とはなんなのか - Qiita
はじめに Railsのポリモーフィック（polymorphic、多態性）関連について、実装方法を説明している記事は見かけるのですが、実際これがどんなものでどんな時に便利なのかを説明している記事があまりなく、よくわからないで使っている人もいるようなので本記事を書きました。 実装方法そのものについては詳細には説明しませんので、Railsのポリモーフィック関連をどう書くのかを知らない方はまずは公式ドキュメントを読んでいただけると理解が早いかと思います。 ボリュームは少ないので、2分もかからないかと思います。 Rails Guides: 2.9 ポリモーフィック関連付け "どんなものか"について、先に結論 ポリモーフィックとはダックタイピングの一種であり、 別の言い方をするとGoFのデザインパターンで言うところの「プログラムは実装に対してではなく、インターフェースに対して行う（Program to
垂直方向のマージンにはmargin-topを優先的に使う理由
margin-bottomではなくmargin-topを使う派である旨をツイートしたら理由を尋ねられたので、それに対する回答です。大きくは次の3つです。 末尾の要素の存在が任意である場合が多いため Stackレイアウトとの取り合わせやすさのため 隣接セレクターを使った場合分けができるようにするため CSS、基本コンポーネントの上にマージン取る派と、下にマージン取る派がいると思うですけど、自分は今までずっと下で。というのは、その方が直感的だと感じるからなんですけど、見出しの下って結構縮めるよね？それを上マージンでやると結構頭こんがらがらない？って思うんだけどどうなんだろう — Takazudo (@Takazudo) January 12, 2021 上です — 全部入りHTML太郎 (@_yuheiy) January 12, 2021 なぜですか? — u (@uknmr) Januar
プチ・クラウドストレージ作ってみた - Qiita
初めまして 60歳を間近にウェブデザイナーを目指して独学で勉強しているお婆ちゃんです。 去年の暮れからphpを勉強して、初めてシステムらしきものを作ってみました。 やりたいこと プチ・クラウドストレージ ・ファイルをどこからでもアップ、保管してダウンロードもできる。 ・セキュリティも兼ねてIDとパスワードでログイン形式にする。 まずはパワーポイントでサイトの系図を設計しました。 Excel、Word、パワポは商工会議所で習いたてホヤホヤです。 それぞれ基礎編までクリアして1月半くらいかかりました。 全部で5万円くらいはかかったかな。 次は手順を考えてイメージを具体化。 これは無料版のAdobeのXDを使ってみました。 操作も簡単で、感覚的に作れちゃうので便利です。 ページ自体はシンプルにしたかったのでフォントだけで作りました。 コードを書くのもAdobeの無料Brackets。Adobeド
Scoped CSSにおけるCSS設計手法 - ICS MEDIA
Vue.jsでCSSを利用する際にScoped CSSやCSS Modules、CSS-in-JSなどの手法があります。とくにScoped CSSは気軽に利用できるため、利用する機会も多くなって来るかと思います。 Scoped CSSがあればCSS設計を使わなくてもよいという意見もありますがはたして本当なのでしょうか？ ICSではScoped CSSにおけるCSS設計に関する議論が活発におこなわれており、本記事では私たちが考えた方式を紹介します。本記事はVue.jsのSFC（シングル・ファイル・コンポーネント）でScoped CSSを利用しているものを想定しています。 CSS設計とは 基本的にCSSは常にすべてのページで読み込まれ、増えれば増えるほど相互に上書きし合う状態が起きやすく、他の言語に比べてかなり壊れやすい言語と言えます。 そこで登場するのがCSS設計です。BEMやSMACSS、
bootstrapを使ってシンプルなWebページを作成する③〜入力フォーム〜 - Qiita
概要 前回の続き bootstrapのバージョンは3.7を使っている https://getbootstrap.com/docs/3.3 動作確認のための準備はこちら 今回の内容 入力フォームのバリエーションを見る ラベルの下に入力域が来るタイプ ラベルと入力域が上下に並ぶタイプのフォーム <form> <div class="form-group"> <label class="control-label">項目1</label> <input class="form-control" type="text"> </div> <div class="form-group"> <label class="control-label">項目2</label> <div class="radio"> <label><input type="radio" name="radio">選択肢1</l
2024年、現在の環境に適したリセットCSSのまとめ
CSSにおけるブラウザによる互換性の問題はWeb制作でモダンブラウザをターゲットにした場合、以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットCSSやすべてをリセットする必要は全くありません。 IE11のサポート終了から2年が経ち、現在はモダンブラウザの時代です。Chromeをはじめ、chromiumベースのEdge、Safari、Firefoxはエバーグリーンブラウザ（最新版に自動アップデートするブラウザ）と呼ばれています。 現在の制作環境に合わせて制作された新しいリセットCSSの中から特に注目すべきリセットCSSを紹介します。CSSのテクニックや知見も満載です！ リセットCSSとは リセットCSSの使い方・書く順番 どのリセットCSSが適しているかの選び方・カスタマイズ方法 A (more) Modern CSS Reset -モダンブラウザに最適化された新しいリ
Vue.jsで基本的なチャットアプリ機能を実装するためのサンプルコード - かとのぼのマイコード・マイライフ
Vue.jsだけで作る基本的なチャットアプリ機能のサンプルコードと概要説明です。 Vue.jsの概要説明とプロジェクト設定はこちら： www.katonobo.com www.katonobo.com Vue.jsで超基本的なチャットアプリ機能を実装しよう Vue.jsのサンプルコード コードの説明 Vue.jsで超基本的なチャットアプリ機能を実装しよう Vue.jsだけで作っています。そのため、メッセージはリロードしたり画面遷移したらデータは消えますので実用レベルではありませんが、むしろ無駄を一切削ぎ落としたコードなのでチャットアプリの基本的なロジックを理解するのに役立つはずです。 今回の機能は、自分のメッセージの送信と相手のメッセージの送信を分けて、自分のメッセージは「赤色」相手のメッセージは「青色」になり順番に表示されるようになっています。 実際の動作はこちらのサイトで確認してくださ
PHPのトレイトが怖くて使えない - Qiita
まとめ トレイトの衝突が怖い トレイトの安易な多用は衝突との戦いになりそう トレイトは魅力的 トレイトでトレイトを使うってどうすれば上手くいくんだ？ 慎重に使っていても衝突は突然に。になりそう 対象(筆者知識) class,static,extend,abstract,interface,trait あたりを「機能としての使い方」はなんとなくわかっているが、 「正しい使い方」はよくわかってない人。 ふれないこと ベストプラクティス オブジェクト指向とはなんぞや utility Class 不要論 グローバル関数 検証環境 PHP5.4 トレイトとは PHP: トレイト - Manual トレイトは、PHP のような単一継承言語でコードを再利用するための仕組みのひとつです。 トレイトは、単一継承の制約を減らすために作られたもので、 いくつかのメソッド群を異なるクラス階層にある独立したクラスで
LaravelのBladeテンプレートでレイアウト部分を共通にする
LaravelのBladeテンプレートを使って、コンテンツ以外のレイアウトを共通で管理できるようにしてみます。 完成想定 完成時のHTMLを作成してみます。 routes.php Route::get('/page/', function() { return view('page.index'); }); page\index.blade.php <DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページタイトル | cly7796.net</title> <meta name="description" itemprop="description" content="説明文"> <meta name="keywords" itemprop="keywords" content="A,B,C"> <li
TypeScript + Vue.js の始め方
こんにちは。エンジニアの小椋です。 最近になって初めてTypeScriptを使う機会があり、TypeScriptもっと使おう！😠😠😠と思ったので、今回はVue.jsでTypeScriptを使う方法を紹介したいと思います！
LaravelのORMで初心者から職人へ - Qiita
class User extends Model { public function scopeActive($query) { $query->where('active', true); } }
CSS フレームワークを使いたくない - ジンジャー研究室
CSS フレームワークが辛い。 ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも「それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう」と思って今までズルズル使ってきてしまったのだが、やっぱりそれでもどうしても辛くなり脱フレームワークしようと思う。 もちろん使いこなせる人には使いこなせるんだろうし「使うべきでない！」という主張をするつもりはない。頭のいい人には使えるんだろう。昔は「今すぐ〜すべき 10 の理由」みたいなことを適当に書いてたんだけど、どうせ自分がやってることは「 Web 系」のメインストリームからは外れてるんだろうし、合わせるつもりもなければ合わせさせるつもりでもない。使う理由も使わない理由も人それぞ
Vue.jsとAWSでつくる、シングルページの家計簿アプリ - Qiita
概要 作ったもの 最近お金が減るのが早くなった気がしたので、家計簿をつけようと思い立ちました。アプリをダウンロードしてきてもよいのですが、せっかくなので自分で作ることにしました。 タブレット、スマホ、パソコンのどれでも見れるようレスポンシブ対応を行ったのですが、タブレット(iPad)からみると以下の画像のようなものになっています。 チャート画面 記入画面 取引一覧画面 構成 静的ファイルはAWSのS3にホスティングし、お金のやり取りに関する情報はRDSに貯め、情報の追加・削除・修正にはLambdaとAPI Gatewayを用いて作ったAPIを通して行います。LambdaのコードはPythonで書いています。 簡単な図にすると、以下の画像のようになります。 共通部分 フロントエンド フロントはVue.jsを使って実装します。以下の画像の赤枠で囲った部分に表示するコンポーネントを切り替えます（
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
