- 1. tscコンパイルをワンぽちで済ませるVSCode拡張を自作した話
- 2. 【Javascript 入門】VScodeでJavascript実装
- 3. PageSpeed Insightsで100点満点の爆速サイト?にした話
- 4. Node-RED MCU EditionでSensorノードを試してみた。
- 5. useEffectを自分流に簡潔にまとめてみる
- 6. [JavaScript]デフォルト引数で引数を省略できるらしい
- 7. 【JS】map関数について理解する
- 8. Ankiで英作文の組み立て(整序問題)を実装する
- 9. 無駄な useState + useEffect はuseMemoに。
- 10. Javascript始めます
- 11. 【Rails】onclick属性を指定してもJSの関数が使えない
- 12. GASでQiitaトレンドをLineに定期通知する
- 13. javascript クロージャーについてまとめてみる
- 14. サバイバルTypeScriptを読むまで知らなかったこと
- 15. 画像を任意のフォーマット&サイズに変換するLambda関数を作成する
- 16. プログラミングを始める時におすすめの無料サイト
- 17. Amazon URLやASINをISBNに変換する
- 18. 【React】create-react-appで出たエラーの対処法
- 19. 個人開発したWebサービスをMENTAでレビューしてもらった
- 20. お家サーバー その7
tscコンパイルをワンぽちで済ませるVSCode拡張を自作した話
初VSCode拡張。急いで書いたので雑です
# 目的
Typescriptを始めてみたはいいけど、コンパイルのたびにターミナルを叩くのが少しだけめんどくさい…
→ いい機会だしVScodeの拡張機能を自作してみよう！# 環境
* wsl2 : Ubuntu v20.04.4 LTS
* Node.js : v16.17.1# 結果
ヨシ!
![server.ts – HTML2JPEG [WSL_ Ubuntu] – Visual Studio Code 2022-10-16 21-06-11_Trim.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2637844/7c846e90-1b70-bbfb-b63f-5998fba4c095.gif)0. 下にあるtscボタンを押す（以下自動）
0. ターミナルが表示される
0. “`tsconfig.json“`が作られる
0. “`$tsc“`コマンドが実行されてコンパイル
0. “`./out“`ディレクトリの中にコ
【Javascript 入門】VScodeでJavascript実装
# はじめに
VScodeでJavascriptを実装していきます。
VScodeは各自でダウンロードしておいてください。Javascriptを実装する場合、HTMLファイルが必要になってきます。
手順としては、
1. プロジェクト作成
1. HTMLファイルを作成
1. Javascriptファイルを作成となります。
自分は初心者の頃、入門編といいつつ文字ばかりの記事見てて目が痛かったので、できるだけ画像メインの書式にします。
もし、Javascript勉強したての方がいらっしゃいましたら、とりあえず以下の手順通りやってみてください。
できた上で、何か不明な点があれば適宜調べていきましょう。# PC環境
– MacBook Pro (M1 Max, 2021)
– mac OS Monterey (ver 12.5)
– SSD 2TB
– RAM 32GB# プロジェクト作成
1. VScodeを開き、「フォルダを開く」をクリック。
」という技術書のランキングサイトで PageSpeed Insights を ? 点のスコアを出してみました**。
https://nuko-programming.com/ranking/Python/page/1
– モバイル
 => {
“処理”
}
~~~使用例
—
例として、引数に名前と挨拶を入れる関数を作りました。
下記の様にデフォルト値を設定すれば、引数を設定しなければ日本語の挨拶で、
それ以外の国の挨拶をしたい場合は”greet”の引数に別途表示させたい文言を入れる、というような形で記述することができます。greetingメソッドを使用する状況が「ほとんど日本語の挨拶で時々別の国の挨拶を表示させたい」、等だと記述量が減って便利ですね。
~~~js
const greeting = (name,greet = “こんにちは”) => {
return[name,greet]
}
【JS】map関数について理解する
map関数の基本を復習したのでメモ。
## map関数とは
一言で表すと、新しい配列を作る関数。
元となる配列の要素を読み込み、一つずつ同じ処理を加え新たな配列を生成する。
for文よりもスッキリかけちゃうことがメリット。例えば、下記の配列の値全てを2倍にした新たな配列を作りたい。
“`javascript:
const list = [1, 2, 3, 4];
// 出力後↓
// [2,4,6,8]
“`“`javascript:main
const list = [1, 2, 3, 4];
const newList = list.map((x) => x * 2);
console.log(newList); // =>[2,4,6,8]が出力される
“`[サンプルコード](https://codesandbox.io/s/mapguan-shu-b96u6h?file=/src/index.js)
#### 詳細説明
list配列を取り出し、要素一つずつ（変数x）に対して処理を行う。（処理内容はmap関数のカッコ内）
処理した結果を新しい配列
Ankiで英作文の組み立て(整序問題)を実装する
# はじめに
暗記のための自由/オープンソースソフトウェアである「[Anki](https://apps.ankiweb.net/)」を知りました。これを使用すれば、エビングハウスの忘却曲線に基づいて暗記することが出来るようになります。
OpenAIの音声認識Whisperで問題文の文字起こしがきっかけで、Ankiをいろいろ調べるようになりました。https://qiita.com/yaju/items/ac31775616cbfb682f4e
Ankiをいろいろ調べていくうちに、JavaScriptを使用して機能を拡張出来ることを知ります、例えば、下記サイトではJavaScriptを使用して選択肢をランダム表示させることが出来ます。
https://zenn.dev/shivase/articles/002-anki-random-question
Pythonを使用したAdd-onでも出来るようですが、こちらはまだ試していません。
https://ankiweb.net/shared/info/1280092568
[Cocone](https://www.cocon
無駄な useState + useEffect はuseMemoに。
# まえがき
`useState` + `useEffect` が使われているところを、 `useMemo` で簡易的に書ける場合はその方がシンプルで良いかなと思い記事にしてみました。
初歩的な話ではありますが、React初心者へのちょっとした手助けになれればいいな〜というアウトプット記事です(^^)#
今回は、**今月がユーザーの誕生月かどうかを判断する場合** を例として書いてみます。これを `useState` + `useEffect`で書くと下記のようなコードになります。
“`javascript
const [isBirthMonth, setIsBirthMonth] = useState(false) useEffect(() => {
setIsBirthMonth(getMonth(user.birthday) === getMonth(new Date()))
}, [user.birthday])
“``useState`で`isBirthMonth`を定義し、`useEffect`内で値をセットし
Javascript始めます
# はじめに
本題の通り、Javascriptを5年ぶりくらいに始めます。
きっかけは、とあるIT企業のコーディングテストでJavascriptの実装問題が出されて、何も太刀打ちできなかったのがマジで悔しかったからです。# 今後
miniforge以来、Qiita更新してこなかったんですけれど、勉強経過・アウトプットを兼ねてこちらで更新していければと思います。
【Rails】onclick属性を指定してもJSの関数が使えない
# やりたいこと
ビューファイルに直接書いたJavaScriptをapp/javascript/packs/application.jsファイルに移行したい。“`slim:app/views/**s/**.html.slim
javascript:
function hoge(target) {
〜処理〜
}input type=”button” value=”hoge” onclick=”hoge(this)”
“`# 上手くいかない
JavaScript部分をそのまま切り取ってapp/javascript/packs/application.jsファイルに移行すると今まで動いていたのに、動かなくなってしまう。# [teratail](https://teratail.com/questions/343393)で解決法を発見
> 記述したjavascriptが関数でラッピングされてる可能性があるので、HTML側から呼び出せないのかもしれません。
関数をonclickで呼び出したいならglobal領域に突っ込んであげると上手くいくかもしれません。
GASでQiitaトレンドをLineに定期通知する
## はじめに
– 記事の概要
Qiitaのトレンドを毎日チェックしたいのですが、わざわざ見に行くのがめんどくさいと感じたので、GASで定期通知してくれるコードを書きました。
– 想定読者
GAS、JS初心者向けです。
## 実現したいこと
1. QiitaのトレンドをAPIで取得する
1. 取得したトレンドのリンクをLineに通知
1. 上記の処理をトリガーにセットして定期実行する通知イメージ
## GAS(Google Apps Script)とは
– Webサイトからの情報収集（スクレイピング）
– Webアプリケーション開発
– 外部アプリケーションとの連携など自動実行できるGoogleの環境。
詳しくは[こちら](https://udemy.benesse.co.jp/development/system/intro-gas
javascript クロージャーについてまとめてみる
`私は現在javascript(ES6)を学んでいる駆け出しエンジニアだ。`
`今回はクロージャーについて勉強したのでまとめてみる。`
`（この記事はJavascriptES6での勉強で得た知見を書いています）`# ・クロージャーとは・・・
クロージャとはローカルスコープのまわりにある情報を記憶する他の関数を内側に含む関数のことです。
クロージャーは変数を外部から変更されにくくするための仕組みで、
データがどのように変更されるかを明らかにする厳格な処理内容を作り出すことができます。
もし誰かが変数にアクセスしたいとしても、作り出した制御下でしかアクセスできません。
意図せずにそれらの変数を変更することは難しくなるわけです。## ・ 実際に使われる状況でクロージャがなぜ重要でどのように使われるのか
例えば実際にある人の宿泊回数に応じて宿泊プランのアップグレードサービスを行うとしましょう。
その際にグローバル変数として特定の個人の宿泊回数が変更できてしまうと
適切な宿泊回数を堅牢に管理することができなくなってしまいます。
そういう際にクロージャーを用いて宿泊回数を意図しない方法で変
サバイバルTypeScriptを読むまで知らなかったこと
TypeScriptは業務で使っていますが、このサイトで改めて勉強し、初めて知ったことが結構あったので、アウトプットがてら記事に残すことにしました。
まだサイトの序盤を読んでいる段階なので、適宜追記していきます。それぞれのh2タイトルはサバイバルTypeScriptの該当ページへのリンクになっています。
また実際に自分で試したコードを載せていますが、参照元とほぼ同じだったりします。ごめんなさい。https://typescriptbook.jp/
## [JSONにおいてのundefinedとnullの違い](https://typescriptbook.jp/reference/values-types-variables/undefined-vs-null#json)
JSON.stringifyでJSON化した時、値がundefinedのプロパティは削除される
“`ts
const obj = { name: null, age: undefined };// {“name”:null}が出力される
console.log(JSON.stringify(obj
画像を任意のフォーマット&サイズに変換するLambda関数を作成する
任意のBase64にエンコードされた画像をリクエストで送るだけで、フォーマットとサイズを変換してレスポンスで返してくれるLambda関数を作成する方法です。
こういう汎用的なAPIが欲しくなる場面って割とあると思うので、すぐに作成できるように手順を残します。
## 例
変換前
変換後(100×100に収まるように設定)
## ユースケース
– 画像形式もサイズも
プログラミングを始める時におすすめの無料サイト
プログラミングを勉強する人が最近増えています。
今の時代、フリーランスのシステムエンジニアが人気だからですね。収入を上げるため、フリーランス化する人が多いです。そのため、プログラミングスクールが最近流行っています。
が、プログラミングを始める時は、独学からスタートすることをオススメしています。
というのも、**「プログラミングは自分で調べて身に付けることが重要だから」** です。実際、システムエンジニアの業務の中では、”自分で調べて解決する”能力が求められます。
分からないエラーと出会った時に、解決できる力がある人とない人では全然違います。
望むなら、解決できる力を身に付けておきたいですよね。独学はその練習です。そんなわけで今回は、プログラミングを始める人・始めたい人におすすめの無料サイトを紹介します。
無料でもある程度のところまでは勉強できますし、そこから就職・転職・フリーランスも全然アリです。## プログラミングが勉強できるオススメの無料サイト
### ドットインストール
3分間の動画で勉強できる無料サービスです。
**全然無料の動画を見ているだけでも、プログラ
Amazon URLやASINをISBNに変換する
タイトルの通りAmazon URLやASINからISBNに変換します。
ライブラリ([asin2isbn](https://github.com/s-n-1-0/asin2isbn))にしたのでこれを使用します。
“`
npm install asin2isbn
“`# ASIN→ISBN
“`ts
import {convertAsin2Isbn13} from “asin2isbn”;let res = convertAsin2Isbn13(“4596708460”);
if (res.error != “”) {
console.log(“ISBN : ” + res.isbn);
}
“`
※Kindle ASINの場合は取得できません。
“`ts
console.log(res.error); // => “KINDLE”
“`# Amazon URL→ISBN
“`ts
import {convertUrl2Isbn13} from “asin2isbn”;
let res3 = convertUrl2Isbn13(
“https://w
【React】create-react-appで出たエラーの対処法
# はじめに
普段はVue.jsを使っているのですが、React.jsの学習をしようと思い、create-react-appでプロジェクトを作ろうとしたときに出たエラーの対処法について、備忘録も兼ねて残しておきます。## エラー内容
“`
You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1).We no longer support global installation of Create React App.
Please remove any global installs with one of the following commands:
– npm uninstall -g create-react-app
– yarn global remove create-react-appThe latest instructions for creating a new app can be found here:
https://create
個人開発したWebサービスをMENTAでレビューしてもらった
MENTAという`プログラミングに関する質問`や`ソースコードレビュー`をプロのメンターにお願いできるサービスを利用させていただきました。
https://menta.work/
今回は個人開発したWebサービスの`デザイン、UI/UX`面をレビューしていただいたので、内容を記載していきます。
皆さんが開発しているWebサービスの参考になれば幸いです。https://qiita.com/ryouya3948/items/1fc06116a211f3bc62f7
# レビュー内容
画面ごとにレビュ―内容を絡めて、修正前後の画像を貼っていきます。
### トップ画面
#### Before
#### After
