スポンサーリンク
CSS

CSS Tips | 超実務コアCSSテクニック:レイアウト基礎 - Grid 2カラム

Grid 2カラムを理解すると「左右にきれいに分けるレイアウト」が一瞬で作れるCSS Grid の 2 カラムレイアウトは、「左に画像・右にテキスト」「左にラベル・右に入力欄」「2カラムのカード一覧」...
CSS

CSS Tips | 超実務コアCSSテクニック:レイアウト基礎 - gapプロパティ

gap を理解すると「要素間の余白管理」が一気にシンプルになるgap は、Flexbox や Grid で 「要素同士の間隔」だけをまとめて管理できるプロパティです。今まで margin-right ...
CSS

CSS Tips | 超実務コアCSSテクニック:レイアウト基礎 - flex-basis戦略

flex-basis を理解すると「初期幅の戦略」が一気に上手くなるflex-basis は Flexbox の中でも、「要素が最初にどれくらいの幅を取るか」を決めるプロパティです。flex-grow...
CSS

CSS Tips | 超実務コアCSSテクニック:レイアウト基礎 - flex-shrink制御

flex-shrink を理解すると「狭くなったときの振る舞い」をコントロールできるflex-shrink は、コンテナが狭くなったときに「どの要素をどれだけ縮めるか」を決めるプロパティです。flex...
Ruby

Ruby | 2週間で身につく、アプリを作りながら学ぶRubyの基本 - 7日目

7日目のゴールとテーマ7日目のテーマは「名簿アプリを“ちょっと賢く”する:検索と並べ替え、そして入力ミスへの対応」です。6日目までで、Person クラス+配列+メニューで、かなりアプリらしい形になり...
Ruby

Ruby | 2週間で身につく、アプリを作りながら学ぶRubyの基本 - 6日目

6日目のゴールとテーマ6日目のテーマは「Personクラスを“アプリっぽく”動かす:メニューで操作できる名簿アプリ」です。5日目で「Person という型」を作り、person.introductio...
Ruby

Ruby | 2週間で身につく、アプリを作りながら学ぶRubyの基本 - 5日目

5日目のゴールとテーマ5日目のテーマは「ハッシュから一歩進んで、“自分の型(クラス)”を作る」です。4日目までは、1人分の情報をハッシュで表現していました。今日はそこから一歩進めて、「人」を表す Pe...
Ruby

Ruby | 2週間で身につく、アプリを作りながら学ぶRubyの基本 - 4日目

4日目のゴールとテーマ4日目のテーマは「1人分の情報を“ひとまとまりのデータ”として扱う」です。3日目までは「自己紹介文=ただの長い文字列」として扱っていました。今日はそこから一歩進めて、1人分の情報...
Power Query M Formula Language

Power Query 実務テンプレ | データ取込・更新系:フォルダ内Excel一括取込

ゴールのイメージをそろえる今回のテーマは「フォルダの中にある複数の Excel ファイルを、Power Query で“まとめて一括取込して、1つの表に縦に並べる”実務テンプレ」を、初心者でも腹落ちす...
Power Query M Formula Language

Power Query 実務テンプレ | データ取込・更新系:フォルダ内Excel一括取込

ゴールのイメージを先にそろえる今回のテーマは「フォルダの中にある複数の Excel ブックを、Power Query で一括取込して、毎回[更新]ボタンだけで最新状態に保てる“実務テンプレ”を作ること...
Power Query M Formula Language

Power Query 実務テンプレ | データ取込・更新系:フォルダ内CSV一括取込

ゴールのイメージを先にそろえる今回のテーマは「フォルダに入っている複数の CSV を、Power Query で一括取込して、毎回[更新]ボタンだけで最新状態に保てる“実務テンプレ”を作ること」です。...
Power Query M Formula Language

Power Query 実務テンプレ | データ取込・更新系:Excel特定セル範囲取込

ゴールのイメージを先にそろえる今回のテーマは「Excelブックの中から、シート全体ではなく“特定のセル範囲だけ”を Power Query で安定して取り込む実務テンプレ」です。たとえば「B3:F20...
Ruby

Ruby | 2週間で身につく、アプリを作りながら学ぶRubyの基本 - 3日目

3日目のゴールとテーマ3日目のテーマは「“たまるデータ”を扱う:配列でまとめて持つ」です。1〜2日目で、1人分・複数人分の自己紹介を作れるようになりました。今日はそこから一歩進めて、複数人分の自己紹介...
Ruby

Ruby | 2週間で身につく、アプリを作りながら学ぶRubyの基本 - 2日目

