サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ブラックフライデー
tech.iimon.co.jp
nkmさんよりバトンを受け取りました! 株式会社iimonにてフロントエンドエンジニアをしております、まつむらです!エンジニア人生で初めてのアドベントカレンダー参加です! いつもの勉強会とは違って、変なことを書いても良いと言われたような気がしたので、今回は完全に趣味に振り切ろうかなと思います! 本記事はiimonアドベントカレンダー3日目の記事となります! はじめに 自宅でのオンプレ運用に必要な物 必要なもの あれば嬉しい物 どこまでを自作していくのか ネットワーク構成について 一般的なネットワーク構成図 今回目指すネットワーク構成図 ルータが2台ある理由 ipv4 と ipv6 について ルータ側の設定 IP アドレスの固定 ポートマッピング(NAT エントリー)の設定 サーバ側の設定もといセットアップ SSH 設定 ファイアウォール設定 再びのネットワーク設定とIPアドレスの固定 Ap
はじめに EMのスキルとは ピープルマネジメントのスキルとは 傾聴力 アイスブレイク 質問力 共感力 舐められ力 まとめ はじめに こんにちは! 株式会社iimonのエンジニアマネージャー、まつだです。 iimon2年目のアドベントカレンダー初日ということでそれにふさわしい内容にしようと思ったのですが、どうしてもRustについてしか書く気が起きず、あいだをとって(?)私のお仕事、「エンジニアマネージャー」(以下EM。エンジニアリングマネージャーともいう)について書きたいと思います! 先日、「EMゆるミートアップ」というイベントに初めて参加させていただいて、いろいろ考えることがありました。 EMのスキルとは 先述のイベントでまずはじめに話題になったのが「EMのスキルアップについて」です。 どなたかも当日質問されていましたが、そもそも「EMのスキル」とはなんでしょうか。 よく言われるものに、E
はじめに シャローコピーとディープコピーの基礎 オブジェクトの参照の仕組み シャローコピーとディープコピーの違い シャローコピーの3つの方法 それぞれの特徴 Object.assign()が配列に適さない理由 疎配列(sparse array)の扱い 配列メソッドの継承問題 使い分けの指針 ディープコピー ディープコピーの4つの方法 使い分けの指針 注意点とベストプラクティス シャローコピーで十分な場合 ディープコピーが必要な場合 まとめ おわりに 参考記事 はじめに こんにちは、株式会社iimonでフロントエンドエンジニアをしているnkmです! 本記事はiimonアドベントカレンダー2日目の記事となります。 今回は、以下について実践的な例を交えながら解説していきます! ・シャローコピーとディープコピーの基礎 ・シャローコピーとディープコピーの違い ・シャローコピーの3つの方法、使い分け
■はじめに ■実施環境 ■実際の状況 ■なぜmvコマンドで差分が出なかったのか ■git mvの挙動 ■まとめ 参考資料 ■はじめに こんにちは。 株式会社iimonでエンジニアをしている遠藤です。 以前ファイル名の大文字/小文字を変更したかったので、mvコマンドで変更したのですが、差分が認識されないということがありました。 その後、git mvでファイル名を変更することで無事に差分を反映することができました。 そこで、今回はmvコマンドで差分が認識されなかった理由と、git mvの挙動について調べてみました。 ■実施環境 PC: MacBook Pro (2023) Apple M2 Pro OS: macOS 13.3 ■実際の状況 実際にどういう状況だったのか再現します。 以下のように、ディレクトリ内にIndex.htmlという名称のファイルがあります。 本来はindex.htmlと
はじめに 結論 オブジェクトのメモリ参照イメージ シャローコピー シャローコピーの使用方法 ディープコピー ディープコピーの使用方法 最後に 参考記事 はじめに こんにちは、株式会社iimonでエンジニアをしている中村です。 業務では、主にフロントエンドを担当させていただいています。 今回は「シャローコピーとディープコピーの違い」について聞いたことはありますが、よくわかっていなかったので調べてみました。 結論 シャローコピーとディープコピーは、オブジェクトのコピーを作成する二つの異なる方法です。シャローコピーは参照アドレスのコピー、ディープコピーはオブジェクト自体のコピーのことを指します。 オブジェクトのメモリ参照イメージ そもそも、オブジェクトとは値を格納している場所(メモリ上のアドレス)を 格納します。 const Taro = {age: 20, job: "engineer"} 図
はじめに iimonでエンジニアをしています。腰丸です。 突然ですが、Go言語がクラス継承をサポートしていないことをご存知でしょうか?(結構有名かもしれません) 言語として、意図的にクラス継承をサポートしていないって大丈夫なのか?という疑問もありますが、確かにクラスの継承ってネックになることが多い気もしています。 ちょうど良い機会なので、Goを使用してクラス継承を使用せずに、クラス継承で行ってきたような実装を実現する方法と、クラス継承の良し悪しについて考えてみました! 私がクラス継承に関して思うところ 微妙だと思っているところ 抽象化の粒度がよくわからない(is-aとか範囲広すぎない?) 深いネストがあると見るのしんどい(ヨーヨー問題) 影響範囲わからなくて怖い SOLIDとかの原則を守るのが難しい(仮に現時点で問題なくても将来的に守れるのかがよくわからない) 良いなと思うところ 実装が楽
はじめに こんにちは。バックエンドエンジニアの木暮です。 前職では運用業務でサーバに入ってCUI環境で作業を行うことがありましたが、 現職はローカルでの開発業務がメインであまりそういったことを行う機会がありません。 しばらく触っていないと忘れてしまいそうなのでこの機会に使用頻度の高かったコマンドの復習をしてみました。 今回はサンプルとして以下のCSVファイルを使っています。 jusyo.jp 今回紹介するコマンドで行える操作は以下の通りです。 数は多くありませんがどれも便利なコマンドです。 はじめに 文字コードの確認と変換 CSVファイルの行数を確認 さまざまな検索 ファイルの差分を確認する CSVファイルから特定のデータを抜き出す おわりに 文字コードの確認と変換 まずはダウンロードができたのでファイルの中身を確認してみましょう。 [kogure:~/test] $ ls -l tota
2022年5月にCTOとして入社してから約1年半、これまで取り組んで来たことを振り返ってみました!(もちろん僕だけで行った訳ではなくエンジニア全体で行った取り組みです) これまで整備されていなかったところを整備出来た事によってサービスの品質を上げたり、デリバリーの速度向上によりビジネスが加速するようにしてきました。基本的な部分の取り組みが多いですが以前からすると大幅に変わったので紹介します! EC2からECSへのインフラの変更 サーバーにはAWSのEC2を使用していましたがECS Fargateに乗せ換えました。開発はDockerにより元々行っていた為、コンテナをGitHub Actionsによりビルドしてデプロイ出来るようになり、環境の変更を行いやすくしました。また、オートスケールも自動的にされるので安定稼働させることが出来るようになりました。 Aurora Serverless V2の
こんにちは、iimonのデッサンです。 本記事はiimonアドベントカレンダー25日目の記事となります。 メリークリスマス! 会社ではフロントエンドに挑戦させてもらっていますが、 関係のないElasticsearchについての記事になります。 Elasticserachとは 全文検索: Elasticsearchは、大量のテキストデータを高速に検索することができます。これにより、文書、ログ、ウェブページなどのテキストデータの索引付けや検索が容易になります。 JSON形式のドキュメント: ElasticsearchはJSON形式でドキュメントを格納します。これにより、柔軟なデータ構造を扱うことができる。 多彩なクエリ機能: Elasticsearchは、複雑なクエリや絞り込み条件を使用してデータを検索できます。フルテキスト検索や範囲検索、複雑なフィルタリングが可能。 リアルタイム検索: デー
こんにちは、iimonでフロントエンドエンジニアをしています。ほでぃーです。 本記事はiimonアドベントカレンダー23日目の記事となります。 はじめに 今回はフロントエンド開発をする上で、普段使用している拡張機能と設定を紹介します。 拡張機能 開発共通 プラグイン名 機能 Japanese Language Pack for Visual Studio Code Visual Studio Codeを日本語化する TODO Highlight TODOを分かり易く表示 Code Runner コードを簡単に実行することができる Rainbow CSV CSVを見やすくする REST Client VS Code上でHTTPリクエストを送信できる Path Intellisense ファイルやディレクトリパスのオートコンプリートが効く Multiple cursor case preser
こんにちは。 iimonバックエンドエンジニアの木暮です。 最近はCounter-Strike2にハマっていてスキンまで買い始めました。 ちなみに本当に欲しいスキン*1はマーケットで5万円近くしたので諦めました。 自己紹介はこれくらいにして本題に移りたいと思います。 本記事はiimonアドベントカレンダー22日目の記事となります。 はじめに intel Macを使って無料でローカルに仮想環境が作れるツールはVagrant + VirtualBoxなどがありますが M1 Macとなると2023年12月現在、VirtualBoxが正式にARMアーキテクチャに対応していないため導入するのが一筋縄では行かない様です。 *2 他に無料でローカルに仮想環境が作れるツールはあるのかな?と疑問に思ったので調べてみたところMultipassというツールありました。 作れるのはUbuntuのCUI環境限定です
こんにちは、iimonフロントエンジニアのさいとーです。本記事はiimonアドベントカレンダー21日目の記事となります。 はじめに devtoolでデバッグをしてみる watch(監視) 条件付きブレークポイント Eventlistenerブレークポイント(click) Break on まとめ 最後に 参考 はじめに みなさんはdeveloper toolをつかってデバッグをしてますでしょうか。 elementsやsource、networkなど見れる便利なツールです。フロントエンドで開発するなら必須のツールです。 しかし、いろいろな便利な機能があるのは知っていましたが、曖昧な理解のまま使っていました。 曖昧な理解だったため、自分がデバッグのときに使っているなと思っている機能をまとめてみました。 devtoolでデバッグをしてみる サンプルコード <!DOCTYPE html> <htm
こんにちは、iimonでエンジニアをしています。須藤です。 本記事はiimonアドベントカレンダー20日目の記事となります。 業務中にbatch処理を追加する際、 サーバー側リポジトリのgithub actionsで、コンテナ実行コマンドの上書きと、batch job定義の登録をして、 インフラ側リポジトリでbatch jobのscheduleを設定するということが何度かあり、 サーバー側リポジトリだけで完結させたいと思っていたところ、 ecscheduleを使うとできそうなので試してみることにしました。 container imageの準備 ECS clusterを作成 ecsEventsRoleの作成 github actions関連 ECS task定義を作成 ecscheduleの設定 Github Actionsを構成 動作確認 まとめ 最後に 参考 container imag
こんにちは~~~~☆:.。. o(≧▽≦)o .。.:☆ 株式会社iimonでエンジニアをしている「マウンテンぴー」です!!!! 本記事は株式会社iimonアドベントカレンダー19日目です! 今回は「React」+「WebAPI」に関して調べてみました!! いちばんの目的は画像検索アプリの実装までできればと思います。 どうぞ最後までよろしくお願い致します。 Reactについて ReactはWebサイトやWebアプリのUI部分を開発する際に活用するユーザインターフェース構築のための JavaScript ライブラリです!! VueやAngularなどのWEBフロント用ライブラリに並ぶ人気のライブラリです m(・・)m Reactの3つの特徴について 1. 宣言的な View ReactではJSX 記法を使ってコーディングしていきます! JSXとは"JavaScript XML"の略で,Rea
こんにちは、iimonでサーバーサイドエンジニアをしています。hoge1です。 本記事はiimonアドベントカレンダー18日目の記事となります。 はじめに デフォルトだと検索はどうなる? AND検索ってこれでいけんじゃねぇ? 実際にAND検索を行った実装方法 最後に 参考 はじめに iimonではDjangoで作られたアプリケーションの管理画面としてDjango Adminを使っています。 皆さん会社はどうですか? フレームワークに付属の管理画面を使われていないところも多いかと思います。 今回はDjango Adminのデフォルトのテキスト検索をOR検索からAND検索への変更について書きたいと思います。 Django Adminを使われていない人はデフォルトではできないだと知って頂き、使われている人は色々な方法の1つとして、こんな方法でも実現できるんだと知って頂けると幸いです。 デフォルト
こんにちは、iimonでサーバーサイドエンジニアをしています。腰丸です。 本記事はiimonアドベントカレンダー17日目の記事となります。 はじめに iimonでは、主に「Django + DRF」を使ってAPIサーバーの実装をしています。DRF自体は高機能で、便利なライブラリですが、 ロジックが分散がされて、確認したいコードにたどり着くのが難しかったり、DRFの機能を理解していないと無駄なコードを書いてしまったり、 という難しさを感じています。 DRF自体が悪いわけではないのですが、なにかDRF以外を使用して、良い感じにAPIを実装する方法はないかと考えていたところ 「Django Ninja」の使い心地が良かったので、Django Ninjaを使ったディレクトリ構成について考えてみました。 Django Ninjaとは Django Ninja 公式ドキュメント Django Ninj
こんにちは、CTOの森です。 本記事はiimonアドベントカレンダー16日目の記事となります。 普段機械学習を使うことは無いのですが、勉強も兼ねてCloudFrontのログを機械学習させてみたらどうなるのか試してみました。 検証した環境 ログデータの形式 使用したログデータのフィールド 分析までの手順 正しくデータを読み込む 学習できる形式に変換 method result_type path_num path_0 ~ path_4 query_num query_len sc-status time-to-first-byte 学習 元のデータと結合 CSVファイルに出力 コード全体 分析結果 (比較的)うまくいった結果 うまくいかなかった結果 参照したサイト まとめ 最後に 今回ログデータをIsolation Forestという手法を用いて分析してみました。Isolation Fore
はじめに こんにちは!株式会社iimonでフロントエンドエンジニアをしている「みよちゃん」です! 本記事は株式会社iimonアドベントカレンダー15日目です! 弊社では不動産仲介業者向けのサービスを開発しています。 私が所属しているチームでは、chromeの拡張機能を開発しており、IndexeDBを使用する機会が多くあります。 今回は普段使用するIndexedDBについて調べたことを以下にまとめていきたいと思います! IndexedDB 1. IndexedDBとは IndexedDBとはブラウザに実装されているデータベースの機能です。ブラウザ内で処理を完結させることができるので、通信が発生せずオフラインの状態でも使用することができます。データベースはRDB(Relational Database)ではなくキーバリューストアです。 2. ブラウザが持つほかのデータ管理機能との違い ブラウザ
React-three-fiber セットアップ 立方体 Canvas mesh boxGeometry meshStandardMaterial 回る立方体 useFrame まとめ 参考 こんにちは。 アドベントカレンダー14日目! 担当のタクシです。 普段はフロントエンド中心の業務をしています。 アドベントカレンダーを書くために、最近あまり触れていないThreejsについて調べていたのですが、 「React three js」 と検索したらReact-three-fiberというものが出てきました。 Reactでthreejsがオーバーヘッドなしに使える!らしいので試してみました! (あまり体力が続かなかったのでThreeやReactに関する詳しい説明を省いてしまっています。。すみません。。) React-three-fiber React-three-fiberはReactコンポー
■はじめに ■ジェネリクス型とは? ■ジェネリクス関数を作る ■extendsで制約を付与したジェネリクス型 ■keyofで制約を付与したジェネリクス型 ■ジェネリクスクラスを作る ■ユーティリティのジェネリクス型 ◆Required < Type > ◆Readonly< Type > ◆Pick< Type, Keys > ■最後に ■参考記事 ■はじめに こんにちは、株式会社iimonでエンジニアをしている「白水」です。 業務では、主にフロントエンドを担当させていただいています。 本記事はiimonアドベントカレンダー13日目の記事となります。 今回はTypeScriptの「ジェネリクス型」について書いていきたいと思います。 ■ジェネリクス型とは? ここにnamesという変数があり、文字列を要素として持っている配列があります。 この配列の型は、画像の通りstring[]です。 これは
こんにちは、株式会社iimonでエンジニアをしている遠藤です。 本記事はアドベントカレンダー8日目の記事となります。 昨日に引き続きアドベントカレンダーを担当させていただきます。 はじめに 今回は既存のプロジェクトに型チェックを効果的に導入するための考え方について書いていこうと思います。 というのも、既存のPythonプロジェクトに型チェッカツール(mypy)が導入された際に、どのコードにどこまで明示的に型アノテーションをつけるのが良いのか考えたことがありました。既存のすべてのコードに型をつけきるには大きなコストがかかります。また、型アノテーションを詳細にすると、コードが明確化する分、コードへの型アノテーションの追加や型チェッカツールのエラー解消などにより多くのコストがかかるようになります。 そこで、最近読んだ「ロバストPython」で参考になった記載を自分なりにまとめてみました。 3つの
はじめに こんにちは。iimonでエンジニアをしている林と申します。 本記事はiimonアドベントカレンダ11日目の記事となります。 今回テスト戦略やjestについて調べたので記事にしてみようと思います。 テスト戦略 今回挙げるテストの種類以外にも様々なテストがあると思いますが、 今回はフロントエンド開発において必ず出てくるであろう「ユニットテスト」「インテグレーションテスト」「E2Eテスト」についてのテスト戦略を解説していきます。 テストの種類 上記で挙げたテストの詳細については下記になります。 ユニットテスト(単体テスト) 最も基本的なテスト 関数やメソッドなどの単位での動作を検証する 小さい単位で見ているので速度が速い 全体や結合してる部分など複数の単位が合わさった時に起きてしまう不具合については検出出来ない。 結合テスト(インテグレーションテスト) 複数のユニットを連携させて、正し
はじめに 動作確認環境 対象 出題形式 問題1 問題2 問題3 問題4 問題5 問題6 問題7 問題8 問題9 問題10 おわりに 参考 はじめに 初めまして、こんにちは! iimonに入社して5ヶ月目のなかむ〜です。 本記事はiimonアドベントカレンダー10日目の記事となります。 実務の中で正規表現を読み解くのに時間がかかったり、書き方で悩んだりしたので、今回は復習も兼ねて正規表現のレベル別に問題を10問作成しました。 答えはあくまでも書き方の一例なので色々試してみてくださいね。 解説も用意してあるので、挑戦して頂けると幸いです! めざせ☆全問正解 正規表現マスター! 動作確認環境 https://paiza.io/ja/projects/new?language=javascript 対象 以下のNFAエンジンを使用している言語を想定しています。 JavaScript,Perl,PH
こんにちは、株式会社iimonでエンジニアをしている遠藤です。 本記事はアドベントカレンダー7日目の記事となります。 TypeScriptでは、ファイルがプロジェクト内でカプセル化できる最大の単位になります。 そのため、ファイルでexportされていない変数や関数等は同じファイル内でしか読み込めず、また、exportされている変数や関数等に関してはプロジェクト全体で参照できるようになります。 ただ、プロジェクト全体から参照したくない場合もあるかと思います。 例えば、Reactで以下のように、同じディレクトリのコンポーネントを参照するコンポーネントがあるとします。 Drink/Drink.tsx import DrinkItem from './DrinkItem' export const Drink = () => { return ( <div> <p>飲み物一覧</p> <div>
こんにちは、CTOの森です。iimonは今回が初のアドベントカレンダー参加です! 本記事はiimonアドベントカレンダー1日目の記事となります。 はじめに 検証した環境 MySQL/mecabのインストール 大量のデータを入れる 1レコードのINSERTにかかった時間 検索してみる 検索文字列が「出来事」の場合 インデックスなし N-gram(bi-gram) IN NATURAL LANGUAGE MODE IN BOOLEAN MODE MeCab IN NATURAL LANGUAGE MODE IN BOOLEAN MODE 検索文字列が「チューリングはロンドンのリッチモンドに住み」の場合 まとめ 参照したサイト 最後に はじめに 今回はMySQLで全文検索機能を使う際のパフォーマンスについて書こうと思います! 全文検索をちゃんと使うのであればElasticsearchやSolrな
1.はじめに こんにちは!株式会社iimonでフロントエンドエンジニアをしている川口と申します! 自分が所属しているチームでは、不動産仲介会社向けの拡張機能を開発しているのですが、開発中に画像を扱うことが多々あり、Base64に触れる機会が多いです。これまでなんとなくの認識でBase64に触れていましたが、今回改めてBase64とはどんなものなのか調べたため、以下にまとめていきたいと思います。 2. Base64とは そもそもBase64って何 base64とは、バイナリーからテキストへの符号化を行う手法のグループデータであり、バイナリーデータを64を基数とする表現に変換することで、ASCII文字列で表現するもの。 Base64が定められていた経緯 base64というデータ変換方法が定められたのは、メールを送信するためのSMTPで画像や音声データを送信するためです。かつてSMTPはASCI
2024-08-27 Difyを使ってみる こんにちは、iimonでエンジニアをしている須藤です。 今回はRAGを試してみたいと思って調べていたところ、Difyというサービスを利用するとGUI上から簡単に構築できるらしいので、実際にRAGを利用したチャットボットを構築してみました Dify(ディファイ)の概… 2024-08-26 React初心者向け!不動産広告を作成してみる ■はじめに ■Reactとは何か? ■環境構築 ◆リポジトリをCloneする ■解説 ◆Reactの初期化 ◆App.jsxの説明 ◆Form.jsxの説明 ◆Advertisement.jsxの説明 ◆Text.jsxの説明 ◆Pictures.jsxの説明 ■まとめ ■はじめに こんにちは! 株式会社iimonでフロントエンドを担当… 2024-08-20 Chrome拡張機能をウェブストアへアップロードする際
このページを最初にブックマークしてみませんか?
『iimon TECH BLOG』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く