はてなブックマーク

はじめに フロントエンド開発エンジニアとして、作業中の細かい点に注意を払うことで、コードの可読性を向上させ、よりエレガントに見せることができます。 今回は、一目で理解できる便利でエレガントなJavaScriptのコツをいくつか紹介します。 これらのコツは、コードの効率性と可読性を向上させることを目的としています。 ソフトウェア開発において、コードの簡素化と可維持性の向上は常に重要な目標です。次の6つの実用的なJavaScriptテクニックを使用して、より効率的なコードを作成できます：if...elseのスパゲッティコードを削減し、冗長なループをパイプライン操作やfind、includesで置き換え、一貫した結果変数を使用し、オブジェクトの整合性を保つ。Apidogは、API管理と自動化の分野で強力なサポートを提供し、複雑なAPIコールの迅速な統合と管理を可能にし、プロジェクトのパフォーマン

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 推論において優れた性能を発揮し、オープンソースであるため無料のAIを探しているなら、新しく立ち上げられたDeepSeek R1は素晴らしい選択です。これはGPT-4、o1-mini、Claude 3.5などのモデルと競争し、それを上回っています。テストした結果、非常に良いと感じました！ Visual Studio CodeでGitHub Copilotに似たコードエージェントとして直接使用し、コストをかけずに使用したい場合、LM Studio、Ollama、Janなどのツールを使ってその方法をお見せします。 最近なぜDeepS

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに フロントエンドエンジニアのみなさん、 要素を非活性にする際、disabled=trueを使っていませんか？ アクセシビリティ的にそのやり方は良くないです。 最近、アクセシビリティに配慮したアプリケーションの開発に携わっています。 その中でシニアエンジニアから頂いたフィードバックについて共有したいと思います。 結論 disabled=true ではなく aria-disabled=true を使う disabledの場合 disabledが付与されている要素はフォーカスができません。 そのため、キーボードを用いて操作しているユー

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンドエンジニアの皆さん、「アクセシビリティ対応」って知っていますか？ （僕は1週間前まで知りませんでした...） 簡単にいうと 誰でも情報を手に入れることができるようにすること 目が見えなくても情報が伝わる・操作できる キーボードだけで操作できる 一部の色が区別できなくても情報を取得できる 音声コンテンツや動画コンテンツでは、音声が聞こえなくても何を話しているかわかる というように、身体的に障害を持っている方でもなに不自由なくWebアプリケーションを使うことができるようにすることです。 内閣府が定める 「合理的配慮の提供」は今

背景 お試しでreactを触ってみたところ、入力フォームで、各フォーム毎に State を管理すると大変だと思うことがありました。 ここら辺スッキリ書けるといいなと思って調べてみて、いくつか方法あったので学習がてらメモで残します。 簡単なデモ シンプルなタスク管理アプリを想定します。 タスクのタイトル、担当者、内容を入力して、list化するだけの簡単なアプリです。 画像荒くてごめんなさい useState地獄 この簡単なタスクの仕様でも、タイトル、担当者、内容についてステートを管理しないといけないのが目に見えています。 useState で管理したコードが以下になります。 上流のコンポーネントから受け取ったaddTodoを使用してタスクを追加します。 import React, { useState } from "react"; import { Todo } from "../type

背景 モーダルを作るってダルくないですか？ モーダル自身を作成して・・・ モーダルの背景を作成して・・・ モーダル内のボタンを押すとモーダルと背景が非表示になって・・・ モーダルの位置を固定して・・・ 背景とz-index調整して・・・ etc・・・ 実装しないといけない要素が複数あるので面倒という話です。 そこで、この dialogタグ の登場です。 簡単にいうと上記で列挙した機能を簡単に作ってくれるすごいやつです。 実は結構前（2014年）から存在していたのですが、対応しているブラウザがChromeやOpera のみでした。それが、2022年に 標準ブラウザで対応できるようになり、実用性が出てきたので、これを機に触って理解しようと思います。 WEB+DB vol.135 でも紹介されていますが、 実際に使ってみて「便利だな！」と思ったので、備忘録として残しました。 使い方 dialog

