スマレジエンジニアyushiのブログ

スマレジエンジニアのブログ

2022-01-01から1年間の記事一覧

【テトリス #9】ブロックを最下層まで落とす

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回は、ブロックを最下層まで落とす機能などを作ります。 ブロックを落とすロジック …

【テトリス #8】揃った行の削除

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回は、揃った行を削除します。 データ構造の修正 最初にデータ構造を修正します。 …

【テトリス #7】タイマーでブロックを落とす

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回はタイマーでブロックを落とすようにします。 方針 前回まではキー操作でブロック…

【テトリス #6】ブロックを積み上げる

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回はブロックを積み上げます。 方針 前回までの実装では、落ちてきたブロックは地面…

【テトリス #5】ブロックを動かす

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回はブロックを動かします。 キーハンドラ まずはキーハンドラを更新します。 左右…

【テトリス #4】ESLint・テストコードの導入

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回は、ESLintの導入やテストコードの記述をしてみます。 ESLintの導入 ESLintを導入…

【テトリス #3】ブロックを落とす

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回は、ブロックを上から下に落とすロジックを作っていきます。 ブロック形状情報の…

【テトリス #2】背景とブロックの描画

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 背景の作成 まずは背景を作ります。 背景は、10 x 25個のタイルの積み重ねで作ります…

【テトリス #1】テトリスを作りたい

今回から、テトリスを作っていきます。 最近30分で作るXXが話題になっていたので、興味が出た次第でした。 ただ自分ではそんなスピーディには作れないので、React・TypeScriptの勉強も兼ねつつじっくり作っていきます。 技術スタックは下記の通りです。 Type…

【GraphQL入門 #3】Query・Mutationの自作

引き続きGraphQLに入門しています。 yushi-dev.hatenablog.com 前回は公式チュートリアルを元に実装しましたが、今回は自作してみます。 Mutationも作成します。 nodemonの追加 先に、nodemonを追加します。 nodemonとは、ソースコードの更新を起動中のサー…

【GraphQL入門 #2】チュートリアル

前回より、GraphQLに入門しています。 yushi-dev.hatenablog.com 今回は、下記のApollo Serverの公式チュートリアルに取り組みます。 Get started with Apollo Server - Apollo GraphQL Docs 型の定義 APIで扱う型を定義します。 type Book { title: String …

【GraphQL入門 #1】GraphQLに入門する

今回より数回に分けて、GraphQLに入門してみようと思います。 GraphQLとは、APIのための言語・またランタイムです。 graphql.org 今特に注目されている技術の1つであり、導入事例も多々聞きますし、かのBackend Developer Roadmapでも紹介されています。 Bac…

TODOリストを作る(まとめ)

Go言語やVue3の勉強を兼ねて、TODOリストを実装中です。 本記事はそのまとめです。 過去の記事はこちらをご確認ください。 TODOリスト カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタック バックエンド Go言語 gin フロントエンド Vue.js…

【TODOリスト 第10回】Golangのバージョン更新

久しぶりにTODOリストを作っていきます。 yushi-dev.hatenablog.com 今回は、Golangのバージョンを更新します。 Golangのマイナーバージョン固定 久しぶりにプロジェクトをビルドしようとしたら、エラーが出てしまいました。 docker compose build --pull =>…

【プロフィールページ改修 第9回】GitHub Actionsの導入

久しぶりに、プロフィールページを作成していきます。 yushi-dev.hatenablog.com 技術スタックは下記の通りです。 nuxt.js SCSS Tailwind CSS 今回はGitHub Actionsの導入です。 GitHub Actionsとは GitHub Actionsとは、GitHubに搭載されているCIの仕組みで…

【機械学習入門 #6】Perceptronの性能検証

機械学習に入門しています。 yushi-dev.hatenablog.com 今回は、前回までに実装したPerceptronの性能を確認していきます。 性能検証 Perceptronの性能を確認するために、どの値に対してPerceptronがIris-setosaかIris-versicolorのどちらとして判定するかを…

【機械学習入門 #5】Perceptron実装後半 学習ロジック

機械学習に入門しています。 yushi-dev.hatenablog.com 今回はPerceptronの実装後半です。 学習ロジックの実装 まずはコンストラクタの実装です。 class Perceptron(object): ... # コンストラクタ def __init__(self, eta=0.01, n_iter=10): # 学習率 0.0〜…

【機械学習入門 #4】Perceptron実装前半 予測ロジック

機械学習に入門しています。 yushi-dev.hatenablog.com 今回から、Perceptronを実装していきます。 設計 class Perceptron(object): def __init__(self): self.w_ = np.zeros(1 + X.shape[1]) def predict(self, X): """ 1.予測 """ def fit(self, X, y): ""…

【機械学習入門 #3】データ取得・データ整形・目標設定

前回より、機械学習に入門しています。 yushi-dev.hatenablog.com 今回は、データを用意し、そのデータをもとに目標設定していきます。 データを取得 機械学習とデータは不可分です。まずは今回利用するデータを用意します。 Machine Learning Repositoryと…

【機械学習入門 #2】環境構築

前回より、機械学習に入門しています。 yushi-dev.hatenablog.com 今回は、環境を構築していきます。 pyenv pythonの複数バージョンを簡単に切り替えられるように、pyenvを導入します。 GitHub - pyenv/pyenv: Simple Python version management 導入手順は…

【機械学習入門 #1】機械学習に入門してみる

今回から、機械学習に入門してみようと思います。 Webエンジニアと機械学習 私はWebエンジニアなので、普段機械学習の知識や技術を扱うことは、今のところ直接的にも間接的にもありません。 しかしながら、AI・機械学習といった分野はITの文脈かどうかに関わ…

【プロフィールページ改修 第8回】ヘッダーナビゲーションのモーダル化とスムーススクロール

引き続き、プロフィールページを作成していきます。 yushi-dev.hatenablog.com 技術スタックは下記の通りです。 nuxt.js SCSS Tailwind CSS 今回はヘッダーナビゲーションの改善を行います。 ヘッダーナビゲーションのモーダル化 前回Responsive対応を行なっ…

【プロフィールページ改修 第7回】Responsive対応

引き続き、プロフィールページを作成していきます。 yushi-dev.hatenablog.com 技術スタックは下記の通りです。 nuxt.js SCSS Tailwind CSS 今回はResponsive対応を行います。 media query 各sectionを.app-containerというクラスで囲います。

【プロフィールページ改修 第6回】デザイン改善

引き続き、プロフィールページを作成していきます。 yushi-dev.hatenablog.com 技術スタックは下記の通りです。 nuxt.js SCSS Tailwind CSS 今回はデザイン改善を進めていきます。 方針 前回まででざっとコーディングとコンテンツ入力を行いました。 今回は…

【プロフィールページ改修 第5回】ざっくりコーディング

引き続き、プロフィールページを作成していきます。 yushi-dev.hatenablog.com 技術スタックは下記の通りです。 nuxt.js SCSS Tailwind CSS 今回はざっくりコーディングを進めていきます。 方針 コーディングを進めていきます。 今回採用しているVue.jsをで…

【プロフィールページ改修 第4回】デザイン

引き続き、プロフィールページを作成していきます。 yushi-dev.hatenablog.com 技術スタックは下記の通りです。 nuxt.js SCSS Tailwind CSS 今回はデザインを行なっています。 デザイン 本職でもプライベートでもデザインの経験は一切ないのですが、今回はチ…