![見出し画像](https://assets.st-note.com/production/uploads/images/132957125/rectangle_large_type_2_ced90d08531a305d3a5dc300db76f385.png?width=800)
[第1回] 作る前に押えておきたい基礎知識
本講座はvisualforceを使い、Salesforce帳票の作り方を学んでいく講座です。全13回の講義終了後、商談から帳票を出力できるようになる事をGoalとして講座を進めていきます。
メンバーシップ(Salesforceデベロッパープラン)加入者は無料でご覧いただくことが可能です。
第1回講義は、帳票を作り始める前の基礎知識を学んでいきましょう。
visualforceとは?
visualforceとはWebアプリケーションを作成できるSalesforceのフレームワークの事です。
visualforceを使ってWebページを作成すると、Webページ上でSalesforceデータのCRUD操作(登録・表示・更新・削除操作)をする事が可能だったり、
![](https://assets.st-note.com/img/1670159845174-N0MpnN6vGj.png)
Webページを自由にデザインする事ができ、visualforceページをPdfにすることもできます。
![visualforceページで帳票ページを作成することもできます。](https://assets.st-note.com/img/1670162365679-WWJF8xAZr0.png?width=800)
visualforceを作るために使用するプログラミング
visualforceページを作成するためには、Apex、HTML、CSS、Javascriptなどのプログラミング言語を用います。
![visualforceページを作成するためには、Apex、HTML、CSSなどのプログラミングが必要になります。](https://assets.st-note.com/img/1670160174993-vOrotljUAP.png?width=800)
visualforceの作成方法
visualforceを作成する方法は下記3通りの方法があります。
①Salesforceの管理画面から作成
②開発者コンソールから作成
③visual studio codeなどの統合開発環境で作成
①Salesforceの管理画面から作成
visualforceを作成する1つ目の方法は、[管理画面] > [visualforceページ] から新規ボタンを押下して、
![[管理画面] > [visualforceページ] から新規ボタンを押下](https://assets.st-note.com/img/1670160891025-Uxt61moaEm.png?width=800)
Apex、HTML、CSSなどを直接コーディングしてvisualforceページを作成する方法です。
![直接コーディングしてvisualforceページを作成が可能です。](https://assets.st-note.com/img/1670160950319-8Scn7FBK0W.png?width=800)
②開発者コンソールから作成
visualforceを作成する2つ目の方法は、開発者コンソールから作成する方法です。
![画面右上上部の設定から、開発者コンソールを選択](https://assets.st-note.com/img/1670161162169-FEoTbP9rPy.png?width=800)
開発者コンソール上でコーディングを行い、Previewボタンを押下すると、
![開発者コンソール上でコーディングを行い、Previewボタンを押下](https://assets.st-note.com/img/1670161248121-imTYMnYK3l.png?width=800)
作成したVisualforceページを確認する事ができます。
![作成したVisualforceページを確認する事ができます。](https://assets.st-note.com/img/1670161364190-UN9Dt8Y0ZK.png?width=800)
③visual studio codeなどの統合開発環境で作成
visualforceを作成する3つ目の方法は、visual studio codeなどの開発統合環境を利用する方法です。
開発環境の準備
本講座では、無償の開発環境である「Salesforceデベロッパー環境」と「Visual Studio Code」を用いて、講義を進めていきます。
デベロッパー環境やvscodeをインストールされていない方は下記記事から準備をお願いできればと思います。
次回講義では、簡単なvisualforceページを作成してみましょう。
次の講義へ
いつもサポートいただきありがとうございます! クリエイター活動の励みになります!