kostumブログ

勉強したことやノート代わりのアウトプットに使っています。

エンジニアになって読んだ本

プロジェクト進行 演習で身につく要件意義の実践テクニック UMLモデリングのエッセンス 第3版 標準オブジェクトモデリング言語入門 リファクタリング リーダブルコード FrontEnd Javascriptパターン 優れたアプリケーションのための作法 BackEnd Kotlin …

Third Party Cookieの廃止 〜トラッキングプロテクションとWeb開発者への影響〜

Web

こんにちは。 今回、GoogleのChromeにおいて、Third Party Cookieをブロッキングするテストが始まるという記事を見て、どうゆうことなのか気になったので、色々と調べてみました。 ※ 以下の内容については、私が独自で調べた結果を記載しています。私自身、…

Next.js + Storybook(Webpack5) + TypeScriptでsvgファイルを表示する

環境 技術 バージョン React.js ^18 Next.js 14.0.3 Storybook ^7.6.6 svgr ^8.1.0 Webpack @ Storybook 5 問題 Storybookを起動すると、ビルドは成功するが、Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/publi…

Vue Fes Japan 2023に行ってきました

vuefes.jp 2023/10/28に、Vue.jsのカンファレンスであるVue Fes Japan 2023に参加してきました。 こういった技術カンファレンスに参加するのは、(エンジニアとしては)初めてなので、学んだこと、感じたことを皆さんに共有できれば良いかな、と思います。 …

Dockerを知る③ Language-specific guides

目次 序 前の記事 序 言語別のスタートガイドでは、開発環境のセットアップから、Dockerを使用した言語固有のアプリケーションのコンテナ化を開始するまでのプロセスを解説。 新しいDockerfileを作成する方法、Dockerイメージに何を含めるのか、Dockerイメー…

Dockerを知る② Get started

目次 1. Getting started チュートリアルを始める Docker ダッシュボード コンテナとは コンテナイメージとは 2. サンプルアプリケーション アプリの取得 アプリのコンテナイメージのビルド アプリケーションコンテナの起動 3. アプリケーションの更新 古い…

Dockerを知る① Docker overview

