#vue js 入門 | Explore Tumblr posts and blogs

mediba-ce · 4 years ago

Text

Nuxt.js+TypeScriptで抽選ツールを作ってみた

はじめまして、2021年度新卒の木村です。フロントエンドエンジニアとしてテクノロジーセンター5G に所属しています。

今回は、Nuxt.js ならびに TypeScript を利用して、簡単な抽選ツールを作成してみた内容についてご紹介します。

Nuxt.js と TypeScript

Nuxt.js は、Vue.js ベースの JavaScript のフレームワークです。Webページ構築に有用な UI 以外の機能（ Ajax やサーバーサイドレンダリングなど）をまとめて利用できる環境を提供してくれます。 Nuxt.js 公式サイト

TypeScript は、省略可能な静的型付けとクラスベースオブジェクト指向を加えた JavaScript のスーパーセット（上位互換）です。一言で言うと「型定義できる JavaScript 」。 TypeScript 公式サイト

なぜ抽選ツールを作ったのか

主な理由は、以下の2点です。

私の所属するチームで扱っている Nuxt.js および Typescript の概要を掴むため

チーム内でMTGのファシリテータが偏ってしまう課題を解決するため

完成物

さっそくですが、完成した物がこちら。

ランダムにユーザーを抽選できるシンプルなツールです。デザインは近年流行ったニューモーフィズムを取り入れてみました。少ない配色でも凹凸によって奥行きができるので、シンプルなツールでも見栄えが良くなります。

使った技術

Nuxt.js 2.15.7

TypeScript 4.2.4

Vue.js 2.6.14

Vuex 3.6.2

firebase 8.7.1

tailwindcss 2.2.4

sass 1.35.1

環境

M1 Mac

VSCode

yarn

機能

今回の抽選ツールの機能は以下とおりです。

ユーザーを登録・削除する

ユーザー情報をDBで保持する

登録したユーザーからランダムに抽選する

完了した人・休みの人にチェックし、抽選対象から外す

抽選終了後、選ばれた人は自動で完了チェックされる

全員チェックしたら一括リセットできる

作成手順

全体的な流れは以下のとおりです。

環境構築

各機能作成

Vuex導入

firebase導入

1. 環境構築

create-nuxt-appを利用して環境を構築しました。

create-nuxt-app

公式サイトとNuxt.js 入門の記事を参考にしました。

2. 各機能作成

前述した各種機能を実装していきます。

欠席者の対応

完了した人だけでなく、休みの人など抽選対象から除外したい場合を想定して、完了チェックとは別に除外したいユーザーを指定できるようフラグを持たせています。

コンポーネントについて

個人的に苦労したのはコンポーネント周りです。

まず、どのくらいの単位で区切れば良いのかがわかリませんでした。そこで今回は Atomic Design を参考に切り出しました。

また、他の箇所でも使えるように汎用的に作ることです。クリックなどのイベントは全て親へ渡し、スタイルや表示の変更は親から��を渡すようにすることで、atoms単位のコンポーネントがどこでも使えるよう心がけました。

例えばボタンコンポーネントは、予めいくつかのスタイルを定義しておき、親コンポーネントで使うときに下記のように props で必要なスタイルを渡すとともに、$emit でクリックイベントを親に渡しています。

//Button.vue <div> <button :class="[ colorStyle[buttonColor], sizeStyle[buttonSize], fontStyle[buttonFont], ]" @click="$emit('button-click')" > <slot></slot> </button> </div>

//Input.vue <Button button-color="gray" button-size="short" button-font="small"> ADD </Button>

そしてコンポーネント間のデータの受け渡しです。例えばユーザー情報は、子から emit で親コンポーネントに値を引き渡し、さらに別の子コンポーネントに props で渡して表示しています。

今回はシンプルなツールなのでコンポーネントも少ないですが、こうした受け渡しが重なってくるとコードが煩雑になりメンテナンスがしづらくなります。そこで、Vuex を導入し状態管理をすることにしました。

3. Vuex 導入

Vuex のストアでユーザー情報の状態を管理します。今回はDBも使う予定なので、actions でDBに接続した後、値を state に反映させています。

