mermaid.js はテキストベースでフローチャートなどの図を書くことのできる JavaScript 製のライブラリ・ツールです。簡単にテキストで書けて、図も綺麗に出力されるかなり良い環境だと思います。 以前 AsciiDoc との連携について記事にしましたが、この記事では mermaid.js のフローチャートについて書き方を記載します。 AsciiDoc との連携については下記記事を参考にしてください。

touchコマンドは基本的に新しいファイルを作成するときに使っている。 となると空ファイルが作られてしまうのはよろしくない。 例えば、licenseファイルをプロジェクトに含め忘れたので後から追加したいとする。 そのとき叩くのは、touch licenseもしくは、既存のプロジェクトからlicenseを探してcpをする。 ここで思い至るのは、licenseファイルの内容はほぼ変わることがない。だいたい以下のような感じである。 The MIT License (MIT) Copyright (c) akameco <akameco.t@gmail.com> (akameco.github.io) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and a

注: この記事は結構古いです Unknown にアクセスしたい。- TypeScript で外部データを型安全に読み込む。 - Qiita も見て下さい。 TypeScript にもだいぶ慣れてきた。慣れてくると間違えやすい部分もはっきりしてきた。それが Type assertions (キャスト)。Type assertions を使うと、実際のデータがどうであろうが強制的に型情報を書き換えてしまえるので、有り難い Typescript の型チェックをすり抜けてしまう。Typescript では Type assertion を使う代わりに実行時型チェックを強制する Type Guard という仕組みがあるので試してみた。 失敗例 まずは Type assertions を使ったよくある失敗例。JSON データの内容によって別の型として扱おうとしている。 interface Song {

@types/react の型定義を雰囲気で使っている皆さん、こんにちは。React コンポーネントを書くときはどの型を使い、どう書くべきか？という疑問を Twitter でお見かけし、雰囲気で使っていた私も気になったので @types/react の中身を覗いてみました。 master に入り、いよいよリリース間近な Hooks。本稿は FC(旧SFC) の話が前提です。VScode で型付けをしようとすると、似たような型が山ほど出てきて、どれを使うのが適切なのか・違いが何なのか…パッと見分かりませんね。 ReactNode ReactChild ReactElement StatelessComponent FunctionComponent JSX.Element SFC FC という訳で、こんな Props を持っているコンポーネントの各種書き方を比較、白黒ハッキリさせていきたいと

TL;DR まあぜんぜん最強ではないですが、自分好みの配色 Web サービスをつくってみました yum-yum COLOR 個人で公開まで作りきったのは初めてでしたので、色々とつまずきました そんなつまずきポイントや、 Web サービスを公開するために利用した技術などを紹介していきます ❗ なぜ配色サービス ❓ 色彩検定という資格をご存知でしょうか？ 僕はプログラマーなのに 色が好き で、この試験を受検しました。 その学習をしてる時にこんな風に思ったのです。 この色相環、これを使って配色選べたら便利じゃない？ あっ、このトーン、これを使って配色選べたら便利じゃない？？ と。 受検勉強の追い込みをしないといけないのに、そっちのけで作り始めてしまった...というわけです （一時はどうなるかと思いましたが、無事に検定は合格しましたよ 🎉 ） どんなサービスなの ❓ 使い方 色相環 と Hue

はじめてシューティングゲーム作るとき、弾の挙動ってどう動かせばよいか悩まれる方も多いと思います。 今回は、簡単な弾の挙動から始めて、最終的には「ターゲットの方向へ撃つ処理」をどのように計算するのかを説明します。 使用言語：javascript ※ゲームライブラリとして、enchant.jsというライブラリを使っています。2022年現在、使う人がほぼいない化石ライブラリとなっているのですが、計算式だけ見てもらえれば幸いです。 自分の使用予定の言語が違う場合でも、わかるように心がけているので、参考になれば幸いです。 ページ下では、実際に動作しているプログラムとソースコードが閲覧できるようになっているので、理解の一助になれば幸いです。 固定方向に撃ち続ける See the Pen 上に向かって球を打つ処理 by ほっとフクロウ(作っちゃうおじさん) (@hothukurou) on CodePe

Awesome Vim plugins from across the universe

自動ビルド＆テストツールの「Travis CI」が、エンバカデロなどを買収したIderaに買収されたことを発表。サービスはそのまま継続 コードのビルドやテストの自動実行を行う、いわゆるCIツール（継続的統合ツール）を提供する「Travis CI」が、Ideraに買収されたことを発表しました。 Ideraは日本ではあまり知名度が高くありませんが、データベース関連のツールを提供している企業で、これまでにエンバカデロやSenchaを買収してきました。 Travis CIは、Jenkinsのようにソースコードをリポジトリから取得し、ビルドしテストを実行するという一連の作業を自動的に実行するツールをサービスとして提供しています。 ソースコードのリポジトリとしてGitHubなどと簡単に連係でき、主要なプログラミング言語でのビルドやテストをサポート。リポジトリへのプルリクエストなどをトリガーにして自動的

以前、MySQLを高速化する10の方法という投稿で「EXPLAINの見方についてはいずれ解説しようと思う」と書いてしまったので、今日はその公約？を果たそうと思う。 MySQLのチューニングで最も大切なのは、クエリとスキーマの最適化である。スキーマの設計は一度決めてしまうとそのテーブルを利用する全てのクエリに影響してしまうためなかなか変更することは出来ないが、クエリはそのクエリだけを書き直せば良いので変更の敷居は低い。そして遅いクエリをなくすことは、性能を大幅に向上させるための最も有効な手段である。従って、アプリケーションの性能を向上させたいなら、まず最初にクエリのチューニングを検討するべきなのである。 最適化するべきクエリはスロークエリログやクエリアナライザで見付けられるが、ではそのようなクエリが見つかった場合にはどのように最適化すればいいのか？そのためにはまず現在どのようにクエリが実行さ

この記事は技術同人誌 Advent Calendar 13日目の記事です。技術書典5で2冊の新刊（+1冊の合同誌）を出した@mottox2が担当します。1 技術同人誌は「書けば生える」と言ってる方が多く見られるのですが、実際に書こうとなったときに「なにを書いていいかわからない」という方は多いのではないでしょうか？ この記事では、書きたい・広めたい技術に出会うヒントや切り口を紹介していきたいと思います。 前提として、ITエンジニアがテーマを見つける方法について書いています。 > 自分がやっていることから見つける自分がやっていることから見つける 一番見つけやすいのが、今自分が取り組んでいる技術をテーマにすることです。仕事でプログラミングをやっている人が取り組んでいる技術であれば、濃い内容の技術同人誌になるでしょう。 ただ、「巷に同じテーマの技術書は溢れてる」「すごい人がいるのに自分が書いていい

こんにちは、今年3月に入社したLUCRA事業部のはよんです。 こちらは Gunosy Advent Calendar 2018、13日目の記事です。 なお、昨日の記事は @大曽根さんの 社内技術ブログのはじめかたでした。 LUCRAという女性向けアプリのデザインを担当しています。 社会人1年目の時から、UI/UXデザイナーとして、ずっとアプリとウェブのデザインをしています。 今回はUIデザインにおけるKPI設定の重要性というタイトルにしていますが、Gunosyの分析に強い特徴がデザインにはどういうふうに影響されているのか、デザインだけでなくUI設計の全体的な流れについて書いていきたいと思います。入社してから自分のデザインに対する価値観も大きく変化しているので、少し個人的な話も混ぜていきますね。 入社前 1~2年目の頃はデザインの価値を信じており、こだわっていました。0.5pxのズレも見逃せ

エンジニアのjhondaです。入社して1年が過ぎました。 ターミナル上での開発作業が好きなので開発を快適に進めるために常日頃から使っているツールやエディタを抜粋して紹介します。 この手のツールは組み合わせることで更に便利になるので、組み合わせを含めた紹介となります。 筆者の会社での開発環境はMacですが、プライベートマシンのLinux上でも同じものを使えています。 筆者のターミナル環境は Alacritty + tmux です。 Alacritty Rust製ターミナルエミュレータ。GPUを使うので描画が高速。 https://github.com/jwilm/alacritty 同リポジトリより Rust製だからという理由なので趣味です。でもたしかに速い気がします。 tmux 言わずとしれた仮想端末エミュレータ。 https://github.com/tmux/tmux たいして使いこな

Transformational Software Engineering Lead your team into the future with unprecedented visibility. Details

2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 各デモはCSSのみで実装されたものもありますが、JavaScript併用もあります。 動作を見るには、「Run Pen」をクリックするか、クリック後に右上「Edit on Codepen」をクリックしてください。 まずは、ダイナミックなアニメーションが楽しいソーラーシステム。動きが斬新で、スライドなどに応用してもよさそうです。ベストビューは、Operaです。