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

経緯 筆者は外国語大学で中国語を専攻しているのですが、偶然にも中国語のプログラミング関係の記事を読む機会がありました。その中で日本語だと直接カタカナで使用している用語も、中国語では意味のある漢字に置き換えられており、興味をそそられたので基礎的な用語を調べてみました。私自身は漢字文化圏で育った者として、こうした用語の漢字表記には元素記号の漢字表記のような魅力を感じます。また同時に、漢字は表意文字であるため初学者にもやさしく見えるので、日本でも（自然言語好きな変人たちの間で）もっと広まっていってほしいな、と思います。 個人的6選 Guard:守衛 かっこえぇ！錯誤（error）が発生しても、コードの安全性をしっかりと担保してくれそうな強さを感じますよね？　ええ、感じます。 Delegate: 代理 初心者には取っ付きづらいDelegateも代理とされたら、仕事の一部を任せるんだな、ということが

20XX 年、我々人類は進化著しい AI に驚くしかない日々が続いています。ソーシャルメディアに驚きがあふれインプレッションを競う様はまさに大海賊時代、いいねの海賊王に俺はなる、とばかり飛びぬけて耳目を引く超新星 ( スーパールーキー ) が頭角を現しています。 「プロ驚き屋」としばしば称されるルーキーたちは X ( 旧 Twitter ) のタイムラインに現れては情報の正確性を重んじるエンジニアや研究者を戸惑わせます。チームやコミュニティ内の Slack はそうした喧噪から離れたオアシスといえるかもしれません。そんなオアシスにプロ驚き屋を召喚しタイムラインを荒らすのが今回の目的です。次に実際の例を示します。 なかなか模倣できているのではないでしょうか。オアシスは今、ジャングルに変わりました。私たちが生きている世界では正確で吟味された情報だけにアクセスしたいという願いは実現されないので、現

この記事はNuco Advent Calendar 2023の4日目の記事です。 弊社では、経験の有無を問わず、社員やインターン生の採用を行っています。 興味のある方はこちらをご覧ください。 はじめに 後輩に 「なぜ0.1+0.2≠0.3になるんですか？」 と聞かれて答えられますか？ コンピュータの計算では「0.1+0.2」は「0.3」になりません。 これを理解していないと予期せぬ重大なバグを生み出す可能性があります。 分からない方、どうぞ安心してください。 この記事を読んだ全員が「0.1+0.2≠0.3」を理解できるように分かりやすく説明していきます。 コンピュータが計算を間違う理由 まず、そもそも「0.1+0.2=0.3」で正しい！「0.1+0.2≠0.3」なんてあり得ない！ という方のために、プログラミング言語のフォーマット処理を経ない、コンピュータの計算結果を見てみます。

※ この記事の内容は先日のQiita Nightでお話ししたことと一部重複します。 Qiita NightではLTの制限時間(10分)に収めるため、結構端折りました。 はじめに ChatGPTが登場してから数ヶ月が経ちました。 ChatGPTをはじめとしたGenerative AIは完全に現在のIT業界のトレンドとなっています。 今や多くの企業でChatGPT APIをサービスに組み込んで顧客提供を開始したり、自社の社内システムに組み込んだりと積極的に利用するようになりました。 私もGenerative AIが無くなると業務に支障が出るレベルで利用しています。 そして、2023年5月時点ではChatGPTのAPIを利用する方法として、本家OpenAI社が提供しているAPIを利用する方法とMicrosoft社が提供しているAzure OpenAI ServiceのAPIを利用する方法の2つが

エンジニア未経験のわたしがGitを学ぶ上で、この流れで記事を読むべきだったと思ったことを記載する。 完全に初学者意見のため、疑いながら読んでください。 私は下記の流れで学習することによって、理解をしやすいように感じた。 ①　Gitで何をしているかのイメージを掴む（コマンドなし） ②　Gitのイメージを、コマンドで実現している記事をみる ③　実際にGitのコマンドを打ちながら、出力と、頭の中のイメージのすり合わせ Gitで何をしているかのイメージを掴む（コマンドなし） こちらの記事は、Gitのイメージをコマンドなしで、わかりやすく図で示してくださっています。 記事にも記載されていますが、 ・重要なのは 「何」から「何」へ・「どんな作業」を行う のかを追う ・操作前と操作後でどんなことが起こっているのかをイメージする 上記の内容が、すごく同意で、重要だと感じている。いきなりコマンドを打ちながら

