- 1. Alibaba CloudでMongoDBを使ってNode.jsでREST APIを作成する方法
- 2. モノリスはクラピカ
- 3. 【javascript 】新しいオブジェクトリテラル
- 4. 「JavaScript」信頼できるフロントエンドのコード保護への道
- 5. BOT UIを使ってBOTを作成する
- 6. 【JavaScript】変数を定義するとき var, let, constの違いは？
- 7. ブックマークレット作成でハマったこと一覧
- 8. コンポーネント設計で悩んでいる人へ。簡単にコンポーネント設計できるESLint Plugin作りましたよ??
- 9. 【 javascript】分割
- 10. ESLintのカスタムルールでin+配列を禁止しよう
- 11. スクロール位置に応じてバーが追従するグローバルメニュー
- 12. 【Javascript】JS 変数 定数 違い 一言でまとめました
- 13. kintone から LINE に投稿する
- 14. Kinx ライブラリ – JIT ライブラリ
- 15. 【Docker入門】Deno環境をDockerで構築する??
- 16. nodejsを使ってウエブサーバーを作ろう – majidai
- 17. ある一定の所までスクロールすると下に出てくるウザいバナーの出し方。コピペで使える。
- 18. 【javascript】Object.assign
- 19. 【Rails】画像プレビュー機能の実装
- 20. TypeScriptの型記法「オブジェクトリテラル 」と「インデックスシグネチャ」を理解する
Alibaba CloudでMongoDBを使ってNode.jsでREST APIを作成する方法
この記事では、**Alibaba Cloud**上で**MongoDB**を使ってNode.jsで強力なREST APIを作成する方法を探っていきます。
*アリババクラウドは日本に２つのデータセンターを有し、世界で60を超えるアベラビリティーゾーンを有するアジア太平洋地域No.1(2019ガートナー)のクラウドインフラ事業者です。
アリババクラウドの詳細は、こちらからご覧ください。
[アリババクラウドジャパン公式ページ](https://www.alibabacloud.com/blog/create-a-rest-api-in-node-js-with-mongodb-on-alibaba-cloud_593851)*#Alibaba Cloud ECSにMongoDBをインストールする
MongoDBのインストールは簡単です。| パッケージ名 | 説明 |
|:–|:–|
| mongodb-org | 以下の4つのコンポーネントパッケージを自動的にインストールするメタパッケージです。 |
| mongodb-org-server | デーモンと関連する設定スクリ
モノリスはクラピカ
Reactを学習中のRailsエンジニアです。学習していて思うのは、Reactは(サービス開発全体のことを考えると)Railsよりはるか学習コストが高いということ。似たようなサービスを作るために必要な手数も、考えなければいけないこともかなり多いです。
正直最初は「技術が大好きなエンジニアの自己満だろ」「Railsに飽きた奴らがやってるだけだろ」くらいに思っていたのですが、そうとも限らないことが腹落ちして理解できるようになったので、現在の考えをまとめてみようと思います。
## おことわり
この記事の中で登場する`SPA`という単語は`フロントエンドとバックエンドを明確に分けて開発されるアプリケーション`くらいの意味として解釈してください。フロントエンドのロジックをNuxt.jsで作ってNetlifyにデプロイして、Goで作ったAPIをAWSで動かす、みたいな構成のやつです。乱暴ですみません。他に良い表現があればコメントください。`モノリス`はRailsやLarabelでviewファイルの生成まで行っているアプリケーションを指します。
SPA⇄MPA
マイクロサービス⇄モノリス
【javascript 】新しいオブジェクトリテラル
#簡易表記のプロパティ名
以下は、プロパティ名textに変数textを代入している。“`javascript
const message={text:text};
“`
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。“`javascript
const message={text};
“`
これは分割との組み合わせでも機能する。“`javascript
let {count}=stateManager.getState();
count+=amount
stateManager.update({count})
“`#簡易表記のメソッド名
“`javascript
function manager() {
const state = {};
return {
update: function(changes) {
Object.assign(state, changes);
},
getState: function() {
return Object.assign({}, state
「JavaScript」信頼できるフロントエンドのコード保護への道
成功したWebシステムで信頼できるプラットフォームモジュールを構築するには、データのセキュリティを確保し、比較的信頼できるフロントエンド環境を構築する必要があります。
*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/path-to-a-trusted-front-end-code-protection_90573)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。*
#序章
情報セキュリティ分野における魅力的な目的として、信頼されたシステムとは、特定のセキュリティポリシーを実行することで、一定の信頼性を実現するシステムのことを指します。コンピュータでは、すでにTrusted Platform Mod
BOT UIを使ってBOTを作成する
#BOT UIとは
BOTを簡単に作れるJavaScriptフレームワーク。
2019年1月にやってみたことを書いていきます。ドキュメント:[docs.botui.org/index.html](https://docs.botui.org/index.html)
##例
[https://examples.botui.org/](https://examples.botui.org/)###Git
– [https://github.com/botui/botui](https://github.com/botui/botui)
– [https://github.com/botui/botui-examples](https://github.com/botui/botui-examples)###HTML
``
###js
Gitから抜粋“`
var botui = new BotUI(‘botui-app’)
【JavaScript】変数を定義するとき var, let, constの違いは？
## はじめに
JavaScriptを書く際に、変数定義する際にvarやletやconstを使うかと思います。
正直これの違いってよくわからないまま書いていたりしないでしょうか？自分もなんとなくで使い分けてたりするわけですが、最低限エラーにはならないようにしたいものです。
そこでそれぞれの違いを少し丁寧に解説してみようと思います。## 概要
まずはそれぞれの違いについて簡単に説明します。
一言で説明するとそれぞれ以下のような特徴があります。
#### var
再定義、再代入可能
#### let
再定義不可、再代入可能
#### const
再定義、再代入不可## もう少しわかりやすく
再定義とか再代入とか言われてもよくわからんと思うかもしれないです。■ 定義
定義とは変数の宣言のことで、varとかletとかconst〜と記述することです。
■ 代入
代入とは一度宣言した変数に値を入れることです。具体的にコードでみてみましょう。（JQueryを使って書きます）
“`js:jsファイル
$(function() {
var varSample = “var
ブックマークレット作成でハマったこと一覧
if文の指定方法 = ではなく、==で動く
“`
動かない
let a=window.prompt(‘好きな野菜を選択してください\rきゅうりなら【１】 / トマトなら【２】’,”);
if(a = 1){a=’きゅうり’}else{a=’トマト’};
“`
“`
動く
let a=window.prompt(‘好きな野菜\rきゅうりなら【１】 / トマトなら【２】’,”);
if(a == 1){a=’きゅうり’}else{a=’トマト’};
“`
コンポーネント設計で悩んでいる人へ。簡単にコンポーネント設計できるESLint Plugin作りましたよ??
# この記事について
この記事は、筆者が作った**ESLint プラグイン**の紹介記事なります。
「 なぜ作ったのか? 」「 コンポーネント設計とは何か？ 」という議題に触れ、**コンポーネント設計の難しさ**や**このプラグインの有意性**について語っています。
筆者は専門家では無いので間違っている所や認識のズレなどがあるかもしれませんが、もしあった場合は編集リクエストやコメントにて指摘してくれると嬉しいです。後、現在この記事で紹介するプラグインは「 **コンポーネントは JSX で記述されている** 」ことを想定しています。
# 作ったモノ
[Specific Component Design](#specific-component-designについて)を導入するための**ELint プラグイン**です。
プラグインの詳細は、github のドキュメントに**日本語で**書いていますので、是非見てみて下さい。
以下の画像は、github へのリンクカードです。
【 javascript】分割
javascriptには構造化の概念がサポートされているがその逆の分割のための構文はなかった。
#オブジェクトの分割
まずは簡単な分割の例を見てみる。“`javascript
let person = {//データ構造を作成
name: ‘Tanaka’
}
let {name} = person;//データ構造を分割console.log(name);//Tanaka
“`まず、オブジェクトリテラルを使ってデータ構造を作成している。これによりプロパティを簡単な方法で指定できる。
sonogo
データ構造の分割をしている。nameプロパティを変数に取り出すための分割分が使用されている。“`javascript
let person = {//データ構造を作成
name: ‘Tanaka’,
age:25
}
let {name,age} = person;//データ構造を分割console.log(name);//Tanaka 25
“`
上記では、オブジェクトwから抽出したいフィールドの名前を指定するとフィールドと同じマナエの変数にフィールド
ESLintのカスタムルールでin+配列を禁止しよう
# なぜin+配列を禁止するのか？
Pythonで
“`python:Python
>>> 0 in [1,2]
False
>>> 1 in [1,2]
True
“`となり、JavaScriptで
“`javascript:JavaScript
> 0 in [1,2]
true
> 1 in [1,2]
true
“`となるので、間違いやすい。
このルールの正しいコードの例は
“`javascript:JavaScript
> [1,2].includes(0)
false
> [1,2].includes(1)
true
“`となる。
ESLintにin+配列を禁止するルールがない。
ESLintのカスタムルールを作ってin+配列を禁止しよう。
# 禁止する方法
.eslintrc.js の rules に “no-in-array”: “error” を追加。
rules フォルダーに [no-in-array.js](https://github.com/querykuma/snippets/blob/master/eslint-
スクロール位置に応じてバーが追従するグローバルメニュー
#はじめに
コーディングを行う際、ヘッダーのメニューにある下線をスクロール位置ごとに動かしたかったのですが、躓いてしまったため残したいと思います。
私はコーディング歴も浅く、手探りで実装したので、もしより良い方法があればご教授いただけると幸いです。#完成形
#コード
下線が追従する基本的な形は[こちら](https://digipress.info/tech/menu-with-underline-sliding-animation/)を参考にしました。“`html:sample.html
【Javascript】JS 変数 定数 違い 一言でまとめました##【ゴール】
javascriptの変数、定数の違い##【メリット】
＊ javascript理解度向上##【コード】
###変数（var , let）
＊**中身を何回も更新できる**####var
＊再宣言可能
＊再宣言の際に(var)は不要“`js:hoge.js
var name = “太郎”;console.log(name); // 太郎が出力
name = “次郎”；
console.log(name); //次郎が出力
var name = “三郎”; //再宣言可能
“`
#### let
＊同変数名は一度しか宣言できない“`js:hoge.js
let name = “太郎”;console.log(name); //太郎が出力
let name =”次郎”; //エラー出る…
“`
###定数
＊**中身は一回だけ決めれる**
#### const
“`js:hoge.js
const name = “太郎”;console.log(name); //太郎と出力
“`##【合わせ
kintone から LINE に投稿する
## 概要
先日に [LINE チャンネルの友達登録や投稿情報を kintone に保管](https://qiita.com/yukataoka/items/9356171cd350c465b745) で、LINEのチャンネル登録をして、友達登録や投稿情報を kintone に保管したり、AWS Lambda から返信できることまでは確認しました。
今回は、kintone から LINE チャンネルを友達登録した方に対して個別でメッセージを送る方法を試してみました。
## kintone アプリの項目追加
先ずは、前回作成した LINE の友達登録や投稿情報を保管する kintone アプリに、LINE に送信するメッセージ用のフィールドを追加します。
は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。JIT コンパイルのためのライブラリを作ってみました。
* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。JIT やりたいよね。今回は [Kinx – native](https://qiita.com/Kray-G/items/66257e4cca0ad6dd7636)
【Docker入門】Deno環境をDockerで構築する??
# はじめに
※ **Docker入門者**の学習記事です！
[Deno](https://deno.land/) が盛り上がって来ているように見えます。?
興味をそそられたので、学習も兼ねてさっそくDockerでコンテナ化してみました。
## ゴール
– Dockerfileを自作して、イメージを作ってみる
– コンテナにDenoをインストールして、触れる環境を作る
– Denoの標準APIを使用して、Webサーバーを立ち上げる# Dockerfileを作成
コンテナイメージの元となる`Dockerfile`を作成します。
最終的には、以下のようなものが出来上がりました。
“`dockerfile
FROM debian:stable-slimWORKDIR /var/www/html
RUN apt-get -qq update \
&& apt-get -qq -y install curl zip unzip \
&& curl -fsSL https://deno.land/x/install/install.sh | sh \
&
nodejsを使ってウエブサーバーを作ろう – majidai
[](https://travis-ci.com/dakc/majidai)[](https://github.com/dakc/majidai/blob/master/LICENSE)
# majidaiとは
majidaiとは、nodejs用のWebフレームワークです。
サードパーティーライブラリが使っていないため非常に軽いです。
データ量 < 50KB#### インストール
[nodejs](https://nodejs.org/en/download/)がインストールはこの記事のスコープ外とします。
##### 1. プロジェクトの初期化
タミナルから作業フォルダーに移動し、プロジェクトの初期化を行います。“
ある一定の所までスクロールすると下に出てくるウザいバナーの出し方。コピペで使える。
くそサイトでよく見かけるアレです。
## 成果物
https://youthful-mccarthy-ce6430.netlify.app## リポジトリ
https://github.com/yuzuru2/annoying_banner## index.html
“`html
ウザいバナー