- 1. 【javascript】手軽に選択肢を追加！createselectbox関数の活用術
- 2. 永久保存版！0からReactを勉強するならこのロードマップに従え！
- 3. こんにちは！！@Sicut_studyです！
- 4. 【JavaScript】MapなどのキーにString型ではなくSymbol型を使うべき理由
- 5. passport.deserializeUser が呼ばれません（初心者です。）
- 6. 英語が話せてプログラムも書けるようになったのでより就職が難しくなった件について
- 7. 【vue.js】動的にテーブル行を追加する方法
- 8. `$(document).ready()`の用途とJavaScriptとjQueryの記述の違い
- 9. Pleasanterの添付ファイルに登録されたPDFを表示する話。
- 10. TypeScript 配列内のオブジェクトのプロパティに配列を追加（分かりにくくてすみません）
- 11. [JS/TS] xhr (非同期通信オブジェクト)を使ってみる
- 12. タイムズカー予約のヒヤヒヤ解放: ブックマークレットでの半自動化
- 13. 自動運転シミュレーション その6
- 14. 自動運転シミュレーション その5
- 15. chrome拡張機能作り方2
- 16. PHPでLINEのクローンアプリを作成
- 17. JSXの基礎文法〜最低限知っておきたいルール〜
- 18. Promise.all()を使って反復処理を速く実行
- 19. javascriptでのソート機能について
- 20. yarnコマンド実行時のエラー「code: ‘ERR_OSSL_EVP_UNSUPPORTED’」の解決法
- 21. CheerpJのJavaからブラウザベースへの移行が、エンタープライズJavaアプリケーション向けリモート・デスクトップ・ソリューションを凌駕する理由
【javascript】手軽に選択肢を追加！createselectbox関数の活用術
## 【javascript】手軽に選択肢を追加！createselectbox関数の活用術
こんにちは。今回は、javascriptについて初心者エンジニアに向けて、手軽に選択肢を追加するためのcreateselectbox関数の活用術についてご紹介します。
javascriptは、web開発において非常に重要な言語であり、動的な要素やインタラクティブな機能を実現するために頻繁に使用されます。その中でも、選択肢を追加する際にはcreateselectbox関数が大いに役立ちます。createselectbox関数は、手軽に選択肢を作成し追加するための便利な関数であり、初心者エンジニアでも簡単に活用することができます。
以下では、createselectbox関数の導入と基本的な使い方から、静的な選択肢の追加方法と表示のカスタマイズ、動的な選択肢の追加と削除の実装手法、api連携による選択肢の自動取得と更新方法、ユーザビリティ向上のためのuxデザインとcreateselectbox関数について詳しく解説していきます。
## createselectbox関数の導入と基本的な使い
永久保存版！0からReactを勉強するならこのロードマップに従え！
# はじめに
こんにちは！！@Sicut_studyです！
最近フロントエンドを学ぶ機会が多く、色々試してみて今後 **React** が選ばれる場面が増えるのかなと思いました。
そこで初学者の方が`JavaScript`の次に学ぶ言語の選択肢になりやすいのではないかと考え今回の記事を作成しました。
私自身、**2022年9月**に**独学**で **React** を学び始めました。
最初JavaScriptもままならない状態から始めたのですが、Reactを学ぶことでピースがうまくはまってJavaScriptをより理解できましたし、Reactができるようになるこ
【JavaScript】MapなどのキーにString型ではなくSymbol型を使うべき理由
### 【概要】
MapなどのキーにString型ではなくSymbol型を使うべき理由は、意図しないデータ変更を防ぐためです。
具体的なコードで確認していきます。### 【コード】
“`js:Symbol型を使った方法
const symbolMap = new Map();
const hogeSymbol = Symbol(‘test’);
const hugaSymbol = Symbol(‘test’);
symbolMap.set(hogeSymbol, ‘hoge’);
symbolMap.set(hugaSymbol, ‘huga’);
console.log(symbolMap); // Map(2) {Symbol(test) => ‘hoge’, Symbol(test) => ‘huga’}
“`“`js:String型を使った方法
const stringMap = new Map();
const hogeString = ‘test’;
const hugaString = ‘test’;
stringMap.set(hogeString,
passport.deserializeUser が呼ばれません（初心者です。）
passport.js を使いログイン、ログアウト処理をしています。
ローカルサーバーでは上手くログイン処理ができました。
しかし、別PCでサーバーを立ち上げた所、passport.deserializeUser が呼ばれなくなり、認証、認可処理ができなくなりました。
localhost:3166 と 192.168.1.4:3166 だと cookie のセッションID保存は変わってくるのでしょうか？
宜しくお願い致します。
.ready()`の用途とJavaScriptとjQueryの記述の違い
## アジェンダ
Webページを開発する際、JavaScriptやjQueryを使用してページの要素に対してさまざまな操作を行うことがよくあります。しかし、スクリプトが実行されるタイミングによっては、DOM（Document Object Model）がまだ完全に読み込まれていない可能性があります。このような状況でDOM要素にアクセスしようとすると、エラーが発生するか、期待した動作をしないことがあります。
ここで`$(document).ready()`の役割が重要になります。
## 1. **`$(document).ready()`とは？**
`$(document).ready()`は、jQueryのメソッドで、ページのDOMが完全に読み込まれた後に指定した関数を実行するためのものです。
“`javascript
$(document).ready(function() {
// この中のコードは、DOMが完全に読み込まれた後に実行されます。
});
“`また、短縮形として以下のようにも書くことができます。
“`javascript
$(functiPleasanterの添付ファイルに登録されたPDFを表示する話。
Pleasanterの添付ファイルに登録されたPDFを表示する話。
Pleasanterの添付ファイル機能は便利だが、登録したファイルを確認するにはダウンロードし開く必要がある。
せっかく登録された情報が面倒くさいという理由で活用されないのは残念なので、Pleasanterの添付ファイルを表示する機能を追加した。## 使ったもの
>Pleasanter Ver1.3.45.0 Community Edition## ことの流れ
電子帳簿保存法対応として領収書の保存をimplem/pleasanterでやりたいとの相談があった。
添付ファイルの項目使ってやればいいじゃん、と軽く答えたものの、Pleasanterの添付ファイルはいちいちダウンロードしないと内容が見えないので、登録した取引先や金額の確認に手間がかかるので何とかしたいとのこと。
確かに面倒くさいので、なんとかすることにした。Pleasanterの添付ファイル本体はAPIを使って取得することができる、と公式のドキュメントにある。
https://www.pleasanter.org/manual/684960TypeScript 配列内のオブジェクトのプロパティに配列を追加（分かりにくくてすみません）
# やること
食べ物の配列を食べ物タグの配列がある
“`ts:foods.ts
const foods = [
{ id: 1, name: ‘りんご’, tag: ‘果物’ },
{ id: 2, name: ‘ピーマン’, tag: ‘野菜’ },
{ id: 3, name: ‘バナナ’, tag: ‘果物’ },
{ id: 4, name: ‘ナス’, tag: ‘野菜’ },
{ id: 5, name: ‘メロン’, tag: ‘果物’ },
];const foodTags = [
{ id: 1, name: ‘果物’ },
{ id: 2, name: ‘野菜’ },
{ id: 3, name: ‘肉’ },
];
“`食べ物タグの配列にlistプロパティを追加してそこに、食べ物のオブジェクトを格納する。
“`ts:foods.ts
[
{
id: 1,
name: ‘果物’,
list: [
{ id:[JS/TS] xhr (非同期通信オブジェクト)を使ってみる
# xhrとは
xhr（XMLHttpRequest）は、JavaScriptを使用して非同期にサーバーと通信するためのオブジェクトです。これにより、ページ全体を再読み込みすることなく、部分的にデータを更新することができます。
? ポイント: xhrはJavaScriptで非同期通信を行うためのオブジェクトです。
## xhrの基本的な使い方
1. **オブジェクトの作成**: まず、XMLHttpRequestオブジェクトを作成します。
“`javascript
const xhr = new XMLHttpRequest();
“`? ポイント: `new XMLHttpRequest()`でxhrオブジェクトを生成します。
2. **通信の設定**: 通信のタイプやURLを設定します。
“`javascript
xhr.open(‘GET’, ‘https://example.com/data’);
“`? ポイント: `open`メソッドで通信の方法やURLを指定します。
3. **レス
タイムズカー予約のヒヤヒヤ解放: ブックマークレットでの半自動化
## 背景
カーシェアリングのタイムズカーを月になんどか使います。予約のときに日時をプルダウンで選択するのですが、うっかりなわたしは、いつか間違えそうで、いつもヒヤヒヤしています。
おそらく、カレンダーを見て予約の時間を考えながら、６つの要素を間違えない、というのがストレスなのだと思います。
頻繁に行う操作なので、ブックマークレットにしました。
## ブックマークレット作成
– ブラウザのブックマークバーにブックマークをつくります。名前はなんでもいいですが、`timesBookFill`としました。
– ブックマークのURL欄に、下記のJavaScriptを貼ります。## ブックマークレットの実行
– 予約サイトを開き、ブックマークバーのブックマークをクリックします。
– 開始日と終了日を入力す自動運転シミュレーション その6
# 概要
自動運転シミュレーションを開発している。
server,client方式に変更する。
client、書いてみた。# 写真
# サンプルコード
“`
let url = “ws://localhost:50002/”;
let agent = new WebSocket(url);
agent.onmessage = function(event) {
var data = JSON.parse(event.data);
draw(data.action);
};
agent.onclose = event => alert(`Closed ${event.code}`);
agent.onopen = event => alert(`open`);
agent.onerror = event => alert(`err自動運転シミュレーション その5
# 概要
自動運転シミュレーションを開発している。
server,client方式に変更する。
serverをLivebookで、書いてみた。# サンプルコード
“`
defmodule ElixirSocketTesting.ClientAgent do
def start_link do
Agent.start_link(fn ->
[]
end, name: __MODULE__)
end
def add(client) do
Agent.update(__MODULE__, fn list ->
[client | list]
end)
end
def remove(client) do
Agent.update(__MODULE__, fn list ->
List.delete(list, client)
end)
end
def all do
Agent.get(__MODULE__, fn list ->
list
end)
end
enddefmodule Car do
def agchrome拡張機能作り方2
# 作る
まず適当にフォルダを作成します。
manifest.jsonを作成します
“`manifest.json
{
“name”: “名前”,
“description”: “説明を書く”,
“version”: “書き換える（例えば1.0のように）”,
“manifest_version”: 3,
“action”: {},
“content_scripts”: [
{
“js”: [“s.js”],
“matches”: [“https://www.google.com/*”]
}
]
}
“`
そしてフォルダの中にs.jsを作成してメモ帳で開いて
そこの中には
“`s.js
let body = document.querySelector(‘body’)
let addElement = document.createElement(‘h1’);
addElement.textContent = ‘イエーイ’;
body.prepend(PHPでLINEのクローンアプリを作成
メッセージを送受信ができるアプリを作ってみました。
# リポジトリをclone
“`bash
git clone https://github.com/gong-cha/line-clone
“`ソースコード
https://github.com/gong-cha/line-clone
# 実装した機能
– 新規登録
– ログイン
– ログアウト
– アカウント削除
– リアルタイムメッセージ受信
– 画像投稿
– アイコン表示
– 既読機能
– ユーザー一覧に最新のメッセージ表示# 意識したこと
– プリペアードステートメント
– 飲んす機能
– デザイン# リアルタイムメッセージの手法の検討
**ブラウザに通知する方法の検討**
– WebSockets
–JSXの基礎文法〜最低限知っておきたいルール〜
# はじめに
初めてJSXファイル(TSX含む)を見て、何がなんやらわからない人に向けて、JSXの基礎中の基礎を書かせていただきます。# JSXの基礎文法
#### reactライブラリをimportする
JSXは必ずreactライブラリをimportする必要があります。実際のソースコードから下記の記述があることを確認してみてください。
“`React
import React from ‘react’;
“`#### return文の中がJSXの記法
基本的にはHTMLと同じ書き方となります。その認識をもった上でソースコードを読んでみてください。
ただし一部違うこともありますので注意してください。(例:HTMLのclassはJSXだとclassNameとなります。)#### キャメルケースで記述する
JavaScriptは-(ハイフン)を読み取ることができないため、キャメルケースで記述する必要があります。
もしソースコードに手を加えるとなった際は間違えないよう注意してください。#### ｛｝内はJavaScriptの世界となる
｛｝内はJavaScriptの記述Promise.all()を使って反復処理を速く実行
## はじめに
JavaScriptにおいて、for文中で同期処理を利用したい場合にasync/awaitでなくPromise.all()というメソッドを用いると良い、という話です。
自分自身がasync/awaitで反復処理を行い非常に実行に時間を要して困っていたため、記事にしてみました。## そもそもJavaScriptの同期/非同期処理とは
そもそも、JavaScriptは同期処理であり、非同期処理でもあるプログラミング言語です。
基本的にはコードを上から実行しますが、時間がかかる処理は終了を待たずに進んでいきます。
有名な事例ですが……“`js
console.log(“A”);
setTimeout(() => {
console.log(“B”);
}, 1000);
console.log(“C”);
“`上記の場合、”A”が出力され、次にsetTimeout関数が実行され、1秒後にBが出力されることになります。
待ってる間もプログラムの実行が進むので、先に”C”の出力が行われ、最後に1秒後の”B”が出力されます。## Promis
javascriptでのソート機能について
## はじめに
この記事ではtableタグの一覧をjavascriptでソートするだけの機能を備忘録もかねて記載しています。## ソース内容
百聞は一見に如かず、ソースは以下の通りです。
“`index.html
タイトル
name num price りんご 3個 yarnコマンド実行時のエラー「code: ‘ERR_OSSL_EVP_UNSUPPORTED’」の解決法 ## ファイル構成
– index.html
“`html
…
…
“`
– package.json
“`json
{
“license”: “MIT”,
“scripts”: {
“webpack”: “webpack”
},
“dependencies”: {
“webpack”: “5.22.0”,
“webpack-cli”: “4.5.0”
}
}“`
– webpack.config.js
“`js
const path = require(‘path’);module.exports = {
entry: ‘./src/index.js’,
output: {
path: path.rCheerpJのJavaからブラウザベースへの移行が、エンタープライズJavaアプリケーション向けリモート・デスクトップ・ソリューションを凌駕する理由
[]()
現在のめまぐるしい世界では、アプリケーションへのリモート・アクセスは必需品となっており、ユーザーはどこからでも、どのデバイスからでもソフトウェアやデータにアクセスできるようになっている。Javaアプリケーションへのリモートアクセスに関しては、[JavaからJavaScriptとWebAssemblyへのコンパイラであるCheerpJと](https://leaningtech.com/cheerpj/)、Citrixのようなリモート・デスクトップ・ソリューションの2つがよく使われる選択肢です。このブログ記事では、CheerpJがデスクトップJavaアプリケーションにアクセスするための優れた選択肢である理由を探ります。**1 – インストールの手間なし**
リモートデスクトップソリューションと比較してCheerpOTHERカテゴリの最新記事
- 2024.09.19
JavaScript関連のことを調べてみた
- 2024.09.19
JAVA関連のことを調べてみた
- 2024.09.19
iOS関連のことを調べてみた
- 2024.09.19
Rails関連のことを調べてみた
- 2024.09.19
Lambda関連のことを調べてみた
- 2024.09.19
Python関連のことを調べてみた