- 1. Vue + ECharts でウィンドウサイズの変更に合わせてグラフをリサイズする
- 2. Rails6のwebpackerを使って、JSを表示するまでのログ
- 3. 【JavaScript】要素ノードの取得方法
- 4. JavaScript,モジュールについて
- 5. Gatsby公式チュートリアルでややハマったこと
- 6. Adjacent JSX elements must be wrapped in an enclosing tag.
- 7. 【初心者でもわかる】RSSの配信方法と・jQueryでのRSS取得方法のいろは
- 8. JavaScript var let constの違い
- 9. Lambda で返ってくる文字列でハマった
- 10. 【GAS】①Classroomの一覧を取得する
- 11. Reduxの基本をまとめてみた
- 12. 【配列】forEach・map・filter・find・some・reduce
- 13. 【JavaScript】axiosでCSVを受け取りブラウザでファイルダウンロードに移行させる方法。
- 14. Laravel Mixで環境に応じて複数の.envで環境変数を管理する
- 15. 【JavaScript】別ファイルに関数をまとめてexportsを利用して呼び出す。
- 16. React 入門 (#2) ～Babel＆JSX～
- 17. Node.js開発者なら知っておきたい便利なパッケージ12選
- 18. JavaScriptで配列に使えるメソッドまとめ
- 19. 実務でよく使うVueのv-bind:classの使い方4つ
- 20. M1 MacでLIFFとReactを使う際の環境構築
Vue + ECharts でウィンドウサイズの変更に合わせてグラフをリサイズする
ECharts のグラフは要素幅が動的に変更された場合にそれに合わせてリサイズしてくれないため、リサイズしたい場合は都度 `resize` メソッドを実行する必要がある。
ピュアな (？) JavaScript アプリであれば `window` オブジェクトの `’resize’` イベントを監視して `chart.resize()` するだけで十分だが、Vue のような VirtualDOM ライブラリを利用している場合は「ウィンドウサイズ」というグローバルな状態をどう扱うかをちゃんと考えないといけない。
昔は Vuex を使って「ウィンドウサイズをちゃんとした状態として扱う」ことでこれ実現するなどしていたが、Vue 2.6.0 で追加された `Vue.observable` を使えば Vuex を使わずとも簡単に書けることを知ったので方法をまとめておく。
## ウィンドウサイズを監視できるようにする
Vue インスタンスプロパティ `$window` を追加して、Vue コンポーネントからウィンドウサイズを監視できるようにする。参考: [\[Nuxt.js, Vue.js
Rails6のwebpackerを使って、JSを表示するまでのログ
# はじめに
app/javascript/packs内がjsを書く場所。
これを書いて呼び出す。“`ruby
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
“`
webpackerにもこう書かれている
“`ruby
source_entry_path: packs
“`jsのコンパイルは、コマンドを打つ必要がある
“`ruby
bin/webpack-dev-server which can be used for
live reloading in the development phase. We have to run the
webpack-dev-server separately for this purpose
“`これは、webpackerのhelperメソッド
“`ruby
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %
【JavaScript】要素ノードの取得方法
#はじめに
この記事は以下の書籍を参考に作成しました。https://www.amazon.co.jp/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88JavaScript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80-%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%88%E3%82%8B%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E7%8F%BE%E5%A0%B4%E3%81%A7%E3%81%AE%E5%BF%9C%E7%94%A8%E3%81%BE%E3%81%A7-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/dp/477418411X/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=27USW7I2418F8&dchild=1&keywords=javascript%E6%9C
JavaScript,モジュールについて
# [JavaScript]モジュールについて
#目次
[1.モジュールの基礎](#1-モジュールの基礎)
[2.名前空間スコープの問題](#2-名前空間スコープの問題)
[3.モジュールを使ったコードに変換](#3-モジュールを使ったコードに変換)
[4.モジュールの遅延評価について](#4-モジュールの遅延評価について)
[5.モジュール間でのデータのやりとりexportとimport](#5-モジュール間でのデータのやりとりexportとimport)
[6.Default import/exportの書き方をマスターしよう！](#6-default-importexportの書き方をマスターしよう)
[7.モジュールの特殊な import/export について学ぼう](#7-モジュールの特殊な-importexport-について学ぼう)
[8.Re-Exportについてはまた今度。。。](#8-re-exportについてはまた今度)
[9.まとめ](#9-まとめ)#1. モジュールの基礎
しまぶーのIT大学のモダンJavaScript講座（モジュール編）を観てまとめて
Gatsby公式チュートリアルでややハマったこと
# Gatsby公式チュートリアルでややハマったこと
Vue一家に所属していたわけですが、reactファミリーも少し覗いてみようと思い門を叩きました。
※macでの操作になります。
“`Terminal:Terminal
node -v
v15.11.0
“`#目次
[1.CSSをimportする時に読み込めないエラー発生](#1-cssをimportする時に読み込めないエラー発生)
[2.ところどころでnpm installの時にエラー](#2-ところどころでnpm-installの時にエラー)
[3.チュートリアル４のパンダで発生](#3-チュートリアル４のパンダで発生)
[4.チュートリアル「セクション７」](#4-チュートリアルセクション７)
[5.まとめ](#5-まとめ)#1. CSSをimportする時に読み込めないエラー発生
セクション２で`tutorial-part-two/src/components/container.js`で「containerなんてねえぞ」と怒られる。
“`
// localhost:8000/about-css-mod
Adjacent JSX elements must be wrapped in an enclosing tag.
初学者あるあるらしい?
# 前提
React 17.0.1# 起こったこと
こういうコンポーネントを作成して
“`jsx
const LogoutButton = ({username, handleLogout}) => {
return ({username} logged in
)
}export default LogoutButton
“`こういうふうに使いました。
“`jsx
{user &&}
{user === null && loginForm()}(以下略)
“`
そしたらこのように言われました。
“`
SyntaxError: /Users/xxx/projects/bloglist_fronten
【初心者でもわかる】RSSの配信方法と・jQueryでのRSS取得方法のいろは
#どうも7noteです。jQueryを使ったRSS配信と取得方法を解説
### 「そもそもRSS配信とは？」
>### RSSとは「Webサイトの新着情報を配信するフォーマット」
RSSとは「Really Simple Syndication」、または「Rich Site Summary」の略語※で、Webサイトのニュースやブログなどの、更新情報の日付やタイトル、その内容の要約などを配信するため技術のことです。RSSは、XML形式で記述されており、RSSリーダーと呼ばれるツールを使用することで、様々なサイトの更新情報や新着情報を自動的に取得することができます。
引用元：https://www.asobou.co.jp/blog/life/rss-2## RSSでできることは配信と取得の2つ。
こんな風につかえます。↓↓↓
– 自分のサイトからRSSを配信して、**誰でも自分のブログの最新情報を取得して使えるようにする**。
– **他のサイトの最新情報を取得して、自分のサイトに情報を掲載する。**自分一人で「配信」も「取得」もすれば、**「サイトAの最新情報をサ
JavaScript var let constの違い
JavaScriptでは変数を定義する際利用できるキーワードは三つあります。
* var：全バージョン利用可能
* const：ECMAScript 6以降から利用可能
* let：ECMAScript 6以降から利用可能※ECMAScript 6は2015年6月に公開 [各バージョンの公開日はここから参照](https://ja.wikipedia.org/wiki/ECMAScript)
##var
var 文は関数スコープまたはグローバルスコープの変数を宣言し、任意でそれをある値に初期化します。
“`javascript
var message; //初期化していないため [undefined]という特殊な値が設定される
var message2 = “Hello World!”;function showMessage(){
console.info(message3);
var message3 = “ShowMessage”;
}function showMessage2(){
var message4;
console.
Lambda で返ってくる文字列でハマった
# 問題
Lambda、API Gateway を使って Web ブラウザからの入力結果を処理していた。Lambda 関数の戻り値に不要なダブルクォーテーションがついていた。以下のような Lambda 関数を作成した。
“`lambda_function.py
if bool:
return ‘Exist’
else:
return ‘NotExist’
“`lambda_function.pyの戻り値がresponse.text()に格納されるのだが、bool が True であるにも関わらず、result === ‘Exist’ の結果が false になっていた。
“`main.js
fetch(url, requestOptions)
.then(response => response.text())
.then(result => {
if (result === ‘Exist’) {
alert(‘存在します。’);
} else {
alert(‘存在しません。’);
}
})
“`ログを見ると、res
【GAS】①Classroomの一覧を取得する
# はじめに
GASによるコーディングをする際、spreadsheetやgmail、drive等は基本サービスであるGoogle Workspaceサービス内に含まれているため、書籍も含めて情報が比較的豊富に存在している。その一方でClassroomはAdvanced Googleサービスに含まれるため情報が乏しく、公式マニュアルも現在は使えないメソッドがそのまま書かれていたりと整備が追いついていない状況も見受けられる。ここではそのような状況に鑑み、ClassroomをGASで扱うために必要な基本的な知識を整理していく。
筆者のGAS開発歴は3ヶ月にも満たないため、表現や説明も適切ではない部分が多々あるだろうがご容赦願いたい。
# サービスの追加
GASでClassroomに関するものを扱うためには、スクリプトエディタで「Google Classroom API」サービスを追加する必要がある。最新のIDEでは「サービス」→「Google Classroom API」を選択→「追加」で設定可能。
# Classroomの一覧を取得
バインドされていないスプレッドシートをGAS
Reduxの基本をまとめてみた
# はじめに
主に[公式のチュートリアル](https://redux.js.org/tutorials/essentials/part-1-overview-concepts)を参照しながらReduxを勉強したので簡単に記事にまとめようと思います。
（React公式もそうですが、フロント系の公式ドキュメントは記載がとても丁寧で助かりますね。）
もし誤り等ありましたらコメントでご指摘いただけますと助かります :bow:# Reduxとは？
UIが持つ状態（state）を管理するためのJSのライブラリです。（VueやAngularに使うこともできますが、Reactと最も相性が良いです。）
Reactのようなフロントのフレームワークにおいてコンポーネントのstateをどのように管理するかは、パフォーマンスやメンテナンス性にも関わる重要な命題であると思います。（僕自身よく頭を悩ませます。。）
Hooks（useReducer）を使用した管理方法などもありますが、Reduxはstoreというコンポーネントとは独立した場所でグローバルにstateを管理するライブラリです。基本的にstateの
【配列】forEach・map・filter・find・some・reduce
# 処理概要
## forEach
– 配列中のそれぞれの要素について関数を実行する“`js
const numbers = [1, 2, 3, 4];numbers.forEach(num=> console.log(num));
// 出力
// 1
// 2
// 3
// 4
“`## map
– 配列内のすべての要素に指定した関数を実行する
– 関数の結果を格納した新しい配列を生成する“`js
const numbers = [1, 2, 3, 4];
const squares = numbers.map((num) => {
return num * num;
});console.log(numbers); // [1, 2, 3, 4]
console.log(squares); // [1, 4, 9, 16]
“`## filter
– 指定した関数の結果が `true` を返す配列中の要素を格納した新しい配列を生成する“`js
const numbers = [1, 2, 3, 4];
const evenNumber
【JavaScript】axiosでCSVを受け取りブラウザでファイルダウンロードに移行させる方法。
# 前提
サーバーサイドはLaravel、フロントはVue.jsです。
今回はJavaScriptの話がメインなのでPHPやLaravelが分からない方でも支障なく読んでいただけると思います。# やりたかったこと
ユーザー目線：ブラウザに表示されているダウンロードボタンをクリックすると、CSVファイルをダウンロードできる。僕目線：LaravelでCSVを吐き出すAPIを用意し、axiosを使ってAPIを叩きCSVをダウンロードできるようにする。
#起こった問題
ブラウザの検索タブでエンドポイントに直接アクセスするとうまくダウンロードできるが、axiosを使ってエンドポイントにアクセスするとダウンロードできない。（CSVの内容はデータとして返ってくるが、ブラウザがダウンロード画面に移行しない。）
# 失敗した方法
CSVを返すAPIを単純に叩いてダウンロードできると思ったのですが、うまくいきませんでした。
※関係ない部分は色々省略してます。“`Javascript:sample.js
downloadCsv() {
axios
.get(“/api/
Laravel Mixで環境に応じて複数の.envで環境変数を管理する
# はじめに
こんにちは。先日、ランニングシューズ以外でいい靴を買ってしまいました、筆者です:smile:さて、LaravelでWebpack使っているので、**Laravel Mix**を使用しております。
その際に**.env**で環境変数を分ける機会がありましたので、共有します。
# 結論
急いでいる方はこちらご参照くださいませ。**Laravel Mix**のドキュメントの書いてあるんです:ok_hand:
(ただ、スター:star:が超少ないのが気になります…:thinking:)https://laravel-mix.com/extensions/env-file
# 解説
## 1. `mix-env-file` をインストールする。
“`sh
$ npm install mix-env-file
“`## 2. `dotenv` をインストールする。
あとでコンパイルするときにインストールしろと怒られるのでこちらもインストールします。
(ドキュメントには書いてないんです:sob:)“`sh
$ npm install dotenv
“
【JavaScript】別ファイルに関数をまとめてexportsを利用して呼び出す。
# 開発環境
React.js# 概要
JavaScriptで関数を共通化して別ファイルにまとめたときに、HTMLのscriptタグを使い呼び出すのは面倒だと思いました。JavaScriptのexportsを使い呼び出すことができることを知りましたので記事にしておきます。## import.jsとexport.jsファイルを作成
import.jsからexport.jsの関数を呼び出していきます。“`javascript:export.js
exports.criminalIsKogoro = function () {
console.log(“犯人は毛利小五郎”);
}exports.detectiveCriminal = function (name) {
console.log(“犯人は” + name);
}const criminalIsAgasa = function () {
console.log(“犯人は阿笠だ”);
}
“`
比較するためにcriminalIsAgasaだけはexportsしないようにしておきます。“`j
React 入門 (#2) ～Babel＆JSX～
#１，Babelとは
ES6以降のスクリプトを、ES2015基準のスクリプトにトランスパイルする機能です。
下記のタグをheadタグに記述すれば準備完了です。
“`javascript:index.html
“`
[Babelリンク](https://babeljs.io/setup#installation)#２，JSXを使う理由
Reactはマークアップとロジックを両方含む疎結合の「**コンポーネント**」という単位で構成されます。
「**コンポーネント**」は、次回説明します。
そこで活躍するのが、**JSX**（「**JavaScript XML**」の
Node.js開発者なら知っておきたい便利なパッケージ12選
本記事は、[Indrek Lasn](https://indreklasn.medium.com/)氏による「[12 Useful Packages Every Node.js Developer Should Know](https://betterprogramming.pub/12-useful-packages-every-node-js-developer-should-know-2746db760e)」（2020年9月２日公開）の和訳を、著者の許可を得て掲載しているものです。
#Node.js開発者なら知っておきたい便利なパッケージ12選
>毎日の生産性を上げるNodeパッケージ
##はじめに
Node.jsはコードの再利用にぴったりです。コードを再利用するための根幹となるのはNPMパッケージです。
NPMパッケージは、時間と労力を大幅に節約してくれます。日付ライブラリが必要ですか？パッケージがあります。
JavaScriptで配列に使えるメソッドまとめ
## 配列を作成したい
“`js
// 配列リテラルを使う
const array1 = [1,2,3]// Arrayコンストラクタを使う
const array2 = new Array(4,5,6)
const array3 = Array(7,8,9)// Array.fromを使う
const arrayLike = { length:3, ‘0’:’Tokyo’, ‘1’:’Osaka’, ‘2’:’Fukuoka’ }
const cities = Array.from(arrayLike)// ファクトリー関数Array.ofを使う
const array4 = Array.of(‘USA’, ‘Japan’, ‘China’)
“`## 配列かどうか確認したい
“`js
const str = ‘string’
const num = 2021
const array = [1,2,3]Array.isArray(array) // => true
Array.isArray(str) // => false
Array.isArray(nu
実務でよく使うVueのv-bind:classの使い方4つ
v-bind:classはVueで使えるv-bindディレクティブの一つです。
[公式](https://jp.vuejs.org/v2/guide/class-and-style.html)で紹介されてるものより、個人的には使い勝手がいいなと思う方法など、自分がよく使う4パターンを紹介します。##1.真偽値に対して複数クラス
例:アクティブの時はテキストを青くして背景をグレーにしたい“`vuejs:sample.vue
“`
##2.複数の真偽値
例:アクティブの時はテキストを青くして、選ばれている時は背景をグレーにしたい“`vuejs:sample.vue
“`
##3.式(演算子)を使う
比較演算子や論理演算子を使って真偽値をかえします。“`vuejs:sample.vue
M1 MacでLIFFとReactを使う際の環境構築# 初めに
2021年3月の現在、[Open Hack U 2020 Online Vol.4](https://hacku.connpass.com/event/201528/)に挑戦しています。
チームの制作物で、[LIFF (LINE Front-end Framework)](https://developers.line.biz/ja/docs/liff/overview/)を使ったものを作成することにしました。
M1 Macbook AirでLIFFを使うのは、初めてです。
そこで、環境構築などで詰まったところを書いておき、再度M１ MacでLIFFを使うときにつまらないようにするための備忘録です。# 本記事の目的
本記事は、ハッカソンなどで、M1 Macbookを使う人のために書きました。
色々なアプリを作る時の候補として、LIFFを使ったアプリ開発に挑戦してみては、いかがでしょうか？# 詰まったところ
参考記事1を進めていたところ、`yarn`がうまく使えないことがわかりました。
そのため、現時点でのM1チップのMacでは、`yarn`を使うのをやめましょう。
OTHERカテゴリの最新記事
-
- 2024.09.19
JavaScript関連のことを調べてみた
-
- 2024.09.19
JAVA関連のことを調べてみた
-
- 2024.09.19
iOS関連のことを調べてみた
-
- 2024.09.19
Rails関連のことを調べてみた
-
- 2024.09.19
Lambda関連のことを調べてみた
-
- 2024.09.19
Python関連のことを調べてみた