BlueTowelのブックマーク (37)

  • Elasticsearchについて - iimon TECH BLOG

    こんにちは、iimonのデッサンです。 記事はiimonアドベントカレンダー25日目の記事となります。 メリークリスマス! 会社ではフロントエンドに挑戦させてもらっていますが、 関係のないElasticsearchについての記事になります。 Elasticserachとは 全文検索: Elasticsearchは、大量のテキストデータを高速に検索することができます。これにより、文書、ログ、ウェブページなどのテキストデータの索引付けや検索が容易になります。 JSON形式のドキュメント: ElasticsearchはJSON形式でドキュメントを格納します。これにより、柔軟なデータ構造を扱うことができる。 多彩なクエリ機能: Elasticsearchは、複雑なクエリや絞り込み条件を使用してデータを検索できます。フルテキスト検索や範囲検索、複雑なフィルタリングが可能。 リアルタイム検索: デー

    Elasticsearchについて - iimon TECH BLOG
    BlueTowel
    BlueTowel 2023/12/25
  • 開発スピードを早めるDeveloperToolでのデバッグ - iimon TECH BLOG

    こんにちは、iimonフロントエンジニアのさいとーです。記事はiimonアドベントカレンダー21日目の記事となります。 はじめに devtoolでデバッグをしてみる watch(監視) 条件付きブレークポイント Eventlistenerブレークポイント(click) Break on まとめ 最後に 参考 はじめに みなさんはdeveloper toolをつかってデバッグをしてますでしょうか。 elementsやsource、networkなど見れる便利なツールです。フロントエンドで開発するなら必須のツールです。 しかし、いろいろな便利な機能があるのは知っていましたが、曖昧な理解のまま使っていました。 曖昧な理解だったため、自分がデバッグのときに使っているなと思っている機能をまとめてみました。 devtoolでデバッグをしてみる サンプルコード <!DOCTYPE html> <htm

    開発スピードを早めるDeveloperToolでのデバッグ - iimon TECH BLOG
    BlueTowel
    BlueTowel 2023/12/21
  • ReactとWebAPIを取得して画面表示してみよう!! - iimon TECH BLOG

    こんにちは~~~~☆:.。. o(≧▽≦)o .。.:☆ 株式会社iimonでエンジニアをしている「マウンテンぴー」です!!!! 記事は株式会社iimonアドベントカレンダー19日目です! 今回は「React」+「WebAPI」に関して調べてみました!! いちばんの目的は画像検索アプリの実装までできればと思います。 どうぞ最後までよろしくお願い致します。 Reactについて ReactはWebサイトやWebアプリのUI部分を開発する際に活用するユーザインターフェース構築のための JavaScript ライブラリです!! VueAngularなどのWEBフロント用ライブラリに並ぶ人気のライブラリです m(・・)m Reactの3つの特徴について 1. 宣言的な View ReactではJSX 記法を使ってコーディングしていきます! JSXとは"JavaScript XML"の略で,Rea

    ReactとWebAPIを取得して画面表示してみよう!! - iimon TECH BLOG
    BlueTowel
    BlueTowel 2023/12/19
  • CloudFrontのログを使って機械学習で異常検知を試してみた - iimon TECH BLOG

    こんにちは、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

    CloudFrontのログを使って機械学習で異常検知を試してみた - iimon TECH BLOG
    BlueTowel
    BlueTowel 2023/12/16
  • 【11万文字越え】プログラミング初心者に贈る即戦力ガイド - Qiita

    弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています!興味をお持ちいただける方は、こちらまで。 目次 1.はじめに 2.VSCode拡張機能紹介 3.コーディングのポイント 4.よく使われる英単語一覧 5.エラーとの向き合い方 6.テストで動作確認 7.検索の極意 8.公式ドキュメントに慣れる 9.リファクタリングでさらに読みやすく 10.資料作成で気をつけること 11.Gitで管理 12.よく使うLinuxコマンド一覧 13.仕事の進め方 14.プログラム以外で意識するところ 15.初心者こそ読んで欲しい 16.まとめ 1. はじめに プログラミングは現代のデジタル社会において重要なスキルです。 AIがコードを書いてくれる時代ですが、それでも人の手によるプログラ

    【11万文字越え】プログラミング初心者に贈る即戦力ガイド - Qiita
    BlueTowel
    BlueTowel 2023/12/15
  • IndexedDBの基本を学ぶ - iimon TECH BLOG

    はじめに こんにちは!株式会社iimonでフロントエンドエンジニアをしている「みよちゃん」です! 記事は株式会社iimonアドベントカレンダー15日目です! 弊社では不動産仲介業者向けのサービスを開発しています。 私が所属しているチームでは、chrome拡張機能を開発しており、IndexeDBを使用する機会が多くあります。 今回は普段使用するIndexedDBについて調べたことを以下にまとめていきたいと思います! IndexedDB 1. IndexedDBとは IndexedDBとはブラウザに実装されているデータベースの機能です。ブラウザ内で処理を完結させることができるので、通信が発生せずオフラインの状態でも使用することができます。データベースはRDB(Relational Database)ではなくキーバリューストアです。 2. ブラウザが持つほかのデータ管理機能との違い ブラウザ

    BlueTowel
    BlueTowel 2023/12/15
  • React-three-fiberを使ってみた! - iimon TECH BLOG

    React-three-fiber セットアップ 立方体 Canvas mesh boxGeometry meshStandardMaterial 回る立方体 useFrame まとめ 参考 こんにちは。 アドベントカレンダー14日目! 担当のタクシです。 普段はフロントエンド中心の業務をしています。 アドベントカレンダーを書くために、最近あまり触れていないThreejsについて調べていたのですが、 「React three js」 と検索したらReact-three-fiberというものが出てきました。 Reactthreejsがオーバーヘッドなしに使える!らしいので試してみました! (あまり体力が続かなかったのでThreeやReactに関する詳しい説明を省いてしまっています。。すみません。。) React-three-fiber React-three-fiberはReactコンポー

    React-three-fiberを使ってみた! - iimon TECH BLOG
    BlueTowel
    BlueTowel 2023/12/14
  • TypeScriptのジェネリクス型を使って型に柔軟性を持たせる - iimon TECH BLOG

    ■はじめに ■ジェネリクス型とは? ■ジェネリクス関数を作る ■extendsで制約を付与したジェネリクス型 ■keyofで制約を付与したジェネリクス型 ■ジェネリクスクラスを作る ■ユーティリティのジェネリクス型 ◆Required < Type > ◆Readonly< Type > ◆Pick< Type, Keys > ■最後に ■参考記事 ■はじめに こんにちは、株式会社iimonでエンジニアをしている「白水」です。 業務では、主にフロントエンドを担当させていただいています。 記事はiimonアドベントカレンダー13日目の記事となります。 今回はTypeScriptの「ジェネリクス型」について書いていきたいと思います。 ■ジェネリクス型とは? ここにnamesという変数があり、文字列を要素として持っている配列があります。 この配列の型は、画像の通りstring[]です。 これは

    TypeScriptのジェネリクス型を使って型に柔軟性を持たせる - iimon TECH BLOG
    BlueTowel
    BlueTowel 2023/12/13
  • ロバストPython 型チェックを効果的に導入するための考え方 - iimon TECH BLOG

    こんにちは、株式会社iimonでエンジニアをしている遠藤です。 記事はアドベントカレンダー8日目の記事となります。 昨日に引き続きアドベントカレンダーを担当させていただきます。 はじめに 今回は既存のプロジェクトに型チェックを効果的に導入するための考え方について書いていこうと思います。 というのも、既存のPythonプロジェクトに型チェッカツール(mypy)が導入された際に、どのコードにどこまで明示的に型アノテーションをつけるのが良いのか考えたことがありました。既存のすべてのコードに型をつけきるには大きなコストがかかります。また、型アノテーションを詳細にすると、コードが明確化する分、コードへの型アノテーションの追加や型チェッカツールのエラー解消などにより多くのコストがかかるようになります。 そこで、最近読んだ「ロバストPython」で参考になった記載を自分なりにまとめてみました。 3つの

    ロバストPython 型チェックを効果的に導入するための考え方 - iimon TECH BLOG
    BlueTowel
    BlueTowel 2023/12/12
  • TypeScriptプロジェクトでディレクトリ単位のカプセル化をする - iimon TECH BLOG

    こんにちは、株式会社iimonでエンジニアをしている遠藤です。 記事はアドベントカレンダー7日目の記事となります。 TypeScriptでは、ファイルがプロジェクト内でカプセル化できる最大の単位になります。 そのため、ファイルでexportされていない変数や関数等は同じファイル内でしか読み込めず、また、exportされている変数や関数等に関してはプロジェクト全体で参照できるようになります。 ただ、プロジェクト全体から参照したくない場合もあるかと思います。 例えば、Reactで以下のように、同じディレクトリのコンポーネントを参照するコンポーネントがあるとします。 Drink/Drink.tsx import DrinkItem from './DrinkItem' export const Drink = () => { return ( <div> <p>飲み物一覧</p> <div>

    TypeScriptプロジェクトでディレクトリ単位のカプセル化をする - iimon TECH BLOG
    BlueTowel
    BlueTowel 2023/12/07
  • MySQLで全文検索機能を使う際のパフォーマンスについて調査してみた - iimon tech blog

    こんにちは、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な

    MySQLで全文検索機能を使う際のパフォーマンスについて調査してみた - iimon tech blog
    BlueTowel
    BlueTowel 2023/12/01
  • 太陽と地球を作って眺めて宇宙規模で思ったこと - Qiita

    皆さん、メリークリスマス!が終わりそうですが、 アドベントカレンダー最終日です。 締めにふさわしい内容では決してありません。 正直色々考えすぎて考えがまとまっていません&納期が近いのでてんやわんやですが、 クリスマス=ほぼ年の終わり ということで、今年の締め括りは宇宙規模でいきたいのです。 #今年は大変でしたね 今年はなんだかとても大変でしたね。。(まだ続きそうですが) あっという間に生活は一変し戸惑うことも多かったです。 ニュースなど、目先にある情報を見ているととてもビクビクしますし、落ち着かないですよね。。 もちろん、大切なことですが、やはり少し疲れてしまうもの。 なので少し視点を変えて、自分と世界を見つめ直してみたいのです。 #太陽 太陽ってすごいですよね。 太陽系の中心にあり、とてもとても大きい恒星です。 我々が日中、外の優しい光を浴びれるのは太陽のおかげですね。 太陽をもっと近く

    太陽と地球を作って眺めて宇宙規模で思ったこと - Qiita
    BlueTowel
    BlueTowel 2020/12/25
  • 3年前の自分がつくったバナーをリメイクしてみる - Qiita

    記事はプラコレAdvent Calendar 2020の記事です。 こんにちは。デザイナーのやぶづかです。 プラコレへ新卒入社してから、今年で5年目にさしかかり、 仲間・環境・考え方、そして技術的な面―… 色々なことが変わったなと振り返る場面も多くなりました。 変わったなというよりは、 幅が広がったと表現するべきかもしれません。 今回は私が入社前、インターンの時に制作したデザインを振り返りつつ、 「現在の私ならどうするか」リメイクするところまでを行ってみたいと思います。 2017年(3年前)の制作をふりかえる ほんの一部ですが、当時の制作物です。 バナー制作を主に行い、イラスト自体も自分で描いていることが多かったです。 よくOKが出たな…と思うものもたくさんありますが、 結局は世の中に出してみないとわからないもの。 不格好でも実践で戦う環境を与えていただけたことは、 あらためて感謝のきも

    3年前の自分がつくったバナーをリメイクしてみる - Qiita
    BlueTowel
    BlueTowel 2020/12/24
  • よく使用するcURLコマンド - Qiita

    12/23って思い出深いですよね。 さて今週はみんな大好き、 curl(主にコマンド)について記事を書こうと思います。 読み方については「シーユーアールエル」と「カール」があるのですが 「カール」が正しいようです。 curl自体の説明は色んな方がされているので 使用頻度が高いであろうコマンドをメインに、備忘録も兼ねてまとめてみました。 curlとは 様々な通信プロトコルをサポートし、リクエストを送信することが可能です。 有名どころでいうとこんな感じ FTP, HTTP, HTTPS, IMAP, LDAP, POP3, SCP, SFTP, SMB, SMTP, Telnet 公式HP:https://curl.se メールの送受信できるのは知らなったです! ただ現状、使うことは無さそうなので、ここまでに。 使い方 基的なコマンドはこちらになります。 curl [option(long

    よく使用するcURLコマンド - Qiita
    BlueTowel
    BlueTowel 2020/12/23
  • 基本的なSQL構文集 - Qiita

    記事はプラコレAdvent Calendar 2020の記事です! 覚えておきたいSQLをまとめました! (学んだことは随時追加更新していこうと思います!) 基操作 テーブルを作成 テーブルを作成するにはCREATE TABLE文を使う。

    基本的なSQL構文集 - Qiita
    BlueTowel
    BlueTowel 2020/12/22
  • 来年の検索周り最重要要素「コアウェブバイタル」についてまとめてみた – 冒険島MAGAZINE

    こんにちは、高木です! 今年もやってまいりましたアドベントカレンダー! 参加させていただきますよ今年も! 今年はこの素晴らしい冒険島マガジンができたので、こちらで執筆させて いただきます! 今年もSEO界隈では多くの指標やアルゴリズムが 日々改善されましたね。 Googleさんのこのアルゴリズムは「ランキング要素にはしません!」と いうのは基信じてはいけません! 基後からなると考えておいて問題ないでしょう。 それはGoogleさん自信も検索の仕方をとても快適にするために 行っているわけですから、見過ごすわけにはいかないのですよね! そんな中でも今年の中頃からささやき始められて 来年にはランキングの指標にもすると公式にアナウンスもありました 「コアウェブバイタル」についてまとめて行こうと思います。 聞き慣れない言葉や、横文字が多いので、半分私の備忘録として Googleさんの参考などもあ

    BlueTowel
    BlueTowel 2020/12/20
  • 【開発ブログ】今年のデザイン制作「ストーリー」と「ゲーム」 – 冒険島MAGAZINE

    記事はプラコレ Advent Calendar 2020の記事です。 プラコレでデザイナーをしているあずです。 普段は開発ブログで、社内の開発インタビューや社内制度について記事を書いているのですが、今回は年の終わりということで今年一年の制作について振り返ってみました。 1年を振り返って 世の中的に振り返ると、どうしてもネガティブな単語が出てきてしまいますが、「コロナ」や「自粛」「リモートワーク」など今まで当たり前だったことがガラッと変わった1年だったと思います。 そんな中で、社内では多くのリリースがあり、新たな挑戦や価値観のアップデートもたくさん起こりました。 その中で自分の中で特に意識していたことはなんだろうと振り返ると、「ストーリー」と「ゲーム」だったかもしれないなと思い至りました。 ざっくりと自分の中で印象的だった開発を振り返りつつ、その2点についてまとめていきます。 1.リブラン

    BlueTowel
    BlueTowel 2020/12/19
  • プラコレ Advent Calendar 2020のカレンダー | Advent Calendar 2020 - Qiita

    The Qiita Advent Calendar 2020 is supported by the following companies, organizations, and services.

    プラコレ Advent Calendar 2020のカレンダー | Advent Calendar 2020 - Qiita
    BlueTowel
    BlueTowel 2020/12/19
  • 結局フロントエンドエンジニアってなんなんでしょうかっ! - Qiita

    はじめに こんにちは。 プラコレでフロントエンド(&たまぁにサーバーとか)を担当しているエンジニアのタクシです。 今回のテーマはそもそも、雪が見たい!と思いThree.jsで雪を降らせてみようとか思っていたのですが、ちょうど一昨日パラパラとですが鎌倉でも雪が降ったので私の雪欲は満たされました。 豪雪で困っている方も多いということでもう雪なんて見たくない!と言われても仕方がないので、テーマを変えることに。。 ということで、来年には駆け出し新卒エンジニア三年目を迎えるタクシ的 「フロントエンドエンジニア」ってなんなんだ? ということについて考えたいと思います。 フロントエンドとは フロントエンド(Front-end)とはフロント(Front)が英語で「表」という意味であるように、 ユーザー(今読んでいるあなた)の目にふれ、実際に触れられる表側、つまりは顔の部分のことを一般的には指します。 フロ

    結局フロントエンドエンジニアってなんなんでしょうかっ! - Qiita
    BlueTowel
    BlueTowel 2020/12/18
  • 一年間書き続けてきた技術ブログを振り返ってみる - tamakipedia

    こんにちはKOです。 今回は今まで続けてきたこの技術ブログを経て気づいたことを赤裸々に綴っていこうと思います。 2020年の1月からスタートして現在で約130記事、 3日に一回のペースで書き殴っているという風になります。 PV数は年間で4500PV、一記事あたり35PV、、まだまだ伸び代がありますね〜! 今から技術ブログを書きはじめようかなって方がいらしたら、そういった人たちの参考に慣れば嬉しいです。 もうやっている人はブログあるあるだと思って優しい気持ちで読んでいただけると幸いです。 ブログを始めたきっかけ 私はブログを始めたのは、当時インターンさせてもらっていた会社の 先輩エンジニアの方におすすめいただいたことがキッカケです。 ですが、私自身長い文章を書くのが嫌いだったので、 稚拙でも気にしない〜といったテンションで書き殴っていきました。 当時読んでいたにも「とにかくアウトプットの量

    一年間書き続けてきた技術ブログを振り返ってみる - tamakipedia
    BlueTowel
    BlueTowel 2020/12/17