JavaScript 条件分岐(if)
## はじめに
ifとswitchについて理解はしているのですが、書き方がごっちゃになることがあるので自分用まとめです。## ifサンプルコード
“`js
$score = 100;if ($score === 100) {
echo “excellent!!” . PHP_EOL;
} else if ($score >= 80) { //elseifじゃなくてelse if
echo “Great!” . PHP_EOL;
} else {
echo “もうすこしがんばりましょう” . PHP_EOL;
}
“`
“`
excellent!!
“`
## 比較演算子
“`js
>= //以上
<= //以下 > //超過
< //未満 === //等しい !== //等しくない ``` ## 複数条件 ```js && and //なおかつ || or //もしくは ! //ではない ``` ## returnで処理の中断 ifの中でreturnを使用するとifを抜けます。 ## おわりに 基礎なんでち
TypeScriptでpubsubモジュールを実装する
:::note
## 概要
pubsubモジュールは、アプリケーション内の異なるモジュール同士が連携するための役割を果たします。
主に、2つのメソッドを提供しています。
`subscribeメソッド`: イベントに対して購読（登録）を行い、指定されたコールバック関数を保持します。購読されたイベントが発生した際に、このコールバックが実行されます。
`publishメソッド`: 指定されたイベントを発生させ、そのイベントに紐づいているすべての購読者（サブスクライバー）のコールバック関数を呼び出します。これにより、各モジュールが「イベント」という共通の方法を使って通信できるようになります。イベントが発生すると、そのイベントに登録された購読者のコールバック関数が順次実行される仕組みです。
:::# 背景
業務のコードでpubsub-jsを知ったので、PubSubパターン/モジュールを理解したいと思います# pubsub-jsとは
https://www.npmjs.com/package/pubsub-js
JavaScriptで書かれたトピックベースのPub/Subパターンの
JavaScriptで蟻本 グラフ 最小全域木 プリム法
# 概要
アルゴリズムの学習記録を投稿します。
今回は蟻本・グラフ・最小全域木のプリム法についてです。# 問題
“`
全域木の最小コストを求めよ。入力
graph1 = [
[INF,1,INF,INF,INF,INF,INF],
[1,INF,3,INF,7,INF,2],
[INF,3,INF,5,1,INF,INF],
[INF,INF,5,INF,8,INF,INF],
[INF,7,1,8,INF,5,INF],
[INF,INF,INF,INF,5,INF,10],
[INF,2,INF,INF,INF,10,INF]
]vertexCount = 5
出力
17
“`
※問題文は本には書かれていないので 入力と出力は自分がわかりやすいように書きました。# コード部分
“`javascript
//
/**最小全域木 プリム法 蟻本 p100
*
* @param graph{Array} 無向グラフ 隣接行列
*
素数を判定するのを作ってみよう！
素数判定機を作るとjsの基本的な機能がわかります！
作ってみましょう！# どうやって作る？
### 素数とは何？
素数→1ではない割り切れる数がその数と1しかない数
素数ではないやつ→合成数と1合成数は、1を含まないn×mを満たす数字(n,mは自然数)
…
入力される値がaとすると、
### a = 1 または aを割り切れる数が 2 ~ a-1 (自然数)にあれば素数ではない！
ということがわかります。コードを書いていきましょう！“`math
a = 1 またはa \equiv 0 \mod (2 \sim a-1)_{自然数}
“`# 書いていこう
“`
素数判定a は 1?
そうだったら素数ではない
そうじゃなかったらこれやる
2からa-1まで しらみつぶし(そのしらみつぶししてる数をiにする)
aはiで割り切れる？
そうだったら素数ではない
そうではなかったら素数の可能性がある素数か素数じゃないかを出す
“`
必要な関数とか計算とか書いていきます。
## javascriptの書き方
### 関
明るく楽しい、鉄道旅行ゲーム。
### 街から町への明るく楽しい、鉄道旅行ゲーム。
スペースキーを押すと新しいコースが生成されます。
コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。
“`html
JavaScriptにおけるデータ型を意識した最適なコーディング習慣
まず初めに、JavaScriptでは、TypeScriptやC#のように型の概念がそこまで厳密ではありません。
しかし、データ型を意識することでコードのバグを防ぎ、可読性の高いコードを書くことができるので、複数人で行うプロジェクトでは非常に重要になります。
こちらのブログでは、データ型を明確にすることで得られるメリットを解説します。### データ型とは？
型とは、データの種類のことです。例えば、数値型や文字列型などがあります。
### JavaScriptで扱う基本的なデータ型
今回は、特に使用例の高い５つに絞って説明します。
#### １．String(文字列型)
特徴：Stringは、テキストデータを扱うためのデータ型であり、シングルクォートやダブルクォートで定義されます。
使用例：下記のコードでは、message変数の中の文字をHTML内で使用しています。
“`
{{ message }}
Reactのコンポーネントに引数付きの関数を渡したら思ってたのと違う挙動になった
こんにちは！ 普段Webアプリの開発を行っているn-kokiと申します。
タイトルの通り、Reactのコンポーネントにpropsで引数付きの関数を渡したら、思っていたのと違う挙動をしたので、その内容と解決策について紹介します。
# 何がしたかったのか Reactのpropsで変数の他に、関数も渡すことができることは、多くの方がご存じかと思います。私はこれを使って、ボタンのコンポーネントに対してonClickで発火する関数を渡そうとしました。引数の無い関数では思い通りに動くのですが、引数をつけるとボタンを押さずともページが読み込まれた瞬間に実行されていしました…
“`react:App.js import Button from ‘./Button’
function App() { const func1 = () => { alert(“ボタンが押されたよ！”) }
const func2 = ( data ) => { alert(“ボタンが押されたよ！\n” + data + “っていうデータも受け取ったよ！” ) }
ret
【JavaScript】オブジェクトのループ処理
## `for…in`ループ
`for…in`ループを使用すると、オブジェクトのすべての列挙可能なプロパティを繰り返し処理できます。
“`js const obj = { name: ‘Alice’, age: 25, city: ‘Tokyo’ };
for (const key in obj) { if (Object.hasOwn(obj, key)) { console.log(`${key}: ${obj[key]}`) } } “`
– `for…in`ループは、オブジェクトの各キーを反復処理 – `Object.hasOwn()`メソッドを使用して、オブジェクト自身のプロパティのみを処理
## `Object.keys()`メソッド
`Object.keys()`メソッドを使用すると、オブジェクトのキーの配列を取得し、それを使って繰り返し処理できます。
“`js const obj = { name: ‘Bob’, age: 30, city: ‘New Yor
赤い彗星。赤いモビルスーツに乗って、宇宙を飛び回るゲーム。
### モビルスーツに乗って、宇宙を飛び回るゲーム。
スペースキーを押すと新しいコースになります。
コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存し
所属ゼミのホームページを作ったときの話
## はじめに
Reactで所属しているゼミのホームページを作りました。現在トップページのみ完成しており他のページへのリンクがない状態ですが、今後も少しずつ作り込んでいきたい思っています。
また、既存のサイトを参考にしながら作りました。特に、明治大学武田ゼミさんのホームページはナビゲーションバーや全体のレイアウトを整える際に参考にさせていただきました。この場を借りてお礼申し上げます。サイトの制作にあたって参考にした記事等は最後の参考記事欄にリンクを貼っておきます。
この記事を通して、ホームページを自分で作ってみたい方や就職活動でポートフォリオ何を作ろうか迷っている方の参考になれば嬉しいです。
目次
1. 概要 – GitHubリポジトリ – 使用技術 – 機能一覧
2. このプロダクトを作ろうと思ったきっかけ？ 3. なぜその技術構成？ 4. 工夫したところ – レスポンシブデザイン – シンプルなUI 5. 苦労したところ – デプロイに時間がかかった
ブラウザバックで広告を表示させるスクリプト
ブラウザバック時に全画面でマスクページを表示させるスクリプト 表示させたい場所にスクリプトを読み込む
使用例： WordPressに組み込むならheader.phpあたりをカスタマイズして WEBページの
でスクリプトを読み込むようにすれば実装可能“`HTML
“`※ファイル名、ファイルパスは自分の環境に合わせて
### 使用例：index.php
“`HTML
ブラウザバックで全画面広告表示
サロゲートペアでWindows10でサポートしない絵文字を表示する
## はじめに
普段はMac環境で開発をしているため、Windows環境について考えることがあまりない。しかし最近、Windows 10で特定の絵文字が正しく表示されない問題があることに気づいた。
色々調べて、ユニコードに「サロゲートペア」という概念があり、このサロゲートペアを用いることで問題を解決できたため、記事として残してみた。## サロゲートペアとは
サロゲートペア(Surrogate Pair)は、直訳するとSurrogate(代理)のペアである。
### 何が代理？
これはUTF-16エンコーディングで使用される概念で、1つの文字を表現するために2つの16ビットコードユニットを使用する方法である。
例えば以下の地球の絵文字は一文字に見えるが、実際は長さ2の文字になっている。
“`js
const emoji = “🌍”;
console.log(emoji.length); // 出力: 2
“`### なぜ必要？
Unicodeは世界中のすべての文字を表現するために作られたけど、当初は16ビット（65,536文字）で十分だと考えられていた。
しか
農業・食品系のサイトを参考にヘッダーデザインを考える
# はじめに
今回は、農業・食品系のサイトでよく使われる動きとデザインについて考えていきます。# 参考サイト
– 食べて笑顔になる 土肥農園
https://www.dosuika.com/index.html
– 食菜卵(しょくさいらん)-たまごの八千代ポートリー
https://www.yachiyo-egg.com/# 農業・食品系のヘッダーラフ案
農業や食品では、アイコンやアニメーションを使って視覚的に楽しそうなイメージを作り上げるサイトが多い印象です。パッと見て「楽しそう」と感じると、その後の誘導がしやすくなるなと考えました。**視覚的に見て使いやすいヘッダー作り**をモットーにして制作していきます。## ①真ん中ロゴとアイコン付きヘッダー
### 全体のコード一覧
# 七五三とクリスマスが祝日になった
Googleカレンダーにて七五三とクリスマスが祝日になっていました。
これはGoogleの仕様変更によるもので、「日本の祝日」カレンダーの設定で「祝日のみ」を選択すれば変わります。
以下の投稿が参考になりました。ありがとうございます！
https://x.com/tkiyama/status/1830149754657128464
# JSライブラリ「date-holidays」も影響ある
世界の祝日が取得できるdate-holidaysも同様の動きをしており、
Reactについて学んだことをまとめる
以下のUdemyの講座を受講したので、Reactについて学んだ事をまとめる。
https://www.udemy.com/course/modern_javascipt_react_beginner/?couponCode=KEEPLEARNING
## Reactの要素
### JSX(JavaScript XML)記法
ReactはJSX記法を用いてコードを記述する。
JavaScriptの中にHTMLのような形でコードを書くことができる。
“`jsx
import { StrictMode } from ‘react’;
import { createRoot } from ‘react-dom/client’;const rootElement = document.getElementById(‘root’);
const root = createRoot(rootElement);const AppHoge = () => {
return (
<>Hello!
);
};root.render(
【26卒】エンジニア就活 これまでの開発経験
# この記事について
この記事は、思考の整理と理解を深めることを目的に、これまでインターンやハッカソンで習得してきた技術についてまとめたものです。
以降、何か新しい技術を学んだときや体験談を書こうと思ったときには、随時追加していきたいと思います。
## 開発履歴
### 個人開発
[所属ゼミのホームページを作った時の話（ポートフォリオ）](https://qiita.com/takutosan/items/035602f6c0bb81f4fd5d)– Reactコンポーネント
– Chakra UI
– Bootstrap
– ナビゲーションバー
– ハンバーガーメニュー（レスポンシブ対応）
– Swiper（スライダー）
– グリッドレイアウト### チーム開発
[ニフティ株式会社の5daysインターンで「プロバイダ比較サイト」を開発した話](https://qiita.com/takutosan/items/dfa2745cd0b48badf75c)
ネット記事を大量に読む人のためのRAC（アールエーシー）
## はじめに
RAC（アールエーシー）の実践としてネット記事を読みやすくするブックマークレットを作りました。
最初に、RAC（アールエーシー）とは何かについて説明します。次に、作ったブックマークレットについて説明します。
## 本記事の対象者
– RAC（アールエーシー）とは何かを知りたい人。
– 大量のネット記事を効率的に読みたい人。## RAC（アールエーシー）とは何か
RAC（アールエーシー）とは、コンピュータープログラムであるJavaScriptがウェブページの記述であるHTML構造やCSS構造を書き換えることによって、人がネット記事を読む行為を補助する機械であり、正式名称は読式補助演算機（Reading Assistant Computer）です。
ネット記事を読む行為自体にRAC（アールエーシー）は不要だが、RAC（アールエーシー）抜きでは読むスピードが低下してしまうため、実質的にはネット記事を大量に読む人にとって必要不可欠なツールです。
ブラウザの標準機能であるブックマークレットやブラウザ拡張機能であるTampermonkeyやStylus、およびそれ
suffix（サフィックス）の活用で、SVGアニメーションにレスポンシブに対応する
SVGアニメーションは、ウェブサイトに動きと魅力を加える素晴らしい方法です。しかし、異なる画面サイズに対応するレスポンシブデザインでは、SVGアニメーションの実装が難しくなることがあります。今回は、「suffix（サフィックス）」を使って、レスポンシブなSVGアニメーションを簡単に実現する方法を紹介します。
## suffixとは？
suffixとは、単語や文字列の末尾に付け加える部分のことです。今回のコンテキストでは、モバイル用のSVG要素のIDに付ける「_sp」という文字列がsuffixになります。
## レスポンシブSVGアニメーションの基本戦略
1. デスクトップ用とモバイル用に異なるSVGを用意する
2. 画面サイズに応じて適切なSVGを表示する
3. JavaScriptでアニメーションを制御する際、suffixを使って適切な要素を選択する## コードの実装
まず、HTMLの構造を見てみましょう：
“`html
PrettierのPre-commit Hookを入れる正しいやり方
# 1. 概要
フォーマットが不正のソースコードをgitブランチに混入しないよう、PrettierのPre-commit Hookを使ってコミットする前に自動的にフォーマットを行いたい。
色んなweb記事やオフィシャルサイトに古い情報があるため、混乱してしまうが、`2024年10月`現在の正しいやる方をこの記事にまとめる
この記事はprettier設定が終わっていることを前提とする。
# 2. 予備知識
## 2-1. Pre-commit Hookはなに？
gitが色んなhook機能を提供されていて、その中の１つはPre-commitである。名前の通り、コミット前に指定された処理が実行される。
プロジェクト直下の.git/hooksフォルダに色んなhookの雛形があり、ファイル名の`.sample`を消せば使える。
“`ls
applypatch-msg.sample fsmonitor-watchman.sample pre-applypatch.sample pre-merge-commit.sample pre-rebase.sample prepar
javascriptをサイトで実行する
# このページの作者が使うサイトは？
p5.js一択です！
p5.jsだと動きが見られるから、
なにかのアニメーションや図形、ゲームを作る時に使えます！
https://editor.p5js.org/
# 使ってみよう“`js
function setup() {
createCanvas(400, 400);
}let mouseX_m = 0;
let mouseY_m = 0;
function draw() {
background(220);
rect(mouseX_m, mouseY_m, mouseX-mouseX_m, mouseY-mouseY_m);
mouseX_m = mouseX;
mouseY_m = mouseY;
}
“`右の薄灰色の背景があるところでマウスを振ったりしてみてください！
このような動きを作れます。
いろいろいじって遊んでみてください！