2日目のゴールとテーマ2日目のテーマは「同じ処理を“部品(メソッド)”にして、何度でも使い回せるようにする」です。1日目で作った自己紹介アプリは、1人分の自己紹介を作るものでした。今日はそこから一歩進...
Ruby

Ruby | 2週間で身につく、アプリを作りながら学ぶRubyの基本 - 1日目

1日目のゴールとテーマ1日目のテーマは「Rubyで“しゃべるアプリ”を作る」です。いきなり難しいことはやりません。まずは、画面に文字を出すキーボードから入力を受け取るその入力を使って、ちょっと“会話っ...
JavaScript

JavaScript Tips | 文字列ユーティリティ:業務用 - 桁数制限

何をしたいユーティリティか:「桁数制限」ここでの「桁数制限」は、数値や数値文字列の「桁数」をルール通りに制限するユーティリティです。例えば、こんな要件がよくあります。金額は「整数 9 桁まで、小数 2...
JavaScript

JavaScript Tips | 文字列ユーティリティ:業務用 - 小数丸め

何を作るのか:「小数丸め」ユーティリティここで作りたいのは、「小数点以下を指定桁数で丸める」処理を、毎回バラバラに書かず、分かりやすい関数にまとめたものです。「四捨五入」「切り上げ」「切り捨て」を、業...
JavaScript

JavaScript Tips | 文字列ユーティリティ:業務用 - 通貨変換表示

何をしたいユーティリティか:「通貨変換表示」ここで目指すのは、単に「金額にカンマを付ける」だけではなく、「通貨単位や通貨コードを付けて、人間が見て意味が分かる形で表示する」ユーティリティです。たとえば...
JavaScript

JavaScript Tips | 文字列ユーティリティ:業務用 - カンマ付与

何をしたいユーティリティか:「カンマ付与」ここで作りたいのは、数値や数値っぽい文字列に「3 桁ごとのカンマ」を付けるユーティリティです。1000 → 1,0001234567 → 1,234,567-...
JavaScript

JavaScript Tips | 文字列ユーティリティ:業務用 - 金額フォーマット

何を作るのか:「業務で使える金額フォーマット」ここで目指すのは、「数値を“人間が業務で読みやすい金額表示”に変換するユーティリティ」です。例えば、こんな変換を安定して行いたいイメージです。format...
Java

Java Tips | コレクション:zip処理

zip処理は「2つの列を“ペアの列”にする」技zip(ジップ)処理は、「2つのコレクションを、同じ位置同士でペアにしていく」操作です。名前のリスト点数のリストこの2つを「名前+点数」のペアにしたい——...
Java

Java Tips | コレクション:インデックス付きループ

インデックス付きループは「位置情報をちゃんと意識して回す」技for (T x : list) の拡張 for 文はシンプルで読みやすいですが、「何番目か(インデックス)」が欲しくなった瞬間に、ちょっと...
Java

Java Tips | コレクション:ページング

ページングは「長い一覧を“ちょうどいい一枚”に切り分ける」技業務システムでは、「検索結果が1万件あります」とか普通に起こります。でも画面に1万件は出せませんよね。だから「1ページ20件」「3ページ目を...
Java

Java Tips | コレクション:Stream例外ラップ

「Stream例外ラップ」は「チェック例外を“Streamで扱える形”に着替えさせる」技Stream の map や forEach に渡すラムダは、基本的に「チェック例外を投げられない」制約がありま...
Java

Java Tips | コレクション:並列Stream制御

並列Stream制御は「速くしたいけど、暴れさせたくない」技Stream にはstream()(普通の順次処理)とparallelStream()(並列処理)の2つの世界があります。「CPUコアを全部...
JavaScript

JavaScript Tips | 文字列ユーティリティ:URL 系 - ファイル名取得

何をしたいユーティリティか:「ファイル名取得」ここで作りたいのは、URL やパス文字列から「ファイル名だけ」を取り出す小さな関数です。例えば、こういうイメージです。 → "logo.png"/down...
JavaScript

JavaScript Tips | 文字列ユーティリティ:URL 系 - 拡張子取得

何をしたいユーティリティか:「拡張子取得」ここで作りたいのは、URL やパス文字列から「拡張子(.png や .js など)」だけを取り出す小さな関数です。 → "png"/scripts/app.m...
JavaScript

JavaScript Tips | 文字列ユーティリティ:URL 系 - パス結合

「パス結合」で何を楽にしたいのか「パス結合」は、URL のパスを安全にくっつけるユーティリティです。"/api" と "users" を結合して "/api/users" にしたい"/api/" と ...
JavaScript

JavaScript Tips | 文字列ユーティリティ:URL 系 - ハッシュ削除

