- 1. JavaScriptでのモジュール化 import, export
- 2. Java、Python、JavaScriptでよく使われる構文や機能を比較した表
- 3. JavaScriptの非同期通信, Ajax通信
- 4. 未経験者と成果物（LP）を作成しました
- 5. DenoでクソデカCSVを読む
- 6. フロント開発で役に立つ、JavaScriptの関数についてのあれこれ
- 7. ノベルゲームの進捗機能を作ろうとしてハマった話
- 8. JavaScript で「 〇〇 と同じ 」的な チェックボックス によるフォームの 自動入力 を実装する
- 9. 【備忘】エンジニア歴2年、最近気を付けられるようになってきたこと コーディング編
- 10. 30時間かけてJavaScriptが練習できるアプリを作りました。
- 11. ページ: 途中下車ウォークの記録
- 12. getElementById()を使って入力フォームから値を取得する
- 13. p5.jsでマルコフ連鎖を使って生き物っぽいものを作ってみる
- 14. [javascript] なぜ「forEachでasync/awaitは使えない」と言われるのか
- 15. 【JavaScript】ハッシュを使いたい。でも順番は変えたく無い。その気持ち、わかります。
- 16. 自動補完でinputの背景色が変わらないようにする方法
- 17. Next.js 13 から next/link の Linkコンポーネント が 常に aタグをレンダリングするようになったので共有します
- 18. [javascript]Dateで日付の比較をする時は日付のフォーマットに気をつけようという話
- 19. 選択範囲のテキストを取得していろいろするためのクローム拡張サンプル
- 20. 【Rails】HERE Maps APIで地図機能を作ってみる
JavaScriptでのモジュール化 import, export
“`javascript:/modules/area.js
export function triange(base, height){
return (base * height)/2;
}export function circle(r){
return r * r * Math.PI;
}
“`“`javascript:main.js
import { triange, circle } from ‘./modules/area’;console.log(triange(3,8));
console.log(circle(10));
“`関数のほかに変数やクラスをexportすることもできる。
“`javascript:/modules/constants.js
const THRESHOLD = 100;
const MAIN_COLOR = ‘purple’;
const MODAL_WIDTH = 800;
const LIST_LENGTH = 100;
const DEFAULT_SORT = ‘created_at’;e
Java、Python、JavaScriptでよく使われる構文や機能を比較した表
## Java 、 Python 、 JavaScriptでよく使われる構文や機能を比較した表
| Java | Python | JavaScript |
|——|——–|————|
| `public class` | – | `class` |
| `class` | `class` | `class` |
| `public static void main(String[] args)` | `def main():` | `function main()` |
| `System.out.println()` | `print()` | `console.log()` |
| `int` | `int` | `number` |
| `double` | `float` | `number` |
| `boolean` | `bool` | `boolean` |
| `char` | `str` | `string` |
| `String` | `str` | `string` |
| `void` | – | `undefined`
JavaScriptの非同期通信, Ajax通信
# 同期処理とは
上から順番にひとつずつ処理されていく。
一つの処理が終わるまで次の処理は実行されない。# 非同期処理とは
一つの処理が終わるのを待たずに次の処理を実行する“`javascript
setTimeout(() => {
console.log(‘こんにちは’);
}, 3000);
“`
第二引数の秒数(3秒)待って第一引数の中身を実行する「○秒待ってから処理する」あるいは「何かが完了したら処理する」ということも実現できるようになっている。
# Ajax
Asyncronous JavaScript + XMLの略。
ユーザーが何かのアクションをするとサーバーで生成された新しいHTMLを読み込む方法ではなく、非同期通信を行いながらHTMLの必要な箇所だけをサーバーから取得して既存のHTMLを書き換える方法。サーバーから結果が返ってくるまで他の処理を止めてしまうとその間JavaScriptの処理が止まってしまう。
Ajax通信には非同期処理を組み合わせて利用することが必要になる。“`javascript
//APIURLを叩く
f
未経験者と成果物（LP）を作成しました
# はじめに
現在、私は職業訓練校にて、プログラミングを学習しています。
当然ですが、訓練校に通う目的は、第一は就職をすることになります。
そこで、より良い就職先に入社ができるように、同じ生徒同士で成果物を作成しました。
この記事は
– プログラミング未経験から就職のために成果物を作成したい方
– 未経験者をまとめるリーダーの方
– 初心者に指導を行っている方を対象に作成しました。拙い部分もあるかと思いますが、大目に見てください（笑）
# 今回作成したLP（ランディングページ）
– https://shenshou-shouten.vercel.app/
– https://github.com/takumi-uezono0/cryptid-shopsite今回は成果物を作成して就職活動に活かすことを目的に、期間は12月の１ヶ月間のみで作成しました。
正直、未経験者同士で作成していることもあり、完成度はまだまだですが、提示すること自体はできるようにしております。
改善点については後述しておりますので、「今後の課題」をご確認ください。## 使用した技術
– react
–
DenoでクソデカCSVを読む
Denoを使って巨大なCSVファイルを開く機会があったので、その方法の覚え書きです。
## DenoでCSVを読み書きする方法（通常ver.）
通常、DenoでCSVを読むには、標準ライブラリの`parse`関数を使います。
“`ts
import * as CSV from “https://deno.land/std@0.170.0/encoding/csv.ts”;const path = new URL(import.meta.resolve(“./path/to/file”));
const text = await Deno.readTextFile(path); // ファイルを文字列として読み取り
const data = CSV.parse(text); // 文字列をCSVとしてパース
console.log(data);
“`（※検索すると`BufReader`を使うやり方も出てきますが、これは古いやり方で現在はあまり推奨されていないようです。）
また、CSVをファイルに書き込むには以下のように`stringify`関数を使います。
“`t
フロント開発で役に立つ、JavaScriptの関数についてのあれこれ
## はじめに
日々フロント開発やコードレビューを行うなかで、「JavaScriptの関数について改めて復習、整理しておこう」と感じたので、まとめてみました。
フロント開発に関わっている方や、フロント開発を勉強中の方に読んでいただけたらと思います。## JavaScriptの関数の様々な仕組みや使用方法
### アロー関数
従来の“function“ではなく、“=>“を用いた関数宣言。
– 匿名関数
– 引数が一つの場合は“()“が省略可能
– 単一式の場合は、“{}“や“return“を省略できる“`js
// 従来の関数
function (a, b){
return a + b + 100;
}// アロー関数
(a, b) => a + b + 100;
“`:::note warn
**注意点**
thisやsuperへの結びつけを持たないので、メソッドとして使用することができなかったり、コンストラクターとしても使用することは出来ません。
:::### オブジェクトのプロパティに関数を入れる
関数はオブジェクトのプロパテ
ノベルゲームの進捗機能を作ろうとしてハマった話
## そもそもどういうのを作ったのか
こんなのを作ってました。よくあるセリフをクリックしていくと途中で分岐が現れてその選んだ分岐の結果によってGood EndだとかBad Endだとか変わるやつです。
ハマった部分はここですねぇ
大学の実習の講義の一環でWEBサービスを立ち上げてそこにノベルゲームを実装してました。## 何がハマったのか
先ほども説明したようにこのゲーム、分岐があるんですね。つまりこのよ
JavaScript で「 〇〇 と同じ 」的な チェックボックス によるフォームの 自動入力 を実装する
例えば複数人で泊まるホテルを予約する時、宿泊者の情報を入力する際に2人目以降の住所記入欄に「代表者と同じ」みたいなチェックボックス があったりしますよね。でチェック入れたら1人目のフォームに入れてる住所が勝手に入力されるみたいな。それやります。
## 仕様
「代表者（1人目）と同じ情報を入力する」というチェックボタンを入れると2人目の入力フォームに1人目のフォームの値がコピペ される。
その後2人目のフォームを編集した場合チェックボックスのチェックが外れる## 実装
以下のようなHTMLファイルでフォームを作成していることを想定します。~~~html
【備忘】エンジニア歴2年、最近気を付けられるようになってきたこと コーディング編## はじめに
エンジニアになって2年が経過した私が最近気をつけられるようになってきたことについての備忘録です。1年後くらいに振り返って懐かしむことを目的としています。序盤は「気をつけられるようになってきたこと」というには抽象度が高すぎる内容になってしまいましたが、大目に見てください。
## 型定義ちゃんとやる
:::note warn
TypeScriptに依存する内容です
:::私自身、TypeScriptを触り始めた当初は
「型定義？何それおいしいの？」
「定義するメリットがよくわからん、時間かかるし…」などと愚民丸出しで斜に構え、隙あらばany型に逃げようとしていました。
しかし、強いエンジニアほどany型に逃げないことに気づき、型定義と向き合う覚悟を決めたのでした。### 仕様書の代わりになる
以下の型なしTypeScriptファイルを読んでみます
“`typescript:index.ts
export class GetOrder {
async execute() {
const orders = await this.
30時間かけてJavaScriptが練習できるアプリを作りました。
# 30時間かけてJavaScriptが練習できるアプリを作りました。
ご存じの通り、JavaScriptが他のプログラミング言語と違うところは、もともと**ブラウザのため**に作られたということです。今では、Node.js等でバックエンドでも使用できるようになりましたがその基本は変わっていません。
私がJavaScriptを習い始めたころはコードを書きながら実際にいちいちconsole.log()を加えながらどういう動きをするのか確かめる作業を繰り返していました。
そこでこの**JSひろば**アプリを作成してみることにしました。
このアプリを通して皆さんにJavaScriptがどう使えるかを、実際の例を使って、自分のコードを書きながら試していただけると嬉しいです。
## [JSひろばを試す](https://js-hiroba.com)
ページ: 途中下車ウォークの記録
次のページを作成する方法です。
[途中下車ウォークの記録](https://ekzemplaro.gitlab.io/trip/)
コードは Gitlab に置きます。
[trip](https://gitlab.com/ekzemplaro/trip)プロジェクトは、
Pages/Plain HTML
というテンプレートを使って作成します。
public 以下のフォルダー構造
“`text
$ tree public/
public/
├── data.json
├── index.html
getElementById()を使って入力フォームから値を取得する
## はじめに
入力フォームに入力した値を取得する方法を説明します。## 結論
`getElementById()`と`valueプロパティ`を使うことで入力フォームの値を取得することができます。
## 説明
まずは、`getElementById()`を使って入力フォームの要素を取得します。
その際、引数には取得したいid属性名を指定します。“`jsx
let inputElm = document.getElementById(‘id属性名’).value;
“`
id属性の要素取得後、valueプロパティを使って入力フォームの値を取得します。
“`jsx
let inputVal = inputElm.valueconsole.log(inputVal); // 入力フォームの内容が表示される。
“`ちなみに「getElementById(’id属性名’).value」というように、まとめて記述することもできます。
## 参考サイト
[https://magazine.techacademy.jp/magazine/210
p5.jsでマルコフ連鎖を使って生き物っぽいものを作ってみる
こんにちは！
東海メンターのだすです。
この記事は[Life is Tech ! Tokai Advent Calendar 2022](https://qiita.com/advent-calendar/2022/life-is-tech-tokai)の3日目の記事です。# 最近のメディアアートすごいね
最近メディアアートにハマってます。
作品を見ているとすごい作品ばっかりで見ていて全然飽きないです。
中には生き物を表現しているものもあり本当に永遠に眺めていられそうでアクアリウムのように部屋に置いておきたくなるものもありました。どうやったらそういう表現ができるのだろう、p5.jsでもできないかなぁというところでマルコフ連鎖を使って生き物を表現してみようという記事になります。
# 生き物をどうやって表現しようか
生き物的なものを作ろうと考えた時、まず生まれて、成長して、仲間を増やして、死ぬみたいなサイクルがあるよなということで状態変化を作ればいいのかと行きつきました。
状態変化・状態遷移と言えば**マルコフ連鎖**かな、ということでまずは生き物っぽいものをマルコフ連鎖を使っ
[javascript] なぜ「forEachでasync/awaitは使えない」と言われるのか
# はじめに
とあるメンバーから、表題のようなことを言われました。
どうやら以下のようなコードで、「`forEach`で`await`を使っているのに処理順がおかしくなる」とのことから、この結論に至ったそうです。“`javascript:動かないコード
async function testAsync(v) {
await new Promise(resolve => {
setTimeout(resolve, 100);
});
return v + 1;
}const data = [];
const params = [0, 1, 2];
params.forEach(async v => {
const res = await testAsync(v);
console.log(res);
data.push(res);
});
console.log(data);// [] 1 2 3
“`最初に`data`が空配列、そのあと`1` `2` `3`と表示されます。
「うんそれはそうなるよね･･･」と思いはしたのですが、彼に
【JavaScript】ハッシュを使いたい。でも順番は変えたく無い。その気持ち、わかります。
# JSのハッシュがクソな理由(あくまで筆者の主観です)
以下の結果は何が出力されるでしょうか?
“`javascript
let hash = {
76: {‘name’:’太郎A’, ‘age’:’23’},
55: {‘name’:’太郎B’, ‘age’:’26’},
82: {‘name’:’太郎C’, ‘age’:’46’}
};
console.log(hash);
“`
大抵の人（筆者を含む)が以下のような結果を期待するのでは無いでしょうか?
“`javascript
{
76: {‘name’:’太郎A’, ‘age’:’23’},
55: {‘name’:’太郎B’, ‘age’:’26’},
82: {‘name’:’太郎C’, ‘age’:’46’}
}
“`
しかし、実際には以下のようになります。
“`javascript
{
55: {‘name’:’太郎B’, ‘age’:’26’},
76: {‘name’:’太郎A’, ‘age’:’23’},
82: {‘name’:’太郎C’, ‘age’:’46’}
自動補完でinputの背景色が変わらないようにする方法
# はじめに
パスワードのinputを黒で実装していたら、Chromeの自動補完で白に変わるという不具合が発生、大変苦しんだので備忘録として残します。## 背景色が変わる原因
自動補完後、下記のようなスタイルが適用されていました。
“`scss
input:-internal-autofill-selected {
appearance: menulist-button;
background-image: none !important;
background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
color: fieldtext !important;
}
“`## 対処方法
シンプルに自動補完後のスタイルを上書きする形で落ち着きました。“`scss
input:-webkit-autofill {
box-shadow: 0 0 0 1000px rgb(0, 0, 0) inset !i
Next.js 13 から next/link の Linkコンポーネント が 常に aタグをレンダリングするようになったので共有します
## 目的
Next.js 12 と 13 で Linkコンポーネントの実装方法が変化したよ、のお知らせ
## 使用技術
– “next”: “13.0.5”,
– “react”: “18.2.0”,
– “react-dom”: “18.2.0”,## Next.js 12 までの Linkコンポーネント
Next.js 12までは`aタグ`を常にネストしないといけなかった
“`tsx
import Link from ‘next/link’// Next.js 12まではaタグを常にネストしないといけなかった
About
“`## Next.js 13 の Linkコンポーネント
Next.js 13以降は `aタグ` をネストしなくて良くなった
“`tsx
import Link from ‘next/link’
About
“`なので、[Next.jsのLinkコンポーネントにpassHref属性を付
[javascript]Dateで日付の比較をする時は日付のフォーマットに気をつけようという話
多分出尽くしてるネタだとは思うけど、ハマったので備忘録として投稿。
# あらすじ
以下のコードを実行したところ、
“`javascript
var currentDate = new Date(‘2022/12/01’);var startDate = new Date(‘2022-12-01’);
var endDate = new Date(‘2022-12-31’);if (startDate <= currentDate && currentDate <= endDate) { alert('師走です') } else { alert('師走じゃないです') } ``` アラートに `師走じゃないです` が出力された。 !?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!? # 何故こんな動きになったか？ Chrome だと `YYYY-MM-DD` だと時間が9時間ずれる不具合があるみたいです。 ```javascript console.log(
選択範囲のテキストを取得していろいろするためのクローム拡張サンプル
「～をgoogleで検索」の右クリックメニュー(コンテキストメニュー)を再現しました。汎用性があると思い、ソースコードを公開します。
※私の期待したユースケースマニフェストがv2(2021年までのブログ記事に散見)だとコードが動かなくなってしまっており、いろいろサンプルコードが動かなくなってしまっており、バージョンアップも簡単ではないので、材料集めに苦労しました。
というわけで作ったものを公開しますので誰かの種になりますように。ちなみに下記のサンプルもおすすめです。
https://github.com/GoogleChrome/chrome-extensions-samples“`json:manifest.josn
{
“manifest_version”: 3,
“name”: “nantoka-Searc
【Rails】HERE Maps APIで地図機能を作ってみる
# 概要
今回、無料でMap機能が使えるかつGoogleMapのAPIよりすごい！という話を
[以下の記事](https://qiita.com/Akira-Isegawa/items/a31be5893e362c6f10c3)で見かけたので、Railsで実装してみました！
投稿機能を実装していれば実装できる機能なので、ぜひ遊んでみてください〜！https://qiita.com/Akira-Isegawa/items/a31be5893e362c6f10c3
:::note warn
投稿機能の実装が必要です
:::# アカウント登録とプロジェクトの作成
以下の記事にある、`Developerの登録`を参考に進めましょう！https://qiita.com/Akira-Isegawa/items/a31be5893e362c6f10c3
上記の記事のようにプロジェクトの作成が終わったら
アプリのディレクトリ直下（Gemfileと同じ階層）に`.env`という名前のファイルを作成し
APIキーを`.env`に入れます。“`:.env
HERE_MAP_API_KE
