- 1. Haskellのプログラムは ‘現実世界’を引数にとり、プログラムが影響を与えた’現実世界’ を返す純粋関数
- 2. オブジェクトの配列で同一のプロパティ値を持つ要素を除外したい
- 3. VBA(Excel)でWebページをPDF化,PNG化,JPG化する方法(Slenenium Basic)
- 4. VuetifyのV2以降のグリッドシステムで縦並びさせる方法
- 5. Vue.jsでローディング画面作ってみた
- 6. 【カンタン】Vueで縦に自動伸縮するtextareaの作り方 | How to make auto resizing by Vue.js
- 7. 4歳娘「パパ、20歳以上のユーザーを抽出して?」
- 8. 久しぶりに create-react-app を使ったら動かなかった話
- 9. Vue.js でインクリメンタルサーチ
- 10. Kinx ライブラリ – Signal
- 11. javascriptで入力キーを取得(メモ)
- 12. vueの勉強し直し
- 13. Vue.js+Firebaseで簡単なWebサービスを作って公開する
- 14. ハンバーガーメニューの作成
- 15. JavaScript : 一定範囲のスクロールを検知するしてクラスを付与・除去する
- 16. moment.jsでミリ秒を取得する方法
- 17. 初心者がオンライン競プロに出てみた
- 18. GASを使っていく中で便利だと思った機能(メモ)
- 19. Vue.js 算出プロパティとメソッドの違い
- 20. biwascheme call/cc 非同期処理と大域脱出
Haskellのプログラムは ‘現実世界’を引数にとり、プログラムが影響を与えた’現実世界’ を返す純粋関数
# はじめに
純粋関数型プログラミング言語は純粋なのにどうやって入出力を行うのか概念的にわからない。という質問をよくいただくので、解説をして行こうかなと思います。
タイトルで出落ちです。
対象読者はHaskellを学びたてだったり、ML型の言語をちょっと触ったことがある程度の人ですが、
解説の為にJavaScriptを多用しますので、JavaScriptが読めれば楽しめるかと思います。これを読んでコードをかけるようにはならないとは思いますが、概念的に面白いし実用性あるじゃん〜と思ってもらえればいいなと思います。
概念的な説明の簡単のために、正確ではない表現が登場しますが、
概念的な説明の簡単のためになってなく、正確ではない表現があった場合は優しく指摘していただけると幸いです。# 純粋関数型プログラミングとは
純粋関数型プログラミング言語と呼ばれる言語が存在します。純粋関数型プログラミング言語は記述する関数を副作用のない純粋な数学的関数として定義し、プログラムを構築します。
### 純粋関数などの例
*足し算をする純粋関数*
“`js:JavaScript
f
オブジェクトの配列で同一のプロパティ値を持つ要素を除外したい
## やりたいこと
“`typescript
type Item = {
id: number
value: string
};const items: Array
- = [
{ id: 1, value: ‘foo’ },
{ id: 2, value: ‘bar’ },
{ id: 3, value: ‘bar’ },
{ id: 4, value: ‘baz’ },
{ id: 5, value: ‘baz’ }
];// 配列itemsからidの値は気にせず、valueの値が同じものを消したい!
const expect: Array- = [
{ id: 1, value: ‘foo’ },
{ id: 2, value: ‘bar’ },
{ id: 4, value: ‘baz’ }
];
“`
## 方法
* [filter()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Arra
VBA(Excel)でWebページをPDF化,PNG化,JPG化する方法(Slenenium Basic)
#VBA(Excel)でWebページをPDF化,PNG化,JPG化する方法
-概要-
業務でよく使うことがあったので作りました。Seleniumは、簡単にブラウザ操作を自動化するようなツールです。
よく聞くのは、PythonやJavaScriptでSeleniumをつかう方法ですが、実はVisualBasicで動かすことができます。特に、日本ではExcelへの依存度が高い企業が多いと思うので、GUIとしてExcelを用いることは心理的抵抗がないのではないでしょうか?(いろいろ言いたいことはあると思いますが…)
-手順-
1.[Selenium Realease](https://github.com/florentbr/SeleniumBasic/releases/tag/v2.0.9.0)から、SeleniumBasicをダウンロードする。
2.上のファイルをインストールする。
3.必要なブラウザにあったドライバをダウンロードする。(今回は、Chromeにします)
[Chrome Driver](https://chromedriver.chromium.org/)
4
VuetifyのV2以降のグリッドシステムで縦並びさせる方法
こんにちは。
Vue/NuxtのUIフレームワークとしてよく用いられるVuetifyについて書き記したいと思います。
タイトルにもある通りなんですが、縦並びさせる方法についてです。
VuetifyはV2以降はグリッドシステムが大きく変わって、自分は縦並びさせる方法わかるまでに時間かかりました。。。V2以降は、v-row,v-colあたりを作ってレイアウトを作っていくスタイルになりました。
まず横並びは簡単です。“`hgoe.vue
12
6
6
4
Vue.jsでローディング画面作ってみた
初投稿です。
御見苦しいところなどあればすみません…仕事でVue.jsを使ってSPAを作っていた際に、どうしても少し時間がかかってしまう処理を行っている間に別の操作をさせたくなかったので、ローディング画面を表示させて他の操作を実行できないようにしました。
そのとき使った「**vue-loading**」が便利だったのでご紹介。
##インストール##
以下のコマンドでインストールyarnの場合
“`:
yarn add vue-loading-template
“`npmの場合
“`:
npm install vue-lodaing-template
“`##使い方##
他のモジュールと同様に使いたいViewでインストールして使います。今回は、親のコンポーネントから受け取ったisLoadingがtrueの場合、全体にマスクしてクルクルを表示させました。
“`javascript:Lading.vue
【カンタン】Vueで縦に自動伸縮するtextareaの作り方 | How to make auto resizing
[english ver](https://gist.github.com/Ishidall/4edf3de985f62a598ec81fe64919c199)
インターネッツで調べてみても中途半端なtextareaしか出てこなかったので、備忘も兼ねた記事です。
伸びるけど縮まないとか、縮むけど1文字いれるごとに2pxずつしか縮まないとか、意味なくない!?!?!?!?!?!?
んおお!?!?!?!?
# まずは結果
![ezgif-6-b2be62c1e8d5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207329/69e201f9-ac84-0719-93e2-7a05e308ae22.gif)うおおおおおおおお
うおおおおおおおお
うおおおおおおおお
うおおおおおおおお
うおおおおおおおおうおおおおおおおお
うおおおおおおおお
うおおおおおおおおうおおおおおおおおうおおおおおおおお
うおおおおおおおお
うおおおおおおおお
うおおおおおおおお# コード
今気づいたけどマークダウンの4歳娘「パパ、20歳以上のユーザーを抽出して?」
## ある日、ピクニックで訪れた山にて
娘(**4歳**)「パパ、見て!」
ワイ「なんや、娘ちゃん」
娘「あそこに、**家族風のオブジェクト**が落ちてるよ!」
“`javascript:JavaScript
const family = {
mother: {
name: “よめ太郎”,
age: 35
},
father: {
name: “やめ太郎”,
age: 37
},
daughter: {
name: “娘ちゃん”,
age: 4
}
};
“`ワイ「おお、ほんまや!」
ワイ「mother、father、daughterの3人家族やな!」娘「せっかくだから、この中から**20歳以上のユーザーを抽出**してみようよ!」
ワイ「おお!**せっかく**やからな!」
ワイ「やってみよか!」
ワイ「でも、家族のことを**ユーザー**って呼ぶのはやめてな!」
ワイ「そんで、ええと」
ワイ「大人だけを抜き出したオブジェク久しぶりに create-react-app を使ったら動かなかった話
# 事象
最近はいつも React Native を書いてるので、たまには React でも触ろうとして、[公式](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)に従い`npx create-react-app` コマンドを実行したら、“`
node_modules/
package.json
yarn.lock
“`しか存在しないプロジェクトが生成されました。
しかも、 `package.json` は、“`json
{
“name”: “PROJECT_NAME”,
“version”: “0.1.0”,
“private”: true,
“dependencies”: {
“react”: “^16.13.1”,
“react-dom”: “^16.13.1”,
“react-scripts”: “3.4.1”,
},
}
“`というシンプル極まりないもの。
グローバルインストールした `create-react-appVue.js でインクリメンタルサーチ
# インクリメンタルサーチとは
インクリメンタルサーチ(英語: incremental search)は、アプリケーションにおける検索方法のひとつ。検索したい単語をすべて入力した上で検索するのではなく、入力のたびごとに即座に候補を表示させる## 完成品
### HTML
“`html
Kinx ライブラリ – Signal
# Signal
## はじめに
**「見た目は JavaScript、頭脳(中身)は Ruby、(安定感は AC/DC)」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。言語はライブラリが命。ということでライブラリの使い方編。
今回は Signal です。
* 参考
* 最初の動機 … [スクリプト言語 KINX(ご紹介)](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。簡単ながらシグナルをサポートしました。
## Signal
Signal は、`type` として `Signal.SIGINT` と `Signal.SIGTER
javascriptで入力キーを取得(メモ)
## 1.まずはコンソールに出力
“`js
// キーが離れたときにコンソールに出力
window.addEventListener(“keyup”,(e) =>{
console.log(e.key);
});
“`
キーが離れたとき(`keyup`)コンソールに出力します。## 2.文字を画面に出力
“`html
“`
入力したキーがvueの勉強し直し
Javascriptのフレームワーク「vue.js」について書いていきます。
## まずは Hello World
“`html
{{ message }}“`
“`vue
const app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello World’
}
})
“`変数を
“`
{{}}
“`で囲むことでHTMLとして表示することができます。
## 双方向データバインディング
vueと言ったらこれが最初に思い浮かびました。
初めて実装したときは感動しました。
“`html
{{ inputText }}
“`
“`vue
const app = new Vue ({
el: ‘#app’,
data: {
inputText: ”
}
})
“`テキストフィールドで入力した文字がリアルタイムでテキストとして反
Vue.js+Firebaseで簡単なWebサービスを作って公開する
## 概要
– Vue.jsとFirebaseを使って簡単なサービスを作ってみました。
– プリコネRの攻撃力と与ダメージから防御力を計算するツール。
– アプリ:https://r-tools-69dd3.web.app
![R-tools_x4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354820/967fcb5a-877f-4445-3bd6-41aaad15f81e.gif)## ソースコード
“`html:index.html
︙攻撃力:
ダメージ:
防御力:
︙
“`“`js:js/main.js
(function(){
‘useハンバーガーメニューの作成
![スクリーンショット 2020-04-02 18.30.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517237/3260709d-e9db-9f3c-3403-88f8bacd92e1.png)
![スクリーンショット 2020-04-02 18.30.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517237/6d838459-1cd6-8cbe-f0cb-ed7a87013c03.png)###HTML5
“`html
JavaScript : 一定範囲のスクロールを検知するしてクラスを付与・除去する
* 指定した要素がブラウザ表示範囲の頂上に来たらクラスを付与する
* 指定した要素がブラウザの表示範囲からでたらクラスを除去するという仕様でビジュアルコントロールをするスクリプトです。
言葉だけでは分かりづらいので以下サンプル画面をスクロールしてみてください。See the Pen moment.jsでミリ秒を取得する方法
moment.js 便利だお。
“`javascript
// 現在日時の場合
const millisecond = moment().valueOf()
“`“`javascript
// 日付を指定する場合
const millisecond = moment(new Date(‘2020-04-02’)).valueOf()
“`ちなみに、momentオブジェクトが正しい日付形式になっていないと`.valueOf()`で取得した値はNaNになります(ハマりました)。
初心者がオンライン競プロに出てみた
#何故
最近、自分のJavaScriptのレベルはどれくらいなんだろうと思いpaizaでスキルチェックを何度か受けていたのだが、ある記事で「[AtCoder](https://atcoder.jp/)」なるサイトが紹介されていて気になったので何も準備せずに参加してみた。#標準入出力がムズイ
何も準備しないとはいっても参加登録をしなければ始まらないので一応サインアップと今日(3/28)のコンテストの参加登録をした。開始時間の21時になると、サイト上に「コンテストが始まりました」というメッセージと共に6問の問題が表示され、制限時間のカウントダウンが始まる。始まる前は「paizaと大して変わらないだろう」とたかを括っていたのだが、いざ始まるとpaizaと違って標準入出力を自力でやらなければならないので何から始めて良いか分からず、結局標準入出力のミスのせいでランタイムエラーを10回以上繰り返し、便意による妨害もあって制限時間1時間40分中半分以上を無駄にするという大失態を犯してしまった。
これからAtCoderに挑戦しようと思っている方に伝えたい。[AtCoderのサンプルコード](hGASを使っていく中で便利だと思った機能(メモ)
#### 概要
GASを使っていろいろやっていく中で個人的に便利だと思った機能をまとめていきます。#### キャッシュ
GASの処理を高速化する中で必要になって来るのがGASメソッドの呼び出し回数をいかに減らすか。。
特にカスタム関数に関しては30秒という制約が契約プラン問わずあるので複雑な処理を実装した際にとても助かりました。
https://qiita.com/golyat/items/ba5d9ce38ec3308d3757#### コールバック関数
クライアント側からサーバー側のメソッドを呼び出すことが出来るのでUI操作の必要な分岐処理など使い道は様々。
https://tonari-it.com/gas-web-app-google-script-run/#### V8 Runtimeのサポート
機能と言うわけではないですがこの変更が入ったことで幅が広がりました。
https://officeforest.org/wp/info/google-apps-script%e3%81%8cv8-runtime%e3%82%92%e3%82%b5%e3%83%9d%e3%Vue.js 算出プロパティとメソッドの違い
## はじめに
[Vue.js テンプレート制御ディレクティブ まとめ](https://qiita.com/yukiji/items/a77dd6d8dd0f194770c3)の続きです。今回は算出プロパティとメソッドの違いを学習していきます。
## 算出プロパティcomputed
算出プロパティ`computed`は、関数によって算出したデータを返す事ができるプロパティ。
例えば、以下のようにマスタッシュ構文内に複雑なロジックを書くと可読性が悪くなる。
“`html
{{ message.split(”).reverse().join(”) }}
“`
こういった複雑なロジックを実行する時に、算出プロパティを利用することが推奨される。また、ロジックの再利用性を高めたい時などにも利用できる。
`computed`を利用してコードを書いてみる。
“`html
{{ reverseMessage }}
biwascheme call/cc 非同期処理と大域脱出
http://ympbyc.hatenablog.com/entry/2020/04/01/biwascheme-call-cc-async-and-global-exit
関連する記事
OTHERカテゴリの最新記事
- 2024.09.19
iOS関連のことを調べてみた
- 2024.09.19
JavaScript関連のことを調べてみた
- 2024.09.19
JAVA関連のことを調べてみた
- 2024.09.19
Rails関連のことを調べてみた
- 2024.09.19
Lambda関連のことを調べてみた
- 2024.09.19
Python関連のことを調べてみた