Nuxt.js は store ディレクトリにファイルを作成するだけでストアを有効化してくれるので便利ですね。今回は管理するのがユーザー情報だけなので、index.ts を作らず users.ts を直下に作りました。

Vuex ストアでデータを一元管理できるので、本当にわかりやすくなりました。コンポーネントを超えて共有される情報を管理するには、とても強力なツールだと思います。

一方で、Vuex を使用する際には、注意点もあります。例えば、小さいレベルのコンポーネントからは Vuex を使用しない方が良いでしょう。コンポーネントの使い回しが難しくなるのと、１画面の中で複数の箇所から Vuex のストアへの参照と変更が入り組んだ場合、処理が追いにくくなるためです。

参考：Vuexはなるべく避ける　　　Vuexで何をするか、何をしないか

Vuex を利用する際は、Atom や Molecule レベルのコンポーネントの中では使わない、state を直接参照しない、などのルールを設けて運用したいと思います。

4. firebase 導入

DBとデプロイは firebase を利用します。 firebase は以前にも使ったことがありましたが、やはり firestore を使えば面倒な手間をかけずにDBが実装できますね。万歳。デプロイも firebase の Hosting を使って行いました。

さらに、今回は社内向けツールなので、デプロイにあたり外部からのアクセスを制限するため、 Authentication を使用してログイン認証を追加します。管理者アカウントとしてユーザーを一人だけ登録し、簡単なPWを打てば誰でも使えるようにしました。ログインしていない状態では認証後のページへ飛べないようにするため、強制的にindexへリダイレクトするmiddlewareも追加しています。

const auth = firebase.auth() const middleware: Middleware = ({ route, redirect }) => { auth.onAuthStateChanged((user) => { if (!user && route.name !== 'index') redirect('/') }) }

また、Authentication の認証状態は、デフォルトではユーザーがブラウザを閉じた後でも永続的に維持されるようになっています。今回は管理者アカウント一つだけの使用になるため、ログアウトせずにウィンドウを閉じてしまうと、他の人がアクセスした時でも前のセッションが続くことになります。そこで、 firebase.auth().setPersistence メソッドで永続性タイプを SESSION に変更することで、ウィンドウやタブを閉じるたびにログイン状態がクリアされるようにしました。

ちなみに、Nuxt.js には nuxt/firebase というモジュールがあります。firebase をより簡単に利用できるので、興味があればご覧ください。

詰まったところ

sass の導入

sass の導入で沼りました。どうやら node のバージョン16 かつ M1チップだと node-sass が動かないようです（2021/09 執筆時点）。node のバージョンを下げることで解決しました。

型定義

Vuex での型定義、props での型定義、firebase で扱う日時の型定義… 型推論が効かず、気づけばanyになっている型に苦しめられました。特に Vuex は、ストアへアクセスするための便利な型がなく、今回使用した this.$store は Nuxt.js で型指定されていません。自前の型を使うか、nuxt-typed-vuex を利用することで改善するしかないようです。

また、 TypeScript と Vuex の相性は良くなく、コンポーネントから store を呼び出したときに型安全が守られない、インテリセンスが効かないといった問題があります。次に TypeScript で Vuex を扱う際は、Nuxt.js 公式で推奨されている vuex-module-decorators を使用したいと思います。

振り返り

さて、ここまで長々と書いてきましたが、今回のアウトプットを通して Nuxt.js と TypeScript の概要は大体掴めたかな、という感じです。結論、Nuxt.js 便利！

日本語ドキュメントが充実していてほぼ誰でも簡単に始めることができる

ルーティングを自分で作成する必要がない

SSRなどモードを選べるて柔軟なサイト設計ができる

…など、Nuxt.js を使うことで直感的にDOMの内容を操作でき、より簡単に抽選ツールを作ることができました。

また、TypeScript についても、型定義のおかげで、コンポーネント間のデータの受け渡しでもどういう型か判断でき、コードが見やすくなります。さらに、力補完のおかげでコードを書く時間を短縮できる、エラーチェックを機械に任せることができる、など多くのメリットがありました。一方で、Vuexとの連携は公式で推奨されているパッケージを使うなど、改善の余地があります。

