なになれ

IT系のことを記録していきます。

ISUCONに初参加しました

ISUCON9の予選が9/7,8の日程で開催されました。 会社の同僚と一緒にチームを組んで、初めてISUCONに参加しました。 isucon.net 2人チームでチーム名は「isuconなにもわからない」です。仕事ではNode.jsを使っているのでNode.jsで挑戦しました。 利用言語の比…

AWSでKubernetes環境を構築する際のIngressについて

Ingressはアプリケーションレイヤのロードバランサに当たるリソースでSSL化などが可能になります。 Ingressの実装は様々なIngress Controllerに依存します。 例えば、Nginxを利用したNginx Ingress ControllerやGKEに含まれているGKE Ingress Controllerなど…

AngularにおけるLazyLoadingの実現方法

前提条件 Angular8 LazyLoadingとは 通常のSingle Page ApplicationだとJavaScriptファイルなどのアセットを初回ロード時に全て読み込みます。 初回ロード時の読み込み時間を軽減するために、モジュール毎に分割して必要な時に読み込むのがLazyLoadingと呼ば…

AWS IAMポリシーの作成と確認方法

複雑なIAMポリシーの作成と確認を行った時にそれなりに苦労したので情報を整理したいと思います。 概要 IAMポリシーとはAWSリソースのアクセス管理を定義するものです。 IAMポリシーを定義する際に実際にAWSリソースのアクセス管理が適切にできているか確認…

DynamoDBのスキーマ設計について学んだこと

DynamoDBのスキーマ設計について公式ドキュメントのベストプラクティスなどを見ながら学んだ記録です。 スキーマ設計の考え方 DynamoDBのスキーマ設計はRDBとは異なり、以下の考え方を採用します。 テーブルを分けずに1つのテーブルを使う PartitionKeyとSo…

Jestを使ってJavaScriptで快適にテストする

Jestとは JavaScriptのテストフレームワークです。 フロントエンド向けのテストフレームワークで注目されました。 ただJest自体はフロントエンドに限定されずに有用なテストフレームワークです。 jestjs.io Jestのメリット テストを書き始めるまでが簡単 Mat…

SIerとWeb系の差分

現職で働き始めて1ヶ月ほど経過して色々わかってきたので前職との差分についてまとめたいと思います。 前提事項 ここでのSIer(前職)とは大企業に分類される情報サービス業の会社です。受託開発やR&Dなどの業務を行っていました。 大企業 - Wikipedia ここで…

GitHubを雰囲気で使っている(pull request)

GitHubでチーム開発を実施するようになり、pull requestの時には色々気をつけることがあるなと思い、整理したいと思います。 要約 レビューイ時 pull requestの内容を分かりやすく レビュアーからコードレビューを受ける checksでの設定項目をクリアする mas…

GitHubを雰囲気で使っている(remote URL)

GitHubでcloneするときに公式的にはHTTPSが推奨なのを知りませんでした。 help.github.com 認証が毎回必要なのでは?と思いましたが、保存できるので1回済ませたら以降は不要なようです。 help.github.com HTTPSならプロキシ環境下でも問題ないのが推奨ポイ…

メモを共有するWebアプリを作った

メモを共有するWebアプリを作りました。 kollecton.hi1280.com ほぼWikiみたいなものです。 ここでは、どのように作ったのかの概要、製作の感想を紹介したいと思います。 Webアプリのコンセプト決め まずはWebアプリのコンセプトを決めました。 個人的に知識…

Angular+AWS Amplifyを試した

AWS AmplifyとはAWSのリソースをクライアントアプリから直接操作することができるライブラリ群です。 これによって、サーバレスなバックエンドにすることができます。 aws-amplify.github.io 似たものではFirebaseがあります。 今回はAngular製のWebアプリで…

エンジニアのキャリアを語るMeetUp【しがないラジオ×kiitok】に参加しました

エンジニアのキャリアを語るMeetUp【しがないラジオ×kiitok】に参加しました。 trackrecords.connpass.com SIerからWeb系に転職したパーソナリティの二人がキャリアの話やTechの話をするポッドキャスト「しがないラジオ」と、転職を前提とせずに現役エンジニ…

Chrome拡張機能を作る過程で学んだReactのこと

以前にChrome拡張機能を作りました。UI部分はReactで実装しました。 hi1280.hatenablog.com 今回はこのChrome拡張機能を作る際にどのようにReactを使ったのかを紹介します。 Option Page Chrome拡張機能の設定画面です。 Material-UI 今回は以下のReact用の…

React+TypeScriptでChrome拡張機能を作った

作ったもの Chrome拡張機能を開発するのに辛い点 コールバック前提 DOMの操作 開発環境整備 React+TypeScript React(Webフロントエンド向けライブラリ)の良い点 Webpack デモ まとめ 参考 作ったもの WebページをOCRしてコピペできるChrome拡張機能を作りま…

StorybookをAngularで試した

Storybookが気になったので、Angularを使って試しました。 以下の内容をそのまま試していきましたが、Angularの場合、うまく動作しないところがありました。 修正しながら一通り試したので、その内容を残しておきます。 ページに掲載されているコードに記載…

