「HTML,CSSだって難しいよ！」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社　Web制作者のためのCSS設計の教科書　モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法　谷拓樹著　2022年発行第１版』 注意 作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。 初め 壊れない完璧な設計を

お疲れ様です。 今日からは「Python だけで作る Web アプリケーション(フロントエンド編)」について部分いたします。 はじめに 設計方針 共通部分の作成 ログインページ 商品一覧ページ 商品詳細ページ カートページ 注文一覧ページ 注文詳細ページ まとめ 今回は10の記事に分けて投稿するようにします。 今日は「はじめに」について部分いたします。 なぜ本書を書いたのか 本書は主に以下のような方を対象にしています。 Web アプリケーションの構築経験がない新米エンジニア Python はかけるが、HTML/JS/CSS が苦手な Pythonista 細かい UI の設定はせず、検証・デモ用の Web アプリを短期間で作りたい開発チーム どうやって作ったか 対象読者の悩みを解決するために、次の 3 つの要素が必要と考えました。 Web アプリケーションの基礎知識 参考にしてもらえる品質

DBeaver最強 DBeaverは無料で使えるDBクライアントツールです。 めちゃめちゃ高機能なので、使っている人も多いのではないでしょうか。 ツールのバグが怖いから、コンソールでのコマンドでしかDBには接続しない 派の人もいるかと思いますが、私の場合は使いやすいSQLエディタや、見やすい結果セットがあった方が作業ミスが起きにくいと思っているので（むしろコマンドの方がミスる）、DBeaverは開発にも本番メンテナンスでもフル活用しています。 本番メンテナンス ある時、イレギュラーな作業で、本番DBを直接いじることになりました。 大した作業ではなかったので手順書も作らずサクッとやることにしました。 エディタでクエリを準備 SELECTで現在のデータを確認と念のため記録 DBeaverの場合、エディタに複数SQLが書いてある場合、全て実行することもできますが、実行したいSQLのどこかにカーソ

作ったものが想定した動作をしているか。 それを確認するために、テスト（試験）を行います。 検証したいことがちゃんと実現できて確認が取れているのであれば、その品質自体は割と気にされないことが多い印象です。 保守・運用・追加開発 をしていくプロジェクトが多くあると思います。 その作業の中で、改善を取り入れていくこともあると思いますが、その中でも一番後回しにされるのが、テストコードの改善のように思います。 推測ですが、「コストによるメリット・リターンが少なすぎる」ことが理由かな…と（開発者目線ではリターンが大きいのですが、運用者目線ですとリターンが少なく見えてしまう）。 であれば、最初からある程度綺麗なものがどういうものかを考え、作成しておけば良いのではないか・・！ ということで、考察していきたいと思います。 前提 考察をするにあたり、言語化した時の表現や意味のズレが発生しやすい部分もあると思い

はじめに DynamoDBは上手く使えば非常に強力なDBMSですがRDBとの違いは大きく、「RDBの代わりにDynamoDBを使おう！」と深く考えずに提案/採用することが難しいことから、その理由についてみていきます。 DynaomoDBの難しさ DynamoDBの利点と表裏一体である、DynaomDBの主要な難しさについて順番に見ていきます。 1. 提供されているクエリモデルでできることが非常に限定されている DynamoDBは次の公式サイトに記載がある通り、どんな規模でも数msの一定のパフォーマンスを発揮でき、無尽蔵にスケールできるという特徴があります。 Fast, flexible NoSQL database service for single-digit millisecond performance at any scale この特性を上手く活用すると次の実例のように高可用性、

PHP8.3 / PHP8.2 / PHP8.1 / PHP8.0 2022/07/19、PHP8.2がフィーチャーフリーズしました。 言語機能に関わるような機能の追加・変更が締め切られたということです。 今後はデバッグを繰り返しながら完成度を高めていき、2022/11/24にPHP8.2.0がリリースされる予定です。 というわけでPHP8.2で実装されるRFCを見てみましょう。 RFC Disjunctive Normal Form Types 賛成25、反対1で受理。 選言標準形です。 UNION型と交差型を同時に使えるようになります。 思う存分型パズルで遊べますね。 // A型、もしくはB型かつC型、もしくはint function hoge( A | (B & C) | int $param){}