最後に

以上、Nuxt.js を利用して抽選ツールを作成してみた内容の紹介でした。

最後まで読んでいただき、ありがとうございました。どなたかの参考になれば幸いです。

0 notes

hatarakublog · 4 years ago

Link

Javascriptのフレームワークの中でも数年前より人気が急上昇しているVue.jsについて解説しています！

ぜひご覧ください！

0 notes

tak4hir0 · 5 years ago

Link

原文(投稿日：2020/06/19)へのリンク近年、大企業は、信頼性、安定性、保守性に重点を置いて、企業内のJavaScriptテクノ��ジスタックをオープンソース化している。Geertjan Wielenga氏はFOSDEM’20でその動きの背後の駆動者とそれが開発者にどのように役立つかを説明した。 Geertjan Wielenga氏は、書籍『Developer、Advocate!』の著者であり、NetBeansとOracle JETに焦点を合わせたOracle開発者であり、過去数十年のJavaScriptフレームワークとライブラリの進化を想起した。Dojo（1.x）、Mootools、Extjs、jQuery、およびYUIは、開発を促進し、開発者がWebアプリケーションの構築を支援する最初のライブラリの1つだった。その後、Backbone、Knockout、Ember、Angularjs（Angularと混同しないこと）が登場し、よりインタラクティブなWebアプリケーションを構築する際に開発者が直面していた一般的��問題を解決した。Grunt、Gulp、Brunch、およびその他のビルドツールも、豊富なWebアプリケーションのビルド、バンドル、およびパッケージ化の開発の複雑さを管理するために生まれた。今日では、Angular、Vue、Reactの3つの主要なフロントエンドフレームワークが、開発者間の議論の大きなシェアを集めている。これらの各フレームワークは、新しい機能が追加されて複雑さが増すため、非推奨化とはげしい変更の独自のサイクルを経てきた。 Wielenga氏は、前述のフレームワークとライブラリを彼が最初の世代と呼ぶものに集め、3つの深刻な問題に苦しんでいると主張した。まず、これらのフレームワークのほとんどは、開発者が追いつく必要のある高度な技術的乗り換えが特徴だ。フレームワークが変化すると、それらの周りのエコシステムも進化し、問題がさらに悪化する。次に、Wielenga氏は互換性のないカスタムスタックを、開発の2番目の主要な問題として説明した。 Vueを使用する場合、7つのものとVueを使用します。（中略）コンポーネントライブラリが必要な場合は、（中略）コンポーネントライブラリは別の場所に、ビルドシステムは別の場所に移動します。そして、問題が発生し、オンラインになってstack overflowで解決策を見つけるとすぐに、素晴らしい解決策があることがわかりますが、その解決策には固有の2つまたは3つのものを使用していません。開発者の専門化はWielenga氏が非難した3番目の問題だ。Wielenga氏は、人々はもはやJavaScript開発者ではなく、特定のソリューションに密接に結びついていることを嘆いた。歴史上初めて、言語ではなくフレームワークで識別する人々がいます。（中略）フレームワークで自分を特定する人々は悲劇です。同時に、ここ数年、大企業はフロントエンド開発にJavaScriptを本格的に使用し始めている。この傾向は、配布プラットフォームとしてのブラウザーの遍在性、ブラウザーの標準プログラミング言語であるJavaScript、モバイルデバイスによって提供される可能性、JavaScriptのスキルを持つ大学を出たばかりの若い開発者の大規模なプールによって推進される。ただし、大企業からJavaScriptへの移行により、いくつかの緊張が生じた。大規模ベンダーはJavaScriptを採用しています（中略）本当の重大なアプリケーションを作成するため。（中略）しかし、エンタープライズ空間では、何がクールで何が新しいかではなく、何が安定していて信頼できるかが重要です（中略）そして、数年はメンテナンス可能であるか。開発者への高い需要の結果、開発者を惹きつけるために、企業はスタックをオープンソース化するインセンティブを持っている。Wielenga氏は説明した開発者として、無料のオープンソーステクノロジースタックがある場所に行くのか、自分のスキルを他の場所に移すことができるのか、それとも特定のベンダーがやっている非常に独占的で固有の何かを学ぶことに時間を費やしています。（中略）単に開発者を引き付けるために、ベンダーは開発者を引き付ける種類のスタックを作成するためにオープンソースの世界に移動することを余儀なくされています。これにより、Wielenga氏が第2世代のJavaScriptフレームワークおよびライブラリと呼ぶものに到達した。その世代は、何よりもまず企業セグメントの要件に対処する。これらの要件の中で、安定した実証済みのツールセット、レスポンシブデザイン、アクセシビリティと国際化、データ可視化機能（ロジスティクス、ヘルスケア、金融業界のキー）、セキュリティ、パフォーマンスの最適化、新しい標準（Webコンポーネントなど）への適合、ビジネスユーザー、およびドキュメントとサポート。これは、最新のクールな最先端テクノロジーを含まないが安定しているスタックを意味する場合がある。フレームワークから遠ざかり、代わりにツールキットを中心に展開する。柔軟性、モジュール性、およびソフトウェア変更の容易さを強調する。そして、今後数十年の間、まだ見込まれると思われる標準に準拠する。エンタープライズセグメントの開発者の多くは、Javaや.netなどの他のテクノロジーを使用しており、JavaScriptを初めて使用するため、問題に低いしきいのエントリポイントとすぐに使えるソリューションが必要である。Wielenga氏は言った。組織内の全員が、自分がどのスタックを使用する必要があるかを自分で考え出す必要はありません。 Oracle、SAP、Microsoftなどの大規模なテクノロジー企業は、開発者の大規模な雇用者として、当然、第2世代のライブラリの開発に参加している。しかし、Wielenga氏は、大企業はIT企業になりつつあると述べた。Paypal、Walmart、Uber、AirbnB、Financial Timesなども、技術スタックの一部をオープンソース化している。 (出典 FOSDEM’20 talk) Wielenga氏は、開発者にAngular、React、Vueの比較から企業が導入したソリューションの調査に移行し、要件に最も適したソリューションを選択して積極的に貢献するよう勧めることで締めくくった。完全なビデオはオンラインで入手でき、追加のビジュアルとコメントが含まれている。FOSDEM’20は、2020年2月1日と2日にベルギーのブリュッセルで開催された。FOSDEMは無料の年1回のイベントで、数千のソフトウェア開発者が集まり、アイデアを共有したり、協力したりする。

