f@ctor

JavaScript関連のことを調べてみた2023年10月01日

JavaScript関連のことを調べてみた2023年10月01日
目次

JavaScript基礎学習②文法

学習した事を備忘録として書いていきます。

– 参考書籍：確かな力が身につくJavaScript「超」入門

– 基本文法について
何かを実行させたい時は「〇〇は△△を××しなさい」と命令する。
“`
console.log(‘あいうえお’);
“`

上記の例でいうと、
「console」→〇〇は（オブジェクト）
「log」→××しなさい（メソッド）
「’あいうえお’」→△△を（パラメータ）

– HTMLに直接JavaScriptを書く方法
“`

“`

– HTMLファイルにJavaScriptファイルを読み込む方法
※こちらの方が一般的！
“`

“`

– ‘use strict’について
“`
‘use strict’;
“`

ブラウザにはJavaScriptを「古いもので実行するモード」「新しいもので実行するモード」がある。
新しいもので実行するモードをストリクトモードといい、ストリクトモードを実行

元記事を表示

000webhostのサブドメインを確認

See the Pen
Check 000webhost subdomain by John Doe (@04)
on CodePen.

    ```

    ```JavaScript:event.js
    //前後略
    const addBtn = document.getElementById('add-btn');
    addBtn.addEventListener('click', () => )

    元記事を表示

    個人サイトに動的ogを作ってつまづいたところ

    個人サイトを作ろうとしたときのはなしその 2。

    ## 経緯

    なわしろ「ブログ書いたら Twitter とかで共有したいぞ」

    識者「動的 og が必要だね。Vercel を利用して動的 og を生成する小さいサービスを作ってみるといいよ」

    ## vercel/og チュートリアル

    なわしろ「今度は古い情報に踊らされないぞ。検索すると`og-image`の使用例が最初に出てくるけど、GitHub に但し書きが書いてある」

    > Warning This repo is outdated and only works with Node.js 14. Please use @vercel/og for new projects.
    >
    > If you have a problem that reproduces using the playground, please create an issue in the satori repo.
    >
    > For all other issues with @vercel/og, please reach out to Vercel Sup

    元記事を表示

    Mantine UIをNext.js App Routerで使用したいよって話

    # Mantine UI とは？
    ReactのUIライブラリです。
    有名どころだとMaterialUi , ChakraUI と似たようなやつです。 ←適当

    特徴としては、
    - カスタマイズ性が高く種類か豊富
    - 120種類以上の豊富なコンポーネントがある

    - ドキュメントがわかりやすい
    - こんな感じで使いたいコンポーネントの使用方法だったり、Sizeや色などを選択してコードをそのまま持っていくこともできます
    ![スクリーンショット 2023-09-29 19.53.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3566179/02ff1bda-576c-d1e6-83a8-c054afdfa70a.png)
    - React-Hook-Formなどの別ライブラリの必要がない
    - Mantine/form自体がform関連のhookを提供しているのでそれを使えば簡単にフォームにバリデーションをつけれる

    などなど、比較的独自のスタイルを当てる必要がない管理画

    元記事を表示

    再利用できるプレゼン用WEBページを作ろう 第４回

    第３回から気がつけば半年以上たってます。今回からは JavaScript 編です。
    この半年で機能追加したこともあり、当初の予定より回数が増えそうです。

    # JavaScript の構成

    [再利用できるプレゼン用WEBページを作ろう 第２回](https://qiita.com/shindomasayuki/items/2708ff55d807e07cf2a1) で書いたときと比べて、テーブル操作用のファイルと、環境依存部分を切り出した分ファイルが増えています。

    ```
    common - js ──┬ Env.js.example ドキュメントルートなど環境依存部分を外出しするサンプル
    ├ functions.js 大文字で始まる JS から呼ばれるちょっとした関数群
    ├ Breadcrumb.js 各ページに共通するパンくずリストを生成
    ├ Definitions.js ページの定義やレイアウトの定義などをまとめたもの

    元記事を表示

    ランダムに文字を表示させよう～DOM～

    # 初めに
    ここではHTMLにJavaScriptを使ってランダムに文字を表示させる方法について説明します。
    JavaScriptからHTMLに反映させるために自分が行っていた非推奨な例と推奨される例について紹介します。
    # 非推奨方法
    * **HTML**
    ```