- 0.1. プログラミング初心者が⭕️❌ゲームを作ってみた。
- 0.2. deno.json（Deno設定ファイル）の書き方
- 0.3. 【Rails】Data Confirm Modal – backdrop
- 0.4. GraphQL + Sequelize でテーブル定義やクエリの実装などをちょっとだけ簡略化する方法
- 0.5. 【個人開発】タイピングゲーム「じゅげ〜む」を作ってみた
- 0.6. 【Javascript】 (小技) CSS Selectorで最初に見つけた1件以下を処理するワンライナー。
- 0.7. jQueryを用いたフォーム送信時に空欄がある場合にアラートを出す処理
- 0.8. WindowsなどからLinuxサーバのログを気軽に参照するサーバ
- 0.9. props.childrenにpropsを渡す。【React/cloneElement】
- 0.10. Phaser3で複数のシーンを扱うときの物理（arcade）の追加方法！
- 0.11. parameter 1 is not of type ‘Node’
- 0.12. ユーザビリティをあげるボタンの工夫(フロント)
- 1. はじめに
プログラミング初心者が⭕️❌ゲームを作ってみた。
##はじめに
初めまして、こんにちは！
私は現在32歳で未経験からエンジニアへの転職を目指して学習しています。トレーニングとしてJavaScriptを使い、⭕️❌ゲームを作成し勝敗判定ができるコードを書いてみました。
その過程を記事にまとめていきます。
##要件定義
今回はJavaScriptを中心に書き、HTMLとCSSでは簡単な枠組みを用意します。・ブラウザを開くと、５X5のマスが表示される。
・いずれかのマスをクリックすると、初めに⭕️、次に❌と交互に反映される。
・縦横斜めの何かで一列揃うと勝敗が判定され、アラートが表示されるこの内容を実現できる内容を目指します。
##実装
###1 レイアウト
初めにマスを用意します。
今回は5x５のマスを用意します。“`HTML
deno.json（Deno設定ファイル）の書き方
2021年9月14日リリースのv1.14で、deno.json（Denoの設定ファイル）が導入されした。
この記事では、設定ファイルの書き方について解説します。## なぜdeno.jsonが導入されたか
元々、DenoにはCargo.toml(Rust)やpackage.json(Node.js)のような設定ファイルが存在しませんでした。
しかし、– 権限指定用のコマンドラインフラグ(`–allow-xxx`など)が増えた
– 既にコマンドラインフラグで指定できるファイルが存在している（`import-map`と`tsconfig`）
– deno fmtやdeno lintに対する細かい設定を可能にして欲しいという要望が出ていたという理由から、設定ファイルが導入されることになりました。
## deno.jsonの特徴
Node.jsにおけるpackage.jsonの反省を踏まえた設計になっています。
– ブラウザと同様、deno.jsonが無くても動作する（あくまでオプションという扱い）
– ファイル中にコメントを書く場合は、拡張子をjsoncにする必要がある【Rails】Data Confirm Modal – backdrop
# backdrop とは
直訳すると劇場幕のことで、Webではモーダルを開いたときの背景の黒いところのことを言います。
# backdropをクリックしてもモーダルが非表示にならない方法
“`javascript
dataConfirmModal.confirm({
title: ‘Are you sure?’,
text: ‘Really do this?’,
commit: ‘Yes do it’,
cancel: ‘Not really’,
zIindex: 10099,
onConfirm: function() { alert(‘confirmed’) },
onCancel: function() { alert(‘cancelled’) },
onHide: function()GraphQL + Sequelize でテーブル定義やクエリの実装などをちょっとだけ簡略化する方法
## はじめに
業務でGraphQLを使うことになったんですが、GraphQLのモジュール宣言って面倒くさいですよね。
こういうの。“`javascript:server/modules.js
const typeDefs = gql`
type User {
id: Int!
name: String!
email: String!
recipes: [Recipe!]!
}type Recipe {
id: Int!
title: String!
ingredients: String!
direction: String!
user: User!
}type Query {
user(id: Int!): User
allRecipes: [Recipe!]!
recipe(id: Int!): Recipe
}type Mutation {
createUser(name: String!, email: String!, pa【個人開発】タイピングゲーム「じゅげ〜む」を作ってみた
# はじめに
Vue.jsの勉強をかねて、タイピングゲームを作ってみました。
制作期間は5日。
意外と時間をかけてしまいました。[https://flamboyant-beaver-eb2250.netlify.app](https://flamboyant-beaver-eb2250.netlify.app/)
[](https://gyazo.com/014144e13b57dcd8e59787fd0a75e9ca)
# 使用技術
フレームワーク：Vue.js
UIフレームワーク：Vuetify
ライブラリ：vue-confetti# デプロイ
netlify# 作ってみての感想
コンポーネントについての理解の甘さを実感し、次はコンポーネントをしっかりと活用したアプリケーションを作成してみたいと思います。
デザインがちょっと物足りなさがあるので、今後バージョンアップするかもしれません。# おわりに
暇な時間のお【Javascript】 (小技) CSS Selectorで最初に見つけた1件以下を処理するワンライナー。
# 「先っぽだけだから！」
一番信用のないセリフNo.1# 思い立ち
あるサイト用に、最初に見つけた画像を開く “bookmerklet“ を作成しようと考えていた。
基本 “ワンライナー“ は嫌いだが、“bookmerklet“ となると少々事情が異なる。今回は “新しく開く“ 動作を行うため、何度も実行されてしまうと、よもやセルフな “ブラクラ“ になるのでなんとか避けたい。
そんな訳で ~~butter~~ **better** ~~の~~ **な** ~~犬~~ **解** を模索してみた。
# 思案
## ① querySelectorAll + forEach
“`javascript:
document.querySelectorAll(‘img[src]’).forEach((img) => window.open(img.src));
“`
(‘A｀).｡oO (1回ででええねんで…)## ② Optional Chaining
“`javascript:
window.open(document.querySelectojQueryを用いたフォーム送信時に空欄がある場合にアラートを出す処理
## 概要
この記事は、以下のUdmeyの講座のセクション6の52,53の内容をまとめたものです
フォーム送信時に指定した項目に、空欄もしくは未選択がある場合にイベントが発火し、フォームの送信を中断し、アラートを出す実装内容です。https://www.udemy.com/course/javascript-kouza/
## コード概要
2つのメソッドを用いて実装します
`checkBlankメソッド`：空欄があるかどうかのチェック。ある場合には、アラートを表示&falseを返す
`$(“#f”).submit`：フォームにイベントを登録。送信されると発火## 実装内容
“`html:想定されるフォーム
props.childrenにpropsを渡す。【React/cloneElement】
# はじめに
props.childrenに対してpropsを持たせたい！となったので実装方法を探してみました。
*こちらは学習用メモです
*ドキュメントにあります。## cloneElement()
ReactにはcloneElementというAPIがあります。
今回はこちらを使用し、propsを渡していきました。### cloneElementの役割
> element から新しい React 要素を複製して返します。結果の要素は元の要素の props と新しい props が浅くマージされたものを持ちます。新しい子要素は既存の子要素を置き換えます。key と ref は元の要素から保持されます。（引用： https://ja.reactjs.org/docs/react-api.html）上記の通りにelementから新しいReact要素を複製という部分のelementがprops.childrenに値するという考えです。
使用する際は`key と ref は元の要素から保持されます。`こちらに注意しながら実装を行うといいかもしれません。### cloneElem
Phaser3で複数のシーンを扱うときの物理（arcade）の追加方法！
Phaser3の[公式？のコード例](https://phaser.io/examples/v3/)的な場所には複数のシーンの切り替え＋物理演算？(arcade)の追加の欲しかったドンピシャの情報が無く、this.うんちゃら….と書かれていて脳筋の数打ちゃで時間を浪費したのでもしよければ用です。
※出来てから気が付いたのですが、コード例の中にもドンピシャの情報はありました。game = new Phaser.Game(config);で
“`
//configの今回関わりそうな部分のみ抜粋
let config =
{
type: Phaser.AUTO,
parent: ‘game’,
physics:
{
default: ‘arcade’,
arcade:
{
gravity:
{
debug: false,
y: 300
}
}
},
scene: [
Title_Scene,
Aboutparameter 1 is not of type ‘Node’
実務でquerySelectorで最初のクラス要素を取得しようとしたらコンソールで以下のエラーが出た。
“`
Uncaught TypeError: Failed to execute ‘querySelector’ on ‘Node’: parameter 1 is not of type ‘Node’
“`例によってエラー文言で検索すると英語の記事が出てきた。
https://stackoverflow.com/questions/27079598/error-failed-to-execute-appendchild-on-node-parameter-1-is-not-of-type-no存在しない要素を呼んでてnullが返ってるのだという。
確認すると後から追加された要素なのでDOMで取得できないのは当たり前だった。ユーザビリティをあげるボタンの工夫(フロント)
はじめに
本記事では、ボタンでユーザービリティをあげるワザをちょっとご紹介します。
すぐ実践できるものばかりなので、是非参考にしてみてください。ボタンの活性化・非活性化
例えば、フォームを送信するのに2つの質問に答えないといけないものがあるとします。
条件に当てはまっていないとき（質問に１つしか答えていないときなど）は、ボタンを非活性化
条件クリアしたときに、ボタンを活性化しましょう。こすうることでユーザーが「直感的」に「ボタンが押せないこと」、「何かが足りていないこと」に気づけます。
むやみにボタンを押して「あれ、、、なんで何も反応しないの、、、押してるよね？？？」なんて混乱を防げます。※↓いったい何のアプリだよっていうツッコミは一旦置いといてください。
***?ワンポイ
度分秒(DMS)表記を十進数(Decimal)に変換する雑なやり方
`”北緯35度39分31秒 東経139度44分44秒”`や`”35°39′31″N 139°44′44″E”`などの表記を十進数表記に雑に変換する。
“`js
function dms2decimal(dms) {
return dms.split(/\D/).filter(d => d != “”).reduce((a, c, i) => {
const opt = {
1: 60,
2: 3600
}
const na = +a;
const nc = +c;
return na + (nc / opt[i])
})
}
“`“`js
> dms2decimal(“北緯35度39分31秒”);
<- 35.65861111111111 > dms2decimal(“東経139度44分44”);
<- 139.74555555555554 > dms2decimal(“35°39′31″N”);
<- 35.65861Firebaseの開発環境（local）を作ってみるよ
## 経緯
・firebase-toolsのバージョンが上がってCloud StorageのEmulatorが実装されたみたい
・Node.jsバージョン16がCloudFunctionsでサポートされたみたい## 必要なもの、必要な知識
・Firebaseとは何か勉強しておいて
・Terminal操作ができるようにしておいて（コマンドコピペできる程度で）
・Homebrew インストールしておいて
・Googleアカウントは作っておいて
・GitHubのアカウントは作っておいて
・Node.jsはインストールしておいて（記事内ではVer.16+でやるよ）
・エディタはVisual Studio Code使うよ
・Gitは使うからインストールしといて## 環境とか
・MacBookPro ’13 (2017) BigSur
・Homebrew 3.2.11
・Visual Studio Code 1.16.0
・Node.js 16.9.1## 事前に作成しておくと良いこと
・Googleのアカウント作成とfirebaseのプロジェクト作成、firestoreの作成
・Giスタートアップの小規模Webサービスのリアルな技術スタック
#はじめに
[プレースホルダ](https://placeholder.co.jp/)というスタートアップのWebエンジニア兼マネージャーのAkahoriです。
弊社はエンジニアは10人以上いるものの、Webエンジニアは私含め3人ほどです。
3人のWebチームで、どのような理由で、どのような技術を使っているか、苦労している点などを共有します。#サービス概要
先月、[リトルスパーク](https://litspk.com)というサービスをリリースしました。
子ども向けの、オンラインでの習い事プラットフォームで、先生と生徒をマッチングしています。
技術的にはいくつかの特徴を持ち、今回サンプルとして解説します。* 授業はライブ授業のみで、お互いにZoomで行います。
* ZoomのIDは弊社で管理し、先生側、生徒側、双方が参加ボタン１つで参加できるようになっています。
* コース登録（審査有り）や日程登録、プロフィール更新などは全て先生が行うため、その仕組みがあります。#実装
##使用したもの
・Google App Script
・LINE bot
・NEWS API(https://newsapi.org/)##LINEbotの設定
Markdown (とHTMLとCSS少し) でスライドを作るremark
## remarkとは
こういうのでいいんだよ、
「HTMLとCSSを使いこなせる人をターゲットにした、シンプルなブラウザ内マークダウン駆動のスライドショーツール」https://github.com/gnab/remark
> A simple, in-browser, markdown-driven slideshow tool targeted at people who know their way around HTML and CSS
“`html
タイトル
SyntaxError: Unexpected token < ``` 1. ./plugins/vue-pdf.jsを作成 ``` import Vue from 'vue' import pdf from 'vue-pdf' Vue.component('pdf', pdf) export default { // } ``` 2.main.jsに追記 ``` import Vue from 'vue' import App from '
ブラウザ上でcsvやxlsx等のシートを読み込む
csvデータをアップロードするための入力方法を色々まとめてみる。
## csvファイル
```js
const chardet = require("chardet")
const iconv = require("iconv-lite")var csvReader = new FileReader();
csvReader.onload = (e) => {
let data = new Uint8Array(e.target.result);
let encoding = chardet.detect(data);
let csv = iconv.decode(data, encoding);
document.getElementById("").value = csv;
};document.getElementById("
").addEventListener("change", (e) => {
let sheetFile = e.target.files[0];
csvReader.reaReact 電卓作ってみた
# 気が向いたのでReact+Javascriptで電卓を作ってみました。
+ 「1+1」とか「3*10」みたいな **2つの整数の四則演算** にか対応していません。（細かすぎると趣旨から外れるので）
+ TypeScriptは使っていません。
+ ソースコードは[Github](https://github.com/TBSten/react-calc)にあげているので適当に見てください。# 一緒に作りたい方向け
ハンズオン形式で作ってみたい方は以下を参照## 想定しているレベル感
+ 公式のチュートリアルをやったり、いろいろな教材を触ってみたがいまいちピンと来ていない
+ useStateやpropsの使い方は分かるけどいつ使うべきかはわからない
+ Reactの基礎を学んだが何か自分で作ってみたい
+ Todoリストを作ったけどいまいちピンとこない## 完成イメージ
- 2024.09.19
JavaScript関連のことを調べてみた
- 2024.09.19
JAVA関連のことを調べてみた
- 2024.09.19
iOS関連のことを調べてみた
- 2024.09.19
Rails関連のことを調べてみた
- 2024.09.19
Lambda関連のことを調べてみた
- 2024.09.19
Python関連のことを調べてみた