技術ブログ一覧

経験から生まれた知識です。

2023/11/04
開発環境 MacBookPro 14インチ M2 Pro
した結果
2023/11/01
0から1、フロントエンドチーム開発tips
最初は人数がすくないですが、すくないうちになるべくドキュメンテーション化しておく。ドキュメントにのこすものディレクトリ構成 (GitHub)環境構築 (GitHub)招待するサービス一覧 (どこでも)仕様書 (google docs)テスト項目 (google…
2023/08/28
Tips
2023/08/12
AWSで詰まったこと
インスタンスを消してもスナップショット台がかかるスナップショットの保存期間を短かくするべき。 Private Subnet からネットワーク接続するときに使うNat Gateway が勝手に有効化されてめっちゃおかねかかった。自分でサブネットを設定してNat…
2023/08/11
最近のコンポーネント設計
最近、Graphql の組み合わさったフロントエンドの案件を担当しています。そのときに考えた、良い感じのコンポーネント設計について話します。 Book という型が GraphqlCodegen などのツールによって生成されているとき…
2023/06/02
AstroNvim
このブログでは、コンテナ環境に AstroNvim を導入して、NeoVim を体験してもらいます。 AstroNvim とはオールインワンの Nvim でつかいやすい状態で NeoVim がセットアップされています。カスタマイズも簡単にできるため、NeoVim…
2023/05/31
Angular"s Jamstack!!
で起動 SPAです。 JavaScriptを無効化するとなにも表示されません。 (cmd + shift + p) SSRされてDocumentがくる。Frontに表示後またJSでbootstrapしておきかえてる。それをしないのが Hydration機能。 boo…
2023/05/23
プログラマーのロマンフォントの作り方編
FiraCodeNerd Font,白源などなど... 開発者のためにいい感じのフォントを集めたセットのこと。 Git やフォルダのアイコンなど。文字コードの業界規格。文字の集合。ただの業界規格ですが、国際規格のhttps://ja.wikipedia.org…
2023/05/21
CloudFlare Pagesを使う
GitHub にリポジトリをアップして Cloudflare Pages から接続するか、wrangler cli をつかって直接デプロイする。環境変数を追加するか、等のファイルを追加する。後者が良さそう。package.json の engines で指定もできるかも。…
2023/05/17
GitHub ActionsとPlaywrightのセットアップ
で良い。 chromium もセットになったイメージなどもあるが、でブラウザはあとからインストールするのが推奨されているみたい。ヘッドレスブラウザがかなりおおきいのでキャッシュする。テストに失敗したとき、その箇所をファイルで教えてくれる。github 特有 s…
2023/04/11
hlsjsを最速で手元で動かしてみる
HLSとはHTTP Live StreamingというApple社が開発している通信プロトコルです。今回はHLSを使ってストリーミングデータを受信し扱うためのhls.jsについて紹介します。 ffmpegnpm or yarn Viteは高速なフロントエンドツールです…
2023/04/08
開発環境
MacBook Air M2 ミッドナイト, 24GB, 512GB MacStudio M1 Max SKKを使っています。 MacではAquaSKKを、Vimではvim-skk/skkeletonを使っています。形態素解析に頼らない変換が特徴です。 Alacritty…
2023/04/06
SKKを導入した
MacにAquaSKK,Vimにvim-skk/skkeletonを導入しました。 SKKとは日本語入力をいい感じにするライブラリです。普通のIMEの場合かな→漢字の変換は形態素解析を用いています。 SKKは形態素の区切りは人間に行わせ、変換のみすることで、誤変換を防いだり…
2023/04/01
tmuxとnvimの背景を透過する
tmux側基本的にtmuxの背景色を指定しなければターミナルと同じになります。ならないときはtmuxの色をdefaultにします。 nvim側それぞれのプラグインでhighlightが設定されている場合があるので頑張って探して上書きします。探す方法はで一覧、で一つづつ…
2023/02/22
tmuxのプラグインを作るときのメモ
tmuxの起動時にサーバーを立てる tmuxが終了したらプロセスを止める
2023/02/20
ターミナルの右下に今聞いている曲を表示する
Tmuxの右下にブラウザのYoutubeMusicで聞いている曲名を表示します。 Tmuxはstatus-lineをカスタムして独自のテキストを表示できます。曲名はAppleScriptを使って取得しました。 App…
2023/02/04
フォントを作る
自作フォントをやっていきます。準備 fontforge というアプリケーションを使います。 mac 用は以下のリンクからダウンロードできました。 https://fontforge.org/en-US/downloads/mac-dl/ 作成 fontforge…
2023/01/31
プログラミング言語を作る・その1
プログラムはのように変換されている。 JavaScriptを題材にASTについて学ぶ。 JavaScriptをASTに変換するプログラムとしてesprimaがある。実際にesprimaを使って簡単なコードを変換する。この結果は以下のようになる。変数宣言を行ったのでt…
2023/01/23
NestJSとWebSocket
NestJSでWebSocketを扱うためにはとが必要です。ついでにも入れておきましょう。メッセージをブロードキャストするだけの処理は以下のようになります。 Gatewayの意味があまりわかっていませんがデコレ…
2023/01/19
TypeScript Challenges
TypeScriptを使ってさまざまな型を作る競技です。 https://github.com/type-challenges/type-challenges/blob/main/README.ja.md このブログではTypeScript…
2023/01/18
websocketとrxの相性が良い
websocketとrxjsについて知っている方は直感でこの二つの相性が良いことがわかると思いますが、実際試してみたらめっちゃ良かったという記事です。 socket.ioはwebsocketを扱うほぼデファクトスタンダードとなっているライブラリです…
2023/01/15
socket.io v4のメモ
Room https://socket.io/docs/v4/rooms/ Postman Postmanを使ってSocketioの接続確認が可能。 MessageタブからtextデータやJSONデータを送信、Eventsタブで購読するイベントを指定する。
2023/01/13
Gatsby mdxにReactコンポーネントを配置する
カウンターを作りました！↓ 任意の場所にコンポーネントを作成します。 mdx内で使うコンポーネントなのでPropsとかは気にせず全マシマシで作りました。 MDXProviderに渡すとつかえるようになります。…
2023/01/12
AudioWorkletとAudioWorkletProcessorを使って音声のビジュアライゼーション
AudioAPI関連の処理は基本的にメインスレッド外で行われます。(重要) なのでカスタムしたProcessorをつくるときはProcessorからメインスレッドに通知する仕組みが必要です。そのためにport.postMessageがあります。カスタムプロセッサーには音声処理…
2023/01/11
Tensorflowjsで連立方程式を解く
{x+y=2x+3y=4\begin{cases} x + y = 2 \\ x + 3y = 4 \end{cases}{x+y=2x+3y=4 の解は、以下の行列を解くと得られます。 (1113)(xy)=(24)\begin{pmatrix} 1 & 1 \\ 1…
2023/01/10
Gatsby mdxにkatexを導入
Lift(LLL) can be determined by Lift Coefficient (CLC_LCL) like the following equation. L=12ρv2SCLL = \frac{1}{2} \rho v^2 S C_LL=21ρv2SCL…
2023/01/07
Gatsby Slice APIをTypeScriptで
Slice APIとは Gatsby v5で追加されたページ生成を高速化するためのAPIです。ページごとの共通コンポーネントをSliceしてビルドを高速します。 HeaderをSliceする例として今日つコンポーネントのHeaderをSliceします。 HeaderCompo…
2022/12/30
2022に学んだ技術
今年一年を振り返って気付けば12月30日の21時35分です。2023年になる前に今年学んだ技術を振り返ります。今年は高専を卒業し、新社会人として働き始めた年です。個人開発でこの技術触った！というのよりも業務を通して初めて触った技術がたくさんある印象です…
2022/12/29
ビジュアルリグレッションテストを導入する
ビジュアルリグレッションテストとはウェブサイトの見た目が崩れていないことを保証するテストです。ビジュアルリグレッションテスト(以降VRTと呼ぶ)を導入することで新機能やリファクタリングによるデザインのデグレを防止でき、安定したリリースが可能になります。 VRTの仕組み主流の…
2022/12/25
WebSocketメモ
client クライアントは標準のWebSocket使うのがいい。 servier expressでやる場合はを使うと楽。 socket.io socket.ioを使うならサーバーもフロントもsocket.ioにした方がいい…
2022/12/22
limaつかってみた
インストール VMの作成ここでどのテンプレートから作るか聞かれる。今回はubuntu-ltsにした。 VMにはいる nginxいれたりしました。メモ勝手にポートフォワーディングしてました。 vmの80番にnginxを立てると…
2022/11/20
Nuxt3のメモ
先日Nuxt3が公開されたので触ってみたメモです。データ取得等を使ってSSR時にデータ取得ができる。 API フォルダに任意のAPIを生やせる。 composable カスタムフック等を入れると自動でインポートされて便利。 components コンポーネントを入れる…
2022/11/07
Angular Testのメモ
でモックできる RoutetTestingModuleのようにモックモジュールを作成してimportすることで解決できる RouterTestingModuleを使う
2022/10/29
sedのメモ
環境依存 sedはLINUX環境とMac環境で挙動が変わる。そのため変なバグに追われないようにするにはの導入がおすすめされる。ファイルの特定の箇所に文字を挿入する「あいさつ」の次の行に「こんにちは！」を挿入する。
2022/10/28
Playwrightのメモ
全体の設定に記述する。 Chromeの起動オプションスクリプトからの起動も可能。ローカルストレージ、Cokkieの設定スクリプトからの設定も可能。要素があったときは特定の処理をする「閉じる」ボタンが存在したときはクリックする。ボタンが押せなかったときはチェ…
2022/10/25
AppleScriptとRaycastの組み合わせで優勝する
初めに RaycastのショートカットとAppleScriptを使ってChromeのURLをマークダウン形式で取得するスクリプトを作成します。 AppleScript
2022/10/04
imagemagickのメモ
公式ドキュメントはこちら。 https://imagemagick.org/script/command-line-options.php
2022/10/03
ffmpegのメモ
は可変になる。
2022/08/26
音声をなみなみさせる
マイクで入力した音声をフーリエ変換してcanvasに表示するデモです。
2022/08/25
JavaScriptのprototypeを使う
prototypeを使えばオブジェクトを拡張できる。
2022/07/31
WASM入門
WebAssemblyとはブラウザ上で動く仮想マシンを動かすための仕様のこと。 WebAssemblyアセンブリ言語の例 | 命令語 | 16進数 | | ------------ | ---- | | get_local $n | 20 | | i32…
2022/07/25
zig言語
インストールプロジェクトの作成ファイルを使ってビルドする。自分でビルドコマンドを実行してもよい。実行ハローワールドクイックソート wasm コンパイルする。 HTMLから読み込む。 wasmの中身。
2022/07/24
DjangoでGraphQLサーバーの作成
Web+DB PRESS vol.123で勉強した内容です。 pip使い方 pipはパッケージ同士のバージョン管理が弱いのであまり使いたくない。 djangoの使い方を経由して操作する。にプロジェクトの設定がある。等にアプリケーションのモデルを実装する。アプリ…
2022/07/23
Angular Routerの手引き書
導入前提画面遷移 JavaScriptから遷移する方法。 HTMLから遷移する方法。ルーティングの設定表示させる箇所を決める。 URLを設定する。 URLを扱う URLを生成する UrlTreeを作成。 UrlTreeから文字列への変換。マッチングを…
2022/07/22
imageタグの最適化
拡張子が対応しているブラウザに一番最適な画像を出力する方法。
2022/06/30
HTTP通信まとめ
TCPTLS 問題点 1回の接続で連続してリクエストを送信するKeep-Alive機能があった。しかしリクエストがきた順番にレスポンスを返す必要があった。そのためHead-of-Line-Blockingという通信待ち状態が発生した。 BinaryHPACK…
2022/06/23
ngrxつかってみた
状態管理ライブラリの一種でAngular版のReduxです。 Rxとついている通りRxJsを使って状態にアクセスします。 Angularはサービスがシングルトンなのでサービス内に状態を定義できるが、状態が多くなると管理が複雑になりバグの原因になる…
2022/06/13
M5PaperとRaspberry Piを連携
概要図をMermaid記法で記述する。
2022/06/09
配信周りでよく見る単語
ffmpeg (配信のための優秀なコマンド、動画・音声編集もできる)x264 (動画をH.264ビデオストリームへエンコードするプログラム)H.264 (動画圧縮規格、MPEG-4 AVCともいう, フレーム間予測)エンコード (圧縮…
2022/06/01
Core Web Vitals
LCP (Largest Contentful Paint) ビューポート内で最大のコンテンツが画面にレンダリングされるタイミングを測定している。 | time(ms) | score | | -------- | ----------------- |…
2022/05/26
Gatsbyでよく使うプラグイン
gatsby-plugin-image 画像を最適化するためのプラグイン。依存関係 gatsby-plugin-sharpgatsby-transformer-sharpgatsby-source-filesystem gatsby-background-image…
2022/05/25
でかいコードよむときどうする？
vscode vimっぽい画面に入ったときはで検索する。で変数名・関数名を検索。でファイル名を検索。でファイル内検索。各関数にをつけてデバッグ。
2022/05/24
git worktree
そのままブランチ切り替えちゃう addしてないファイルはブランチ移動時について来る。 stashしちゃう便利。間違えてstash消えることもある。 stash名考えるのがめんどくさい。 worktreeをつくる worktreeを使って予め複数環境用意しておく。複数clo…
2022/05/23
ビルドツールを知る
バンドラ (bundler) コードの圧縮ツールをバンドラといいます。複数ファイルを1つのファイルに圧縮します。 webpackrollupesbuildsnowpackparcel トランスパイラ (transpiler) コードの変換ツールをトランスパイラとい…
2022/02/16
SQLコマンドとかMySQLの操作
ログインデータベースの確認データベースの作成使用するデータベースの洗濯テーブルの確認テーブルの作成データ型 INT 整数型 125FLOAT 浮動小数点数型 13.234VARCHAR 可変長文字列 'test'DATE 日付 '2019-11…
2021/12/31
2021年の振り返り
福岡ビジネスデジタルコンテンツ賞九州アプリチャレンジキャラバンからのシード出場で見事ヤング賞を受賞したものの、ビジコンがトラウマになりました。ハックツハッカソンブラキオカップハッカソン期間は色々あったもののハックツに加入するきっかけにもなりました。ハックツ…
2021/08/31
perlでシフト時間計算ツールを作った
リポジトリはこちら標準入力配列改行コードを削除文字列比較 & ループ抜け標準出力+改行コードを書いてる気分になる。文字列比較の構文が面白い。書きづらいけど味があって良いわ。
2021/08/23
Dockerを使ってGatsbyjsの環境作成
WEB+DB PRESS Vol. 118にてリモートでのアプリケーション開発についての記事がありました。モダンな開発環境を整えることでリモートでも開発体験を上げることができます。今回はDockerを用いてアプリケー…
2021/07/18
個人的実装されてほしいECMA Script Proposal
先日の #tc39_study で知った多くのプロポーサルの中から個人的に実装されると嬉しい提案を書き留めておきます。 do expression doブロック内で計算した値を返すことができる decimal jsの苦手な浮動小数点の演算がいい感じに temporal jsの…
2021/07/06
Slack Botの作成! perl言語で実装
perlの環境構築 cpanmのインストール .zshrcへライブラリディレクトリへのパスを通すライブラリのインストールサイトでBOTの作成 Slack API Bot Scopeの設定わすれずに！コーディング slack.plファイルの作成…
2021/05/24
Mac Automatorを使った自動化 | 画像リサイズとフォーマット変換
AutomatorはMacでの作業を自動化ができる標準アプリケーションです。ドラッグ・ドロップでアクションを追加してプログラムを作成します。単純な処理であればShellScriptなどを書くことで自動化できますが、…
2021/05/20
フロントエンドエキスパートチームって強そう
サイボウズにはフロントエンドエキスパートチームと呼ばれるWebフロントチームがあるらしい。チーム人数は9人で「フロントエンドを最高にする」ため主に4つの軸で活動している。支援発信啓蒙探求活動割合は支援 5、発信・啓蒙 2、探求 3…
2021/05/17
フロントエンド
Web+DB Press v120のフロントエンド、思考まとめフロントエンドエンジニアの職域今まではHTML5とCSS3が使えることがHTMLコーダーとして必要な技術であったが、現代のフロントエンジニアにはそれらに加えて動的機能のプログラミング…
2021/04/03
初めてのOSSコミット。Reason言語でGeo3x3を実装
Geo3x3(ジオスリーバイスリー)とは簡単に言うと「緯度・経度をまとめて表す」ためのエンコード・デコードプログラムのことです。 GitHubはこちら Geo3x3はシンプルなWGS84向けジオコーディングです地球を東(E)と西(W)に分け…
2021/03/25
GitHubの整備をしてかっこいいリポジトリにする
↑↑ めっちゃかっこいい UserNameと同名のリポジトリはGitHubではSupecial Repositoryとなっていてそこに配置したREADMEは Overviewに表示されます。 READMEもかっこよく READMEでもが実現できます。 domにと記述する…
2021/03/21
スタバのAPI見つけたから遊んで見る
'スターバックス'のjsファイルを漁ってたら商品リストAPIを発見。 Next.js, Tailwind cssの勉強に使ってみます。みつけたURL: https://product.starbucks.co.jp/api/category-product-list…
2021/03/19
コンポーネントを作るときに気をつけてる2つのこと
当たり前のことすぎて誰も教えてくれなかった。コンポーネントを作るときに気をつけてる2つのこと親コンポーネントからstyleを当てれるようにするコンポーネント自体にやを指定しない 1についてはpropsにclassNameを追加することで実装できます。スタイリン…
2021/03/11
技育祭 1日目まとめ
技育祭1日目お疲れさまでした。私は一日Aホールで視聴しました。 Aホールの内容は「エンジニアとしてどう生きるべきか」というのがテーマだったと感じました。今の自分に刺さる内容が多くあったのでブログとして残しておこうと思います。これからの社会の変化と若者に求められるあり方とは S…
2021/01/08
useReducerでAPIアクセス
useReducerの使い所 ja.reactjs.org : 複数の値にまたがる複雑なstateロジックがある場合や、前のstateに基づいて次のstateを決める必要がある場合。 APIアクセス結果には、アクセス結果やアクセス状態、エラーの有無など複数の状態があります。…
2021/01/01
ImageMagickで日本語を画像に変換
マトリクスパネルに日本語表示ができるととても嬉しいのでimagemagickを使って実装していきます! 過去記事ラズパイとLEDマトリクスパネルで遊ぶ日本語フォントのダウンロード日本語を画像に変換 -background 背景色-fill 文字色-font…
2020/12/28
DenoでSocket通信
Denoを使ってSocket通信の実装 Server側 (server.ts) を呼ぶだけでSocketの作成からポートの確保までやってくれます。ありがたい。。でコネクションの数だけ処理を回します。コネクションが来ればエンコードしたデータをクライアントに送信して…
2020/12/16
Macからラズパイを操作 (リモートデスクトップ)
手順 https://qiita.com/murs313/items/81757bf8bc74b6b76cdf を参考に構築した。簡単に説明すると、ラズパイとMacを同じネットワークに繋げるMacからラズパイにssh接続を行いvcn用モジュールを入れるラズパイでvcnサ…
2020/12/03
Dockerを使って軽率にJupyter環境を作る
jupyter関連のファイルを入れておくディレクトリを作成します。 version: docker-composeの記法のバージョン設定services: ここにコンテナの設定を書いていくjupyter: jupyterの設定image: 使用するイメージCon…
2020/10/18
週報 10/18
最近ブログ使ってなかったので習慣づけようと思って週報やってみます。競プロ EducationDPContest A, B, Cまでを解けた。DPの基本的な考え方を理解できた TSでも全然いける競プロのTSテンプレつくりたみ ABC179 GCD完全理解した…
2020/09/27
Prettierの導入
Pretterとは PretterはJS, JSXからTSなど様々な言語をサーポートしているコードフォーマッターです。 Pretterを使うことで自動でコード整形され、きれいなコード、統一された記法のコードを書くことができます。導入方法設定ファイルを作成します。フォ…
2020/09/26
.editorconfigでコーディングスタイルを統一
EditorConfigは様々な開発環境(editor, IDE)でコーディングスタイルを統一するための設定ファイルです。プロジェクトフォルダのルートにファイルを作成するだけで設定できます。多くの editor, IDEで使うことができ…
2020/06/20
node.jsでシェルコマンドを実行
シェルコマンドを使いたい標準モジュールのを使ってコマンドを実行することができます。今回はプログラムからアプリケーションの起動を実装します。シェルコマンドシェルコマンドではで任意のアプリケーションを起動できます。プログラム child…
2020/06/19
Callback時代の関数をPromise化する
Callback時代の関数たち node.jsの標準モジュールにはcallback時代の関数が多数存在します。例えば https://nodejs.org/api/fs.html#fs_fs_writefile_file_data_options_callback この関…
2020/06/18
「数値から各桁の値を取り出す処理」って言われたら数学的な処理が一番に思い浮かぶけど、JSならそんなことなかった。
数値から各桁の値を取り出す仕様入力: 数値出力: 各桁の値の配列数学的な処理解説入力を123とすると、 1回目まず123を10で割った余りは、3 配列: 123を10で割る(切り捨て)と、12 ２回目 12を10で割った余りは、2 配列: 12を10で割る…
2020/06/17
Typoraを使ってMarkdownファイルを編集する
かっこいいMarkdownエディタです。リアルタイムプレビューしてくれるので編集中も公開時のイメージができます。 ↑ こんな感じです。(今編集している画面) https://typora.io こちらからダウンロード出来ます。
2020/06/14
実用的なプログラミング！ node.jsでファイル名の変更とファイルの生成
ブログのファイルいらないハイフン雑なライム。。ファイル名の変更これをこうじゃ！コードでファイルが実行されているパスが取得できます。初知りファイル・ディレクトリの操作はfsモジュールがやってくれます。ファイル名を全て取得…
2020/06/13
Gatsbyを触ってみたってお話
技術書を買っていくう Webサイト高速化のための-静的サイトジェネレーター活用入門という本を購入しました。 https://twitter.com/fukke0906/status/1270199376900579328?s=20 Gatsbyとは GatsbyはReact…
2020/06/02
TSで競プロしやすくするためにメソッドチェーンを自作してみた
よく使う処理を関数化してみるでもこれ使うときって... ちょっと書きづらいですね.. 入力を空白で分割して、数値にして、って思考してるのにコードは逆で囲んでいかないといけないのは気持ちが悪いやりたいことこれだと思考順序とコードの書き順が一致していて理解しやすいですこ…
2020/06/01
JS 画像のアップロード、プレビュー機能を実装
HTML部分 inputのtypeをfileにするとファイルをアップロードできるようになります。そしてacceptでアップロードできるファイルを絞っています。今回は画像のみにしたいのでにしました。 jpg, png, gifとかをアップロードできます。 multiple属性は…
2020/05/30
路線情報のスクレイピングをDenoで
前からやりたかったやつ LINEでよく親に「〇〇分〇〇駅発」って送るけど、毎回何時につくか確認するのめんどくさいし、LINEBOTで自動化したいねって思って今回はそれのデータ取得部分を試しに実装してみます。 Denoにしたのは使いたかっただけです。具体的にはこの上の表を取…
2020/05/29
Deno RESTAPI作ってみた
Denoを触ってみたかったのでこちらの記事を参考にRESTAPIを作ってみました https://dev.to/am77/deno-v1-0-303j リポジトリ↓ https://github.com/FukeKazki/DenoSampleRestAPI 環境構築…
2020/05/23
ブラウザからジャイロセンサーを使ってみる
ジャイロセンサー使うこちらのツイート参照 https://twitter.com/fukke0906/status/1264081934856019970 検証環境 iphone: ios13以上 safari, chrome コード注意点セキュア…
2020/05/16
TypeScript JavaScriptでAtCoderする
競プロをすることで取得できる言語に対する知識ってあるよねってことでTypeScriptで競プロをやってみました. 入力 C++やC以外で競プロをするときに気になるのはやはり入力の仕方です. C++やCの場合は都度入力ができるのですが…
2020/05/15
Vercel社の作ったTerminal Hyper を導入したらぴかちゅうにできるらしい！
ターミナルをピカチュウにできるらしい！！これはやるしかないですね。 Hyper公式サイト https://hyper.is 爆速でターミナルをポケモンにする https://qiita.com/chanuu/items/b5c3d11e089ad0c7356d Git…
2020/05/12
シェルスクリプトでちょっと便利に
最近Next.jsを使うことが増えていつもプロジェクト作成時に行っている色々のインストールを一気にできたら便利だなぁってなったのでシェルスクリプトで解決しました。コード下記を参考にしながら作りました。初心者向けシェルスクリプトの基本コマンドの紹介(Qiita) https…
2020/05/08
styled-components と material-ui でダークモードを実装する
まず、ダークモード時とライトモード時での配色を定義します。でmaterial-uiの配色を継承して自分の配色を定義できます。ダークモード時のテーマにとすることでmaterial-uiが定義してくれているダークモードの配色を使うことができます。自分で配色を上書きもできます…
2020/05/04
Node.js QiitaAPIで自分の投稿を取得する
はじめに Qiitaの投稿を取得します。投稿の取得には認証とかいらないのでAPIで簡単にできます. コード最終的に欲しいデータの型を定義しておきます. ファイルは types/index.d.ts とかです. 取得のコードで定義した型をインポートして使います…
2020/05/02
デバッグ関数とかnullチェック関数をutil/index.tsにおいとけば楽なことに今頃気づいた。
はじめにいつもデバッグの時はとかやってたけど書くのめんどくさいし, utilに入れときゃいいじゃんってなりました。なので, debug関数をいい感じに実装したのでその解説です. 参考文献 JavaScriptの型などの判定いろいろ(Qiita) https://qiita…
2020/05/01
Node.js アスキーアートで遊ぶ
はじめにときにはなんの意味のないことしたくなるよね。ただAAを表示させるだけですよ figlet(GitHub) https://github.com/patorjk/figlet.js#readme 実装第一引数が表示させる文で第二引数がオプションです. オプシ…
2020/04/29
Python MeCabを使って形態素解析
はじめにオンラインのハックツハッカソンで文章から重量単語を抽出する処理を書きました. MeCabを使用したのでそれについての記事です. [!NOTE] MeCabは京都大学情報学研究科−日本電信電話株式会社コミュニケーション科学基礎研究所…
2020/04/28
Next.js GitPressのRSSを取得して自分のサイトに表示する
はじめに Next.jsのアップデートでSSG(Server Side Generate)が追加され, ポートフォリオサイトをNext.jsで書き換える機運が高まっております。ポートフォリオにはブログ情報を載せたいですし…
2020/04/25
DL初挑戦 pytorchを使ってSTL10の学習させてみたけどむずすぎた
はじめに参加しているある団体のDeepLearningハッカソンに参加しまして, STL10っていう画像セットとpytorchを使ったクラス分類をしました. DL楽しいな！って思ったんだけど, pythonむずすぎたわ.. コードまず前処理の定義をします. 訓練画像にはランダ…
2020/04/22
ReactNative StopWatch作るの結構むずい
はじめにストップウォッチ作るコードってラップ機能付きだとあまりないし, React Hooksってなるとほんとに見つからないよねコード解説必要なstateは now: 今の時刻state: タイマーを開始した時刻laps: ラップを格納する配列interval…
2020/04/21
JavaScript 配列内のオブジェクトの更新ってどうする？
どうするもこうするもそんなに方法なかったわおっけいですね. でもなんか更新部分があまりすきじゃないんだよねぇ.. なんとか一つの式出かけないかなぁ色々試すこれの返り値で新しい配列返してくれたら完璧なんだけどなぁこれじゃ更新された後のageが返ってくるんですよねぇ無理…
2020/04/09
推しのブログをスクレイピング
はじめにブログとかみてるとスクレイピングしたくなりますね(なりません). なので今回は推しのブログをスクレイピングします. 推しのブログ (乃木坂46) http://blog.nogizaka46.com/momoko.oozono/?p=1 これ-> 最初にソースコー…
2020/04/06
イコラブのニュースをスクレイピングする！
はじめにどうもスクレイピング芸人です. 今回はいこらぶのニュースを取得します. =LOVE NEWS https://equal-love.jp/news/ これ-> 前回と同様, ソースコードを確認します. おぉ、なんと良心的なソースコード.. 日向坂とは大違い…
2020/04/05
日向坂46のニュースをスクレイピング
はじめに今回は日向坂46のニュース情報をスクレイピングしたいと思います. 日向坂46 https://www.hinatazaka46.com/s/official/news/list 仕様としては単純にスクレイピングではなく, メンバーを指定して取得できるようにします.…
2020/04/04
新しいMacBook Airが届いた!
新型MacBook Air 先日発表されまして, ちょうど自分の持っているMacBook Airが買い替え時期(3年ぐらい使った)ので迷わず購入しました. Apple https://www.apple.com/jp/shop/buy-mac/macbook-air…
2020/04/01
Webフロントのすべて
はじめにぼくがいままで学んできたWebフロントについて語っていきます. これからWebフロントを勉強する人の参考になればいいなとおもます. index.html + styles.css + index.js フレームワークなどを使わない純粋…
2020/03/30
Kaggle 住宅価格予測多項式回帰してみる
はじめに今回は多項式を使って回帰分析したいと思います. いままでの線形回帰では一次式(直線)の回帰式を求めていましたが, 多項式を使うことで曲線の回帰式を求めることができます. 準備共通の処理です. まず一次式で単回帰最初に一次式で単回帰をして結果を確認します. ホールド…
2020/03/29
Kaggle 住宅価格予測重回帰分析してみる
はじめに前回, 単回帰分析を使って予測したので, 今回は重回帰分析を行いたいと思います. 学習標準化は平均を0, 標準偏差を1に変換することです. 重回帰では複数の説明変数を使用するので標準化をして同じ単位にそろえる必要があります. ホールド…
2020/03/26
Next.js 北九州市のイベント情報を取得する
はじめに Next.jsを使って北九州市のイベント情報サイトを作成するチュートリアルです. Next.jsを使ってサーバーから外部のサイトにアクセスすることでCORS対策にもなります. 完成品サイトURL https://kitakyushu-event-site…
2020/03/25
Next.js × now がやばい
はじめに Next.jsとnowを使うとデプロイ速度が異常でした.. Next.jsとは (Qiita) https://qiita.com/nkzawa/items/1e0e93efd13fb982c8c0 Zeit Nowとは (Qiita) https://qiita…
2020/03/24
競プロ日記 ABC158
はじめにコンテスト中は死んでたので復習です. https://atcoder.jp/contests/abc158 A SがAAAまたはBBBのときはバスはいらないですね. https://atcoder.jp/contests/abc158/submissions…
2020/03/23
競プロ日記 ABC159
はじめに ABC159の参加記です. https://atcoder.jp/contests/abc159 成績 https://atcoder.jp/users/kazki/history/share/abc159 はじめての4完でした！しっかり前2日で精進したおか…
2020/03/17
Kaggle 住宅価格予測単回帰分析してみる
はじめに単回帰分析のお勉強がてら, Kaggleのチュートリアル House Prices をやっていきます. House Prices https://www.kaggle.com/c/house-prices-advanced-regression-techniques…
2020/03/15
単回帰分析のFlow
単回帰分析とは単回帰は教師あり学習のひとつで, 1つの説明変数から目的変数を予測する手法です. 回帰は目的変数が連続値である予測が出来た場合に用いられます. 使用するライブラリ pandas 数表を扱うライブラリ.numpy 行列計算をするためのライブラリ.scikit…
2020/03/11
React Native Styleをいい感じに
はじめに React Nativeでアプリ開発をするとき, UIライブラリーとして NativeBase 等を使うと思います. そのとき素のままではなくしっかりとStyleをあてることで一気にアプリ感(語彙力) がでて, 開発モチベーションも上がります. native…
2020/03/08
React Movie Search を TS で.
はじめに 2020年フロントエンドマスターになりたければこの9プロジェクトを作れに載ってある,How to build a movie search app using React Hooksを参考にしながら, material…
2020/03/04
useRefの使い方がわからん
はじめに useRefについての考察です. いままで簡単なフォームを例として作成します. このときは入力される文字列をstateとして持ち, onChangeメソッドで常時 set することで実装します. この場合, 入力の変更があるたびにrenderされます. useRe…
2020/02/28
Heroku PostgreSQL の使い方
意図ハッカソンなどの簡単なプロダクトでは無料で使用できる Heroku PostgreSQL をよく使うので、記事にします. 接続 Heroku CLI のコマンドをターミナルで打つと接続できます. コマンド接続したら最初にタイムゾーンの設定を行います. 変更したら再接続を…
2020/01/24
ラズパイとLEDマトリクスパネルで遊ぶ
はじめに 12月にCA Tech Pitch Battleのため東京に行ったついでに秋葉原で最近ハマっている電子部品たちを購入してきました. そこでLEDマトリクスパネルという電光掲示板(?)を買ってきたのでラズパイとつなげて遊んだ話を書きます. お買い物このお店にたくさん…
2020/01/08
querySelectorAllで取得した要素は配列ではないらしい
流れ同じクラス名のやつとってきてループ処理したい! そしたら返ってくるのはという.. 原因実行しようとしているのはという関数. エラーとしてと返ってくるということは dom は配列ではないということ.. 試しにデバッガでとするとというオブジェクトであること…
2020/01/03
React HookでTodoアプリを作る
はじめに React16.8で追加されたフックを使ってTodoアプリを作ります. フックを使うとクラスコンポーネントをファンクショナルコンポーネントに書き換えることができ, 綺麗なコードにすることができます. Hookについて[公式] https://ja.reactjs…