基本から理解したくてAWSを学習した

AWS

今まで雰囲気でAWSを使ってきました。 基本的なことの理解が危ういと感じたので、基本からの理解のために以下のUdemyレクチャーを実施しました。 手を動かしながら2週間で学ぶ AWS 基本から応用まで 感想を書きます。 良かったこと VPCの説明が充実していま…

GraphQL(Backend)を試した

TypeScriptで作ってみるシリーズの作業ログです。 今回はGraphQLを試してみます。 前回まではこちらです。Backendの処理のWeb化まで行なっています。 hi1280.hatenablog.com とりあえずGraphQLを試す まずはGraphQLに慣れるため、簡易なGraphQL serverをNode…

2018年で学んだ技術

AWS

今年を振り返る的な投稿です。 今年も色々学べました。ただ技術の進歩が早すぎて学んでも学んでもより良いものが出てきてしまいますね。それを楽しめるようになってこそのエンジニアなのかもしれません。 パブリッククラウド AWS Amazon Rekognitionで人物の…

コードが公開されているAngularの使用例をまとめてみた

モチベーション Vue.jsのドキュメントにある使用例(https://jp.vuejs.org/v2/examples/)の内容が魅力的だったので、Angularにもそういうものがないかを探してみました。 実際に動くものを見ると、どんなことができるのかイメージできるので良いと思ってい…

【初心者向け】Pythonによる画像処理について(人物認識)

2018年にやったこととしてPythonによる画像処理に取り組みました。 顔検出、顔認識、人物検出、人物追跡といった「人」が画像処理の対象でした。 そこで得られた知識をまとめたいと思います。 筆者は主にWeb領域のソフトウェアエンジニアで画像処理を専門に…

Docker Composeによる開発環境の構築(TypeScript,Node.js,Redis,Elasticsearch)

TypeScriptで作ってみるシリーズの作業ログです。 今回はDockerおよびでDocker ComposeでTypeScriptの開発環境を作ります。 TypeScriptによるNode.jsアプリの他にRedis、Elasticsearchを使います。 前回はこちらです。 hi1280.hatenablog.com Node.jsアプリ…

Prettierを導入する際に調べたことまとめ

Prettierとは コードフォーマッターです。Webフロントエンド向けに対応言語が豊富です。 Webフロントエンドの開発環境ではデファクトスタンダードになっているツールのようです。 GitHubのスター数は29,000を超えています。※2018年12月9日現在 github.com 今…

TypeScriptでユニットテストを書く

TypeScriptで作ってみるシリーズの作業ログです。 今回はユニットテストを書きます。 前回はこちらです。 hi1280.hatenablog.com 使用モジュール sinon @types/sinon https://sinonjs.org/ テストダブルを用意するためのツールと型定義です。 インストール方…

TypeScriptでWebAPIを実行する

TypeScriptの開発環境ができたので、とりあえずWebAPIを実行するプログラムを作ってみました。 hi1280.hatenablog.com 今回はQiitaのAPIを使いました。 https://qiita.com/api/v2/docs 使用モジュール axios https://www.npmjs.com/package/axios コード mai…

VSCodeでTypeScriptのCLIツール作成環境を作る

VSCodeでTypeScriptのCLIツール作成環境を作りました。 npmモジュールを作るのにも応用できると思います。 github.com 以下のような考えで作りました。 ローカル環境での実行・デバッグ・単体テスト実行はts-nodeで行う VSCodeのタスク機能は使わない想定 コ…

NgRxを試した所感

NgRxはAngularにおける状態管理のためのライブラリです。 ng-conf 2018でも状態管理関連のセッションはNgRxを前提とした内容が多く、デファクトスタンダードなのではと思います。 今回は、Tour of Heroesに対してNgRxを適用してみました。 こちらがコードで…

Tour of HeroesをVue+Vuexで再実装した

Vue+Vuexを勉強したアウトプットとしてアプリを作りました。 hi1280.hatenablog.com 作ったもの Tour of HeroesはAngular公式のチュートリアルです。 複数画面があって、WebAPIを呼び出すサンプルになっています。 今回はこのTour of Heroesを題材にして、Vu…

UdemyのVue.jsコース「Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)」を受講した感想

www.udemy.com こちらを利用して、Vue.jsを基礎から学びました。 例によって、レビューの評価が高いので、このコースを選びました。コースの内容を見てもかなり網羅されている感じで良いと思います。 このコースはレクチャーの数がかなり多かったです。 良い…

Tour of HeroesをReact+Reduxで再実装した

最近React+Reduxを勉強したアウトプットとして簡単なアプリを作りました。 hi1280.hatenablog.com 作ったもの Tour of HeroesはAngular公式のチュートリアルです。 複数画面があって、WebAPIを呼び出すサンプルになっています。 今回はこのTour of Heroesを…

UdemyのReactコース「Modern React with Redux」を受講した感想

www.udemy.com なぜこのコースを選んだのかですが、Reduxを学びたいと思い、Udemyのコースを探してました。 評価の高さとレビュー件数の多さから間違いなさそうだと思い、このコースを選びました。 結果的にはこのコースを選んで満足しています。 以下、感想…