「暴言吐かないように気をつけます」 暴言暴言書いているので念のためBOSS（社では執行役員ともいう）のお名前はマスキングしています。弊社の開発部のトップリーダーに彼自身の「分報」を開設させる、という今年前半の社内コントリビューションを自慢するために書いています。 関連: Developers Summit 2022に登壇したので、その感想🍬 - Qiita 「弊社の執行役員に、#times_役員 なSlack分報を開設させるまでにやったこと全部書く」。BOSSは尊敬している。だからこそもっとBOSSと気楽に話したい、仲良くなりたい、BOSSの考えていることを知りたい、でも話しかけるのは緊張しちゃう、いつでも話していいよ？ムリ～～... そんな悩みをもつ方やチームの参考になれば嬉しいです。 結論: 地道なお互いの信用獲得。それは狩猟ではなく農耕 結論から。地道にお互いと全方位的な信用獲得を

3月末、アイリスオーヤマ社のノートPCや「GIGAスクール構想」の仕様書が話題になっていました。その多くが「動作に支障をきたすほどスペックが低いのではないか」という批判的なものです。 筆者もこういったPCが「ローエンド」であり、「快適ではない」ことに異論はありません。自分自身や家族のためにPCを購入するなら、より良いスペックのPCを選定します。 しかし、そもそもPCに詳しくないユーザ あるいは スペック選定にあたり明文化された根拠が必要な事業者・行政 にとって、ドキュメント上からそれを判断できるのか疑問に感じたので少し確認してみました。 TL;DR （追記） GIGAスクール構想などで示されるPCは確かにローエンドである。 しかし、主要アプリケーションの「性能要件」を、書類上は十分に満たしてしまっている。 それゆえ、PCの経験が浅い人などがローエンドPCを「これで十分」として選定してしまう

Tailwind CSSは結構いいんでないの？というポエムです ユーティリティーファーストって考え方について まず、 ユーティリティークラスが何かということ ユーティリティークラスを使ってHTMLを書いていくということってどういうことか これは、ある程度CSSを書いている人であれば想像できることであろうと思う。 こんな風に、あらかじめユーティリティー的なクラスを用意しーの .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-a

はじめに 今まで自分が使ってきた中で、これは生産性が爆上げする！と思うものを厳選しました 是非最後までご覧ください 1. Biscuit 公式サイト -> Biscuit 複数のアプリをグループ分けしたり、まとめることができるアプリケーション 調べ物が多いエンジニアは、Chromeのタブがカオスになっていることがよくあります 個人的にはあれこれなんでも登録するのではなく、よく使うアプリだけをまとめるのが良いかなと思っています 設定のインポートやエクスポートも簡単なので、別のPCへの移行も楽チン 僕のBiscuitはこんな感じです⬇︎ 2. Notion 公式サイト -> Notion 結論から言うと、私はNotionがないとダメな体になっています 出会いは2020年の2月頃、メモ帳よりも自由度が高くて何か良いものはないだろうかと模索していた頃にジャストフィットしました 単純なメモも取れる、

こんにちは、たかとーです。 今日は8 Projects with modern designs to become a Full-stack Master 2020の日本語訳記事です！ *当記事は、Thuさんの許可を得て翻訳しています。 ブログでも読めます！ 8 Projects with modern designs to become a Full-stack Master 自分のスキルを磨くためのプロジェクトを探していますか？新しいアイデアを思いつくのに行き詰っていませんか？ 開発者として、私たちはコードを書くのが大好きですが、デザインやアイデアを見つけるのが難しいことがあります。 こんにちは、Thuです。ここ数ヶ月、私はデザインや要件を含む8つの実在するプロジェクトの作成に取り組んできました。 私は、あなたがスーパースターなフルスタックデベロッパーになるために必要な全てのスキルを鍛

初めに 私はSESでエンジニアをしています。そのためいろいろな現場に参画して開発をすることが仕事なのですが、コメントを全く書かないどころかドキュメントもあんまりないという思想のチームに1年従事したときに感じた事を書いた記事です。 開発にはJava,Pythonを利用しているので、これらの言語でサンプルを記載しています。 良かったこと まずは良かったことです。大きく分けては 自身のコーディングスキルの向上 文章力の向上 の2点です。 自身のコーディングスキルの向上 コメントがまったくない。という状態でコードを書いていく場合には、変数名、メソッド名等の命名が非常に重要です。もはや命名さえちゃんとできればコーディング自体はそんなに大変でないといってもいいかもしれません。 SIerの案件ではコメントは多く書けという思想が多いです。そのため、これまでのコードは以下のような感じでした。

2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/injectJavaScriptVue.jsフロントエンドVuexCompositionAPI まえがき 最近iCAREさんの所で Vue.js を一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回の記事の内容はiCareさんのDev Meetupで話した内容になります. 最近公式のソースを追った所、 Composition API はapiの紹介はあれども、コードの書き方やその背景、Tips等は全然見当たりませんでした. また、すごく強力なapiである provide/inject

