- 1. Angularの開発・実行環境について
- 2. DUO3.0勉強用ウェブサイトを開発してみた。
- 3. 記事からサブタイトルを抽出して目次を生成する
- 4. 【javascript】個人的な実装方針(2020年3月)
- 5. VuexのStoreをモジュールで分割する
- 6. ダーツボード再現記（Ｗｅｂ版）
- 7. nodejsのfsモジュールの使い方
- 8. JavaScript で シャッフルする
- 9. JavaScript 年 連番 配列
- 10. 【Javascript】複数の要素からクリックで特定の要素を取得して処理を行う
- 11. nodejsのpathモジュールの使い方
- 12. 【中級者向け】ツクールMVが勝手に落ちる？コードはあってるはずなのにエラー？あの現象の正体はメモリリーク
- 13. ライブラリLightboxをWordpressプラグインにする方法・・テスト
- 14. 【ゼロから解説】LINEとDiscordのグループをbotで接続する【無料･高速･鯖いらず】
- 15. [メモ] asyncをどこで使ったか
- 16. javascriptで簡単ストップウォッチ
- 17. Docker コンテナを使って Node.js 開発を始める
- 18. TypeScript でデフォルトで存在しない groupBy 機能を自作してみた
- 19. ReactはウェブやHTMLとは特に関係のないライブラリです
- 20. [jquery / js] 任意の値を取得し、html上に表示する方法(取得値と条件分岐)
Angularの開発・実行環境について
# 前提
– ローカルに node.js の環境が整備されていること。
– docker 関連のコマンドがローカル環境で実行できること。
– 実装はローカルの端末で行うが、実行は Docker のコンテナ上で行う。
– 実装者の使い慣れた開発環境を使いながら、バージョン不整合による不具合等を事前に極力防止するため。## 確認方法
### node.js
“`
$ node –version
v12.14.1
# npm –version
6.14.0
“`### docker
“`
$ docker –version
Docker version 17.12.1-ce, build 7390fc6
$ docker-compose –version
docker-compose version 1.25.0, build 0a186604
$ service docker status
* Docker is running
“`# 環境
– Windows 10 Home
– WSL2 で Ubuntu を構築し、作業を行っていますが Do
DUO3.0勉強用ウェブサイトを開発してみた。
今回は、DUO3.0をランダムに10問出題してくれるウェブサイトを開発しました。
経緯や学んだことを記事にしていきます。#DUO3.0とは？
560の例文が載っている言わずと知れた超有名英単語帳です。
余談ですが、私はこれを全て暗記したおかげでTOEIC 915取れました。興味がある方は是非！
[Amazonでチェックしてみてください！](https://www.amazon.co.jp/DUO-3-0-%E9%88%B4%E6%9C%A8-%E9%99%BD%E4%B8%80/dp/4900790052)#経緯
寝る前にランダムで10問程度DUOの例文を出してくれるアプリないかな、、、と思い、
いろいろ探したのですが、結局良いものがなかったので、今回自分で作りました。#成果物
流石に著作権が怖いため、ネットにはあげておりませんが、画像をお見せします！で書きました。
任意のクラス要素(*entryClassName*)の中にあるh3要素の値を指定したクラス要素(*toClassNmae*) に吐き出して目次を作るJSです。
“`JS
/** 記事から目次を作成する。
* @tocClassName 目次生成先のclass名
* @entryClassName 目次追加元のクラス名
* @addClass 見出しに追加したいclass名
*/
function makeTableOfContents(tocClassName, entryClassName, addClass=”) {
/** 対象classを全て格納 */
let contentsList = document.getElementsByClassName(tocClassName);
//配列に変換
contentsList = Array.from(contentsList);
/** 記事内のh3要素を全て格納 */
const
【javascript】個人的な実装方針(2020年3月)
#この記事について
今までほとんど手つかずだったJavascriptを実装しなければいけない時がやって来ました。
基本的なことがわかっていなかったので気づいたことをメモしていきます。
※個人的にJavaに少し慣れているのでJavaと比較している部分があります。
※記事内の「IE11ではサポートされていない」は2020年3月時点のサポート状況です。
※記事の内容に誤りがありましたらぜひ教えて頂きたいです。#はじめに考えること
まず(クライアントサイドの)Javascriptってブラウザで動かすので、**ブラウザによってサポートしている、してない**があるということです。
例えばJava(サーバサイド言語)を使っていると、「Listの実型引数は省略できるか？」や「ラムダ式が使えるか？」はJavaのバージョンを意識すればいいだけなので苦じゃないですが、Javascriptの場合、IEで動くの？Safariで動くの？を意識しないといけません。
特にIEはサポートしていない仕組みが多いので注意する必要があります。
なので、実装する前に以下はま
VuexのStoreをモジュールで分割する
# はじめに
vuexをいじっていく上でAPIをいじってstoreに格納する物が多い時、または多くなりそうな時
可読性、拡張性の点からstore/index.jsにごちゃごちゃ書くのではなくstoreごとに別ファイルにしよう
ただ、そのまま思うように書いていったらいろいろつまずいたので、今つまずいた！って人に読んでもらいたい。# モジュールで分割する時詰まったこと
– mutationが読み込めない
– actionが読み込めない
– gettersがうまくstateを取れなくてundefinedになってしまう#### 上記３つを修正する
## mutation、actionが読み込めない
思うように書いて行ったらこの２つがエラーメッセージが出てきた
“`
[vuex] unknown mutation type: (mutation名)
[vuex] unknown action type: (action名)
“`これの原因のコードは
#### actionを動かすコードにあり！！ (this.commit, th
ダーツボード再現記（Ｗｅｂ版）
### まえがき
うちにダーツボードが転生してきたのですが、計算機能がないので自作します。
転生される民のごとき知識なので、もっといい方法があるかもしれません。タイトル by
[なろうパロディ☆タイトルジェネレータ](https://aqueous-wildwood-63896.herokuapp.com/)成果物
See the Pen
nodejsのfsモジュールの使い方
fsモジュールの使い方をまとめました。
# 前提条件
– npmがインストールされていること# 同期と非同期
同期処理と非同期処理の2つのファイル処理が出来ます。
`Sync`と付けると同期処理で、付けないと非同期で処理されます。| 同期 | 非同期 |
| —– | —– |
| statSync | stat |
| readFileSync | readFile |
| copyFileSync | copyFile |
| unlinkSync | unlink |– **同期**は処理を完了するまで後続の処理を止める
– **非同期**は処理の完了を待たずに後続の処理を行う## 設定
`mkdir`コマンドと`touch`コマンドでファイルを作成します。“`shell
$ mkdir dir && touch test.js dir/test.txt
“`“`javascript:test.js
const fs = require(‘fs’)try {
fs.statSync(‘dir/test.txt’)
conso
JavaScript で シャッフルする
# はじめに
`JavaScript`で`Array`の中身をシャッフルしたいことがあり、
そういえばどういう仕組みなんだろうと考えたことがきっかけで調べてみることにしました。# フィッシャー–イェーツの手法
[ウィキペディア](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%83%E3%82%B7%E3%83%A3%E3%83%BC%E2%80%93%E3%82%A4%E3%82%A7%E3%83%BC%E3%83%84%E3%81%AE%E3%82%B7%E3%83%A3%E3%83%83%E3%83%95%E3%83%AB)を参考に考えてみます。
## 前提
ここに`1`から`5`までの数字が格納された配列があります。
これをフィッシャー–イェーツの手法でシャッフルしてみます。“`js
array = [1, 2, 3, 4, 5]
“`## 1. `1` から `N` までの数字を書く。
前提で準備した配列の状態から `N` は `5` です。
“`js
[1, 2, 3, 4, 5]
JavaScript 年 連番 配列
“`javascript
function getYearArray(from, to = new Date().getFullYear()) {
return […Array(to – from + 1)]
.map((_, index) => index)
.map(value => to – value)
.reverse();
}// [1900, …, 2020]
getYearArray(1900)
“`
【Javascript】複数の要素からクリックで特定の要素を取得して処理を行う
ポートフォリオ作成と同時並行で、最近は純粋なjavascriptのコーディングを練習しているのですが、いいねボタン実装のときにせっかくだからjavascriptを使おうと思って挑戦したら少し躓いてしまったので、そこんとこメモしとこうと思います。
#実現したいこと
複数の要素の中から特定の要素を取得し、その要素にのみ処理を行う。今回は、「複数のボタンのうち、特定のボタンをクリックしたら、そのボタンのみに処理が行われる」コードを書いていきます。
#HTML
まずはhtmlのコードから。“`index.html
Document
nodejsのpathモジュールの使い方
pathモジュールの使い方をまとめました。
# 前提条件
– npmがインストールされていること# 使い方
## 設定`touch`コマンドでファイルを作成します。
“`shell
$ touch test.js
“`“`javascript:test.js
const path = require(‘path’)console.log(‘basename:’, path.basename(‘./dir/test.txt’))
console.log(‘dirname:’, path.dirname(‘./dir/test.txt’))
console.log(‘extname:’, path.extname(‘./dir/test.txt’))
console.log(‘parse:’, path.parse(‘./dir/test.txt’))
console.log(‘join:’, path.join(‘dir’, ‘dir2’, ‘test.txt’))
console.log(‘relative:’, path.relative(‘./dir’,
【中級者向け】ツクールMVが勝手に落ちる？コードはあってるはずなのにエラー？あの現象の正体はメモリリーク
ツクールMVはほぼほぼいじれるけどプラグインは苦手な方を対象にした記事です。
###注意
※この記事はWindowsシリーズ（XP以降、それ以前は未確認）で確認したもので、その他の環境でも同じような原因・現象であることは保証できません。
※ざっくり解説です。誤謬があった場合は忌避せずご指摘いただけると幸いです。ツクールMVでド派手な動きをしてくれるプラグインが海外製のものには特に多いように思えます。
そんなプラグインを使ってゲームを作っていると、なぜか再現性のない（特定の条件で再現できない）下記の画像のエラーが出たり、エラーも出さずにゲームが突然落ちたり（クラッシュ）することがまれにあるかと思います。
あの現象は一体何なのか？ その正体は実はPCのほうにありました。
ライブラリLightboxをWordpressプラグインにする方法・・テスト
Qiitaで初投稿ですので気になった部分かあればツッコミをお願いいたします(笑)
タイトルの通り「LightboxをWordpressプラグインにする方法」を書いていきます。
わざわざプラグイン化しなくてもいいのですが簡単にテストできるようになるので便利かと思われます。
#LightboxをWordpressプラグインにする方法おおまかな流れ
– GitHubからダウンロード
– プラグインとして使えるように変更
– 完成・・・この流れで作成してい行きます。
## まずはファイルのダウンロードから
**Lightbox**
https://lokeshdhakar.com/projects/lightbox2/
そしたら解凍してフォルダ名「dist」の中しか使わないので他を削除してフォルダ名「dist」の名前を変更
※今回は自分用
【ゼロから解説】LINEとDiscordのグループをbotで接続する【無料･高速･鯖いらず】
# 前置き
Qiita初投稿です。よろしくお願いします。
(だらだらとした文章を書くのが好きなので冗長になってしまいますがご了承を。適当に読み飛ばしてください。)私はメッセージングアプリとしてDiscordを使っているんですが、これがメチャクチャ使いよいんですよね。一度この「1つのサーバーに小部屋がたくさんある」形式に慣れてしまうともうLINEなんて使いにくくて戻れません。
けれど世間で一般に使われているメッセージングアプリはLINEであり、その普及率は95%を超えています[^1]。かく言う私もスマホにLINEはインストールしてあります。また、LINEをメインに使っている人たちの中には「Discord？なにそれ？慣れるのめんどそうだね笑」なんて人も多いのではないでしょうか。
そこで私が考えついた答えがこれです。
**「DiscordとLINEのトークルーム接続したらええやん」**
けれど困ったことに、私の家にはサーバーがありません。電子レンジも冷蔵庫もあるのにサーバーはありません。そこで、botをサーバーレスで構築することを目的とします。
はい。というわけで実装していきましょう
[メモ] asyncをどこで使ったか
# アプリ起動してウィジェットをbuildする前に現在地を取得
“`dart
class _LoadingScreenState extends State{
@override
void initState() {
super.initState();
// — ここで使った —
getLocation();
// ——————
}void getLocation() async {
Position position = await Geolocator().getCurrentPosition(
desiredAccuracy: LocationAccuracy.low,
);
print(position);
}
“`
javascriptで簡単ストップウォッチ
#HTMLを書く
“`html:index.html
自作ストップウォッチ
00:00:00
“`
#javascriptを書く“`javascript:main.js
‘use strict’;
{
var time = 0;
var timerLabel = doc
Docker コンテナを使って Node.js 開発を始める
# この記事について
本記事は、Docker を使って Node.js 開発を始めるための方法について記載しています。
## 対象読者
– Node.js を使って開発を始めたい方
– Docker コンテナ上で Node.js アプリケーションを動かしたい方
– ホスト OS を綺麗なまま Node.js の開発を行いたい方# はじめに
以前、npm パッケージ n を使って Node.js のバージョン管理を行う方法を [Qiita][RelLink1] で投稿しましたが、正直なところ、開発は全部 Docker コンテナ上で行いたいのが理想でした。
そのため、今回は Docker Compose で定義したコンテナで Node.js を実行しようと思います。# 環境構築
## Docker インストール
OS が Windows または macOS の場合は、[Docker Desktop][DockerDesktop] を
TypeScript でデフォルトで存在しない groupBy 機能を自作してみた
# 目的
JavaScript にはオブジェクトに対する **`groupBy` 機能が存在しません。**そこで配列操作メソッドの `reduce` を用いて groupBy 機能を **自作してみました**。
グルーピングする対象の Key や計算式などを自由に決められるなど、
汎用的な造りにはできていると思います。JavaScript/TypeScript で **グルーピングしたい方は是非使ってみてください**。
性能向上などの提案がありましたら是非、編集リクエストいただけると幸いです。# 実装方法
グルーピングを行う上で **２ 通りの実装方法** がありました。1. `filter` などの配列操作を複数回行なってグルーピングする方法
2. `reduce` を用いて一度でグルーピングする方法1 は処理の流れが読みやすくなるメリットがありましたが、一方で加工フェーズが多くなるためコード量が増えるのが嫌いな僕自身の主観で採用しませんでした。
# コーディング
今回は Class Base ではなく、 **Function Base** で記述しています。
ReactはウェブやHTMLとは特に関係のないライブラリです
みなさんReactやってますか。やってますよね。最近React Native流行ってるし。
んでいきなりなんですが、あのReactとかいうやつ、実は **特にウェブとは関係ないライブラリ** なんですよね。ええぇ……。なのでこの記事ではそれについてだらだらと説明したいと思います。
## この記事の背景
最近のReact Nativeブームで「React is 何」「React Nativeについて3行で教えてくれ」みたいなアレコレがよく発生するんですが、その際に「Reactはウェブ向けライブラリである」という先入観がだいぶ素直な理解を阻害しているなーと感じました。
「Reactはウェブ向け」って登場初期は全然間違ってなかったんですけど、厳密には2015年には全く違う状況になって、2019年とか2020年になると完全に間違ってると言える状況が発生し出したので、改めて説明させていただこうと思いました。
別に知識が間違ってるとか間違ってないとかは正直どうでもいいし、本当にそんな細かいこと気にするなら2016年にはキレてたと思います。ただ、去年ごろから意外と実害が出始めてきてるので、
[jquery / js] 任意の値を取得し、html上に表示する方法(取得値と条件分岐)
Javascript備忘録。
jquery(そんな書いてないけど)とjsを使って任意の値を取得・html上に表示する方法。
したいこと
→任意の値をhtml上に出力し、かつ値に応じて条件をつけて処理する。###はじめに
jsを用いて値を取得する際は取得したいタグにidを指定する。
出力したい時も、出力したいタグにidを指定する。
今回は、寄附金額に応じて
①寄付額を表示する
②寄付額に応じてメッセージを表示する
の２つを行う。
<実装過程>
①htmlに任意の値を取得するためのformと出力する場所(タグ)を記述。
②index.jsに取得した値について条件分岐で処理を実行。###準備物
index.html
index.js
jquery.min.js###①htmlに任意の値を取得するためのformと出力するタグを記述。
“`html
example3
