Hi there wave

開発環境 Node.js(v16.16.0) Mac OSX 1. Expressをインストール 開発するディレクトリに移動後 npm install express-generator -g 導入できたか確認 express -h 以下が表示されていれば大丈夫です。 Usage: express [options] [dir] Options: --version output the version number -e, --ejs add ejs engine support --pug add pug engine support --hbs add handlebars engine support -H, --hogan add hogan.js engine support -v, --view <engine> add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade) --no-view use static html instead of view engine -c, --css <engine> add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css) --git add ....

1. HTTPサーバ 通常、ユーザーがウェブブラウザからWebページを閲覧するとき、URLをクリックしWebページを表示していることしかわかりません。しかし、内部的にはウェブブラウザがWebページに必要なデータ(HTMLファイルやJavaScriptファイルなど)を取得し表示しています。 ユーザが操作するコンピュータをWebクライアント、Webページに必要なデータが保存されているコンピュータをWebサーバといいます。 WebクライアントとWebサーバの通信の手順やルールのことをHTTPプロトコルといい、HTTPに従って行われる通信のことをHTTP通信といいます。 WebクライアントがWebサーバにデータを要求することをHTTPリクエスト、Webサーバが要求に応じてデータを返すことをHTTPレスポンスといいます。 つまり、HTTPサーバとはHTTPというルールに従ったレスポンスを返すWebサーバのことです。 2. Node.jsでアプリケーション作成 const http = require("http"); const port = 3000; const server = http.createServer((request, response) => { response.writeHead(200, { "Content-Type": "text/html" }); const responseMessage = "<h1>Hello World</h1>"; response.end(responseMessage); console.log(`Sent a response : ${responseMessage}`); }); server.listen(port); const http = require("http"); httpモジュールを利用します。 const server = http.createServer((request, response) => { response.writeHead(200, { "Content-Type": "text/html" }); const responseMessage = "<h1>Hello World</h1>"; response.end(responseMessage); console.log(`Sent a response : ${responseMessage}`); }); レスポンスのステータスコード(200)、ヘッダー(“Content-Type”: “text/html”)、ボディ(responseMessage)を設定します。...

1. はじめに 前回の基礎知識編の続き、実装編(2)です。 この記事では、vectorのイテレータを作ります。 2. 概要を掴む 実装のイメージをつけるために、江添亮のC++入門のstd::arrayから vectorの実装 : メモリー確保までを写経しました。 この資料ではイテレータをポインタのエイリアスで実装しています。 llvm や gcc はイテレータを用意しているので、最終的にはポインタで操作しているところをイテレータに置き換えていきます。 3. イテレータ実装 自作 vector は ftという名前空間に作ります。 iterator_traits iterator_traits.hpp #ifndef ITERATOR_TRAITS_HPP #define ITERATOR_TRAITS_HPP #include <cstddef> // ptrdiff_t #include <iterator> namespace ft { /// primary iterator_traits template <class Iterator> struct iterator_traits { typedef typename Iterator::difference_type difference_type; typedef typename Iterator::value_type value_type; typedef typename Iterator::pointer pointer; typedef typename Iterator::reference reference; typedef typename Iterator::iterator_category iterator_category; }; /// Partial specialization for pointer types template <class T> struct iterator_traits<T*> { typedef ptrdiff_t difference_type; typedef T value_type; typedef T* pointer; typedef T& reference; typedef std::random_access_iterator_tag iterator_category; }; /// Partial specialization for const pointer types....