#InfoQ

0 notes

takepara · 5 years ago

Text

なるほどですね 2020年03月08日の記事一覧

(全 37 件)

「給料前借り」二者間ファクタリングが無事に貸金業認定されて要登録になる

テレワーカーがカフェで平気で電話をして顧客情報を垂れ流してる件

ウルトラマラソンのトップ走者は、こんな過酷なトレーニングで記録に挑んでいる｜WIRED.jp

runner

Spring Boot 爆速パフォーマンスアップ

証明書300万件を強制失効。Let's Encrypt に一体何が起きたのか？

子どもの感染、大人と変わらず

100万円を切りそうな電動SUV。ルノーの弟分｢DACIA SPRING｣

AppleがiCloudのモバイル版をアップデート！ Androidスマホとも相性良さそうです

東京都コロナ対策サイトへの諸々のメモ｜深津貴之 (fladdict)｜note

Firefoxに対する攻撃を防御、WebAssemblyを利用したサンドボックスが役立つ

プログラムの動作が異常に遅い原因は「ランダムアクセス」かもしれない

「生きている人間の肌」を識別して顔認証のセキュリティを向上させる技術が開発されている

ZOZOのMLOpsチームにおける監視への取り組み / Observability in 10 mins at ZOZO MLOps

「空気を読まないヤツ」からの3つの提言

Microsoft's Miguel de Icaza Ponders New Use for WebAssembly

Sync Mobile Apps with Azure using Change Tracking API

REST API開発に特化したWebフレームワークがもたらす生産性の向上

