はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

概要 Nuxt.js(Vue.js)とレイヤードアーキテクチャのお勉強のために簡単なチャットアプリを実装してみた。 SPA + APIと言った形になっている。 機能 機能はだいたい以下のような感じ。 ログイン機能 サインアップ機能 スレッド一覧表示機能 スレッド作成機能 ログインしたユーザーは誰でもスレッドを作成できること コメント一覧表示機能 スレッドをクリックすると、そのスレッド内のコメント一覧が表示されること スレッド内でのコメント作成機能 ログインしたユーザーは誰でもどのスレッド内でもコメントできること スレッド内でのコメント削除機能 自分のコメントのみ削除できること ログアウト機能 コード コード全体はここ コードは一例でもっと他の実装や良さそうな実装はありそう 技術 サーバーサイド アーキテクチャ DDD本に出てくるレイヤードアーキテクチャをベースに以下の書籍や記事を参考にさせ

Goってシンプルで書きやすいですよね。 しかし、シンプルなGoでもいくつか躓きやすいポイントがあると思っています。 その最初のポイントがポインタではないでしょうか。特に、ポインタの概念が存在しない言語から始めた人にとっては、なかなかとっつきにくいものだと思います。そこで今回は、なんとなく使っていたポインタを、ちゃんと理解するためのエントリを書きました。ポインタをちゃんと理解しようとすると、その前提として知らなければならないことが多々あり、そこから説明するので、やや遠回りをした説明になっています。 「これちげえじゃねえか」とか、「ここわかりにくいぜ」っていうのがあったら、ご教授ください。 ※ 技術的な話は「です、ます」調よりも「である、だ」調の方が書きやすいので、以降は「である、だ」調で書きます。 前提知識Part 先ほど述べたとおり、ポインタを理解しようとすると、前提知識が必要になってくる