はじめに 私は普段インフラをメインで扱っているエンジニアです。 そんな開発がメインではない私が1年目でプログラミングを学ぶために使用した教材を紹介していきます。インフラエンジニアの方だけではなく未経験のエンジニアの方にも参考になれば良いなと思っております。 インフラの学習に使用した教材については下記記事にて紹介しておりますので、ご覧いただければ幸いです。 インフラエンジニアはプログラミングは必要？ まずはこの質問をChatGPTに聞いてみましょう。 はい、インフラエンジニアにとってプログラミングスキルは必要です。 近年、クラウドの普及やインフラ自動化の進展により、インフラエンジニアに求められるスキルも変化しています。今では、サーバの自動化やコンテナのデプロイなど、プログラミングスキルが必要な業務も多くなっています。 具体的には、以下のようなことが挙げられます。 インフラ自動化の実現 インフ

はじめに これは文系出身の私が、入社後に早く教えて欲しかったことをまとめたものです。 私は 10 年ほど前に文系大学を卒業して技術職で採用されましたが、入社 1 年も経たないうちに「使えない」と言われ、お客様向けのサポートセンター業務に就くことになりました。 その間も個人ではコーディングを続け、開発チームに厄介な口出しなどしているうちに、いつの間にか技術職に戻っていました。 プログラミング未経験者のよくある回り道をした身として、同じような境遇の方の助けになれば幸いです。 以下はすぐに使えるものから、未経験の方には難しい内容まで含まれます。 すぐに分からなくても知ってさえいれば後々効いてくる内容にしたつもりですので、「そのうち分かるかな」くらいの気持ちで読んでもらえればと思います。 👑 コーディングの基礎テクニック 初学者に役立つ汎用的なテクニックをまとめます。 特に説明のない限り、コード

はじめに 今回はVSCodeでおすすめの拡張機能を分野別に紹介していきます。 拡張機能は下記の分野に分けて紹介していきます。 VSCodeを使う全員向け Web制作関連 HTML&CSS関連 WordPress関連 フロント向け JavaScript React Vue サーバーサイド向け PHP Ruby その他 拡張機能を利用することで開発の生産性を上げることができるので、ぜひ参考にしていただければなと思います。 この記事の対象者 プログラミング初心者の人 分野別におすすめの拡張機能を知りたい人 開発の生産性をより上げたい人 VSCodeを使う人全員向け まずはじめにVSCodeで開発をしている人、全員におすすめをしたい拡張機能を紹介しておきます。 自分自身が使った拡張機能の中で「とりあえず入れて損はない」というものを厳選しています。 それでは紹介していきます。 Japanese La

はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて

はじめに 個人開発もエンジニア自体の歴も浅いSEです。 就業先がJavaをメインで使う企業なのですが、個人的にフロントエンドまわりが好きです。 元々、興味本位でデザインの本だったりUXに関する本とかを読んでいたりするのですが、 その結論の際にたどり着いたのが、 「理論とか決まってるなら、それをよしなにやってくれるor参考にできるツールとかサイト探せばよくね」 という結論になりました。なんと怠惰な思考でしょうか。 そんなわけで、こちらではデザインに限らず、色々開発に便利なツールを紹介させていただきます。 （有名なのが多いかもしれませんが、ご容赦ください、結局有名なものに行き着くのです） レイアウト関係 1. Awwwards おしゃれなwebサイトが集まっているサイトです。 ここまで個人開発でお洒落にできたらいいなと思いますが、自分はアニメーションを考えるときや、 作りたいフロント側のデザイ

0. アルゴリズムとは？ まず、アルゴリズムとは何かを説明します。（0 節の説明はスライド「50 分で学ぶアルゴリズム」 の説明を参考にして書きました） さて、次の問題を考えてみましょう。 問題： 1 + 2 + 3 + … + 100 の値を計算してください。 単純な方法として、式の通りに 1 つずつ足していく方法が考えられます。すると、以下の図のように答えが計算されることになります。 これで答え 5050 が正しく求まりました。これはれっきとした アルゴリズム であり、この問題を 99 回の足し算 で解いています。しかし、計算回数が多く、計算に時間がかかるのではないかと思った方もいると思います。 ここで、方法を変えて、「1 + 100」「2 + 99」「3 + 98」…「50 + 51」の合計を求めることで、1 + 2 + 3 + … + 100 の値を計算してみましょう。 50 個の

なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。

【JS/ Python両方OK!】「データ可視化」が歴史から実装まで体系的に学べるStanford講座の独習ノートJavaScriptd3.jsデータ分析データサイエンスcolaboratory CS 448B Visualization (2020 Winter)は、Maneesh Agrawala氏による、Stanford大で行われた、データの可視化に関する体系的な講義です。 スタンフォード大の"CS 448B Visualization (2020 Winter)" がすごい。 データ可視化の体系的講義。どう図表に変換するかの理論、探索的データ分析、ネットワーク分析等の実践と盛り沢山。 スライドに加え、Observable(JavaScript), Colab(Python)どちらでも例を試せる。https://t.co/lGyPElrihg pic.twitter.com/mWZn