WebRTC M81 リリースノートメモ

Stark - Language And Frontend Compiler - Prototype 2019

Dom diffing with vanilla JS: part 1

AMDの次世代GPUアーキテクチャ「RDNA 2」、ついにハードウェアレイトレーシング対応

Hub and Spoke network topology in Azure

SendGrid 新人成長記　第九回　メールサーバを立ててメール送信してみた

Why do I rag on BinaryFormatter?

Angular vs React vs Vue: Which Is the Best Choice for 2020?

なぜ「できない人」ほど、人に聞けないのか。

WebAssembly Summitまとめ（前編）｜chikoski｜note

WebAssembly Summit まとめ（後編）｜chikoski｜note

Project Svalbard, Have I Been Pwned and its Ongoing Independence

CNAMEトラッキングってなあに？

ハンドルは卒業。エヴァの操縦席のようなレバーで運転する電気自動車

いまこそ知っておくべき「コロナウイルス」に関する4つの基礎知識

村井純教授の1月16日最終講義全文書き起こし

JavaScriptで取り組むクリエイティブコーディング – パーティクル表現入門

開発者の年功レベル

#IFTTT

0 notes

kjunichi · 5 years ago

Text

Vue.jsで作ったゲームをインストール可能（PWA）にしてGitHub Pagesで公開してみた｜ Developers.IO [はてなブックマーク]

Vue.jsで作ったゲームをインストール可能（PWA）にしてGitHub Pagesで公開してみた｜ Developers.IO

はじめにおはようございます、加藤です。年末年始は実家の北海道に帰省するつもりだったのですが、見事にインフルエンザB型にかかってしまって、急遽キャンセルしました... 予定が全て吹っ飛んで暇になったので、年末年始は下記の教材を使ってVue.jsを勉強していました。超Vue JS 2 入門完全パック - もう他の教材は...

from kjw_junichiのはてなブックマーク https://ift.tt/2s1cCPr

#はてなブックマーク

0 notes

strptoh1210 · 6 years ago

Text

勉強 2019/12/12

https://www.udemy.com/course/vue-js-complete-guide/learn/lecture/15370994#overview

超vue.js入門完全パック

#21,22,23,24,25,26

0 notes

mana-bou0322 · 6 years ago

Text

Vue,js入門

https://jp.vuejs.org/v2/guide/index.html

http://www.tohoho-web.com/ex/vuejs.html

https://www.willstyle.co.jp/blog/1397/

#vue.js #js

0 notes

softshareblog-blog · 7 years ago

Text

中文課程 - Vue入門基礎(vue js)

中文課程 – Vue入門基礎(vue js)

課程簡介

Vue.js是當下很熱門的一個 JavaScript MVVM 程式庫，它是以資料驅動和元件化的思想建構的。相比於 Angular.js，Vue.js 提供了更加簡潔、更易於理解的 API，使得我們能夠快速地上手並使用 Vue.js。

從這 2 小時的課程，你會學到

vuejs 的背景及其專案相關知識

瞭解流行的前端專案架構方式 webpack + gulp

用 vue-cli 工具初始化 vue 專案

學習 vue 專案基本的架構和開發方法

學習使用 vuejs 常用的介面和方法

課程中教你如何在一個專案中使用vuejs

課程網址 [ 限時免費中 ]

Sponsored by Udemy

喜歡我們的服務嗎？考慮贊助一下 Soft & Share喔！ 🙂 1. 選購相關付費課程

中文課程 – 使用 Vue.js 仿製一個«每團外賣» App

更多 VueJS 相關線上課程介紹

View On WordPress

#udemy-free

0 notes

laravelvuejs · 6 years ago

Text

Vue.js 教學 - 從 Vuejs 初探 Web Component 的世界 (HD)

Vue.js 教學 – 從 Vuejs 初探 Web Component 的世界 (HD)

[ad_1] 本月將會進入滿滿的 Vue.js 課程，只要有 JavaScript 入門就能開始進入這堂課。課程中也會從基礎開始，所以沒接觸過的也能來聽喔。

