TypeScriptで学ぶ！SOLID原則
はじめに 皆さんこんにちは、株式会社エムアイ・ラボのエンジニアです！ 今回はソフトウェア設計のSOLID原則について学習したので、弊社のメインの開発言語であるTypeScriptのサンプルコードを使って共有できればと思います。 SOLID原則は、オブジェクト思考プログラミングにおいて、ソフトウェアがメンテナンスしやすく、拡張や変更に強いソフトウェア設計を行うための原則です。 SOLID原則にはSOLIDの頭文字をそれぞれとった、５つの原則があります。 単一責任の原則（Single Responsibility Principle） 単一責任の原則とは、クラスが一つの機能や責任を持つべきで、クラスが変更される理由は一つであるべきというです。 クラスが一つの機能や責任のみを持つようにすることにより、コードは再利用可能でテストが容易になります。 単一責任の原則を遵守している例 以下のBirdクラ
モノレポにすべきか、レポジトリを分割すべきか
先日 フロントエンドの Monorepo をやめてリポジトリ分割したワケ というブログがバズっていた。そのおかげか、Twitter でもモノレポに関する言及がちょこちょこあった。一家言あるドメインなので書きたい。ただの一家言(a.k.a お気持ち)なのでぜひ皆さんの意見も聞いてみたい。 tl;dr 別に自分はどっち派とかではなく、どっちも選ぶ。強いて言うならリポジトリ分割派で、依存更新がしんどくなったら monorepo 派。 免責 モノレポに対する一家言を書きたいだけであって、内容自体はフロントエンドの Monorepo をやめてリポジトリ分割したワケ と全く関係なく、そのブログで述べられている施策については何も言及しません。ただ一つ言及するとしたら肉の部位がコードネームに採用されているのは良いと思いました。🍖🍖🍖 モノレポにしたくなる状態の前提にあるもの 前提は元記事と同じように
yarn v3 の独自機能を避けつつ yarn v1 から v3 へのアップグレードをする
yarn v3 が出ました。詳しい解説は譲るとして、esbuild integration や パフォーマンス向上が目玉です。 Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ... - DEV Community 流石に v1 はもう古いが、 v2 からの独自路線は受け付けがたい…という立場なのですが(yarn オリジナル作者の sebmck も難色を示しています)、今回は yarn 特有の機能をできるだけ避けて、できるだけ npm や pnpm 等と互換な部分だけで yarn v3 を使います。なので pnp も使いません。eslint や vscode の typescript 等でハマりどころが多すぎます。 ゼロインストールも否定派です。git blob objects のサイズが爆発して仕事にならなくなったことがあります。
vosk-browserのお試し
test.html ���XU � K�XU <html> <head> <title>vosk test</title> <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vosk-browser@0.0.3/dist/vosk.js"></script> <script> // let model = null // 初期化処理 async function init() { // 権限取得のための素振り const s = await navigator.mediaDevices.getUserMedia({video: false, audio: true}) s.getTracks().forEach(t => t.stop()) // マイク列挙処理 const select = d
【超簡単手順】低スペックローカルPCで大規模言語モデル「LLaMA」を動かす！
ある日、Twitterを巡回していると え...マジで？となりました。自分の専属AIを作りたい！と思い立ち、実際に動かしてみました。 目標 このようにローカルPC上でLLaMAとチャットできるようになります。 ただ、自分が使ったモデルは7Bモデルと言って、パラメータがあまり大きくない＝あまり賢くないモデルだったので出力は変な感じになっています笑 (明らかにネットの会話を推論に引っ張ってきてますね...) なので、今回はとりあえず動かしてみたい人向けです！精度などは気にせずお試しください。 ちなみに、自分はM1 MacBookAir(8Gメモリ)で動きました！信じられないぐらい遅いですが笑 Macユーザー向けに解説しますが、windows、linuxユーザーでもほとんど変わらないと思います。 手順 基本的にはこのgithubでの手順を踏んでいきます。 Node.js (npm) をインストー
AzureFunctions + puppeteer でPDF出力 - Qiita
概要 AzureFunctions + puppeteerでPDFを出力する。 生成したPDFはAzureStorageに保存する。 How to 「AzureFunctions + puppeteer」でスクショを撮る方法は以下を参照。 https://anthonychu.ca/post/azure-functions-headless-chromium-puppeteer-playwright/ コード 実際に動かしたコードをちょっと変えています（大人の事情）。 動作確認してないので、動かないかもです。参考程度にご覧ください。 ガーと書いたので、ツッコミポイントは多いですが、スルーしてください。 import * as puppeteer from "puppeteer"; import { BlobServiceClient, BlockBlobClient } from "@az
近年のWeb開発においてjQueryの利用をやめるべき理由
jQuery が広く使われるようになった理由jQuery が広く使われるようになった理由の 1 つに、クロスブラウザの互換性問題があった。jQuery はクロスブラウザで動作するため、開発者はブラウザ毎の互換性問題を意識する必要が薄くなった。また、jQuery の構文は初心者でも使いやすいため多くの開発者が利用し、コミュニティが発展した。これによって、jQuery プラグインやドキュメントが豊富に提供されるようになった。 jQuery の登場とほぼ同時期に、Prototype.js もその役割を担っていた。しかし、jQuery は Prototype.js よりも広く採用され、トレンドが移り変わった経緯がある。 シンプルな構文 両者とも当時のプレーンな JavaScript に比べシンプルな構文を持っていたが、Prototype.js より jQuery の構文が受け入れられた。パフォーマ
Connect for Node.js is now available
Timo Stamm and Steve Ayers on Feb 28, 2023/6 min read When we announced Connect-Web a few months ago, we were thrilled to finally bring Connect to JavaScript and, more specifically, to the browser. Since then, we’ve seen usage continue to grow and have received valuable feedback from the community. When Connect-Web was released, however, we promised that we’d soon provide a solution to extend the
WebWorkerでゴリゴリの重い処理をさせて横から制御したい時の手段 | g200kg Music & Software
これは Javascript のかなり細かい部分の話なので似たようなケースで困った事がある人以外にとってはどうでも良い話だと思いますが......。 JavaScript は元々シングルスレッド構造なのであまり重い処理をさせるには向いていないのだ、という事は昔から言われていました。 重い処理をしようとした時にまず影響を受けやすいのは UI 周りの動作です。 UI をちゃんと動かしつつ重い処理をさせるためには、処理を小分けにしてタイマーから駆動する等の手法がとられます。 またこの時、コールバックで小分けにした処理を繋げるとソースが見づらくなるので Promise や async/await を使う、という手段が定石となっていったのですが、そもそも、ひとまとまりの重い処理をやらせたいならやっぱり別スレッドで走らせたい、という事で WebWorker というものが作られました。 これによって J
Romeは本当に速かった - @ledsun blog
RomeプロジェクトのJavaScriptフォーマッターがリリースされました。 rome.tools ちょうどPrettier を使っているプロジェクトがあったので比較してみました。 本当にめちゃくちゃ速い。 prettierで8秒掛かるのが0.5秒とかで終わる。— ぎゃばん@手洗い (@ledsun) April 6, 2022 prettierを速く動かしたくてparallel-prettierに.prettierignoreを読む修正を加えて動かして速くなったか - Qiita でNode.jsのまま並列化したparallel-prettierを試したときは やったね1.25倍速くなりました！ でした。 それと比べてるとRomeは10倍以上速くなっています。 驚異的です。 JavaScriptパーサーやASTを扱うライブラリーなどの資産がないrustで書き直すのは、大変な労力に思えま
Reactでマークダウンエディタ作成とマークダウンからHTMLに変換（ハイライト付き） - Qiita
Reactでマークダウンエディタの作成と、マークダウン表記をHTMLに変換（ハイライト付き）してみました。 ライブラリを組み合わせることで、楽に実装することができます。 環境 OS : macOS Catalina 10.15.3 node.js : 12.13.1 React : 16.12.0 Reactのライブラリは以下を使用します。 react-simplemde-editor(EasyMDE) : 4.1.0 marked : 0.8.0 highitjs : 9.16.2 参考までに、紹介するコードはGitHubにあります。 https://github.com/txkxyx/react-mde マークダウンエディタを作成する Webの画面にマークダウンエディタを埋め込む場合、元々SimpleMDEというライブラリが使用されていましたが、今はEasyMDEというSimpleMD
JavaScriptとTypeScriptを共存させ、段階的に移行する方法
某サービスのフロントエンド開発に携わるようになってからずっと考えていることがある。 TypeScriptに移行して、型に守られたい！ ただ稼働しているサービスをいっきにTypeScriptに移行するのは危険で膨大な工数がかかるため、段階的に移行できないかと考えた。 ということでJavaScriptとTypeScriptを共存させる方法をまとめる。 環境は以下のとおり。 webpack@4.0.1 webpack-cli@2.0.9 webpack v3系の場合は不要 typescript@2.7.2 ts-loader@4.0.0 ※ あとでbabel-loaderについて追記予定です！ → 2018/03/23 追記しました 移行前の状態 極小サンプルを使って紹介する。 // src/main.js import { add } from './module' const result
レガシーおじさん、SPAを始めてみた。そして限界を知る
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
Vue を使用した ASP.NET Core アプリの作成 - Visual Studio (Windows)
この記事では、API バックエンドとして機能する ASP.NET Core プロジェクトと、UI として機能する Vue プロジェクトを作成する方法について説明します。 Visual Studio には Angular、React、Vue をサポートする ASP.NET Core シングルページ アプリケーション (SPA) テンプレートが含まれています。 テンプレートには、各フレームワークの基本ファイルとフォルダーを含む ASP.NET Core プロジェクトに、組み込みのクライアント アプリ フォルダーが用意されています。 この記事で説明されている方法を使用すると、次のような ASP.NET Core シングル ページ アプリケーションを作成できます。 クライアント アプリを ASP.NET Core プロジェクトの外部の別のプロジェクトに置く コンピューターにインストールされているフ
Expressで1GB以上のAPIレスポンスを返すテクニック - 橋本商会
以下で使っているExpressの技をまとめた HelpfeelとScrapboxの間のデータ連携 scrapboxの Auto Project Backup Project JSON export 全部やるとメモリ使用量が超安定する before / after サーバーの数がCOVID-19以前に戻った 基本方針：メモリ上に大きな文字列（JSONなど）を保持しない これがとても重要ですshokai.icon*5 node.jsが確保できるメモリ量は--max-old-space-sizeで指定できるが、それも上限2.5GBまで それ以上のデータは扱えない オーバーするとJavaScript heap out of memoryが発生し、プロセスが強制終了してしまう 巨大な文字列ができる所 JSON.parseの引数やJSON.stringifyの返り値 streamの送信バッファ これら
Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介
こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技術が必要になりJavascriptのコード量が膨大になっていきます。 Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsのクラスを利用することで気軽に3Dのコンテンツを表示することができます。 当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわからず、公式ドキュメントを見ると英文で何をどうすればいいのかわからないかと思います。 Three.jsをこれから勉強するには、以下のサイトを
フロントエンドエンジニアがWASM(Rust)でWebアプリを作ってみた
この記事について この記事はアドベントカレンダー2021 Rust 四日目の記事です 概要 フロントエンドエンジニアである筆者がWASM（Rust）でWebアプリを作ってみたので、 その際の技術選定（主にビルド・開発補助周り）について 作ってみた雑感、特に「ぶっちゃけフロントエンドRust[1]ってどうなの？」という点 について書いていこうと思います。 TL,DR 2021年12月現在フロントエンドでのRustの採用は技術的に可能だがエコシステムが未発達なのでそれなりに技術力とコストを要求される とはいえ伸び代はかなりあるのでエコシステムが頑張ってくれれば、数年後には十分一般的な選択肢になってるかも（なってて欲しい） 主な対象読者 フロントエンドに携わる機会がある方々 この記事を読んでいただくことで・・・ フロントエンドという文脈におけるWASMの現状を知ってもらう フロントエンドをRus
Rust + Node-APIでクロスプラットフォーム向けnpmパッケージを公開する - 別にしんどくないブログ
この記事は Node.jsのカレンダー | Advent Calendar 2021 - Qiita の2日目の記事です。 今回はnapi-rsというNode-APIを使ったNode.js add-onをRustで書けるツールを紹介します。 napi.rs 目次 目次 Node-API とは napi-rsとは napi-rsの使い方 Rust のコードを追加してみる napi-rsを使ったnpm publish 今後試したいこと 著名npmパッケージのセキュリティインシデントとpostinstallの問題点 まとめ Node-API とは napi-rsの紹介をする前にNode-APIについて説明します。 Node.jsは、Node.js自体をネイティブレベルで拡張するためのadd-onをユーザーが開発するためのNode-APIと呼ばれるAPIを提供しています。Node-APIは以前はN
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのデザインパターン
Node.jsのカレンダー | Advent Calendar 2021 - Qiita
