タグ

ブックマーク / qiita.com (349)

  • オワコン大手SIerに学ぶアンチパターン - Qiita

    軽い読み物としておもしろおかしく読んでください。 はじめて社外の人の仕事を見た 今まで社内の成果物しか目にしてこなかったのですが、ふとしたきっかけで外部ベンダーが作ったシステムを移行することになりました。 会社名を見て、よく知った会社でちょっと安心しました。 「ここなら設計書とかもきちんとしてるだろう、多少古臭くても堅実にやってるんじゃないかな」って思ってました。ええ。 実態は全然違った とんでもない量のExcel設計書として渡されました。 さすがに設計が専門だけあって設計書の量はすごいなぁ。と思って読んでいるといろいろ察してきました。 正直、「オワコン大手SIer」と呼ぶしかありません。設計しかできないと思っていたのに、何もできないなんて・・・ 実際に自分が見た「オワコン大手SIer」のアンチパターンをご紹介していきます。 自分が多く当てはまっている場合は今すぐ直してください。移行する

    オワコン大手SIerに学ぶアンチパターン - Qiita
    yuzu441
    yuzu441 2020/06/14
    個人的にはとにかく"意図がわからない"ってのが1番大変だった。ドキュメントは読んでも書いてるコードがどう考えても違ってほぼ読まなかった
  • TypeScript の型推論をテストする - Qiita

    TypeScript で複雑な型定義をするにあたり「テストを書きながら効率的に行いたい!」と思ったことはありませんか?TypeScript では Compilerレイヤーの API が Node.js に向け公開されており、環境コンテキストを加味した推論まで取得することが可能です。 稿では、CompilerAPI をテストに活用するアプローチを紹介します。 tl;dr サンプルリポジトリを用意しました。 https://github.com/takefumi-yoshii/ts-type-inference-test const w0 = 0; const n1 = 1 as const; const n2 = 2 as 2; const _w0 = { val: w0 }["val"]; const _n1 = { val: n1 }["val"]; const _n2 = { val

    TypeScript の型推論をテストする - Qiita
  • Reactで文字列内のURLをリンク(<a>タグ)にする方法 - Qiita

    TL;DR; 文字列内のhttp~を<a>タグでリンクにしたい react-string-replaceを使えば簡単にできたのでメモ&共有 サンプルおいておく react-string-replace npm i -S react-string-replaceする(もしくはyarn add -S react-string-replace) react-string-replaceをimportもしくはrequireする 正規表現でマッチした文字列を<a>タグで囲むだけ 配列の文字列とかでももちろん問題なく動く import reactStringReplace from "react-string-replace"して、 reactStringReplace(text, regExp, callback);とするだけ 以下サンプル import React from "react"; im

    Reactで文字列内のURLをリンク(<a>タグ)にする方法 - Qiita
  • MySQL5.7以降で条件付きのユニーク制約をかけるためのベストプラクティス - Qiita

    解決したい問題 PostgreSQLなどでは部分Indexが使えることでテーブルの一部分に対するユニーク制約などをDBで実現できたのに、MySQLではそれができないのでつらすぎる問題を解決したい。 今回は、以下のようなユーザーアカウントテーブルに対する操作を例として記載します。 CREATE TABLE IF NOT EXISTS account ( id BIGINT NOT NULL AUTO_INCREMENT, email VARCHAR(255) NULL, create_timestamp TIMESTAMP NULL, update_timestamp TIMESTAMP NULL, del_flg BOOL NOT NULL, -- 0: 有効な会員 1:削除済み PRIMARY KEY(id) ) このときに、del_flg=0の有効な会員に対してのみユニークキー制約をか

    MySQL5.7以降で条件付きのユニーク制約をかけるためのベストプラクティス - Qiita
  • SPA(React)にGoogleAnalyticsを導入する際のパターン - Qiita

    import ReactGA from 'react-ga'; ReactGA.initialize('トラッキングID'); ReactGA.pageview('任意のpath_name'); <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); // gtag('config', 'GA_MEASUREMENT_ID

    SPA(React)にGoogleAnalyticsを導入する際のパターン - Qiita
  • JavaScriptのArrayでuniqする8つの方法(と、その中で最速の方法) - Qiita

    この記事は会社のブログとのクロスポストです。 みなさんはuniqというコマンドやメソッドをご存じでしょうか? LinuxmacOSのシェルのコマンドとして使えるuniqは、与えられた入力の中で(連続する)同じ値を重複と見なして除外するというコマンドです。例えばこんな風に使います。 $ cat /var/log/apache2/access.log | cut -d ' ' -f 1 192.168.0.12 192.168.0.10 192.168.0.12 192.168.0.12 192.168.0.11 192.168.0.10 192.168.0.11 192.168.0.11 $ cat /var/log/apache2/access.log | cut -d ' ' -f 1 | sort | uniq 192.168.0.10 192.168.0.11 192.168.0.

    JavaScriptのArrayでuniqする8つの方法(と、その中で最速の方法) - Qiita
  • React Hooksで非同期処理を仕掛ける場合、refが便利 - Qiita

    React Hooksを使っていくと、今までの感覚ではうまくいかないことがよくあります。 大前提:関数内の関数はクロージャを形成する ReactではなくJavaScriptレベルの話ですが、関数内のローカル変数は関数の実行ごとに生成されます。そして、関数Aの内で別な関数Bを作成して、Bの中からAのローカル変数を参照すると、Aの実行によって生成された変数が、Bから使うためにAの終了後も生き残ることとなります。これが「クロージャ」です。 React Hooksの場合 React Hooksを使う場合、忘れてはならないのは、コンポーネントの描画ごとに関数が再実行されることです。ただ単にコンポーネント内で書いた関数ももちろんクロージャになりますが、コンポーネントの描画(=再実行)ごとに関数が再生成されますので、そのままReact内のイベントハンドラなどにセットしている場合は値の束縛の問題は生じませ

    React Hooksで非同期処理を仕掛ける場合、refが便利 - Qiita
  • React.useMemoの配列にはstate値も必要 - Qiita

    React Hooksを元気に使っていたのですが、useMemoで必要以上にメモされるというトラブルが起きてしまいました。 React.useMemoとは Reactのrender関数内で、その場で作った無名関数を使うと、renderのたびに関数が再生成されてしまって、不必要に下位コンポーネントのrenderが必要となってしまいます。また、配列の絞り込みなど複雑な操作を毎回行うと、そのコストもかさみます。 そこで使えるHookが、React.useMemoです。useMemo(() => 欲しい値, [依存する変数の配列])のようにすることで、依存する変数の配列が変化したときだけ無名関数を実行して欲しい値を生成するようになります。 なお、コールバック関数の場合、通常「コールバック関数を作るコストの削減」より「関数を不必要に再生成しない」ということが求められますので、コールバック関数を直接指

    React.useMemoの配列にはstate値も必要 - Qiita
  • サービスを止めずにSWAP領域を追加する。 - Qiita

    swapon: /var/swpfile: insecure permissions 0644, 0600 suggested. って言われたので、chmodの記述を追加 おそらく記事書いた当初はCentOS5/6系で試したからかと。(古すぎ) 拡張の流れ。 余っているDisk領域をddでファイル作って確保。 mkswapコマンドでswapファイルに変換。 swap onコマンドで有効化。 freeコマンドとswaponコマンドで確認。 拡張方法。 0.事前確認。 # free -m total used free shared buffers cached Mem: 7872 7728 143 0 15 3325 -/+ buffers/cache: 4386 3485 Swap: 4095 3 4092 # swapon -s Filename Type Size Used Prior

    サービスを止めずにSWAP領域を追加する。 - Qiita
    yuzu441
    yuzu441 2020/04/27
  • TypeScript: 「電話番号型」という意味を持たせた特殊なstring型の作り方 - Qiita

    この投稿では、値としては「文字列」なんだけど、単なる文字列ではなく「電話番号型」という意味を持たせた文字列型を定義し、それ使用する方法を紹介します。 TypeScriptで「電話番号型」みたいな、正規表現でバリデーションされるような型は作れるんかな? ElmだとOpaque Typeなんてやり方があったけど。。。 用は型をexportしないで、その型の値を作る方法だけをexportすればええんかな。 — 無職やめ太郎(名) (@Yametaro1983) April 23, 2020 ↑上のような疑問に対する答えです。 実現方針 方針としては、以下のテクニックの組み合わせです。 公称型で、「電話番号型」を定義する ユーザ定義タイプガードで、文字列型を電話番号型としてコンパイラに認識してもらう 公称型とその実装方法についての基は下記投稿をご覧ください。 TypeScript: 異なる2つ

    TypeScript: 「電話番号型」という意味を持たせた特殊なstring型の作り方 - Qiita
  • プログラミングでよく使う英単語のまとめ【随時更新】

    プログラミングでよく使う英単語のまとめ【随時更新】 随時追加、整理していきます。 名前をつけるときには、名詞、動詞の違い、複数形、過去形などに注意しましょう。 オブジェクト指向では、クラス名は名詞、メソッドは動詞とします。 使ってはいけない言葉 get / set アクセサ (getter / setter) やプロパティによく使われている。 それ以外に使うと混乱を招くのでよくない。 get は軽量な処理と考えるので、中に重い処理は書いてはいけない。 単純な取得/設定以外で使いたくなったら他の言葉を考える。 load, save, commit, store, enable, disable, fetch, register, configure, add, etc... check 意味が広すぎて何をしているかわからない。 できるだけ別の言葉を使う。 具体的に何をしているかに分解して考え

    プログラミングでよく使う英単語のまとめ【随時更新】
    yuzu441
    yuzu441 2020/04/25
    ここまでまとめてるのすごいな 英語わからんのですごい助かる
  • TypeScriptの関数オーバーロードの単純な例 - Qiita

    TypeScriptでは関数シグネチャのオーバーロードができる。次のように、シグネチャを列挙した上で、実装はひとつの関数にまとめる。 function 関数名(シグネチャA) function 関数名(シグネチャB) function 関数名(シグネチャC) function 関数名(シグネチャA,B,Cどれにでも対応できるシグネチャ) { そしてその実装 } そのため、実装はif分岐が多くなる。もしもJavaのように実装を別々に書くことができればコードがすっきりするだろうが、TypeScriptにはまだそういう構文はない。 例えば、1個から3個までの数値を引数に、その合計値を計算する関数sumをオーバーロードで書くと次のようになる: function sum($1: number): number function sum($1: number, $2: number): number

    TypeScriptの関数オーバーロードの単純な例 - Qiita
  • 香川県の例のパブコメの新事実 - Qiita

    賢明な読者の皆さんはお気づきだろうが、ここまで書いた事実にはかなりの突っ込みどころがあります。 上の主張から、あのADDRはおそらくサーバーのプライベートIPアドレスなのでしょう。 ただ、下に書いてある日時やUAはなんの意味があるのか、私はさっぱりわかりません。 最後の画像の一番左のやつをよく見ると、上部に書いてある日時と、下の部分に書いてある日時は一致しているように見えます。 (なぜかはよくわかりません。) あと、気づいたこととしては、どうやらdesknet's NEOというソフトを利用しているようです。 UAの不審点 ここまでで、やや怪しい程度だが、議会の主張は正しいように見えます。 そこで、上にある画像のUAをよく見てみよう。 お気づきになられただろうか。 実は、IPが192.168.7.21の中でも、UAが2種類存在します。 1.多くのPrIPのUA Mozilla/5.0 (Wi

    香川県の例のパブコメの新事実 - Qiita
    yuzu441
    yuzu441 2020/04/17
  • MySQLの文字コードとCollation - Qiita

    まずMySQLの文字コードですが絵文字のみでなく、JIS X 0213の第3・4水準漢字の 一部にUTF8 4バイト文字があり(まぁまず使われないと思いますが)、 MySQLの文字コードはこれからはutf8mb4一択のようです。 charsetは、サーバ、クライアント、サーバー/クライアント感の接続、データベース、、テーブル、カラムで個別に指定でき、 問題を起こさないようにするには、すべて揃えたほうが無難であります。 character_set_server=utf8mb4 character_set_client=utf8mb4 character_set_connection=utf8mb4 character_set_database=utf8mb4 character_set_results=utf8mb4

    MySQLの文字コードとCollation - Qiita
  • Dependabotで依存パッケージ更新のプルリクを作成してもらう - Qiita

    はじめに 皆さん、依存パッケージのアップデートを定期的にしていますか? 自分はGitHubセキュリティアラートがきてからバーション確認をすることが多いです。。 そんな中、Twitterを見ていると依存パッケージ更新のプルリクを出してくれるDependabotというサービスがあるとのことでjavascriptプロジェクトで試してみました。 Dependabotとは Dependabotは依存パッケージの更新を定期的にチェックし、更新があった際にプルリクエストを作成してくれるサービスです。 2019年の5月にGitHubJoinしたことで無料で使えます😊 Dependabot is joining GitHub サポート言語 2019/07/15時点では下記言語がサポートされているようです。 導入手順 インストール GitHubのMarketplaceからDependabotを検索しま

    Dependabotで依存パッケージ更新のプルリクを作成してもらう - Qiita
  • TypeScriptプロジェクトに独自の型定義を配置する方法 - Qiita

    概要 TypeScriptの開発において、型定義ファイルが用意されてないnpmライブラリを使うのは厄介なものです。 無理やり require("...") でJSのまま読み込ませてもいいですが、ちゃんとした型定義を使用したくなるときもあります。 作成した型定義ファイルは元のnpmライブラリに取り込んでもらい package.json の types で指定してもらう方法 1 と、 DefinitelyTyped に取り込んでもらい @types/*** パッケージとしてnpm installする方法がありますが、どちらも取り込んでもらうためにはPull Requestを投げたり、ライブラリのメンテナに新しいバージョンとしてリリースしてもらったりで時間がかかってしまいます。 Pull Requestは投げつつ、それが取り込まれてリリースされるまでの間、自分のプロジェクトで作った型定義ファイル

    TypeScriptプロジェクトに独自の型定義を配置する方法 - Qiita
  • MySQL パーティショニングまとめ - Qiita

    参考URL パーティショニングとは パーティショニングの種類 RANGE パーティショニング このタイプのパーティショニングは、指定された範囲に含まれるカラム値に基づいて、行をパーティションに割り当てます。 LIST パーティショニング RANGE によるパーティショニングに似ていますが、別個の値のセットのいずれかに一致するカラムに基づいて、パーティションが選択されます。 HASH パーティショニング このタイプのパーティショニングでは、テーブルに挿入される行内のカラム値を操作するユーザー定義式によって返される値に基づいて、パーティションが選択されます。関数は、負ではない整数値を返す MySQL の有効な式で構成できます。このタイプを拡張した LINEAR HASH も使用できます。 KEY パーティショニング このタイプのパーティショニングは、HASH によるパーティショニングに似ていま

    MySQL パーティショニングまとめ - Qiita
  • GitHub Actions を利用した NestJS アプリケーションの Google AppEngine への自動デプロイ - Qiita

    GitHub Actions を利用した NestJS アプリケーションの Google AppEngine への自動デプロイAppEngineNestJSGitHubActionsGoogleCloud この記事は NestJS Advent Calendar 2019 15 日目の記事です。 日は NestJS アプリケーションのデプロイ先として最も有力な PaaS 環境である Google AppEngine へと、新興の CI/CD サービスである GitHub Actions を利用して自動デプロイを実現してみます。 NestJS のデプロイ環境について NestJS のデプロイ先はたびたび話題にあがります。最終的にはケースバイケースなのでこれ!という形で断定はできませんが、少なくとも大抵の場合は適当な CI サービス + AppEngine で問題ないかと思います。 以下に参

    GitHub Actions を利用した NestJS アプリケーションの Google AppEngine への自動デプロイ - Qiita
  • prisma - 最速 GraphQL Server実装

    react-apollo の調査で GraphQL サーバーをさっくり実装する必要があり、 今 graphqool どうなってるんだっけ、と見に行ったら prisma が推奨されていました。 日語情報がまったくなかったので、調査した結果をまとめておきます。 prisma とはなにか GraphQL の形をした ORM MySQL/Postgre への マイグレーションヘルパー付き モデル定義からインデックス自動生成 CRUD自動生成 graphqoolの次期版? PaaS に依存せず、自分でデプロイ可能なマイクロサービス 自分も最初よくわからなかったのですが、 使ってみた感じでは、 GraphQL の形をとった ORM + Migration Helper です。 $ npm i -g prisma $ prisma init my-graphql-server # REPL で実装を選

    prisma - 最速 GraphQL Server実装
  • ソート可能なUUID互換のulidが便利そう - Qiita

    UUIDは重複しないIDを生成する手段として便利ですが、特にversion4(乱数によるUUID)を利用する場合は一意性を得るのと同時に乱雑さも得ることになりますので、UUIDに順序性を求めることができません。 UUID - Wikipedia https://ja.wikipedia.org/wiki/UUID UUID(Universally Unique Identifier)とは、ソフトウェア上でオブジェクトを一意に識別するための識別子である。UUIDは128ビットの数値だが、十六進法による550e8400-e29b-41d4-a716-446655440000というような文字列による表現が使われることが多い。元来は分散システム上で統制なしに作成できる識別子として設計されており、したがって将来にわたって重複や偶然の一致が起こらない前提で用いることができる。 UUIDだと実現できない

    ソート可能なUUID互換のulidが便利そう - Qiita
    yuzu441
    yuzu441 2020/03/08