1. はじめに c++98 で STL コンテナの vector(c++98 ver) を自作していきます。 完成形は cppreferece 、 C++ Reference の vector を目指します。 2. 基礎知識編 コンテナ クラスや構造体、基本型(int, charなど)を保持するデータ構造(入れ物)。 vector や map 、stack 、set などデータ保持の方法は、用途に合わせて様々なものが提供されています。 イテレータ コンテナの個々の要素を参照するためのクラスです。 この特徴から、イテレータは ポインタを抽象化したクラス と捉えることもできます。しかし、全てのイテレータがポインタの全機能を備えているわけではありません。 後述するアルゴリズムはコンテナのイテレータを用いて、コンテナを操作することができます。 イテレータがコンテナとアルゴリズムを媒介するインターフェースになることで、異なるデータ構造にも関わらす、コンテナを操作することができます。 イテレータを用いて要素の移動、参照、変更が行えます。 ポインタのように *iterator と * をつけることで、要素への参照が可能です。 ++iterator とすると、次の要素を指します。 これらの操作はイテレータの種類によっても異なります。(wikiより) InputIterator(入力イテレータ) 要素への 読み取り専用 アクセスを提供するイテレータ。 要素への読み取りが可能であれば、InputIterator とみなせます。(istream_iteratorなど) OutputIterator(出力イテレータ) 要素への 書き込み専用 アクセスを提供するイテレータ。 要素への書き込みが可能であれば、OutputIterator とみなせます。(ostream_iteratorなど) ForwardIterator(前方向イテレータ) 一旦前に進めると、逆方向には戻れない イテレータ。 要素への読み取り、書き込みが可能であれば、ForwardIterator とみなせます。(単方向リストのコンテナのイテレータなど) BidirectionalIterator(双方向イテレータ) 前方、後方どちらにも進める 機能を持つイテレータ。 前方向イテレータの要件に加えて、デクリメント(- -)が可能であれば、 BidrectionalIterator とみなせます。(list、set、multiset、map、multimapのコンテナのイテレータなど) RandomAccessIterator(ランダムアクセスイテレータ) ポインタのように ランダムにアクセスが行える イテレータ。 BidirectionalIterator の要件に加え、算術演算(+, -, +=, -=)が可能であれば RandomAccessIterator とみなせます。(vector、array、dequeのイテレータなど) 全てのイテレータはインクリメント(++)、等号比較(it1 !...

1. はじめに c++98 で STL コンテナを自作するときに enable_if を実装する必要があったので今回はそのまとめです。あくまで、c++98 ベースで作っていきます。 前回の is_integral を使うので、場合によっては参照してください。 2. SFINAE とは cpprefjp より引用 「SFINAE (Substitution Failure Is Not An Errorの略称、スフィネェと読む)」は、テンプレートの置き換えに失敗した際に、即時にコンパイルエラーとはせず、置き換えに失敗した関数をオーバーロード解決の候補から除外するという言語機能である。 テンプレート引数の展開に不正があっても、エラーにはならず候補から外され、コンパイルは続行される。 残った候補の中から置き換えに成功したものを実行する。 struct Test { typedef void type; }; template <typename T> void f(typename T::type) {} // 定義#1 template <typename T> void f(T) {} // 定義#2 int main() { f<Test>(10); // 定義#1 の呼び出し f<int>(10); // 定義#2 の呼び出し } f<Test>(10) について、Test::type が存在するので 定義1 が実体化する。 f<int>(10) について、int型は int::type が存在しないので 定義1 が候補から除外され、 定義2 が実体化される。 このようにテンプレート実引数の型を調べて、実体化するテンプレート定義を決定することができる特徴がある。...

1. はじめに c++98 で STL コンテナを自作するときに is_integral を実装する必要があったので今回はそのまとめです。 2. is_integral とは cppreference.com より //Defined in header <type_traits> namespace std { template <class T> struct is_integral; template <class T> inline constexpr bool is_integral_v = is_integral<T>::value; // C++17 } Checks whether T is an integral type. Provides the member constant value which is equal to true, if T is the type bool, char, char8_t (since C++20), char16_t, char32_t, wchar_t, short, int, long, long long, or any implementation-defined extended integer types, including any signed, unsigned, and cv-qualified variants....

1. はじめに STL コンテナを自作している時、 typename の使い方をしっかり理解していなかったので自分なりにまとめてみました。 2. typename とは cppreference.com typename の説明より In the template parameter list of a template declaration, typename can be used as an alternative to class to declare type template parameters . Inside a declaration or a definition of a template, typename can be used to declare that a dependent qualified name is a type. c++ のテンプレート宣言時には、型名を明示する際に class の代わりに typename を使用してテンプレートパラメータを宣言することができます。 template<typename T> void f() {} template<class T> void f() {} これはどちらでもコンパイルが通ります。...

1. はじめに Hugoで作ったサイトは共有された時、ブログカードはデフォルトでは作成されません。 ブログカードは下記の画像です。 タイトル、説明、画像といったものがのっています。 これらの情報を提供しているのが Open Graph Protocol(OGP) です。 今回はブログカードの画像を用意して、Hugo の config ファイルに OGP の設定を記述しブログカードを作成します。 2. Open Graph Protocol(OGP)、OGP 画像って何？？ 公式より The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. OGP を用いると任意の Web ページをリッチなソーシャルグラフのオブジェクトにすることができます。 要するに、ページのブログカードに必要な情報を取ってきてブログカードを作る仕組みの一つです。 HTML の head 領域に任意のデータを記述できる meta 要素を追加し、ページ情報を記載することができます。OGP のデータであることを示すために、property 属性に og: から始まる値を記述します。...

1. はじめに Hugo でブログを作ってみたものの、デフォルトではコメント機能はついていません。 今回はUtterancesを使ってみたいと思います。 2. Hugoのコメント機能 Hugo にコメント機能をつける場合、いくつか選択肢があります。 鉄板は Disqus でしょうか。これは公式が Hugo をサポートしています。 Docs にも唯一設定手順が書いてあります。 以下、ドキュメントに紹介されているもの Cactus Comments Commento Graph Comment Hyvor Talk IntenseDebate Isso Muut Remark42 Staticman Talkyard Utterances Disqus を使わない理由は無料プランだと広告がつくみたいです。あと登録するのも少し面倒に感じました。 でも今回使う Utterances は GitHub のアカウントだけなので、(一応想定読者はテックの人なので) GitHub の認証のみならコメントのハードルも低いかなと思いこれに決めました。 あと見た目がいい😊 Utterancesとは？？ A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more! Utterances は軽量なコンポーネントと GitHub issues にコメントを書きこむ bot を提供しています。 これを使うと GitHub の issue と記事やページを紐付け、ページに issue を表示することができます。...

1. はじめに Hugoで作った静的サイトはそのままの設定ではGoogle検索にはかからないので、いくつか設定をしないといけません。 Google検索で表示されるまで Google Analyticsに登録 Google Search Consoleに登録 今回は Google Analytics 登録編です。 2. やってみる 測定を開始をクリック 任意のアカウント名にして次へ プロパティ(サイトやアプリの名前) タイムゾーン 通貨 を入力して次へ 上から順に記入していけば大丈夫です。 プラットフォームはwebを選択 webサイト のURLを入力します。このサイトではhttps:///public-jun.github.ioのようになります。 ストリーム名はwebサイトのタイトルを入力すれば大丈夫です。 ストリームを作成すると測定IDが生成されます。 Hugoの設定 Hugoの場合、google analytics設定用のテンプレートが用意されているのでconfigファイルに追記します。 config.yml:(Google Analytics v4 (gtag.js))の場合、測定IDがGからはじまる googleAnalytics: G-MEASUREMENT_ID config.yml:Google Analytics v3 (analytics.js)の場合、測定IDがUAからはじまる googleAnalytics: UA-PROPERTY_ID 現在はgtagsで設定しておけば良いと思います。 これでHugo側の設定は完了です。 アップロードして確認してみましょう。 Google Analyticsのレポート -> リアルタイム を確認してみて、自分がアクセスしたときにユーザー数が0以外であれば成功です😄 最後に 次回はGoogle Search Consoleの設定をしてみたいと思いますがどうやら登録に時間がかかる場合もあるらしく、まだできていません。 登録出来次第まとめたいと思います。