本日活動社團連結 https://www.facebook.com/events/353658308400452/permalink/353658618400421/?action_history=null — 本日 Quip https://quip.com/N3iKAEDJEVmD — Vue js 台灣社團 vue.tw — 六角學院全新 Vue 課程上線了 https://www.hexschool.com/vue/

或者直接在 Udemy 上觀看 https://www.udemy.com/vue-hexschool/?couponCode=YOUTUBE_COUPON_18 source [ad_2]

View On WordPress

#component #css #frontend #html #vuejs #web #初探 #從 #教學 #的世界

0 notes

entlizm · 6 years ago

Link

via JavaScriptタグが付けられた新着記事 - Qiita

#IFTTT #Feedly

0 notes

awsexchage · 7 years ago

Photo

Vue.js+TypeScriptで開発するときの参考記事まとめ https://ift.tt/2NcimdN

概要

Vue.js+TypeScriptで開発する際によく参考にしている記事をまとめています。

自分用なので、自分記事が若干多めです。随時更新

この記事良かったよーとか、教えていただけると助かります。

環境構築

Vue CLIのプロジェクト管理UIがいい感じだった https://cloudpack.media/43013

DockerでVue.js+TypeScript開発環境を構築する https://cloudpack.media/43078

Vue.js + SCSS + Bootstrap + MaterialDesign + TypeScript開発環境をつくってみた https://cloudpack.media/42905

設計

最近のフロントエンドのコンポーネント設計に立ち向かう https://qiita.com/seya/items/8814e905693f00cdade2

Vue.js+AtomicDesign https://speakerdeck.com/keitarookamura/vue-dot-js-plus-atomicdesign

Atomic Design を実案件に導入 https://ygoto3.com/posts/atomic-design-on-actual-project/

Atomic Design に学ぶ Web 開発をハッピーにするデザイン手法 https://qiita.com/usako/items/10ea7340f1a0b23a7b8b

単体テスト

Vue.jsの単体テスト実行が遅いのをなんとかしたい https://cloudpack.media/42981

Vue.js+TypeScriptのテストでRouterLinkがないって怒られたときの対応 https://cloudpack.media/43165

Vue.jsでコンポーネントを入れ子にするとUnit Testでワーニングがでて煩わしい https://cloudpack.media/42932

Vue.js+TypeScript+Element-UIの単体テストで気をつけること https://cloudpack.media/43062

Vue.js Vueコンポーネントのユニットテストを書いてみよう https://qiita.com/potato4d/items/8215941b84c11b845886

設定ファイル・環境変数

TypeScriptなVue.jsで環境ごとに設定ファイルを読み込みこめるようにしてみた https://cloudpack.media/42943

環境変数とモード https://cli.vuejs.org/guide/mode-and-env.html#modes

Vuex

VuexをTypeScriptで利用するのに悩んだ https://cloudpack.media/42966

Vue.js + Vuex + TypeScript を試行錯誤してみた https://logs.utahta.com/blog/2017/09/02/110000

Vue.js + Vuex + TypeScript Example https://github.com/utahta/vue-vuex-typescript-example

コンポーネント

Vue.jsのコンポーネント入門 https://qiita.com/shosho/items/115b371736207078289c

TypeScriptではじめるVueコンポーネント（vue-class-component） https://qiita.com/hako1912/items/8d9968d07748d20825f8

Vue.jsのpropsカスタムバリデーターを使った堅牢なコンポーネント作成 https://qiita.com/potato4d/items/1b92df0cbf9b0b6cf8d6

Vue.js+TypeScriptでコンポーネントをv-modelでつなげてみる https://cloudpack.media/43057

API / モックサーバ

Vue.jsでVuex+axiosを利用してAPIを叩く https://qiita.com/kai_kou/items/c4e449964df59d5a5fb0

API BlueprintとdrakovとdreddでAPIドキュメントを書きつつモックサーバを立ててさらにテストを走らせる https://arata.hatenadiary.com/entry/2018/03/22/204723

api blueprintとdrakovを利用してAPIモックサーバを立ち上げる https://qiita.com/kai_kou/items/bdbb6c3f8d1ac655595d

