マガジン

  • ホームページ作成入門

    ホームページ作成の基礎を簡単に無料で実践できる記事です

  • プログラム実践

    NodeJS、Python、Google Workspace(GAS)など使用した実践テクニック集

  • ノーコード入門

    プログラムを書かずしてIT業務を行う入門です。プログラマー・非プログラマーのどちらでも使える記事にしていこうと思います。

  • プログラム入門

    超初心者向けのプログラム入門です。 すべて無料です。社内教材用に作成したものです 作成に至った経緯:プログラム入門で検索して出てくる無料記事の多くは「コンピューターの歴史」や「メモリとは?」前置きが長すぎて本題に入る前に挫折する事が多く感じ作成しました。 内容:Javascript(Nodejs)を用いた簡単なプログラムの入門を解説します。 VSCodeを使ってWindows、Macどちらでも学習できる内容になっています。

最近の記事

ホームページ作成入門②HTMLとは

続いてはホームページを作成するために使用されるHTMLについて解説していきます。 HTMLの基本前回の続きでは CodeSandbox の画面は以下のようになっていると思います。 まずは "Test" と表示されている箇所について見てみましょう。 <h1>Test</h1> Testが <h1> で囲まれています。よく見ると後ろ側はスラッシュ=/がついています。 </h1> <キーワード>◯◯◯</キーワード> HTMLは上記のルールで作成されています。 h1

    • ホームページ作成入門①まずは編

      HTMLと呼ばれるホームページ作成の基礎を使って簡単なホームページを作成していきます。 作り方は色々ありますが無料で準備や前提知識がなるべるく必要の無い方法を紹介します。 CodeSandboxhttps://codesandbox.io/ ↑にアクセスして ↓ Create Sandboxをクリック(登録不要で初められます) 右下の「static」をクリック 以下の画面が表示されます ↓こっちが編集画面 ↓こっちがプレビュー画面です 試しにちょっと編集してみま

      • 実践編:Google Workspace:GAS(App Script)で当番通知➔その②

        前に作成したGAS当番通知を1週間1回通知したいと社内で要望が出たので、その修正を紹介したいと思います。 前回の作成したものは ➔ こちら テストを行う環境を作成修正、開発で大事な事はテストを短時間で何度も回せる環境を作る事だと考えています。GASの実行は遅いので修正して結果を確認するまで時間がかかります。 今回はNodeJs環境で疑似データを準備してテスト開発していきます。 NodeJsの環境構築は ➔ こちら を参考にしてください まず前回のコードを確認 fun

        • ノーコード・プログラミング(⑤天気予報の取得)

          今回はプログラムなしで天気予報を取得して表示までを作成していきたいと思います。 Node-REDを使っていきましょう。(準備まだの人は①から) はじめに天気予報のデータは「気象庁ホームページ」からひっぱってくるので 「気象庁ホームページ利用規約」をご確認ください。 作成まずはやってみましょう! Inject を用意。変更なしで「タイムスタンプ」となったままでOK 次に「http request」というインターネットからデータを取得するノードを用意してURLに気象庁のU

        ホームページ作成入門②HTMLとは

        マガジン

        • ホームページ作成入門
          2本
        • プログラム実践
          3本
        • ノーコード入門
          5本
        • プログラム入門
          12本

        記事

          実践編:ChatGPTに手伝ってもらう

          話題のAI:ChatGPT様にプログラムのお仕事を手伝って頂こうと思います。 ChatGPTの使う用途としてはいろいろ考えられますが今回は自分の書いたプログラムのリファクタリングをお願いしてみます。 まずは openai.com にログインhttps://chat.openai.com/chat ↑メールアドレス登録してログイン ↓無事ログインできればこのような画面がでます リファクタリングしてもらう今回は↓で書いたプログラムを使います。 実践編:Google Wor

          実践編:ChatGPTに手伝ってもらう

          プログラム入門(⑫リスト・配列)

          今回は「プログラム入門⑧顧客リスト」で簡単に解説したプログラムで作成するリストについて詳しく解説します まずはおさらいファイル ➔ 新しいテキストファイル ➔ test12.js a = [1, 2, 3, 4, 5]console.log(a) 以下のように表示されます。簡単なリストの作成です リストの1番目の取り出し方法はブラケット=[]で何番目かを指定します a = [1, 2, 3, 4, 5]console.log(a[0]) 1番目の「1」が表示されま

          プログラム入門(⑫リスト・配列)

          プログラム入門(⑪関数)

          次からは顧客管理を一旦離れて、プログラムの基礎に戻り「関数」について学んでいきましょう まずはやってみるファイル ➔ 新しいテキストファイル ➔ test11.js function sum(a, b){ c = a + b return c}d = sum(1, 2)console.log(d) 以下のように表示されます。 解説 function=関数とは  ① 何かを入れて  ② 何かをして  ③ 何かを返す ものです 今回の例では ① 1と2を入

          プログラム入門(⑪関数)

          実践編:Google Workspace:GAS(App Script)で当番通知

          Google Workspaceで「本日の当番は◯◯さんです」というチャット通知を1日1回 自動送信する実践プログラムを作成してみましょう。 チャットを作成まずチャットを送信したいチャットスペースを作成します。 適当な名前を付けて作成 チャット名をクリックしてメニューを開き ➔ Webhookを管理をクリック 名前の欄に適当な名前(なんでもOK)を入力して保存をクリック アバターは一旦無しでOKです ↓のコピーボタンをクリックしてURLをコピーします ※ウインドウの

          実践編:Google Workspace:GAS(App Script)で当番通知

          ノーコード・プログラミング(④表・テーブル)

          今回はプログラムなしで表・テーブルを作成します Node-REDを使っていきましょう。(準備まだの人は①から) テーブル・ツールの準備まずは表を作成する為のテーブルツールを node-redに導入します 右上のメニューから「パレットの管理」を選択 「ノードを追加」をクリック 検索窓に「node-red-contrib-data-table-viewer」と入力。「node-red-contrib-data-table-viewer」の「ノードを追加」をクリック 画面左

          ノーコード・プログラミング(④表・テーブル)

          ノーコード・プログラミング(③足し算)

          今回はプログラムなしで足し算を実装します Node-REDを使っていきましょう。(準備まだの人は①から) 電卓ツールの準備まずは計算をする為の電卓ツールを node-redに導入します 右上のメニューから「パレットの管理」を選択 「ノードを追加」をクリック 検索窓に「calc」と入力。「node-red-contrib-calc」と表示された 「ノードを追加」をクリック 追加をクリック 画面左に「calculator」=「電卓」(翻訳)が追加されます 作成まずはや

          ノーコード・プログラミング(③足し算)

          ノーコード・プログラミング(②メッセージの出力)

          今回はプログラムなしでメッセージの出力です。 Node-REDを使っていきましょう。(準備まだの人は①から) まずはやってみるinject をドラッグ&ドロップ 「タイムスタンプ」をダブルクリック (初期設定がタイムスタンプみたい) 名前をメッセージに設定 topicに「こんにちわ」に設定して完了 ↓「タイムスタンプ」から「メッセージ」に表示が変わりました 次にdebug をドラッグ&ドロップ 「メッセージ」と「debug 1」を点と点でつなげます 次に「デプロ

          ノーコード・プログラミング(②メッセージの出力)

          ノーコード・プログラミング(①準備編)

          「ノーコード」はプログラムを書かずしてマウス操作だけでコンピューターに作業させるものです。 各種インストールNode.js(ランタイムエンジン) https://nodejs.org/ja/ Node-RED(エディタ)今回のメインWindows 「Windows Power Shell」を開く npm install -g node-red 「Power Shell」に↑を入力してEnter Mac sudo npm install -g node-red

          ノーコード・プログラミング(①準備編)

          プログラム入門(⑩顧客リストの作成その4)

          次はプログラムで判断、判定、分かれ道=条件分岐 をやってみましょう。 まずはサンプルを実行してみましょう ファイル ➔ 新しいテキストファイル ➔ test10.js if(1 < 2){ console.log("こんにちわ")} 以下のように表示されます。 解説 条件分岐はある条件を満たした場合にプログラムを実行したり、スキップしたり分岐する事ができます。 条件分岐を行うには if = もし 括弧=() で条件を囲みます 今回の条件は 「1 < 2 = 1

          プログラム入門(⑩顧客リストの作成その4)

          プログラム入門(⑨顧客リストの作成その3)

          オブジェクトを使って顧客リストを作成する方法です。 まずはプログラムでオブジェクトを作成してみましょう。ファイル ➔ 新しいテキストファイル ➔ test9.js a = { name:"山田太郎" }console.log(a) 以下のように表示されます。 ちょっと変更して console.log(a.name) にしてみます a = { name:"山田太郎" }console.log(a.name) 以下のように表示されます。 解説 プログラムでオブジェ

          プログラム入門(⑨顧客リストの作成その3)

          プログラム入門(⑧顧客リストの作成その2)

          繰り返し文を使って顧客リストを作成する方法です。 まずはプログラムでリストを作成してみましょう。 ファイル ➔ 新しいテキストファイル ➔ test8.js a = [1, 2, 3, 4, 5]console.log(a) 以下のように表示されます。 解説 プログラムでリストを作成するには 括弧=[]=ブラケットで囲み カンマ=, 区切りで記述します。 ひとつずつ表示 リストを繰り返しを使って、ひとつずつ表示します a = [1, 2, 3, 4, 5]f

          プログラム入門(⑧顧客リストの作成その2)

          プログラム入門(⑦顧客リストの作成)

          名前、生年月日、住所が記載された顧客リストを作成してみます。 まずはやってみる ファイル ➔ 新しいテキストファイル ➔ test7.js fs = require("fs")text = "山田花子,2000/1/1,東京都新宿区"fs.writeFileSync("test7_output.csv", text) 左の拡張機能アイコンをクリックして検索に「Excel Viewer」と入力して インストールします 拡張機能をインストールする事でエクセルファイルを表

          プログラム入門(⑦顧客リストの作成)