「ハッシュ削除」で本当にやりたいことここでの「ハッシュ削除」は、URL の # 以降(フラグメント)をきれいに取り除いた新しい URL を作るユーティリティのことです。例えば、こんなことをしたい場面が...
JavaScript

JavaScript Tips | 文字列ユーティリティ:URL 系 - ハッシュ取得

「ハッシュ取得」で何を取りたいのかここでの「ハッシュ取得」は、URL の # 以降の部分(フラグメント)を、きれいに取り出して使いやすくするユーティリティのことです。例えば、こんな URL を考えます...
C#

日本の企業・官公庁が公開している無料API

日本では政府・自治体・企業が公開している無料APIが多数あります。実務や個人開発でよく使われるものを、カテゴリ別に整理して紹介します。官公庁・政府系API統計・経済データ1. 総務省統計局 – e-S...
JavaScript

JavaScript Tips | 文字列ユーティリティ:URL 系 - クエリ削除

「クエリ削除」で本当にやりたいこと「クエリ削除」は、URL の ? 以降に付いているパラメータのうち、いらないものだけを取り除いて、新しい URL を作り直す処理です。例えば、こんなことをやりたい場面...
JavaScript

JavaScript Tips | 文字列ユーティリティ:URL 系 - クエリ取得

「クエリ取得」で何をしたいのかをはっきりさせるここでの「クエリ取得」は、URL の ? 以降(クエリ文字列)から、パラメータを取り出して使いやすい形にすることです。/search?q=JavaScri...
JavaScript

JavaScript Tips | 文字列ユーティリティ:URL 系 - クエリ生成

まず「クエリ生成」で何を自動化したいのかここで言う「クエリ生成」は、オブジェクト(連想配列)から ?key=value&key2=value2 みたいなクエリ文字列を、安全に・楽に作るユーティリティの...
JavaScript

JavaScript Tips | 文字列ユーティリティ:URL 系 - URL デコード

「URL デコード」で何を取り戻したいのかURL デコードは、URL の中で「%E3%81%82」みたいに変換されてしまった文字を、人間が読める元の文字列に戻すことです。エンコードは「安全に送るための...
JavaScript

JavaScript Tips | 文字列ユーティリティ:URL 系 - URL エンコード

まず「URL エンコード」で何を守りたいのかURL エンコードは、「URL の中に入れてはいけない(入れると誤解される)文字を、安全な形に変換すること」です。日本語やスペース、? や & などの記号を...
CSS

CSS Tips | 超実務コアCSSテクニック:レイアウト基礎 - flex-grow活用

flex-grow を理解すると「余った幅の配分」が思い通りになるflex-grow は、Flexbox の中でも 「余ったスペースをどの子要素にどれだけ渡すか」 を決めるプロパティです。「このボック...
CSS

CSS Tips | 超実務コアCSSテクニック:レイアウト基礎 - align-items全パターン

align-items を理解すると「縦方向の揃え」が一気に気持ちよくなるalign-items は Flexbox の中で、「交差軸(メイン軸と直角の方向)の揃え方」を決めるプロパティです。横並びな...
CSS

CSS Tips | 超実務コアCSSテクニック:レイアウト基礎 - justify-content全パターン

justify-content を理解すると「横方向の配置」が思い通りになるjustify-content は Flexbox の中でも、「子要素を横方向にどう並べるか」を決める超重要プロパティです。...
CSS

CSS Tips | 超実務コアCSSテクニック:レイアウト基礎 - Flexbox縦並び

Flexbox 縦並びを理解すると「縦方向レイアウト」が一気に整理されるFlexbox は横並びだけじゃなく、縦方向のレイアウト(縦積み・上下の余白調整・フッターを下に押し下げる)にもめちゃくちゃ強い...
CSS

CSS Tips | 超実務コアCSSテクニック:レイアウト基礎 - Flexbox横並び

Flexbox 横並びを理解すると「並べる・揃える・余白を配る」が一気に楽になる横並びレイアウトは、ナビメニュー、カード一覧、ボタンの並びなど、どのサイトでも必ず出てきます。Flexbox を使うと、...
C#

C# Tips | コレクション・LINQ:件数カウント

はじめに:「件数カウント」は“システムの現状を数字でつかむ道具”業務システムでは、常に「いま何件あるか?」が問われます。未処理の件数エラー件数今日登録された件数これをコードで表現するのが「件数カウント...
C#

C# Tips | コレクション・LINQ:グルーピング

はじめに:「グルーピング」は“バラバラの明細を、かたまりにまとめる技”業務システムでは、こんなことをよくやります。「部署ごとに社員をまとめたい」「顧客ごとに売上を集計したい」「日付ごとにアクセス数を集...
C#

