JS

こんにちは、にょろりんこの備忘録的技術ブログです。 今日は、Sae-Pornsのトップページに表示している免責事項オーバーレイについて紹介します。 いわゆる「未成年の利用を防ぐための年齢確認＋利用規約への同意画面」ですが、実はこの小さなオーバーレイにもSae-Pornsの設計思想が詰まっています。 通常、こういった確認画面では「一度同意すれば二度と出ないように」localStorageやCookieが使われます。ですがSae-Pornsでは「あなたの情報を一切保存しない」というポリシーを守るために、あえてそれらの仕組みは使っていません。 毎回オーバーレイが出てくるのはそのためです。少しだけご不…

JavaScriptでCSVデータ処理アプリを作る 〜 アプリ化と仕上げ 〜 はじめに 前回はCSVファイルのアップロード処理と、データの整合性チェックを実装しました。今回は、その結果をUIに反映させ、アプリとして完成させます。 UI設計とエラーメッセージ表示 まず、チェック結果をユーザーにわかりやすく表示するために、エラーメッセージを画面上に表示する部分を作成します。HTMLの要素を動的に操作し、エラーがあればその内容を表示するようにします。 function displayErrors(errors) { const errorContainer = document.getElement…

JavaScriptでCSVデータ処理アプリを作る 〜 プログラム実装 〜 はじめに 前回はシステム要件と詳細設計について説明しました。今回は、その設計を基に実際にプログラムを実装していきます。主に、CSVファイルのアップロード、データの読み込み、そして整合性チェックを行います。 CSVファイルのアップロードと読み込み まず、CSVファイルをアップロードするためのインターフェースを作成します。HTMLでは、ファイル選択ボタンを配置し、JavaScriptでファイルを読み込みます。以下のコードでは、FileReaderを使用してCSVファイルを読み込んでいます： function handleF…

JavaScriptでCSVデータ処理アプリを作る 〜 システム要件の策定と詳細設計 〜 はじめに 普段、私はPythonのpandasを使ってデータ処理を行っていますが、最近JavaScriptでアプリを作ってみたいと思い始めました。今回作成するアプリでは、複数のCSVファイルをブラウザで処理し、データの整合性チェックを行います。サーバーサイドではなく、クライアントサイドで完結するシステムを作成する予定です。 目標とするアプリの概要 このアプリでは、複数のCSVファイルを取り込んで、データの整合性チェックを行うことを目的としています。具体的には、以下の機能を実現します： ユーザーがCSVファ…

今回はJavaScriptで以下のJavaの記事を同じ様なケース。 plugout.hateblo.jp JavaScriptでクラスを利用せず、次の様にオブジェクト(連想配列)を生成した場合の話。 例: string1.js let data = {"key": "value"}; console.log(data); // {key: 'value'}と出力される この状態でkeyというキーを消し去りたい場合に、単純にnullを代入してもキー情報が残ってしまう。 例: string2.js let data = {"key": "value"}; data["key"] = null; c…

ランキング参加中プログラミング JavaScriptとは ES5とES6 Javascriptの組み込み方 htmlにscript要素を書く 外部スクリプトをインポートする。 strictモード altJS 命名規約 変数 演算子 式と文 定数 データ型 構造化プログラミング オブジェクト

sbfl.net PromiseとはJavaScriptにおいて、非同期処理の操作が完了したときに結果を返すもの。非同期処理とは、ある処理が実行されてから終わるまで待たずに、次に控えている別の処理を行うこと。 なぜこのような仕組みがあるのか？ JavaScriptはシングルスレッドでしか動かない性質があるため、複数の処理を並列で走らせることができない。 そのため効率的に処理をするために考えられた仕組みが非同期処理と呼ばれるものになる。 非同期処理とは「ある処理が実行されてから終わるまで待たずに、次に控えている別の処理を行うこと」 Promiseは処理が実行中の処理を監視し、処理が問題なく完了す…