昨年暮れに、新 企業の翻訳者を目指す皆さんへという本を出版しましたが、その本を機械翻訳を使ってまるまる１冊英語に翻訳してみました。翻訳済みの英語はこちらです。PDFファイルを無料でダウンロードいただけます。 使った機械翻訳システムはみらい翻訳です。Google翻訳やMicrosoft Translatorも試してみましたが、少なくとも昨年夏にいろいろ試した結果、（英日はわかりませんが）日英の翻訳品質が一番良い印象でした。もっとも、定量的な評価をしたわけではないので、あくまでも「印象」です。 私は1980年代の終わりころに機械翻訳の研究をしていました（学位も機械翻訳の研究でいただきました）。ですので、ある程度は機械翻訳のことはわかっていると思っていました。初期のもくろみは、辞書の整備と十分な前編集を行うことで、ほぼ後編集なしで本１冊をまるまる英訳することでした。後で述べるように、今の機械翻訳

株式会社デジサク がお送りするプログラミング記事、 今回はAI（機械学習）の具体的なコーディング手順を扱います。 ※ 無料セミナーも開催中なので、ぜひご覧になってみて下さい。 はじめに これまで「機械学習を仕事に使うには？」というテーマで記事をお届けしてきましたが、 第３回の今回は「Pythonのコーディング手順」をテーマに、具体的なプログラミングを紹介します。 バックナンバーも読んで頂くと機械学習の基礎からPythonのコーディングまで全体を理解できますので、ぜひご活用ください。 第１回：機械学習の目的を理解する 第２回：AI開発のプロジェクト全体像 SNS でも色々な情報を発信しているので、記事を読んで良いなと感じて頂けたら Twitterアカウント「Saku731」 もフォロー頂けると嬉しいです。 機械学習に必要なプログラミングスキル まず、機械学習を習得するために必要なスキルは下記

こちらのReddit投稿 (https://www.reddit.com/r/sysadmin/comments/eaphr8/a_dropbox_account_gave_me_stomach_ulcers/) の和訳記事です。本番環境でやらかしかった人シリーズが盛り上がっていたので波に乗って（？）Twitterにヤバすぎる恐ろしい話が流れてきたのをすかさず和訳してみました。やらかしちゃった人というよりはやらかされちゃった人目線ですがいずれにせよそこら辺の怪談話よりよっぽど怖いです。 Dropboxのアカウントのせいで胃潰瘍になった。 皆は誰もが触れたがらない、会社を靴紐やガムやクリップでつなぎとめている「例のアレ」を見つけたことってある？そういうのって往々にして大型連休前の金曜午後4:45に落ちるし、般若のような様相を呈した上司が「このままだと第二のスターリングラード攻防戦が勃発するぞ

今回自分は０から始めて９か月でコンペで銀メダル(6385分の249位,top4パーセント)を獲得できました。 自分の今までの流れをおさらいしていきます。 それまでの僕のスペック 数3と行列はほぼ何も分からない プログラムはrubyとjavaはそこそこに書ける、pythonは知らん 勉強の流れ １２月末 機械学習を始めると決心、とりあえず何をやればいいかよく分からないがpythonが必要らしいのでprogateでpythonをやってみる １月 数学が必要らしいので、行列と微分積分について１から学んでみる。今から考えると、行列の基礎をさらえたのは良かったですが、それ以外はこの時間は絶対いらなかったなと考えています。 微分積分 行列 ２月 Udemyで多くの講座を受ける、詳細は以下の記事にまとまっています https://qiita.com/HayatoYamaguchi/items/c8051

やや自己流含む。 getXxx/fetchXxx getXxxは同期、fetchXxxはPromiseということにしている。とくに非同期の取得系はfetchということに決め打ってる。 GETリクエストであることを明示したいときにややこしいという問題はあるが、そのケースは少なく、JS内で同期/非同期を明示したいことの方が多い。 例: 非同期の副作用系はput/post/sync/send/uploadとかそのあたりを適当に使う。 Promise( (done, reject) => {..}) 恐らく仕様的に正しいワードは fulfill, reject なのだが、fulfillはタイプ数が妙に多いのと、llが多くタイポしやすく、またタイポが発見しづらいので、自分は慣習的にdoneを使っている。 追記: fulfillよりもresolveの方が仕様に沿ってるっぽいhttp://people.