- 1. computed
- 1.0.1. 【JavaScript】forEachよりもreduceのほうが万能性高くない?
- 1.0.2. 【JavaScript】forEach vs map
- 1.0.3. Windows10のDocker×VSCode環境でReactを動かすまでの道のり
- 1.0.4. JavaScriptを基本からまとめてみた【9】【コールバック関数】
- 1.0.5. このタイミングでReactの基礎を押さえてみた。
- 1.0.6. scriptタグを使いまわしたい
- 1.0.7. ReplitでNode.js v16を使用する
- 1.0.8. 【kintone&FormBridge】履歴テーブルの実装方法を紹介
- 1.0.9. DOM要素の幅を境界で変えられるようにする【JavaScript】
- 1.0.10. JSで動画のアップロード前に尺を取得する
- 1.0.11. 基盤地図情報をパースするライブラリを作った話
- 1.0.12. Hightchartsのシリーズ/seriesの表示on/off
- 1.0.13. `node_modules` を探した話
- 1.0.14. [JavaScript]基本構文まとめ
- 1.0.15. LINE Pay APIを使った決済機能を作ってみた Node.js版 (Version3対応)
- 1.0.16. YouTubeっぽいサイドバーを実装する【CSS】【JavaScript】
JavaScript の import / export の基本を確認してみる
JavaScript にいつからか追加されたモジュール機能を今さらながら確認してみます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules
モジュールのエクスポートには、**名前付きエクスポート**と**デフォルトエクスポート**があります。
## export default
デフォルトエクスポートは、
“`javascript:modules/sqare.js
export default randomSquare
“`の形式でエクスポートします。
“`javascript:modules/sqare.js
function randomSquare() {
console.log(‘random square’)
}export default randomSquare;
“`または
“`javascript:modules/sqare.js
export default randomSquare() {
console.log(‘random squa
computed で classを動的に指定
html
“`index.html
test text
“`
css
“`style.css
.textColor{
color: blue;
}.textFont {
font-size: 30px;
background: red;
}
“`“`Vue.js
new Vue({
el: “#app”,
data: function(){
return {
shouldApply: true
}
},
computed: {
textStyle: function() {
return {
textColor: this.shouldApply,
textFont: this.shouldApply
}
}
}
})
“`※computedはreturnとthis
Aceエディターにキーボードイベントを追加する
今までMonacoエディターを使っていたのですが、シンタックスハイライトがAceの方が充実しているのでAceに乗り換えることに。
## Monacoの場合
キーボードイベントを追加したい場合、MonacoだとonKeyDownというメソッドがあったので、キーボードイベントをすぐ登録できたのですが、Aceにはない。““js
let = editor = monaco.editor.create(); // IStandaloneCodeEditor
editor.onKeyDown((e) => {
});
““
## Aceの場合
Aceの場合は以下のように登録できる(なぜかAPI Docsに乗ってないがeditor.hasOwnProperty(“commands”)はtrueになる)。““js
let editor = ace.edit(““);
editor.commands.addCommand({
name: ““,
exec: () => {
[Vue.js]computed(算出プロパティ) の基本
“`HTML
computed
{{inputText}}
{{changeTextCapitalize}}“`
returnで返さないと反映されない“`Vue.js
new Vue({
el: “#app”,
data: {
inputText: ‘hello’
},
computed: {
changeTextCapitalize: function () {
return this.inputText.toUpperCase();
}
}
})
“`
【JavaScript】forEachよりもreduceのほうが万能性高くない?
# forEach の模倣
次のような`forEach`は、
“`forEach.js
array.forEach(body);
“``reduce`により一行で模倣できる。
“`simulation_forEach.js
array.reduce((_, …args) => void body(…args), void 0);
“`# reduce の模倣
逆に、次のような`reduce`も、
“`reduce.js
const result1 = array.reduce(reducer, init);
“``forEach`により模倣できる。ただし、一行では模倣できない。
“`simulation_reduce.js
let acc = init;
array.forEach((…args) => {acc = reducer(acc, …args)});
const result2 = acc;
“`# 用法用量を守って畳み込みましょう
`forEach`は万能だけど、`reduce`はそれにもまして万能なので、気
【JavaScript】forEach vs map
## forEach
配列の各要素をぞれぞれ呼び出します。またループの戻り値は`undefined`になります。“`js
const o = [1, 2, 3, 4, 5].forEach((num, index) => {
return num * 2;
});// undefined
console.log(o)
“`## map
配列の各要素をそれぞれ呼び出し、新しい配列を生成します。ループの戻り値は新しい配列に格納されます。“`js
const o = [1, 2, 3, 4, 5].map((num, index) => {
return num * 2;
});// Array [2, 4, 6, 8, 10]
console.log(o)
“`## forEachとmapの使い分け
元の配列の要素を単にループさせたい場面や、元の配列を値を直接書き換えたい時はforEach、メソッドチェーンを使ってfilterやreduceなどと一緒に使いたい場合はmapを使ったりすることが多い気がしてます。“`js:filterを
Windows10のDocker×VSCode環境でReactを動かすまでの道のり
初Qiita投稿です!
現在React Bootcampに参加しており、
Windows10でのDockerを使った環境構築で躓いたポイントがあったので共有します。https://react-nagoya.connpass.com/event/220664/
# そもそもなぜDockerを使ったのか
もともとNodistで構築しようとしていたが過去に手動で導入したNode.jsと干渉しまくってうまく動作しなかった。
調べていく中で以下の記事にたどり着きNodistではなくDockerで構築することに。https://zenn.dev/ymasaoka/articles/note-uninstall-nodish-windows
# ハマったポイントの要約
– docker-compose.ymlでエラーが出まくる
– →ファイルの文字コードをUTF-8に変更したら直った
– Docker上のReactアプリにアクセスできない
– →Docker立ち上げ時にポート開放を行う# 導入手順
## ① Dockerの導入https://www.docker
JavaScriptを基本からまとめてみた【9】【コールバック関数】
##はじめに
####学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。##コールバック関数とは
コールバック関数(英:callback function)とは、関数を呼び出す際に引数として引き渡される別の関数のこと。呼び出し側が引数として指定した関数を、呼び出し先のコードが「呼び出し返す」(callback)形。この呼び出し側が引数に指定した関数のことを「コールバック関数」という。“`
コールバック関数のイメージ例
関数A(引数A){
引数A();
}
関数B(){
関数A(関数B);
“`##コールバック関数の流れ
①「関数A」の引数にコールバック関数「関数B」を指定して呼び出す
②「関数A」内で引数として受け取ったコールバック関数「関数B」を呼び出す
③ コールバック関数
このタイミングでReactの基礎を押さえてみた。
# はじめに
自分はReact初心者ながら、数冊の書籍と動画でとりあえずの基礎学習を終えましたので、基礎的な部分を復習して基礎力をつけていこうかなと思います。# Reactとは
Reactとは、Facebookにより開発されたJavaScriptライブラリの一種です。JavaScript単体では開発生産性は低いので、補う手段としてReactなどのライブラリを導入します。
Reactは、`コンポーネント`と呼ばれるUI部品を積み上げて、アプリを作っていきます。# コンポーネントについて
コンポーネントとは、UIの一部分となるビュー (View) を切り出したもので、これらを積み上げてアプリケーションを作り上げていきます。
※現在(2021年8月現在)では、コンポーネント作成は関数コンポーネントを利用するのが一般的らしいです(昔はstateがクラス内でしか使えませんでしたが、今はどちらでも可能のため)。“`react
import React from ‘react’;// クラスを用いた定義方法
class Greeting extends React.Componen
scriptタグを使いまわしたい
#どういうことか
いろんなHTMLに同じscriptタグ(js,css)を使いたい…!
ググっても出てこない…そんなあなたにお勧めです!
初投稿です。
#沼ってたとき
Document.write 非推奨
innerHTML 使えない
insertAdjacentHTML 使えない
#なぜ
セキュリティの関係で無効化されてるようです。
#解決策
createElementを使いましょう!
コードを書いてみました。“`js:head.js
var script;
var link;
var js = url => {
script = document.createElement(‘script’);
script.src = url;
document.head.appendChild(script);
}
var css = url => {
link = document.createElement(‘link’);
script.href = url;
script.rel = “stylesheet”;
do
ReplitでNode.js v16を使用する
先日、discord.js v13がリリースされました。
ですがv13は、Node.jsのバージョンがv16以上でないと使えません。
では、Node.jsがv12であるReplitは使えない!?と思ってしまいますが、裏技で使うことができます。
# 使う方法
## Node.jsのインストール
“`bash
npm install -D node@v16
“`
でNode.jsのv16をインストールします。
## Replitをいじる
そのあと`.replit`に“`toml
run=”npm start”
“`って書いて
`package.json`に“`json
{
“scripts”: {
“run”: “npx node index.js”
}
}
“`
以下を付け加えましょう。(index.jsは適宜変更してください)# 実行すると…?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1518670/7f579f5c-d169-
【kintone&FormBridge】履歴テーブルの実装方法を紹介
# はじめに
業務でkintoneとFormBridgeで履歴テーブルを実装する必要があったため、その実装方法について紹介します。### システムの概要
申請者が申請し、その後承認者が承認をしていくワークフローシステムです。ユーザがアクションを行い必要であればコメントを入力し、更新日時とユーザとコメントを履歴として残すよう実装しました。# 実装方法の紹介
## kintone
### フィールドの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/74f87e07-49b2-95a1-d886-ba85abe316c1.png)
フォームの設定画面にてテーブルを追加し、必要な項目を追加していきます。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/19235adf-a3a4-8856-bc98-a6271f4ac313.png)
– 更新日時について
DOM要素の幅を境界で変えられるようにする【JavaScript】
## したいこと
Flexで並べた要素の間に境界を設置して、そこをドラッグすることでそれぞれの幅を変えられるようにする。
例えるならVSCodeの分割ウィンドウみたいな感じ。## コード
### HTML
““HTML““
###CSS
““css
#wrapper {
display: flex;
height: 200px;
width: 300px;
}
#one, #two {
height: 100%;
}
“`###JavaScript
““javascript
window.onload = () => {
let parent = document.getElementById(“wrapper”);
colResizeable(parent, 300);
};let colResizeable = (element, totalWidth, borderWidt
JSで動画のアップロード前に尺を取得する
# やりたいこと
動画をアップロードする前に、フロント側で再生時間に上限を設けたい# 完成形
“`html
Video Duration Test