ちょっとでもセキュリティに自信がないなら、 Firebase Authentication を検討しよう （※ こちらの参照記事の内容自体に不備があるとか甘いとか指摘するものではないんですが、勝手に枕として使わせてもらいます） 上記記事は、Firebase Authenticationが提供するJavaScript APIを使ってJWTのトークンを取得し、自前のサーバにHTTPのヘッダで送りつけて検証をさせることで、認証の仕組みをセキュアかつかんたんに実現しよう、という内容です。 このようにJavaScriptのAPIでトークンを発行して自前バックエンドのAPI認証につかう方法はAuth0のSDKなどでも行われていますので、IDaaSをつかってSPAを開発する場合には一般的なのかもしれません。 話は変わりますが、SPAの開発に携わっている方は「localStorageにはセッション用のトー

最近、GitHub CLIが便利だな〜と思ったので紹介します。 この記事は以下リリース時点の情報です。 Release v0.11.1 · cli/cli GitHub CLIとは？ コマンドライン上でGitHubの操作を行えるCLIツールです。GitHubが公式で公開しています。 (参考： GitHub公式ブログ） インストール Macの場合はbrewでインストールできます。Windowsの場合は公式のREADME.mdを参照してください。

本当にあったやらかしDB設計シリーズをまとめてみました SQLアンチパターンで書かれているほど高尚な問題ではなく、もっと初歩的な、でもありがちな問題を取り上げています 初心者を脱出したと思っている人に是非読んでもらい、正しく設計してもらうことを目的としています もしここに載っていないパターンを経験したことのある方がいたら是非教えてください 本当にあったやらかしDB設計①【R無しRDB】 本当にあったやらかしDB設計②【囚人番号テーブル】 本当にあったやらかしDB設計③【ロジカルクエリー】 本当にあったやらかしDB設計④【テストチューニング】 本当にあったやらかしDB設計⑤【第三正規化病】 本当にあったやらかしDB設計⑥【見えない削除フラグ】 本当にあったやらかしDB設計⑦【ステートフルDB】 本当にあったやらかしDB設計⑧【ファンクションDB】 本当にあったやらかしDB設計⑨【文字列日付】

このツイートを見て、「アプリで再ログインを頻繁要求されるってユーザビリティ良くないな。」と思ったのですが、普段裏側の仕組みは意識していなかったりテックリードの方に任せきりだったりしていたので、これを機に調べてみました。 そもそもスマホアプリ の時代、もはやauthenticationですらないと思うのよね。（何を言ってるかわからねえだろうと思うが。） — Hiromitsu Takagi (@HiromitsuTakagi) 2019年7月8日 この記事は「アプリでログインしっぱなしは、どのように実現されるの？」という疑問と調べた結果を共有するために書いていきます。 間違いや「もっとこんな仕組みが使われてるよ！」等のツッコミがあれば、どしどし貰えると助かります！ 疑問1. アクセストークンという仕組みとは？ 「なぜアクセストークンという概念が必要なのか？」 モバイルアプリでユーザー認証をし

基本的にはビデオ会議機能の提供ですね。 有料版では参加人数や時間の制限が変わる形ですね。 プロ版以降の機能はZoomのメインの機能ではなく、付加機能であると思われるので Zoomと同じことをしたいと思うならとりあえず、ビデオ会議できればいいんですよね。 wordpressとは WordPress（ワードプレス）は、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している（後述のプラグインよりSQLiteでの使用も可能）。単なるブログではなくコンテンツ管理システム (CMS) としてもしばしば利用されている。b2/cafelogというソフトウェアのフォーク（後継）として開発、2003年5月27日に初版がリリースされた[4]。GNU General Public License (GPL) の下で配布されている。 参考：wikip

※Linuxはもちろんですが、Docker for Mac(M1 Mac含む), Docker for Windows で動作します。 Dockerの勉強をしたい方向け ハンズオン形式の記事を書いてるので、DockerでLaravel環境する方法を一から勉強したい人はこちらの記事がおすすめです。 【初心者向け】20分でLaravel開発環境を爆速構築するDockerハンズオン 概要 Docker, Docker Compose を使って、nginx, php-fpm, MySQLの実行環境(LEMP)を構築して、最強のLaravel開発環境を構築する記事です。 Laravelが最低限動作して、シンプルで軽量かつベストプラクティスなコンテナ、ディレクトリ構成を考えました。 最小限の構成なので、DockerイメージのビルドはLaradockより10倍以上高速にビルド完了します。 リポジトリ h