初めに Github Copilot や Amazon Codewhisperer 自動でコード生成するAIとしてどちらを使った方がより快適な コーディングライフが送れるのでしょうか？ 簡単なTaskのCRUDを作成する中で どちらが良くて、どう使えば効率的にコーディングできるのかを探ってみます。 導入方法 AIの導入方法は以下の記事をご参照ください。 詳細が丁寧に説明されていました m(__)m Github Copilot 【GitHub Copilot】登録方法の解説と試してみた Amazon Codewhisperer 無料で始めるAmazon CodeWhisperer on VSCode（Github Copilotと同等の性能？） 試した環境 Ruby 3.1.0 Rails 7.0.4 Visual Studio Code 1.7.7 結論 Github Copilot を

概要 .NET Core (6.0) で作られた WPFアプリにて、プロセス間通信(IPC)を行う方法。 同じPCで動作するアプリケーション間で通信できればよかったので、NamedPipe を使うことにしました。 NamedPipe を使うことに至った経緯と、サンプルアプリケーションを紹介します。 きっかけ 二重起動を禁止する にあるように、Mutex を用いて二重起動を防止する WPFアプリを作りました。 また、uap:Protocol を設定して、windows.protocol (例: hogehoge://) で、アプリを起動するようにしていました。 Protocol で起動すると新たにプロセスが起動しますが、すでに起動していたプロセスに、Protocol のパラメータを渡したく、IPC をしたかったのがきっかけです。 Handle Protocol Activation and

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

概要 職場でTerraform勉強会を開催することになったので、勉強会の資料のベースとなる内容を記事にしました。 これからTerraformを触りはじめる方が最低限知っておけば良さそうだと思った内容をまとめています。この記事では、構築対象のリソースはAWSを想定しています。 対象読者 Terraformを使ったことがなく、これから触ってみたい方 AWSを手動で構築したことがあるけれど、コードで管理したことがない方 この記事のゴール Terraformの概要を把握する 基本的な文法を覚える 必要なドキュメントから自力で情報を探せるようになる この記事では、0からTerraformプロジェクトを構築できるようになることは目指していません。 (ディレクトリ構成の話などは長くなってしまうので、それはまた別の記事にまとめたい) 導入 Terraformとは HashiCorpが開発しているインフラ構

普段、クローラー開発をメインに仕事をしている。 業務上、データを収集するために様々なサイトにアクセスする機会があり、日々アクセスブロックと格闘している。 今回は自分の備忘録も兼ねて、スクレイピングでアクセスブロックに合わないための技術や対処法をまとめておく。 扱うスクレイピング技術はRubyのopen-uri、curlコマンド、selenium。 改めて言うまでもないが、クロール先サイトの規約や関連法律の遵守はしよう。 アクセスブロックされたときにチェックする項目 アクセスブロックには様々な種類があり、適切な手段をもって回避する IP 1：アクセス頻度 頻繁にサイト側にリスエストを送信すると、ロボット判定される可能性がある。 解決策：sleep時間を増やす。クロール回数＊sleep＝所要時間＜許容所要時間に収まる範囲で、sleepは長く取る。 2：同じペースでリスエストを送信すると、ロボッ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 Qiitaのストックを整理するためのサービス「Mindexer(ミンデクサー)」のフロントエンドを Vue.jsで構築したSPAのアプリケーションからNuxt.jsでSSRを行うように再構築しました。 LambdaでExpressサーバーを動かし、その上でNuxt.jsを動かしています。 この記事では、今回の開発で得られたNuxt.jsに関するTipsやインフラ構成などについて解説していきたいと思います。 なお、Vue.jsからの移行に関する解説は含みません。 サービスについて 「Mindexer(ミンデクサー)」については、こち

概要 ALB（Application Load Balancer）を導入し、サービスの冗長化を行う。 今回は、HTTPでの通信とし、SSL証明書の設定は行いません。 本番運用を想定したものではないので、ご注意ください。 環境 Amazon Linux 2 前提条件 VPCが作成されていること Webサーバインスタンス作成してあること インターネットゲートウェイがアタッチされたサブネットが作成されていること ALBの作成 ロードバランサーの設定 EC2 > ロードバランシング > ロードバランサー　を選択し、ロードバランサーの作成をクリックします。 Application Load Balancerを選択します。 任意の名前を入力。 スキームには、インターネット向けを選択し、インターネットからの接続を許可します。 リスナーには、HTTPを選択し、HTTPリクエストをロードバランサーで処理でき

概要 Qiitaのストックを整理するためのサービス「Mindexer(ミンデクサー)」のインフラをEC2からFargateに置き換えました。その際に得られたTipsをまとめた記事となります。 AWSの環境は全てTerraformで構築しています。開発環境のみECSのEC2起動モードも利用しています。 ソースコードは、こちらで公開しています。 https://github.com/nekochans/qiita-stocker-terraform なお、ECSのスペックについては本番を想定した設定となっていませんのでご注意ください。 サービスについて AWS + Laravel + Vue.js でQiitaのストックを整理するサービスを作りました！【個人開発】 にて解説ししていますので、こちらも合わせて見ていただけますと幸いです😊 バックエンド、フロントエンドの技術についてもソースコード

React Hooks はとても便利で、Custom Hooks を上手く実装することで、再利用性の高いコードを、簡潔に実装することができます。 しかし、Hooksを不用意に使用してしまうと 意図しない無限ループに陥ったり、正しくStateが反映されなかったりすることがあります。 useCallback を使い無限ループを避ける 例えば以下のようなDivの大きさを取得するuseRectというCustom Hooksについて考えてみます。 const useRect = () => { const [rect, setRect] = useState<ClientRect | DOMRect>(); const ref = useRef<HTMLDivElement | null>(null); useEffect(() => { const target = ref.current; if

はじめに 今回はサーバー(Server)側の開発をすることなく、Unityにてログイン機能を追加する方法について記事をあげさせていただきます。 目指す画面としてはこのようなイメージです。 準備するもの 動作環境 MacOS : 10.13.3 Unity : 2019.2.8f1 mBaaS : Unity SDK v4.0.3 基本最新版に近いものなら大丈夫そう。 手順 まずは下記サイトを参考にSDKを導入までを行ってください。 クイックスタート Unityを触ったことのある人なら、 約20分ほどで終わります。 その後 ・ログイン機能を作る ・ハイスコアをサーバーに保存する ・[ハイスコアランキング機能を作る] (https://mbaas.nifcloud.com/doc/current/tutorial/unity_highscore.html) の順番で進めてまいります。 今回はサ

概要 CodeDeployを利用したFargateでのBlue/Greenデプロイメントをコンソールから実装します。 基本的な内容は下記の記事を参考にしています。記事には書かれていないECRリポジトリのイメージの更新も含めて記載し、デプロイの流れを説明しています。 AWS CodeDeploy による AWS Fargate と Amazon ECS でのBlue/Greenデプロイメントの実装 | Amazon Web Services 全体の流れ FargateでBlue/Greenデプロイメントを実装するための前提条件と、全体の流れを把握します。 前提条件 ECRにリポジトリが作成されていること ECRにリポジトリにlatestタグがついたDockerメージがpushされていること ECSクラスターが作成されていること ECRにリポジトリを作成しDockerイメージをpushする方法

概要 ECS+EC2で動作しているアプリケーションをFargateに変更にします。 ECS+EC2での環境構築は、LaravelアプリケーションをAWS上のDockerで動かすを参考にしてください。 全てマネジメントコンソール上で行います。 前提条件 LaravelアプリケーションをAWS上のDockerで動かすと同様のECS+EC2の環境が構築されていること Farageteについて メリット コンテナのためのEC2の管理が不要 コンテナのスケールに合わせてインスタンスタイプの変更、あるいはスケールアウトさせる必要がない インスタンスタイプの選択が不要 AutoScaleのタイミング設定が不要 デメリット コンテナホストにssh接続できない Dockerコマンドが実行できないため、コンテナの状況を確認するといったことができない ログドライバがawslogsのみ 料金 EC2単位ではなく、

概要 LaravelのアプリケーションをAWS上のDockerで動かすための環境を構築します。 具体的には、以下を行います。 コンテナを構築するためのDockerfileを作成する ECRリポジトリの作成 → AWS CLIで作成 1.で作成したDockerイメージをECRにをpushする ECSの環境構築 → マネジメントコンソールから作成 前提条件 AWS CLIがインストールがインストールされていること コンテナを構築 phpとnginxの2つのコンテナを構築します。Dockerfileは、それぞれ下記の通りです。 phpコンテナのDockerfile 必要なソースコードをコンテナ内にコピーし、依存ライブラリのインストールを行なっています。 FROM php:7.2.10-fpm-alpine COPY . . WORKDIR /var/www/html RUN set -x &&

概要 Qiitaのストックを整理するためのサービス「Mindexer(ミンデクサー)」をリリースしました🙌 この記事では、Mindexerで利用している技術について、解説したいと思います。 GitHubでソースコードも公開しています。 https://github.com/nekochans/qiita-stocker-frontend https://github.com/nekochans/qiita-stocker-backend https://github.com/nekochans/qiita-stocker-terraform サービスについて 個人サービスを開発しようとしたきっかけは、技術力の向上のためでした。でも、どうせなら自分だけでなく、多くの人に使ってもらえるようなサービスが良いと思いQiitaのストックを整理するためのサービスを作りました。 こんな問題抱えてません

概要 LaravelでAPIを作成している際に、CORSの設定を行いました。その際にCORSについて色々と調べたので、その内容をわかりやすくまとめたいと思いこの記事を書いています。 初心者の方にも理解できることを目標に書いたので、ご参考になれば幸いです。 CORSとは ブラウザは、セキュリティを高めるために同一オリジンポリシーが適用されています。この同一オリジンポリシーは、あるオリジンから他のオリジンのリソースにアクセスできないように制限するものです。 このポリシーが適用されているため、webアプリケーションから異なるドメインにアクセスする(外部のAPIを利用するなど)場合には、エラーとなってしまいます。 このエラーを回避し、クロスドメインアクセスを可能にするための仕組みとして用意されているのが、CORSです。 クロスドメインアクセスをした場合、実際にどんなエラーとなるのか確認してみましょ

node.js とフレークワークexpressの開発環境/アプリケーション の構築手順はいろいろあると思いますが、コマンドベースでシンプルにまとめてみました。 NVM (Node Version Manager)のインストール

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? post_status について ちょっと気になったので調べてみた。 post_status の種類 リファレンスによると post_status は以下のとおり。 publish A published post or page pendingpost is pending review drafta post in draft status auto-drafta newly created post, with no content futurea post to publish in the future privatenot

WordPressが標準で出力するフィード WordPressがデフォルトで出力する（管理画面から操作可能な）フィードは４つですかね。 http://example.com/?feed=rss http://example.com/?feed=rss2 http://example.com/?feed=rdf http://example.com/?feed=atom カスタムパーマリンク設定していたら、 http://example.com/feed/ http://example.com/feed/rss/ http://example.com/feed/rss2/ http://example.com/feed/rdf/ http://example.com/feed/atom/ feed/はデフォルトに設定してあるフィードを呼びます。特に指定した覚えがなければrss2になるみたいで

WordPress4.0リリース WordPress4.0 がリリースされましたね。 主な違いを WordPress3.9 と比較してご紹介したいと思います。 プラグイン追加画面が変更に 左 4.0 / 右 3.9 プラグイン追加画面がグラフィカルになりました。 互換性や最終更新日なとが一覧画面で視認できるのは便利ですね。 アイコンってこれまでありましたっけ？ メディアを簡単に埋め込めるように 同じテキストをそれぞれ入力してみます。 左 4.0 / 右 3.9 テキストモードではこのような感じですが、ビジュアルモードに切り替えると・・・ 左 4.0 / 右 3.9 外部メディアのURLを入力したところが、自動的に埋め込まれます。 （※セキュリティの関係で、標準で対応するサービスが制限されています。対応サイトはこちらで確認できます。） また、入力エリアがコンテンツの量に応じて自動的に調整され