Goで文字列の置き換えをする際には、strings.Replace を使用する。 使い方 置き換える全体の文字列、置き換え前の部分文字列、置き換え後の部分文字列、置き換えを行う部分文字列の数を指定して置き換えを行う。 関数のシグネチャは以下 func Replace(s, old, new string, n int) string 引用元: strings - The Go Programming Language 第1引数:置き換えされる全体の文字列 第2引数:第1引数の全体の文字列の中で、置き換えされる部分文字列 第3引数:第2引数を置き換え後の部分文字列 第4引数:置き換えを行う部分文字列の数 なお、第4引数を-1にすると第1引数内の全ての第2引数で指定した部分文字列を第3引数で指定した部分文字列に置き換える。 実際に使ってみた コード package main import (

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに アーキテクチャや設計の書籍や記事、これまでの経験も踏まえ、学んだ事をここにまとめたい。(まだ、勉強中なので微妙なところもあるかもしれません。お気付きの点があればご指摘いただけるとありがたいです。) 参考文献や参考記事は、本当に良書、良記事で非常に参考にさせていただきました。 生意気なタイトルにしてしまいましたが、自分への戒めということもあってこのタイトルにさせていただいたので、ご容赦ください。 ある共通した話題 設計やアーキテクチャについて書かれた書籍や記事を読んでいく中で、言葉は違えどかなりの高確率で共通するテーマが存在した

Javascriptで指定した配列の要素を削除する Javascriptで指定した配列の要素を削除する。 なお、本記事は[Javascript] 配列から特定の要素を削除する(訂正有り) - Qiitaを大変参考にさせていただいた。 ポイント(以下は、ES6以降ではあんまり推奨されないので、追記を参照。) 1. array.forEachで、配列の各要素とindexの数字を各処理で使用する => 参考 :Array.prototype.forEach() - JavaScript | MDN 2. 配列の要素が、指定した値(今回は1)だったら、3の処理を行う 3. array.spliceでindex番目から1個分の要素を削除する => 参考 :Array.prototype.splice() - JavaScript | MDN コード 0~4の配列から1を指定し、削除する。 const

Circle CI 2.0の基礎的な設定まとめてみた(GAE/Goのサンプル付き) 今回の記事について Circle CI2.0用の設定の基礎的な部分のメモ。 今回の記事は、単純な設定をCircle CI 2.0 で行うことを目的としているため、基礎的な設定のみを行い、Workflow等の設定は行わない。 ※ Workflowの記事は別で書きたいと思っている。 また、サンプルとして、GAE/Goの設定を行う。 別にCircle CI1.0のことを知らなくても読めるはず。 Circle CI 1.0とCircle CI 2.0の機能的な違いなどについては、ここでは行わないので、以下を参考にするといいと思われる。 CircleCI 2.0に移行して新機能を活用したらCIの実行時間が半分になった話 - クラウドワークス エンジニアブログ CircleCI 2.0を使うようにするだけで、こんなに速

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? CI(継続的インテグレーション)ツールで効率的で持続可能なGitHub運用を！ 「ここ違うよ」とか、「こうした方がいいよ」というのがあったら、ぜひご教授いただけるとありがたいです。 CI(継続的インテグレーション)及びCI(継続的インテグレーション)ツールとは そもそもCI(継続的インテグレーション)ツールって何?って方は以下の記事がわかりやすいので参照をオススメする。 CI(継続的インテグレーション)が解決する課題 | CIツール「Jenkins」活用ソリューション | テクマトリックス株式会社 ソフトウェア開発に必須。CI（継続的イ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Apache Beam with Cloud Dataflow(over 2.0.0系)入門~基本部分~ParDoまで~ 何回かに分けてApache Beam with dataflowについて書こうと思う。 今回は、基本的なこと~TransformのParDoまでを書く。 最後にローカルで動作するコードも書く。 各Transformについての記事は以下。 Apache Beam with Google Cloud Dataflow(over 2.0.x系)入門~基本的なGroupByKey編~ - Qiita Apache Beam

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

npm パッケージ管理ツール JavaScript(Node.js)のパッケージやモジュールをインストール、アップデート、共有したりできる npmレジストリに登録された様々な外部ライブラリやパッケージをインストールすることができる package.json 依存関係を記したJSONファイル 機能 このファイルにプロジェクト毎に必要なパッケージの名前とバージョンを記述すれば、npmが勝手に必要な（依存しているという）パッケージをインストールしてくれる。 インストールしたパッケージが依存しているパッケージや、さらにそれが依存しているパッケージも自動でインストールしてくれる どう使うのか npm installとpackage.jsonが存在するディレクトリでコマンドを打てば、package.jsonに記述されている依存パッケージを自動でインストールしてくれる npm installをするとno

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? CSSの設計方法をまとめてみた~BEM編~ BEMについて、簡単にまとめる。 詳細な部分に関しては以下の記事がわかりやすかったので、参考にされると良いと思う。 bem-methodology-ja/index.md at master · juno/bem-methodology-ja BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号 BEMとは Block、Element、Modifierの略。 DOMを構成する各要素をBlock、Element、Modifierのどれかに当てはめて命名する。 正直な

CSSの設計方法をまとめてみた~SUIT CCS編~ SUIT CSSについて、簡単にまとめる。 また、Angularを使用した簡単なサンプルも書いてみる。 なお、本記事は、公式ドキュメントをかなり参考にさせていただいている。 詳細な部分に関しては以下の記事がわかりやすかったので、参考にされると良いと思う。 suit/design-principles.md at master · suitcss/suit suit/naming-conventions.md at master · suitcss/suit SUIT CSSとは Componentベースのcssの方法論。 Componentベースなので、AngularやReactなどのComponent指向なJavaScriptフレームワークやライブラリと相性が良いそう。 SUIT CSSのメリット 各々のユニットの結びつきを緩くして、

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? RxJSの基本をまとめてみた~基本的な概念編~ Angularで使用していたRxJSだが、もっと深くちゃんと理解しようと思い学習したので、これから何回かに分けてまとめる。 仕組みを理解するために、ちょっと冗長な書き方をするところがある。 「これどうなの?」とか「意訳おかしくね?」という部分があったら、ご指摘いただけるとありがたいです。 今回の範囲 今回は、RxJSやリアクティブプログラミングの基本的な概念である、データストリーム、Observable、Observer、Subscription関連についてまとめたいと思う。 今回は、Rx

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 公式ドキュメントで新しい技術を習得する方法 何かの技術を新たに学ぶ時、特に最新の技術を学ぶ場合や日本でのユーザーが少ない技術の場合、その技術に関する書籍や記事がまだ存在しなかったり、少なかったりすることがある。その場合、公式ドキュメントを読む必要がある。 また、そうでなくても、なるべく一次ソースである公式のドキュメントを読みたい。 関連記事 新人プログラマのうちに身に付けたい習慣、考え方（この半年で学んだことと反省） - Qiita 現在勤めている会社で扱っている技術柄、また会社の先輩から公式のドキュメントを読むことを強く勧められていた

import {ComponentFixture, TestBed, async, ComponentFixtureAutoDetect,} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; import {DebugElement} from '@angular/core'; import {AppComponent} from './app.component'; // describeでテストSuiteを作成 describe('AppComponentのテスト', () => { // テストの中のAppComponent let comp: AppComponent; // ComponentFixtureは、 componentのインスタンスそのものとcomponentのDOM

GCSライフサイクル機能を使ってオブジェクトをファイルを定期削除する GCS (Google Cloud Storage)上のオブジェクトを自動削除するために、gsutilを利用してライフサイクルを設定する 何ができるの 便利なオンラインストレージであるGCS(Google Cloud Storage)。 しかし、データをずっと溜めっぱなしだと課金金額がかさんでいく。 「いちいち手動で削除するのも面倒だし~」という場合に、簡単なjsonを作成し、gsutilというツールを使用してコマンドを打つだけで、簡単に自動削除設定することができる。 これを設定すれば、例えば「1年以上前のデータは保存する必要ないから自動で削除したいなー」という要望を簡単に満たすことができるのだ。 gsutilツールとは コマンドラインから Cloud Storage にアクセスできる Python アプリケーションです

Goの書式指定子 忘れがちな書式指定子 いちいち調べるのも面倒臭いので、普段使いそうな書式指定子の使い方を例付きでまとめた 各書式指定子の説明文は、基本的に以下のサイトを引用させていただいている 引用元: go fmtパッケージ 各書式指定子の使い方 %v デフォルトフォーマット %v デフォルトフォーマットを適用した値 構造体を出力する際、+フラグ(%+v)を加えるとフィールド名が表示される package main import ( "fmt" ) type Person struct { Name string Favorite string } func main() { p := new(Person) p.Name = "sekky" p.Favorite = "Programming" fmt.Printf("構造体 = %v", p) }

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 新人プログラマのうちに身に付けたい習慣（この半年で学んだことと反省） はじめに 半年よりちょっと前に未経験からプログラマになりました。 プログラマと言っても、この約半年間はほとんど研修を受けさせていただいていた感じなので、偉そうなことは言えません。 しかし、この約半年で反省したことや学んだことを自戒の念も込めて、まとめました。 主体的に学ぼう 能動的に自ら学び、自走しましょう。 新しい技術を学ぶということは非常に楽しいことです。 すごい先輩方は大抵、新しい技術を身につけるためにその技術を学ぶことを「その技術を勉強した」というよりも、「そ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? トランスパイルとPolyfill 各ブラウザのバージョンによって、対応しているJavaScript(ECMAScript)のバージョンは異なる。 そのバージョン対応の差異に対応するためにトランスパイル(transpile)とPolyfilという方法が存在する。 両者の違いがいまいちよくわからなかったので、調べてまとめてみた。 トランスパイル(transpile) トランスパイルは一言で言えば、ある言語で書かれたコードを元に別の言語のコードを生成すること。 以下、Wikipediaから引用し、意訳させてもらった（間違っていたらご指摘くださ

TypeScript + webpack + Karma + Mocha + Power Assertでテストを行う時の諸々の設定ファイル 最近、TypeScriptでコードを書いて、モジュールバンドラにwebpack、テストランナーにkarma、テスティングフレームワークにmocha、アサーションライブラリにPower Assertを使用したユニットテストを書いた その際に、諸々のツールが複雑で、設定ファイルの記述も大変だったので、ここで設定ファイルについてのメモを残しておこうと思う ※現段階では、設定ファイル自体にメモを書いただけです、後で個々の説明を書くかもしれません package.json まずはこれがないと始まらないですよね { // パッケージの名前 "name": "パッケージ名", // パッケージのバージョン "version": "1.0.0", // パッケージの説

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

この記事の内容 ①テストとは、②mochaとchaiを使ったNode.jsテスト ソフトウェアテスト コンピュータのソフトウェアプログラムを実行し、それが意図したとおりに動くかを観測・評価・検証する作業のこと。通常は検証対象のソフトウェアを実際に試行する動的テストを指すが、レビューなどを静的テストと呼んで広義のテストに含める見方もある。 引用元 http://www.itmedia.co.jp/im/articles/1111/07/news192.html テストケースとは ソフトウェア開発におけるテストは一般に、ユーザーの使用状況を反映した入力データを用いてソフトウェアを実行し、事前に想定した結果と実際の実行結果をつき合わせて合否の判定を行う。このテスト用の“入力データ”とそれを実行したら得られるであろう“事前に想定した結果”の対をテストケースという。すなわち、テストケースを使って対象

今回実現する機能 指定されたポート(8080)でコネクションの受け入れを開始する クライアントからHTTP通信でリクエストを受け取る リクエストヘッダで送られてきたURLのパスを解析する 解析したURLのパターンによって、そのパターンにバンドルした処理を呼びだす(リクエストハンドラ） =>本来Webアプリを作成する場合は、この処理を高度化し、別のファイルやモジュールに切り出す 呼び出された処理を行う =>今回は単純にHTMLをレスポンスとして返す ファイルの構成 // クライアントからのレスポンスを受け取り、適切なファイルに処理を依頼する // 必要なファイルを読み込み var http = require('http'); var url = require('url'); var fs = require('fs'); var server = http.createServer();