C# Tips | コレクション・LINQ:フィルタリング

はじめに:「フィルタリング」は“欲しいデータだけをすくい取る作業”業務システムの一覧画面って、だいたいこういう条件がありますよね。「部署=営業だけ」「状態=未処理だけ」「金額が 10,000 円以上だ...
C#

C# Tips | コレクション・LINQ:ページング

はじめに:「ページング」は“データを一口サイズに切り分ける技”業務システムの一覧画面で、「1ページ 20件」「次へ」「前へ」といった UI をよく見ますよね。これが「ページング」です。データは何千件・...
C#

C# Tips | コレクション・LINQ:カスタムソート

はじめに:「カスタムソート」は“業務ルールをそのまま並び順にする技”「優先度は High → Middle → Low の順」「ステータスは 未処理 → 処理中 → 完了 の順」「部署コードは A, ...
C#

C# Tips | コレクション・LINQ:逆順ソート

はじめに:「逆順ソート」は“優先度の高いものを先頭に持ってくる技”業務システムでは「新しい順」「金額の大きい順」「重要度の高い順」のように、“大きいほう・新しいほうを先頭にしたい”場面がとても多いです...
C#

C# Tips | コレクション・LINQ:ソート

はじめに:「ソート」は“人間が読みやすい順番に並べ替える作業”業務システムでは、一覧画面・帳票・CSV 出力など、「同じデータでも、どの順番で並んでいるか」がものすごく大事になります。社員一覧なら「社...
C#

C# Tips | コレクション・LINQ:重複除去

はじめに:「重複除去」は“データをきれいに整えるフィルター”業務システムでは、同じ ID のレコードが二重に入っていたり、同じメールアドレスが何度も出てきたりと、「重複データ」がよく紛れ込みます。この...
C#

C# Tips | コレクション・LINQ:空List生成

はじめに:「空List生成」は“安全な初期値”を手に入れるテクニック業務コードでよくあるパターンとして、List<string> names = null;// ここで落ちるint count = n...
C#

C# Tips | コレクション・LINQ:null安全List

はじめに:「null安全List」は“落とし穴を先に埋めておく道具”業務コードでありがちな例として、List<string> names = null;// ここで落ちるforeach (var n ...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - 複数背景指定

複数背景指定を理解すると「1つの要素に何層ものデザイン」を重ねられるCSS の 複数背景指定(multiple backgrounds) は、1つの要素に 複数の背景画像・グラデーション・パターンを重...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - background-clip:text

background-clip:text を理解すると「文字にグラデーションを流し込む」表現ができるbackground-clip: text は、CSS の中でも“映えるデザイン”を作るための強力な...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - 背景クリッピング

background-clip(背景クリッピング)を理解すると「背景の見え方」を自在にコントロールできる背景クリッピング(background-clip)は、背景色や背景画像を“どこまで表示するか”を...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - outline活用

outline を使いこなすと「枠線とは違う強調」ができるoutline は border と似ていますが、ボックスモデルの外側に描画される“外枠”です。フォームのフォーカスリング、アクセシビリティ対...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - box-shadowパターン

box-shadow パターンを理解すると「立体感・奥行き・質感」が一気にプロレベルになるbox-shadow は、ただの影ではありません。UI の雰囲気・奥行き・軽さ・重さ・浮遊感をコントロールする...
Java

Java | Web 基礎・HTTP・REST:Web 全体像 - SPA と MPA

SPA と MPA を一言でいうとSPA は Single Page Application(シングルページアプリケーション) の略で、「最初に 1 つのページを読み込んだあと、画面の中身だけを Ja...
Java

Java | Web 基礎・HTTP・REST:Web 全体像 - フロントエンド / バックエンド

フロントエンド / バックエンドを一言でいうとフロントエンドは「ユーザーの目に見える“表側”」。バックエンドは「見えないところで動いている“裏側の頭脳と心臓”」。あなたが Java で書くのは、基本的...
Java

Java | Web 基礎・HTTP・REST:Web 全体像 - 3 層アーキテクチャ

3 層アーキテクチャを一言でいうと3 層アーキテクチャは、「Web アプリを 3 つの役割にきれいに分けて作ろう」という設計の型 です。プレゼンテーション層(画面・API の入り口)アプリケーション層...
Java

Java | Web 基礎・HTTP・REST:Web 全体像 - 動的コンテンツ

動的コンテンツを一言でいうと動的コンテンツは、「リクエストのたびにサーバー側で中身を“その場で作って返すコンテンツ」 です。誰がアクセスしたかいつアクセスしたかどんな条件でアクセスしたかによって、返す...
スポンサーリンク