エラー処理

Vue.jsでフロント側のエラー検知を共通化する http://sms-c-engineer.hatenablog.com/entry/2018/04/24/142445

Vue.jsのerrorHandlerがいまいちつかめない https://qiita.com/kai_kou/items/90255bdcfaa44f5d1de9

元記事はこちら

「Vue.js+TypeScriptで開発するときの参考記事まとめ」

October 01, 2018 at 04:00PM

#AWS #Official #Blog

0 notes

tak4hir0 · 6 years ago

Link

普段はWebサービス開発を行っているエンジニアが、Salesforce上で開発をすることになった際のチュートリアルを残しておきます。現状のSalesforceは開発者フレンドリーとは言いづらい状態です。開発に関する資料は量はあるものの独自のキーワードが多く分かりづらく、ベストプラクティスが見えません。またサービス自体も全体的に新しい機能がつぎはぎで追加されており、とっちらかっている感じが否めません。（アップデートを繰り返して頑張ってるのは伝わってくるのですが…）しかし最近はSalesforceも開発者へのサポートを手厚くしようとしているようで、ちゃんと一般的な開発手法も可能になってきていいます。ここでは、Salesforceに初めて触るWebエンジニアが、一通り開発ができるようになるまでの道のりを示します。 ※Salesforce開発が本業のわけではないので、間違っている点などあれば申し訳ありません。 Salesforceとは Salesforce自体は、アプリケーション開発のためのプラットフォームです。公式には Salesforce Platform と紹介されています。ざっくりと言えば、「DBのスキーマを定義するとCRUDの画面が自動的にできる」「各種権限管理」「Callbackなど複雑なイベント管理」「レポーティング」などの機能がGUIで開発できるサービス、という感じです。公式からはスキーマと画面のプリセットのようなものがいくつか提供されており、このプリセットで一番有名なのがSales Cloudという顧客管理システムです。社内の営業組織が、顧客とそれに紐づく情報をGUIで管理するシステムですね。一般的にSalesforceというと、この顧客管理システムを指します（少なくとも営業組織��文脈では）。公式的にはこのプリセットを Cloud と呼んでいます。触ってみる 30日間の無料トライアルがあるので、まずはSales Cloudを触ってみましょう。無料トライアル「リード」とか「商談」とか独自のキーワードが分かりづらいと思いますが、CRUD画面をメインに構成されるSalesforceの雰囲気が伝わると思います。余��ですが、以下の本を読んで現代の営業活動モデルを知っているとSalesforceを理解しやすいでしょう。 https://www.amazon.co.jp/dp/B07M5W8GCQ 注意 sign up後に確認メールが来ますが、sign upしたのと同一セッションの同じブラウザで確認URLを開くようにしてください。これを行わない場合、何の警告文もなくログイン画面に飛ばされ、確認フェイズが終わりません。これはまだ良いのですが、問題は上記を行ってセッションを失ってしまった場合、登録に使ったメールアドレスで再登録する術がなくなります。再申し込みしようとしても登録済み扱いになり、「パスワードを忘れた人は〜」の導線を使っても未登録の秘密の質問を聞かれて詰みます。ご注意ください。 Salesforceはこういう残念なUXが散見され、触っててなかなか辛いのでご注意ください。わからなくなったら自力で解決しようとせず、すぐに問い合わせするのがベストプラクティスです。標準オブジェクトについて「リード」「商談」といったものは標準オブジェクトと呼ばれます。これがDBの1テーブルに相当します。それぞれの標準オブジェクトの関係が初見だと分かりづらいのですが、こちらのER図をみると分かりやすいです。エンジニアのためのsalesforce超入門開発手法を学ぶ一通り触ってみたところで、いよいよSalesforce上で動くアプリの開発を始めていきましょう。いきなり大きなアプリを作るより、Sales Cloudの拡張くらいの開発を目指す人も多いかと思いますが、やることは同じです。エンジニアであればまず開発ドキュメントを探しに行くと思いますが、Salesforceは開発ドキュメントが充実しています。Trailheadというサービスで、一通りのドキュメントを読むことができます。開発については以下が一番体系的にまとまったページでしょう。開発者初級 | Salesforce Trailhead 独自のキーワードが多く多少読みづらいですが、以下をさらっと読むのをオススメします。（あまり深入りする必要はありません）プラットフォーム開発の基礎データモデリング数式と入力規則 lightningフロー Apexの基礎とデータベース開発のベストプラクティスを探す一通りドキュメントを読むと、モダンな開発スタイルに慣れたWebエンジニアであれば「GUI開発しかできないのか？手元で開発できないのか？」「バージョン管理どうするのか？」「リリースフローは？本番環境で開発するしかないのか？」「CI/CDないのか？」ということが疑問になると思います。このようなモダンな開発スタイルでの開発はSalesforce DXを使うことで達成可能です。 Salesforce DX の使用開始これを使うと、普通に手元でソースコードを書き、git管理して、staging/productionにアップロードする、という一連の開発フローが可能になります。（これに気づくのに少し時間がかかったため、なぜこれをもっと目立つ箇所で教えてくれないのか…と自分は思ってしまいました。。） Salesforce DXを使った開発上記のTrailheadを読むことで大体把握できると思いますが、まだ分かりづらいところもあるので、ここでも補足しておきます。諸注意(という名の罠集) DevHubの��効化有効化しようとしたところこの状態でボタンが押せず、色々調べた挙句に問い合わせをしたのですが、この状態が有効化できているボタンらしいです（マジか………）。スクラッチ組織作成の回数制限無料トライアルでは1日に作成できるスクラッチ組織は6つまでです。理由: 有効期間が 30 日の特別な Dev Hub トライアル組織にサインアップする必要がなくなりました。Developer Edition 組織は、有効になっている間は期限切れになりません。トライアルまたは Developer Edition の Dev Hub では、1 日あたり最大 6 つのスクラッチ組織とパッケージバージョンを作成でき、有効なスクラッチ組織を 3 つまで設定できます。回数を超過した場合、以下の汎用エラーが発生します。気づきづらいのでご注意ください。（エラーメッセージにちゃんと書いて欲しい……………） ERROR: A fatal signup error occurred. Please try again. If you still see this error, contact Salesforce Support for assistance. sfdx-project.json. モダンなWebアプリケーションフレームワークの使用更にモダンな開発環境にするために、Vue/React/Angularなどのモダンなフレームワークを使いたくなるのが人情というものでしょう。残念ながら公式にこういった方法はアナウンスされていませんが、Visualforceページで開発すれば、普通にjsとAPIを使えるため、こういったフレームワークも使えるようです。（自分では試していません） (参考) https://qiita.com/atskimura/items/4c034b0327abc1d91184 そのため、結局開発方針としては Salesforce DX + Lightningコンポーネントフレームワークを使って開発（公式、標準コンポーネント軍を使える、しかし勉強が必要） Salesforce DX + Visualforce + Webフレームワークを使って開発（公式ではなくドキュメントない、標準コンポーネント使えない、いつも通り開発できる）のどちらかを選んで開発することになります。 Salesforce APIを使った開発ここまではSalesforce上での開発について述べましたが、Salesforce上でシームレスに動作するアプリである必要がないのであれば、外部のWebアプリとして開発するのも手です。その際、SalesforceのデータにアクセスするためにAPIを使うことができます。 REST API の使用 | Trailhead APIの設定方法 APIの設定方法も公式ドキュメントだと分かりづらいのでここに書いておきます。まずはOAuthアプリをSalesforce上で作成し、Consumer KeyとConsumer Secretを取得する必要があります。自分の組織のSalesforceで、以下から設定してください。新規接続アプリケーション Consumer Keyを作成したら、以下URLでアクセスすると、tokenを取得できます。 &redirect_uri=http://localhost:3000/ （リダイレクト先）実際にWebアプリで使う際はライブラリを使うと良いでしょう。Rubyでいうと以下のようなライブラリがあります。 https://github.com/restforce/restforce https://github.com/realdoug/omniauth-salesforce

#Qiita

0 notes