目次 Docker platform 何ができるのか アプリケーションの高速かつ安定したデリバリー レスポンシブなデプロイメントとスケーリング 同一ハードウェアでより多くのタスクを実行可能 アーキテクチャ Docker デーモン(dockerd) Docker クライアント(docker…

Web Storage APIを知る②

前の記事 kostum.hatenablog.jp 目的 Web Storage APIの仕様を知る。 結果 基本概念 Storageオブジェクトは、keyとvalueの組み合わせで、ページを読み込んでも存在し続ける。 keyは常に文字列で、これらにアクセスするには、オブジェクトと同様に、またはSto…

Web Storage APIを知る①

目的 Web Storage APIの仕様を知る。 結果 Web Storege API Coookieを使用するよりも直感的な方法で、keyと値のペアを保存できる仕組み Web Storageには以下の2つの仕組みがある。 sessionStorage ページのセッション中(ページの読み込みや復元を含む、ブ…

Cookieを知る

目的 Cookieの仕様を知る。 結果 Cookie サーバーがブラウザに送信するデータ ブラウザーに保存される その後のリクエストと共に同じサーバーへ送信される 一般的には2つのリクエストが同じブラウザから送信されたものであるかを知るために使用される 以下…

docsifyを触る②

前の記事 kostum.hatenablog.jp 目的 docsifyでドキュメントのページを作成する。 結果 ページの作成 ディレクトリの構造に合わせて、URLパスが生成されます。 サイドバーの作成 自分で作成したサイドバーを使いたい場合、_sidebar.mdをdocs配下に作成し、in…

docsifyを触る①

目的 docsifyを使って、ドキュメントをサイト生成する。 結果 docsifyとは ドキュメントをウェブサイト生成する。 GitBookのように、静的なHTMLファイルを生成するのではなく、マークダウンを読み込み、パースし、ウェブサイト上に表示する。 特長 HTMLをビ…

project Euler 023

環境 javascript 問題 完全数とは, その数の真の約数の和がそれ自身と一致する数のことである. たとえば, 28の真の約数の和は, 1 + 2 + 4 + 7 + 14 = 28 であるので, 28は完全数である. 真の約数の和がその数よりも少ないものを不足数といい, 真の約数の和が…

project Euler 022

環境 javascript 問題 5000個以上の名前が書かれている46Kのテキストファイル names.txt を用いる. まずアルファベット順にソートせよ. のち, 各名前についてアルファベットに値を割り振り, リスト中の出現順の数と掛け合わせることで, 名前のスコアを計算す…

project Euler 021

環境 javascript 問題 d(n) を n の真の約数の和と定義する. (真の約数とは n 以外の約数のことである. )もし, d(a) = b かつ d(b) = a (a ≠ b のとき) を満たすとき, a と b は友愛数(親和数)であるという. 例えば, 220 の約数は 1, 2, 4, 5, 10, 11, 20, 2…

project Euler 020

環境 javascript 問題 n × (n - 1) × ... × 3 × 2 × 1 を n! と表す. 例えば, 10! = 10 × 9 × ... × 3 × 2 × 1 = 3628800 となる.この数の各桁の合計は 3 + 6 + 2 + 8 + 8 + 0 + 0 = 27 である. では, 100! の各位の数字の和を求めよ. 注: Problem 16 も各位…

project Euler 019

環境 javascript 問題 次の情報が与えられている. 1900年1月1日は月曜日である. 9月, 4月, 6月, 11月は30日まであり, 2月を除く他の月は31日まである. 2月は28日まであるが, うるう年のときは29日である. うるう年は西暦が4で割り切れる年に起こる. しかし, …

project Euler 018 ❌

解けなかったよ。。 時間が出来たら、解答を見て理解する。

project Euler 017

環境 javascript 問題 1 から 5 までの数字を英単語で書けば one, two, three, four, five であり, 全部で 3 + 3 + 5 + 4 + 4 = 19 の文字が使われている. では 1 から 1000 (one thousand) までの数字をすべて英単語で書けば, 全部で何文字になるか. 注: 空…

project Euler 016

環境 javascript 問題 215 = 32768 であり, 各位の数字の和は 3 + 2 + 7 + 6 + 8 = 26 となる. 同様にして, 21000 の各位の数字の和を求めよ. 考え方 21000を計算する(bigint型)。 計算結果の各位の数字を取り出す 和を計算する コード let two = BigInt(2…

project Euler 015

環境 javascript 問題 2×2 のマス目の左上からスタートした場合, 引き返しなしで右下にいくルートは 6 つある. では, 20×20 のマス目ではいくつのルートがあるか. 考え方 最短経路の算出の仕方は、例の場合は、4C2 = (4 * 3) / (2 * 1) 20×20の場合は、40C20…

project Euler 014

環境 javascript 問題 正の整数に以下の式で繰り返し生成する数列を定義する. n → n/2 (n が偶数) n → 3n + 1 (n が奇数) 13からはじめるとこの数列は以下のようになる. 13 → 40 → 20 → 10 → 5 → 16 → 8 → 4 → 2 → 1 13から1まで10個の項になる. この数列は…

project Euler 013

環境 javascript 問題 以下の50桁の数字100個の合計の上から10桁を求めなさい。 37107287533902102798797998220837590246510135740250 46376937677490009712648124896970078050417018260538 74324986199524741059474233309513058123726617309629 91942213363…

project Euler 012

環境 javascript 問題 三角数の数列は自然数の和で表わされ, 7番目の三角数は 1 + 2 + 3 + 4 + 5 + 6 + 7 = 28 である. 三角数の最初の10項は: 1, 3, 6, 10, 15, 21, 28, 36, 45, 55, ... となる. 最初の7項について, その約数を列挙すると, 以下のとおり. 1…

project Euler 011

環境 javascript 問題 下の 20×20 の格子のうち, 斜めに並んだ4つの数字が赤くマークされている. 08 02 22 97 38 15 00 40 00 75 04 05 07 78 52 12 50 77 91 08 49 49 99 40 17 81 18 57 60 87 17 40 98 43 69 48 04 56 62 00 81 49 31 73 55 79 14 29 93 7…

project Euler 010

環境 javascript 問題 10以下の素数の和は 2 + 3 + 5 + 7 = 17 である. 200万以下の全ての素数の和を求めよ. 考え方 1 ~ 200万まで数え上げる 数え上げ数を 3 ~ 数え上げ数未満までの数字で剰余を計算する 剰余が0になった時、次の数え上げ数を計算する 剰余…

project Euler 009

環境 javascript 問題 ピタゴラス数(ピタゴラスの定理を満たす自然数)とは a < b < c で以下の式を満たす数の組である. a^2 + b^2 = c^2 例えば, 32 + 42 = 9 + 16 = 25 = 52 である. a + b + c = 1000 となるピタゴラスの三つ組が一つだけ存在する.これらの…

project Euler 008

環境 javascript 問題 次の1000桁の数字のうち, 隣接する4つの数字の総乗の中で, 最大となる値は, 9 × 9 × 8 × 9 = 5832である. 73167176531330624919225119674426574742355349194934969835203127745063262395783180169848018694788518438586156078911294949…

project Euler 007

環境 javascript 問題 素数を小さい方から6つ並べると 2, 3, 5, 7, 11, 13 であり, 6番目の素数は 13 である. 10001 番目の素数を求めよ. 考え方 配列を作成し、10001 番目のインデックスを求めることで答えを得る while 文で素数を取り出し、1 の配列に格納…

project Euler 006

環境 javascript 問題 最初の10個の自然数について, その二乗の和は, 12 + 22 + ... + 102 = 385 最初の10個の自然数について, その和の二乗は, (1 + 2 + ... + 10)2 = 3025 これらの数の差は 3025 - 385 = 2640 となる. 同様にして, 最初の100個の自然数に…